JavaScript RubyChinaSPA by Anugarjs 发布

suffering · June 05, 2014 · Last by suffering replied at January 05, 2015 · 7966 hits
Topic has been selected as the excellent topic by the admin.

闲时写的基于 Angularjs 的 ruby-china.org spa 端。

😄 本贴发自 spa 端 (截图除外).

https://github.com/suffering/rubychinaspa

rubyChinaSpa

Build with angularjs and ruby-china.org api/v2.

简介

ruby-china.org 的 SPA 版,根据 ruby-china.org api 制作。使用简单的 angularjs 语法,未涉及复杂的 directive 与 filters 等。

功能

  • 帖子 (index/show)
  • 节点 (index/show)
  • 用户 (index/show)
  • 用户登陆 (基于 loginname, token)
    • 发表新贴
    • 发表评论
    • 收藏帖子
  • 支持 markdown 即时预览 (预览格式与 ruby-china.org 原站略有不同.)
  • 支持 emoji

DEMO

因为 CROS 的原因,无论是在线测试还是本地测试,都无法获取 ruby-china.org 的 api 数据。除非 ruby-china.org 管理员允许 CROS.

当前 ruby-china.org 官方已支持 CROS, :), 此节可省。以下部分保留以作参考;

DEMO 运行的前提

Google chrome 浏览器通过运行非安全模式 (暂时) 解决此问题:

  • Linux: google-chrome --disable-web-security
  • Mac: open -a Google\ Chrome --args --disable-web-security
  • windows: 进入到 chrome 安装目录,chrome.exe --disable-web-security

注意:必须完全关闭 google chrome 之后再运行此命令。否则只要有任何一个 chrome 实例存在,此模式将启动失败。

如果运行命令后出现You are using an unsupported command-line flag: --disable-web-security. Stability and security will suffer.您使用的是不受支持的命令行标记: —disable-web-security. 稳定性和安全性会有所下降.的提示,即可正常浏览。

参考

Online Demo:

http://rbspa.zhuboliu.me

测试帐号: rbspa

token: 3d8757cc530374f18778:13471

以上帐号仅为新注册的测试帐号,不能发帖,只能回帖。

注意:可以使用个人的登陆名与 token 登陆,但不推荐使用 (虽然个人保证不在 log 中记录任何个人的 token).

本地测试

git clone https://github.com/suffering/rubychinaspa.git cd rubychinaspa npm install connect node server.js google-chrome http://localhost:1337 --disable-web-security

本地测试分两种模式,一种是直接引用 ruby-china.org/api/v2 的数据,另一种是本地运行 ruby-china, 而后将services.js中的base_url()函数的返回值改为http://localhost:3000.

TODO

  • 简化代码,引入更多 angularjs 的高阶应用。
  • 用户喜欢/收藏功能。
  • 图片上传功能
  • 允许多界面多主题切换。

帖子列表 发帖,markdown 即时预览 节点 Login Users#show

相关的帖子

https://ruby-china.org/topics/19531 https://ruby-china.org/topics/19654

不错 挺简洁扁平的风格 空间也利用的很充分

@leozwa, 设计上直接引的boostrap3ruby-china.org. 自己木有做任何设计~~ 😄 从来木有半点美学细胞。

排版挺棒的 :plus1:

太棒了 , 怒 Fork ~

@suffering 恩 , 刚才 试用 了下 , 结果点登陆没反应 . 然后打开 Console 发现 Cross-Origin 请求被 block 掉了 .

发了 Issues#1 . 但是这个问题是由于 RubyChina API 部分没有正确设置跨域访问权限导致的 .

所以可能还需要 RubyChina 服务端做出调整才行 . @huacnlee


另外,考虑试用 HTTPS API . 确保传输过程加密,防止内容被监听或篡改 .

不错。。。。

#6 楼 @song940

DEMO

因为 CROS 的原因,无论是在线测试还是本地测试,都无法获取 ruby-china.org 的 api 数据。除非 ruby-china.org 管理员允许 CROS.

DEMO 运行的前提

Google chrome 浏览器通过运行非安全模式 (暂时) 解决此问题:

  • Linux: google-chrome --disable-web-security
  • Mac: open -a Google\ Chrome --args --disable-web-security
  • windows: 进入到 chrome 安装目录,chrome.exe --disable-web-security

注意:必须完全关闭 google chrome 之后再运行此命令。否则只要有任何一个 chrome 实例存在,此模式将启动失败。

如果运行命令后出现You are using an unsupported command-line flag: --disable-web-security. Stability and security will suffer.您使用的是不受支持的命令行标记: —disable-web-security. 稳定性和安全性会有所下降.的提示,即可正常浏览。

如问题还未解决,可查看此参考

我使用过一个叫Advanced Rest Client Application的 chrome 插件,可以访问到 RubyChina 的 API,似乎不用 CROS 啊,楼主去看看这个,也许有帮助

很赞!。

原来 SPA 是单页应用。。还以为是什么。。

挺好看的~好厉害的样子

当前从 spa 端看到的帖子排序与 ruby-china.org 不同,主要原因在于 ruby-china.org 的 api 返回的数据与其 controller 中的排序方式是不同的。另外 最新创建 等筛选按钮在 spa 端无法正常使用的原因在于 api 端只提供了recent, popular, no_reply, recent等几种 type filter. 😢

$alertangularjs原生支持的么?和alert有啥区别

#16 楼 @dddd1919 ,$alert等 bootstrap 的 JS实现都来自于angular-strap. 关于$alert有一个明显的 bug, 现在还不知道应该如何解决这个问题。 与window.alert的区别在于可以添加很多自定义功能。比如说自动关闭,弹出位置,header, title, 或者自定义 html template.

#17 楼 @suffering 长得一样也就罢了,太丑了,目前提示框和确认框都用$modal做的,不知道有没有什么更好的(主要是样式上)

spa 端是什么意思啊?

#19 楼 @linjunhalida , SPASingle Page Application的缩写,也即单页应用.

考虑一下用 node-webkit 包装一下?我上个星期也发过一个 node-webkit 的 ruby-china 桌面客户端,不过因为自己都觉得不好用就把主题删了

#22 楼 @saiga node-webkit 好用吗?

#23 楼 @wcp1231 开启比较慢,程序员的机器体现不出来。普通人的慢机器就体现出来了。还有调试比较麻烦。

还有很多东西要去学习呀,这个模板给了很多启发

做成 chrome 插件呢?

有空再来个 emberjs

应该是登录,而不是登陆

包成移动应用就没有跨域的困扰啦

很不错啊 但是就是想知道这个跨域问题在纯前端的 spa 要怎么解决呀

新添加编辑功能。登陆后,可编辑自己发表的帖子。 之前提交了支持 Topic 编辑 #339topic with favorite/follow status #340两个 pull requests, 前者已通过,后者被无视。暂时只能更新编辑功能了。

忽然发现不用 disable security 就可以直接访问了,也即是 CROS 被允许了,真是泪流满面啊~~

本贴发自 rubychinaspa 端。

suffering closed this topic. 09 Oct 10:25
You need to Sign in before reply, if you don't have an account, please Sign up first.