虽然Vue2.0快来了,但我也利用1.0版本搭个CNode的Web App学习一下
发布于 8 年前 作者 JChehe 7806 次浏览 来自 分享

最近在学习Vue.js,因为实践是一种很好的学习方式,所以利用 Vue.js 和 CNodejs.org 提供的 API 搭建了一个Web APP。

访问地址:http://jchehe.github.io/mystatic/vue_cnode/ 源码地址:https://github.com/JChehe/vue_cnode PS: 你要★ Star ★我也不会拒绝哦^_^ 访问二维码:此处输入图片的描述

在此,也感谢 @shinygang用Vue.js编写了cnodejs.org的h5客户端(webapp) 项目,我从中也学到了一些知识。

由于经验不足,若各位大大发现应用或代码哪里有可以改进或不完善的地方,欢迎大家在提 issue 或 pr,也可以评论。


本地部署

当然,你也可以在本地部署该项目。

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

截图

list

  • 首页_列表页 -

sidebar

  • 侧边栏 -

topic

  • 帖子 -

newpost

  • 新帖 -

perinfo

  • 个人信息 -

★ Star ★ ★ Star ★^_^

44 回复

页面返回后,就跑到顶部去了

我比较想知道是怎么在github上面搭建演示网站

我竟然上截屏了😂

来自酷炫的 CNodeMD

@broven 嘿嘿,证明你很活跃嘛

不错不错,加油加油!<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

@1340641314 是选择侧边栏的链接后吗?如果是,之前我也尝试让右侧内容保留原来的位置,但是会有固定定位的头部会有闪动。所以暂时不折腾这里了。

@shinygang 大大来了~ 你的作品让我学习到很多知识~再次谢谢大大~

@1340641314 就是静态博客嘛,我的是基于Hexo搭建的,你可以了解这方面的知识。 因为这个web app不涉及后台,因此可以把它当作静态资源进行访问了

@JChehe 跨域怎么解决?

@1340641314 前提是API是开放的,就好像CNode提供了部分开放的API

@JChehe 我这里也写了一个react版code,但是不晓得怎么像你那样放到线上访问:https://github.com/1340641314/react-cnode

@1340641314 我在Github page 搭建了静态博客https://pages.github.com/,而vue_cnode则放在source目录下,source目录下的文件会在发布到Github前进行“渲染”处理,但是我们配置文件_config.yml中设置了 skip_render: mystatic/**/*,即忽略mystatic文件下的文件,直接发布到github上。 2016-08-10_151635.jpg

比angular.js顺手吗

来自酷炫的 CNodeMD

@nprog 用法有什么区别

来自酷炫的 CNodeMD

@nprog 因为我还没尝试过angular不好评价。但是对我目前来说,vue的学习成本不高,比较容易上手。

翻页后游览器退回,读取的是第一页,这个体验有问题

@asfman OK,后续会抽空完善的。 谢谢你的建议

@JChehe 我的React版线上访问也弄好了,多谢指教额!

性能跟react相比,有优势吗?

@yakczh react的生命周期,感觉要比vue的麻烦<br><br>来自疯狂的<a href=“https://github.com/1340641314/react-cnode” target="_blank">react-cnode</a>

@yakczh 我个人认为:当一个应用没有上一个量级时(即不足够大),应该看不出明显差距吧。

请问一下楼主,你有没有获取到cnode的所有的帖子的数目呢?官方提供的API没见有可以获取总共多少条主题记录的吧?那么没有获得总数怎么进行分页呢?

@Succy 目前的确是没有提供的,你可以想CNode 一样,用省略号。 极端点:可以https://cnodejs.org/api/v1/topics?limit=100000000000000000000

其中limit是无限大==!! 但这是不正常的做法

第一次进入,好久才进去

进去后,速度就快了

@44886 也许是我代码写得不够好,当然这也和服务器返回的数据有关。另外,页面是放在github上的,这也导致页面相对慢了点。 最后,也谢谢你的体验与建议。

也在学Vue,握爪~~

@JChehe 哦哦,难怪,,,我之前也放了在github 上的,实在太慢了,就搬到百度BAE上了

@44886 哈哈,我主要用于展示的,而且是免费。

@44886 Coding上速度还不错

不错。。我也用vuejs + vue-cli + vue-router + vuex写过一个。 gayhub: https://github.com/beilunyang/cnodejs-vue demo: http://demo.bitibiti.com/cnodejs-vue/#!/

@beilunyang 不错哦,PC端的

我参照你的方式配置路由一直不成功

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import routerMap from './router'
import VueResource from 'vue-resource'

Vue.use(VueResource)
Vue.use(VueRouter)
var router = new VueRouter()

routerMap(router)

Vue.use(router)

router.start(App, 'app')

报错信息如下 vue.common.js?e881:10008 Uncaught TypeError: plugin.apply is not a function Vue.use @ vue.common.js?e881:10008 (anonymous function) @ main.js?3479:13 (anonymous function) @ app.js:699 webpack_require @ app.js:583 fn @ app.js:107 (anonymous function) @ app.js:637 webpack_require @ app.js:583 (anonymous function) @ app.js:629 (anonymous function) @ app.js:632 可以帮忙看下吗

@Fsoya 你最后那句router.start(App, ‘app’)换成router.start(Vue.extend(App), ‘#app’)试试

@Succy 试了不行 是Vue.use(router)这报错了

Vue.use = function (plugin) {
    /* istanbul ignore if */
    if (plugin.installed) {
      return;
    }
    // additional parameters
    var args = toArray(arguments, 1);
    args.unshift(this);
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args);
    } else {
      plugin.apply(null, args);
    }
    plugin.installed = true;
    return this;
  };

plugin.apply(null, args); 这个地方报错的

貌似很不错。容易上手吗?

来自酷炫的 CNodeMD

回到顶部