Vue+Node全栈实践(带源码)

  1. 云栖社区>
  2. 前端那些事儿>
  3. 博客>
  4. 正文

Vue+Node全栈实践(带源码)

青衫无名 2018-06-01 14:00:00 浏览1629
展开阅读全文

使用Vue和Node实现前端,服务端,后台管理系统三个项目。

前后端分离,Restful API。

  • 前端: Vue-CLI

  • 服务端:Node-Koa2-Mongodb-Mongoose-七牛云对象存储

  • 后台管理系统: iView-Admin

  • 开发IDE:VSCode

  • 部署环境:阿里云-Ubuntu16.04

  • 版本管理: Git

效果预览

16453367a8152049?imageslim1645493a797aef5a?imageslim

在线访问

前端:

扫码查看:

1

在线查看:

infinite.czero.cn/Infinite-we…

后台管理系统:

还没有添加权限管理的功能,后续会加上。进入登录页面,如果不懂或者需要账号私聊我。。。 第一次使用iview-admin,感觉功能还是挺多的,还在摸索阶段,只用来实现简陋的功能,后续会持续优化。

164534495741f97e?imageslim

在线查看:

infinite.czero.cn/Infinite-we…

项目概览

前端(Vue-CLI):

功能: 架构是基于Vue全家桶购物商城

  1. 添加better-scroll组件实现下拉刷新和上拉加载。
  2. 请求服务端API,真实的数据交互。
  3. 添加搜索,登录,注册等功能并Vuex进行存储。
  4. 图片都是使用Iconfont。
  5. 动画切换,使用Vue-router做路由判断来实现不同的切换动画。
  6. 模块化,全局注册组件弹窗(alert和toast)效果,封装共用js函数类。
  7. 配置Webpack请求代理,解决请求服务器端跨域问题。
  8. 使用keep-alive对组件进行缓存

目录结构:

├── config (配置目录,需要在index.js配置代理,不然会出现跨域的问题)
│ ├── dev.env.js
│ ├── index.js (配置跨域)
│ └── prod.env.js
├── image
│ └── github.png
├── index.html
 ├── components (组件目录)
 │ ├── About(关于我们)
 │ ├── Agreement(用户协议)
 │ ├── Base(共用基础组件)
 │ ├── Collect(我的收藏)
 │ ├── Detail(内容详情)
 │ ├── ForgetPasswd(忘记密码)
 │ ├── Hot(发现热门页)
 │ ├── Index.vue(首页,推荐页面)
 │ ├── Login(登录页)
 │ ├── Member(个人中心页)
 │ ├── ModelBox(全局注册弹窗组件)
 │ ├── Register(注册页)
 │ ├── Search(搜索页)
 │ └── ToastBox(全局注册Toast组件)
 ├── main.js
 ├── router
 │ └── index.js
 └── store (Vuex)
 ├── actions.js
 ├── getters.js (获取Vuex状态)
 ├── index.js (Vuex入口文件)
 ├── mutation-types.js (变量存储)
 ├── mutations.js (to修改动作)
 └── state.js (状态仓库)
复制代码

服务端(Node-Koa2-Mongodb-Mongoose):

功能:

  1. 分页加载
  2. 模糊查询
  3. 定制Restful API
  4. 七牛云第三方对象存储对接
  5. pm2部署到阿里云

项目目录:

├── app
│ ├── controllers (逻辑处理目录)
│ │ ├── admin
│ │ ├── app.js
│ │ ├── hot
│ │ ├── recommend
│ │ ├── upload
│ │ └── user
│ ├── dbhelper (操控数据表目录)
│ │ ├── AdminHelper.js
│ │ ├── hotHelper.js
│ │ ├── recommendHelper.js
│ │ └── userHelper.js
│ └── models (数据库模型目录)
│ ├── admin.js (管理员表)
│ ├── hot.js (热门发现数据表)
│ ├── recommend.js (首页推荐表)
│ └── user.js (用户管理表--登录注册)
├── app.js (服务端启动入口文件 node app.js)
├── config (配置目录)
│ ├── config.js (基础配置信息--七牛云配置,数据库配置)
│ └── router.js (路由配置)
复制代码

后台管理系统(iView-Admin):

功能:

  1. 文章管理,图片上传到七牛云。
  2. 编辑文章
  3. 添加文章
  4. 用户管理
  5. 富文本内容添加

项目目录:

├── build (配置全局请求地址和跨域处理)
│ ├── webpack.dev.config.js (在这里配置请求跨域问题,及全局请求地址)
├── index.html
├── src
│ ├── main.js
│ ├── mixins (公共js工具目录)
│ │ └── common.js
│ ├── router (路由配置)
│ │ ├── index.js
│ │ └── router.js
│ └── views
│ ├── Main.vue
│ ├── error-page
│ ├── home
│ ├── login.less
│ ├── login.vue
│ ├── main-components (组件入口目录)
│ ├── main-menu
│ ├─── edit (编辑)
│ ├── hot (热门)
│ ├── recommend (发现)
│ ├── user (用户管理)
│ ├── main.less
│ ├── message
│ └── my-components
复制代码

调试方法:

  1. Chrome调试(谷歌浏览器工具)
  2. vConsole调试(真机调试查看log日志神器)
  3. API调试神奇Postman。
  4. Vue-devtools(调试Vuex状态)

跨域处理

  1. 使用Webpack的proxyTable进行请求代理
  2. Chrome安装cors拓展
  3. 服务端配置所以路径都可跨域或者将开发的IP加入白名单

源码

前端源码: github.com/czero1995/I…

服务端源码:github.com/czero1995/I…

后台管理源码: github.com/czero1995/I…

最后

如有建议或者问题,请私聊联系我,一起学习和进步。反手给我一个star^_^


作者:rickchen
原文发布时间:2018年07月01日
本文来源掘金如需转载请紧急联系作者

网友评论

登录后评论
0/500
评论
青衫无名
+ 关注
所属云栖号: 前端那些事儿