vue2.0仿nodejs中文社区,调用的nodejs开放接口
发布于 7 年前 作者 15826954460 3934 次浏览 最后一次编辑是 7 年前 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

nodejs

A Vue2.0 js project

一个基于vue2.0高仿nodejs中文社区的项目

该项目只是为了进一步熟悉vue2.0而写的demo,感谢官网提供的公共API接口

技术栈

vue2.0 + vuex + vue-router + axios + webpack + es6 + less + flex + svg

demo

查看demo,请狠狠地点击这里 http://demonodejs.applinzi.com ,建议较新的Chrome,Fix,O…等浏览器进行浏览
github地址: https://github.com/15826954460/nodejs
移动端扫码:

效果演示

移动端登陆前/后

pc端

项目运行

温馨提示:由于该项目大量使用的ES6新特性,nodejs必须是较新的版本(6.0以上),建议使用稳定版本

说明

  • 这是一个pc端的项目,简单的做了一下移动端的适配
  • 项目可以和官网进行同步(eg: 收藏,取消收藏,评论回复,发表文章, 点赞等等),如何您想通过该demo实现同步功能,还请你自己登陆nodejs官网获取accesstaken然后进入到accesstaken进行登陆, 否则您将无法体验同步官网的功能
  • 如果你觉得对您有帮助,您可以点击右上角的star支持一下,谢谢!
  • 当然你一可以follow一下,我将会在后期开源更好的项目
  • 项目还有一些不完美的地方,后续会持续进行修复更新

目标功能

  • [x] 获取所有主题信息(主题首页) – 完成
  • [x] 查看博主文章(主题详情) – 完成
  • [x] 新建主题 – 完成
  • [x] 编辑主题 – 完成
  • [x] 收藏、取消文章(主题的收藏/取消) – 完成
  • [x] 评论 – 完成
  • [x] 为评论点赞、取消点赞 – 完成
  • [x] 获取博主信息(用户详情) – 完成
  • [x] 消息通知(已读未读消息) – 完成
  • [x] 模拟登陆注册 – 完成
  • [x] 密码重置 – 完成
  • [x] accesstaken登陆(第三方登陆) – 完成

目录结构(布局)

  • |— build // webpack配置文件
  • |— config // 项目打包路径
  • |— src // 资源文件
  •   |-- comment                                   // 公共样式文件
             |-- comment.less                       // 全局共共样式
             |-- reset.less                         // 初始化样式
             |-- commentMedia.less                  // 重用的媒体查询样式
      |-- components                                // 公共组件
             |-- aside                              // 侧边栏组件
             |-- header                             // 头部组件
             |-- headerTitle                        // 头部标题组件
             |-- message                            // 右边广告信息组件
             |-- pageList                           // 分页码组件
      |-- page
             |-- accessTaken                        // accesstaken登陆页面
             |-- createTopic                        // 新建主题页面
             |-- index                              // 主题信息首页
             |-- mymessage                          // 消息通知页面
             |-- setting                            // 密码重置页面
             |-- signin                             // 登陆页面
             |-- topicDetail                        // 主题详情页面
             |-- updateTopic                        // 修改主题页面
             |-- user                               // 用户信息详情
      |-- router
             |-- index.js                           // 路由配置
      |-- store                                     // vuex状态管理
             |-- getters.js                         // 配置getters
             |-- index.js                           // 引用vuex
             |-- mutations.js                       // 配置mutations
      |--- App.vue                                  // 页面入口文件
      |--- main.js                                  // 程序入口文件,加载各种插件
    
  • |— static
  •   |-- 外部资源文件                               // 用来存放外部引用的图片、音频、视频等文件
    

如果该项目对你有帮助,麻烦点个star,适合初学者和有一定vue基础和es6基础的攻城狮学习

回到顶部