JavaScript RubyChinaSPA by Anugarjs 发布

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

本帖已被设为精华帖！

闲时写的基于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 · #9 · 2014年06月05日 1 个赞

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

suffering · #10 · 2014年06月05日

#9楼 @assyer , 3Q, 3Q

debugger · #11 · 2014年06月05日

cool.

joseen · #12 · 2014年06月05日

很赞！。

tony612 · #13 · 2014年06月05日 1 个赞

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

wcp1231 · #14 · 2014年06月05日

挺好看的~好厉害的样子

suffering · #15 · 2014年06月05日

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

dddd1919 · #16 · 2014年06月05日

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

suffering · #17 · 2014年06月05日

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