JavaScript RubyChinaSPA by Anugarjs 发布

suffering · 2014年06月05日 · 最后由 suffering 回复于 2015年01月05日 · 7607 次阅读

本帖已被管理员设置为精华贴

闲时写的基于 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

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 实例存在, 此模式将启动失败.

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

assyer #10 2014年06月05日

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

1 个赞

suffering #11 2014年06月05日

#9 楼 @assyer , 3Q, 3Q

debugger #12 2014年06月05日

cool.

joseen #13 2014年06月05日

很赞！。

tony612 #14 2014年06月05日

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

1 个赞

wcp1231 #15 2014年06月05日

挺好看的~好厉害的样子

suffering #16 2014年06月05日

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

dddd1919 #17 2014年06月05日

$alert是angularjs原生支持的么？和alert有啥区别

suffering #18 2014年06月05日

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