用Vue写了个CN-Node客户端
发布于 7 年前 作者 spezz07 7396 次浏览 来自 分享

Vue-CN-Node

前言

在学习Vue期间,想自己构建一个项目来练习练习,正好发现了CNode社区有提供相应的API接口。因此就用Vue把这个项目做了出来

相关地址

源码地址: 点我查看

项目地址: 点我查看

问题记录: 点我查看

截图

1

2

3

4

技术栈

Vue2.0 //构建项目
Vue-Router //用于处理项目中的路由跳转
Vuex //官方提供的状态管理模式
Axios, Vue-Axios //官方推荐的http请求模块
Muse-ui //UI框架
Monent.js //时间格式化
Sass //Css预编译器

项目结构

│  index.html  
│  package.json
│  README.md
│  
├─build
│      build.js
│      check-versions.js
│      dev-client.js
│      dev-server.js
│      utils.js
│      vue-loader.conf.js
│      webpack.base.conf.js
│      webpack.dev.conf.js
│      webpack.prod.conf.js
│      
├─config
│      dev.env.js
│      index.js
│      prod.env.js
│      
├─src                                                          // 项目文件位置
│  │  App.vue                                                 // 组件总入口 
│  │  main.js  // 全局相关依赖js文件入口
│  │  
│  ├─assets  // 静态文件
│  │      background.jpg
│  │      gg.svg
│  │      style.css
│  │      user_defult.png
│  │      
│  ├─components                                               // 项目组件
│  │      collection.vue                                      // 收藏页面
│  │      index.vue                                           // 首页
│  │      loading.vue                                         // loading组件
│  │      login.vue                                           // 登录页面
│  │      newpost.vue                                         // 发新帖页面
│  │      notice.vue                                          // 提示功能(暂时没完成)
│  │      post-content.vue                                    // 帖子内容页
│  │      recent-content.vue                                  // 用户最近回复,主题页面
│  │      slide.vue                                           // 侧边栏
│  │      userdetail.vue                                      // 用户详情页
│  │      message.vue                                         // 我的消息
│  │  
│  │  
│  ├─router
│  │      index.js                                            // 路由设置
│  │      
│  └─store
│      │  store.js                                            // 状态管理
│      │  
│      └─modules
│              collection-mutation-types.js
│              collection.js                                  // 用户收藏功能
│              index-mutation-types.js 
│              index.js                                       // 首页
│              login-mutation-types.js
│              login.js                                       // 登录页(用户相关的信息存储)
│              newpost.js                                     // 发新帖
│              postcontent-mutation-types.js
│              postcontent.js                                 // 帖子内容页
│              userdetail-mutation-types.js
│              userdetail.js                                  // 用户详情页
│              message-mutation-types.js                    
│              message.js                                    // 获取我的已读和未读消息
│
│              
└─static
    │  .gitkeep
    │  
    └─iconfont              // Muse-ui使用了Google的相关字体文件,因为国内网络原因- -!,就使用本地部署字体
            codepoints
            material-icons.css
            MaterialIcons-Regular.eot
            MaterialIcons-Regular.ijmap
            MaterialIcons-Regular.svg
            MaterialIcons-Regular.ttf
            MaterialIcons-Regular.woff
            MaterialIcons-Regular.woff2     

功能实现情况

根据所提供的Api 完成了以下功能

  • [x] 首页
  • [x] 无限懒加载文章列表
  • [x] 根据tab切换首页内容
  • [x] 帖子内容页
  • [x] 用户登录,退出
  • [x] 个人主页
  • [x] 我的收藏
  • [x] 在帖子内容页中点击用户头像,可以进入该用户的主页
  • [x] 登陆后,可在帖子内容页点赞和评论
  • [x] 登陆后,可以回复某人评论
  • [x] 登陆后,可以发布新主题
  • [x] 页面切换时的动态效果
  • [x] 查看我的消息
  • [x] 设置单个消息或者全部消息为已读取状态
  • [ ] 对自己的文章可以进行编辑更新
  • [ ] 相关操作成功或失败后的消息提醒(现在的话只是用了浏览器的自带的alert,后续会添加提示功能)

安装

# install dependencies
npm install

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

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build 

总结

这是我的第一个自己构思和完成的项目,碰到的bug很多,在解决bug的过程中也有许多收获。希望这个项目也能帮助到大家~~

26 回复

很棒 交互估计是我目前看到VUE做CNODE最好的

终于看到漂亮的排版了,请原谅我抄袭了0.0

@ResJay 谢谢你的夸奖哈哈~

@lai397826696 给个star就好了,哈哈本来做出来也是让大家相互学习交流的

@spezz07 项目里用到的动画都是UI框架里的还是你自己写的啊?

感谢楼主,很棒

@lai397826696切换是自己写的 其他组件的基本上都是框架的

哦,看错了,我以为是native客户端。。原来是vue webapp

你获取那些帖子和评论是怎么获取的啊

来自酷炫的 CNodeMD

官方有api给的呀 @a69694510

@ResJay 用VUE开发CNODE客户端的源代码中,交互估计是我目前看到最好的。收藏了。

这个可以打包成安卓或者IOS app吗?不知道体验会不会跟得上原生的,目前体验很不错

npm run dev 跑不起来 http://localhost:8080/#/ 是空白页面 DONE Compiled successfully in 8722ms 22:17:15

Listening at http://localhost:8080

https://github.com/spezz07/Vue-CN-Node 这个源代码怎么跑起来啊?

