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

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的过程中也有许多收获。希望这个项目也能帮助到大家~~

10 回复

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

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

@ResJay 谢谢你的夸奖哈哈~

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

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

感谢楼主,很棒

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

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

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

来自酷炫的 CNodeMD

官方有api给的呀 @a69694510

回到顶部