/Vue-CN-Node

基于Vue.js构建的cnodejs WebApp

Primary LanguageVue

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 完成了以下功能

  • 首页
  • 无限懒加载文章列表
  • 根据tab切换首页内容
  • 帖子内容页
  • 用户登录,退出
  • 个人主页
  • 我的收藏
  • 在帖子内容页中点击用户头像,可以进入该用户的主页
  • 登陆后,可在帖子内容页点赞和评论
  • 登陆后,可以回复某人评论
  • 登陆后,可以发布新主题
  • 页面切换时的动态效果
  • 查看我的消息
  • 设置单个消息或者全部消息为已读取状态
  • 对自己的文章可以进行编辑更新
  • 相关操作成功或失败后的消息提醒(现在的话只是用了浏览器的自带的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的过程中也有许多收获。希望这个项目也能帮助到大家~