npm run build ,把\Vue-CN-Node-master\dist的内容部署到服务器,用浏览器访问,报错 vue.esm.js:1696 TypeError: Cannot read property ‘author’ of undefined at s.render (index.vue?23a0:123) at s.e._render (vue.esm.js:4427) at s.r (vue.esm.js:2741) at ms.get (vue.esm.js:3084) at new ms (vue.esm.js:3073) at Oe (vue.esm.js:2745) at s.Ct.$mount (vue.esm.js:8331) at s.Ct.$mount (vue.esm.js:10670) at init (vue.esm.js:4020) at l (vue.esm.js:5472) re @ vue.esm.js:1696 ne @ vue.esm.js:1687 te @ vue.esm.js:1676 e._render @ vue.esm.js:4429 r @ vue.esm.js:2741 ms.get @ vue.esm.js:3084 ms @ vue.esm.js:3073 Oe @ vue.esm.js:2745 Ct.$mount @ vue.esm.js:8331 Ct.$mount @ vue.esm.js:10670 init @ vue.esm.js:4020 l @ vue.esm.js:5472 u @ vue.esm.js:5420 e.nodeOps @ vue.esm.js:5937 e._update @ vue.esm.js:2613 r @ vue.esm.js:2741 ms.get @ vue.esm.js:3084 ms @ vue.esm.js:3073 Oe @ vue.esm.js:2745 Ct.$mount @ vue.esm.js:8331 Ct.$mount @ vue.esm.js:10670 init @ vue.esm.js:4020 l @ vue.esm.js:5472 u @ vue.esm.js:5420 e.nodeOps @ vue.esm.js:5937 e._update @ vue.esm.js:2613 r @ vue.esm.js:2741 ms.get @ vue.esm.js:3084 ms @ vue.esm.js:3073 Oe @ vue.esm.js:2745 Ct.$mount @ vue.esm.js:8331 Ct.$mount @ vue.esm.js:10670 init @ vue.esm.js:4020 l @ vue.esm.js:5472 u @ vue.esm.js:5420 h @ vue.esm.js:5543 u @ vue.esm.js:5448 e.nodeOps @ vue.esm.js:5937 e._update @ vue.esm.js:2613 r @ vue.esm.js:2741 ms.get @ vue.esm.js:3084 ms @ vue.esm.js:3073 Oe @ vue.esm.js:2745 Ct.$mount @ vue.esm.js:8331 Ct.$mount @ vue.esm.js:10670 init @ vue.esm.js:4020 l @ vue.esm.js:5472 u @ vue.esm.js:5420 e.nodeOps @ vue.esm.js:5976 e._update @ vue.esm.js:2613 r @ vue.esm.js:2741 ms.get @ vue.esm.js:3084 ms @ vue.esm.js:3073 Oe @ vue.esm.js:2745 Ct.$mount @ vue.esm.js:8331 Ct.$mount @ vue.esm.js:10670 e._init @ vue.esm.js:4523 Ct @ vue.esm.js:4608 (anonymous) @ main.js:18 n @ bootstrap 267544628f5820e025e5:54 window.webpackJsonp @ bootstrap 267544628f5820e025e5:25 (anonymous) @ app.08b31068518fe4939cc4.js:1 vue.esm.js:1696 TypeError: Cannot read property ‘author’ of undefined at s.render (index.vue?23a0:123) at s.e._render (vue.esm.js:4427) at s.r (vue.esm.js:2741) at ms.get (vue.esm.js:3084) at ms.run (vue.esm.js:3161) at Fe (vue.esm.js:2927) at Array.<anonymous> (vue.esm.js:1792) at ie (vue.esm.js:1713) at <anonymous>

浏览器访问是空白页面,怎么解决?

来自酷炫的 CNodeMD

您好,想请教一下。在首页下拉一段距离,点进帖子再出来,是如何保持scroll的高度的? 我用vue+webpack进行开发都会遇到这样一个问题,每次回来都会跳到最初的高度,以至于要将首页帖子列表进行存储,回来时候进行判断再渲染+高度定位。 想问下楼主有好的实现方法吗?

看了下代码,楼上的author报错原因: index.vue 内部

<div class=“content-list” v-for="(i,index) in indexData" :key=‘index’></div> 后面多了一个</div>,导致读取v-for的元素写在需要循环读取的标签外部从而报错,删掉后面</div>即可。估计是楼主手误写上去的。

好看,界面不错

@ZongDuCha 你跑起来了?

来自酷炫的 CNodeMD

@EdisonForMan 我怎么跑起来是空白页?

来自酷炫的 CNodeMD

@dongeast 我看的是截图挺好看的。。。。。

@ZongDuCha 你有从github下载源代码,跑起来看吗?我源代码跑起来,整个页面是空白的。

vue.esm.js:1696 TypeError: Cannot read property ‘author’ of undefined @EdisonForMan 感谢,https://github.com/spezz07/Vue-CN-Node 这个源代码我跑起来了,界面还不错。

\Vue-CN-Node-master\src\components\index.vue 需要修改这个文件,行26,删除后面的</div>,然后再去npm run dev,谷歌浏览器就跑起来啦 不过Microsoft Edge 38.14393.1066.0跑起来还是空白。

@EdisonForMan 用了路由钩子 beforeRouteLeave 用vuex记录此时的window.pageYOffset,然后beforeRouteEnter 时候用window.scrollTo(0,刚才记录的高度)就可以了

@dongeast 我用电脑上Microsoft Edge 41.16299.15.0跑起来是正常的。试下升级下版本

回到顶部