小邹个人站点：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 - 代码区域：

1. components - 组件
2. filters - 过滤器
3. font - 字体/字体图标
4. images - 图片
5. router - 路由
6. store - vuex状态管理
7. styles - 样式表
8. utils - 请求封装
9. views - 页面模块
10. App.vue - app组件
11. custom-components.js - 自定义组件导出
12. main.js - 入口JS
13. index.html - webpack 模板文件

2.client - web端界面源码

跟后台管理界面的结构基本一样。

3.server - 服务端源码

说明：

1. controller: 所有接口逻辑代码
2. middleware: 所有的中间件
3. models: 数据库model
4. router: 路由/接口
5. app.js: 入口
6. config.js: 配置文件
7. index.js: babel编译
8. 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 启动前台页面