JavaScript RubyChinaSPA by Anugarjs 发布

suffering · 发布于 2014年6月05日 · 最后由 suffering 回复于 2015年1月05日 · 5299 次阅读
709
本帖已被设为精华帖!

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

共收到 33 条回复
96

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

709

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

2

排版挺棒的 :plus1:

5130

太棒了 , 怒 Fork ~

3221

:plus1:

5130

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

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

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


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

9800

不错。。。。

709

#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. 稳定性和安全性会有所下降.的提示, 即可正常浏览.

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

4472

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

973

cool.

2685

很赞!。

1232

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

96

挺好看的~好厉害的样子

709

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

4277

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

709

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

4277

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

64

spa端是什么意思啊?

709

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

4933

fork!

4375

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

96

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

64

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

9484

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

96

做成chrome插件呢?

9800

有空再来个emberjs

96

应该是登录,而不是登陆

5178

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

96

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

709

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

709

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

本贴发自rubychinaspa端.

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册