小邹个人站点：http://www.itzoujie.com/
不懂后端的前端不是一个大前端，不懂后端的前端会大大限制你的发展空间，所以小邹在网上找了一篇不错的文章来分享给大伙，这里说一下，小邹的个人站点技术栈是（node+express+vue+mysql）,跟这篇文章的技术栈略有不同，当然站点里面涉及的组件库和小程序等，小邹这里就不一一说了。好了，下面直接开始分享：
技术栈
Vue + vuex + element-ui + webpack + nodeJs + koa2 + mongodb
目录结构讲解
说明：
- build - webpack的配置文件
- code - 放置代码文件
- config - 项目参数配置的文件
- logs - 日志打印文件
- node_modules - 项目依赖模块
- public - 项目静态文件的入口 例如: public下的 demo.html文件, 可通过 localhost:3000/demo.html 访问
- static - 静态资源文件
- .babelrc - babel编译
- postcss.config.js - css后处理器配置
build 文件讲解
说明：
- build.js - 执行webpack编译任务, 还有打包动画 等等
- get-less-variables.js - 解析less文件, 赋值less全局变量
- style-loader.js - 样式loader配置
- vue-config.js - vue配置
- webpack.base.conf.js - webpack 基本通用配置
- webpack.dev.conf.js - webpack 开发环境配置
- webpack.prod.conf.js - webpack 生产环境配置
code 文件
1.admin - 后台管理界面源码
src - 代码区域：
- components - 组件
- filters - 过滤器
- font - 字体/字体图标
- images - 图片
- router - 路由
- store - vuex状态管理
- styles - 样式表
- utils - 请求封装
- views - 页面模块
- App.vue - app组件
- custom-components.js - 自定义组件导出
- main.js - 入口JS
- index.html - webpack 模板文件
2.client - web端界面源码
跟后台管理界面的结构基本一样。
3.server - 服务端源码
说明：
- controller: 所有接口逻辑代码
- middleware: 所有的中间件
- models: 数据库model
- router: 路由/接口
- app.js: 入口
- config.js: 配置文件
- index.js: babel编译
- mongodb.js: mongodb配置
其他文件
- config - 项目参数配置的文件
- logs - 日志文件
- public - 项目静态文件的入口
- static - 静态资源文件
- .babelrc - babel编译
- postcss.config.js - css后处理器配置
后台管理
开发中用的一些依赖模块
- vue/vue-router/vuex - Vue全家桶
- axios - 一个现在主流并且很好用的请求库 支持Promise
- qs - 用于解决axios POST请求参数的问题
- element-ui - 饿了么出品的vue2.0 pc UI框架
- babel-polyfill - 用于实现浏览器不支持原生功能的代码
- highlight.js / marked- 两者搭配实现Markdown的常用语法
- js-md5 - 用于登陆时加密
- nprogress - 顶部加载条
components
这个文件夹一般放入常用的组件， 比如 Loading组件等等。
views
所有模块页面。
store
vuex 用来统一管理公用属性， 和统一管理接口。
登陆
登陆是采用 jsonwebtoken方案 来实现整个流程的。
1. jwt.sign(payload,secretOrPrivateKey,[options,callback]) 生成TOKEN
2. jwt.verify(token，secretOrPublicKey，[options，callback]) 验证TOKEN
3.获取用户的账号密码。
4.通过 jwt.sign 方法来生成token：
5.每次请求数据的时候通过 jwt.verify 检测token的合法性 jwt.verify(token,secret)。
权限
通过不同的权限来动态修改路由表。
通过 vue的 钩子函数 beforeEach 来控制并展示哪些路由， 以及判断是否需要登陆。
通过调用 getUserInfo方法传入 token 获取用户信息, 后台直接解析 token 获取里面的信息返回给前台。
通过调用 setRoutes方法 动态生成路由。
axios 请求封装，统一对请求进行管理
面包屑 / 标签路径
- 通过检测路由来把当前路径转换成面包屑。
- 把访问过的路径储存在本地，记录下来，通过标签直接访问。
上面介绍了几个主要以及必备的后台管理功能，其余的功能模块 按照需求增加就好
前台
前台展示的页面跟后台管理界面差不多， 也是用vue+webpack搭建，基本的结构都差不多。
server端
权限
主要是通过 jsonwebtoken 的verify方法检测 cookie 里面的 token 验证它的合法性。
日志是采用 log4js 来进行管理的， log4js 算 nodeJs 常用的日志处理模块，用起来额也比较简单。
log4js 的日志分为九个等级，各个级别的名字和权重如下：
1.图。
2.设置 Logger 实例的类型 logger=log4js.getLogger('cheese')。
3.通过 Appender 来控制文件的 名字、路径、类型 。
4.配置到 log4js.configure。
5.便可通过 logger 上的打印方法 来输出日志了 logger.info(JSON.stringify(currTime:当前时间为${Date.now()}s ))。
定制书写规范(API)
设计思路
当应用程序启动时候，读取指定目录下的 js 文件，以文件名作为属性名，挂载在实例 app 上，然后把文件中的接口函数，扩展到文件对象上。
读取出来的便是以下形式：
app.controller.admin.other.markdown_upload_img
便能读取到 markdown_upload_img 方法。
在把该形式的方法赋值过去就行：
router.post('/markdown_upload_img',app.controller.admin.other.markdown_upload_img)
通过 mongoose 链接 mongodb
封装返回的send函数
通过 koa-static 管理静态文件入口
注意事项：
1. cnpm run server 启动服务器 //没装cnpm的使用npm命令
2.启动时，记得启动mongodb数据库，账号密码 可以在 server/config.js 文件下进行配置
3. db.createUser({user:"cd",pwd:"123456",roles:[{role:"readWrite",db:'test'}]})(mongodb 注册用户)
4. cnpm run dev:admin 启动后台管理界面
5.登录后台管理界面录制数据
6.登录后台管理时需要在数据库 创建 users 集合注册一个账号进行登录
7. cnpm run dev:client 启动前台页面
