egg+vue+mongodb实践开发在线文档管理平台——水墨文档
前言
团队中会遇到在线文档管理的需求，包括技术文档，接口文档，excel文档，和产品原型的托管等需求，一直没有找到合适的开源项目来知足需求，因此动手实现了个文档管理系统（实现起来并不复杂，该教程只是提供思路，并不是最佳实践）javascript
功能列表
- [x] 登陆注册
- [x] 工做台|文档列表
- [x] 文档编辑预览（支持：md， excel，html产品原型托管）
- [x] 协做编辑
- [x] 访问权限设置
- [x] 团队管理
- [x] 点赞收藏
- [x] 模板管理
- [x] 浏览历史
- [x] 回收站
- [ ] 文件夹形式阅读（接口文档）
- [ ] 编辑历史版本
系统界面预览
阅读前准备
一、了解vue技术栈开发<br/>
二、了解koa<br/>
三、了解egg<br/>
四、了解mongodb<br/>html
技术栈
前端：<br/>vue: 模块化开发少不了angular，react，vue三选一，这里选择了vue。<br/>vuex: 状态管理<br/>sass: css预编译器。<br/>element-ui：不造轮子，有现成的优秀的vue组件库固然要用起来。<br/>前端
服务端：<br/>egg.js：企业级框架，按照一套统一的约定进行应用开发，开发十分高效。<br/>mongodb：一个基于分布式文件存储的数据库，比较灵活。<br/>egg-alinode：阿里提供的免费nodejs服务器性能监控。<br/>vue
工程搭建
这里咱们将先后端项目放在同一个目录下管理，分别用egg脚手架和vue-cli3生成初始化项目，拷贝合并到同一个目录下，记得合并下package.json内容。（脚手架生成项目就不介绍了，按照文档来就是了），合并后将vue项目src目录改成web,以下：java
··· · |-- app // egg 初始化app目录 |-- config // egg 初始化app目录 |-- public // vue 静态资源目录 |-- web // 原 src 目录，改为 web 用做前端项目目录 · ···
这样的话 咱们须要再把咱们vue webpack打包配置稍做一下调整，首先是把原先的编译指向src的目录改为 web，其次为了 npm run build 能正常编译 web 咱们也须要为 babel-loader 再增长一个编译目录：node
根目录新增vue.config.js,目的是为了改造vue项目入口,改成:web/main.jsreact
module.exports = { pages: { index: { entry: "web/main.js" } } }babel-loader能正常编译 web目录， 在vue.config.js新增以下配置webpack
// 扩展 webpack 配置 chainWebpack: config => { config.module .rule('js') .include.add(/web/).end() .use('babel') .loader('babel-loader') .tap(options => { // 修改它的选项... return options }) }- package.json 新增前端项目打包命令
"dev-web": "vue-cli-service serve", "build-web": "vue-cli-service build",
至此先后端项目初始化工做就完了，前端开发启动npm run dev-web 后端开发启动 npm run devios
工程目录结构
|-- app --------服务器端项目代码
|--controller --------用于解析用户的输入，处理后返回相应的结果
|--extend --------框架的扩展
|--middleware --------编写中间件
|--model --------Schema数据模型
|--public --------用于放置静态资源
|--service --------用于编写业务逻辑层
|--router.js --------用于配置 URL 路由规则
|-- config --------egg 配置文件
|--config.default.js --------默认配置
|--config.local.js --------开发环境配置
|--config.prod.js --------生产环境配置
|--plugin.js --------配置须要加载的插件
|-- web --------前端项目界面代码
|--common --------前端界面对应静态资源
|--components --------组件
|--config --------配置文件
|--filter --------过滤器
|--pages --------页面
|--router --------路由配置
|--store --------vuex状态管理
|--service --------axios封装
|--App.vue --------App
|--main.js --------入口文件
|--permission.js --------权限控制
|-- docs --------预留编写项目文档目录
|-- vue.config.js --------vue webpack配置文件
|-- package.json
...
...
完成项目目录初始化后，接下来先把mongodb全局得一些中间件、扩展方法给配置上，为接口开发作好准备工做
mongodb配置
一、安装mongoose模块
npm install egg-mongoose --save
二、配置config文件
// config/plugin.js
exports.mongoose = {
enable: true,
package: 'egg-mongoose',
};
// config/config.default.js
config.mongoose = {
url: 'mongodb://127.0.0.1:27017/inkwash',
options: {},
};
全局中间件和扩展配置
一、后端接口开发中咱们须要一个统一得返回格式，能够在context对象下扩展个返回数据function用于统一处理接口response data
app下新建文件夹extend 新建context.js
// app/extend/context.js
module.exports = {
/**
* 返回客户端的内容
* @param status // 接口是否成功
* @param body // 返回数据
* @param msg // 返回信息提示
* @param code // 返回状态码
*/
returnBody (status = true, body = {}, msg = 'success', code = 200) {
this.status = code;
this.body = {
status: status,
body: body,
msg,
code: code
}
}
}
// 调用const { ctx } = this;ctx.returnBody(true, {}, "成功");
二、添加统一处理错误得中间件
app文件夹下新建middleware文件夹，新建error_handler.js, 并配置congfig全局中间件配置
// app/middleware/error_handler.js
module.exports = () => {
return async function errorHandler(ctx, next) {
try {
await next();
} catch (err) {
// 全部的异常都会在app上出发一个error事件，框架会记录一条错误日志
ctx.app.emit('error', err, ctx);
const status = err.status || 500;
// 若是时生产环境的时候 500错误的详细错误内容不返回给客户端
const error = status === 500 && ctx.app.config.env === 'prod' ? '网络错误' : err.message;
ctx.body = {
msg: error,
status: false,
body: {},
code: status
};
}
};
};
// app/middleware/error_handler.js
// config/config.default.js 配置全局中间件
config.middleware = [ 'errorHandler'];
jwt鉴权登陆认证
一、安装egg-jwt token生成以及验证包
npm install egg-jwt --save
二、安装完成后在根目录下的 config/plugin.js 配置一下，如：
'use strict';
/** @type Egg.EggPlugin */
module.exports = {
jwt: {
enable: true,
package: "egg-jwt"
},
mongoose: {
enable: true,
package: 'egg-mongoose',
}
};
三、接下来在 config/config.default.js 里面继续配置：
config.jwt = {
secret: "123456"//自定义 token 的加密条件字符串
};
四、在context上扩展两个function, getToken 和 checkToken用于生成token和验证token
// app/extend/context.js
async getToken(data) {
return await this.app.jwt.sign(data, this.app.config.jwt.secret, {expiresIn: 30* 24 * 60 * 60 + 's'});
},
async checkToken(token) {
return await this.app.jwt.verify(token, this.app.config.jwt.secret)
}
五、编写个中间件实现登陆验证拦截
在app/middleware文件夹下新建auth.js
// app/middleware/auth.js
module.exports = () => {
return async function(ctx, next) {
let token = '';
if (
ctx.headers.authorization && ctx.headers.authorization.split(' ')[0] === 'Bearer'
) {
token = ctx.headers.authorization.split(' ')[1];
} else if (ctx.query.accesstoken) {
token = ctx.query.accesstoken;
} else if (ctx.request.body.accesstoken) {
token = ctx.request.body.accesstoken;
}
let user;
try{
user = await ctx.checkToken(token);
}catch (e) {
ctx.returnBody(false,{}, 'Token 无效，请从新登陆', 401);
}
if (!user) {
ctx.returnBody(false,{}, 'Token 无效，请从新登陆', 401);
return;
}
ctx.request.user = user;
await next();
};
};
好了以上配置完成后就开始接下来的核心注册功能相关操做了。
- 首先我在根目录下的 app/router.js 建立访问路由:
import { Application } from 'egg';
export default (app: Application) => {
const { controller, router, jwt } = app;
//正常路由
router.post('/auth/register', controller.auth.register);
// 只有在须要验证 token 的路由上添加jwt
router.post('/user/infor',jwt, controller.user.infor);
};
接下来我去编写个人控制器，在根目录下的 app/controller/home.ts 编写内容：
这里使用了两个咱们在app/extend/context.js上扩展的两个通用方法- 经过ctx.getToken(用户信息object对象)将用户信息经过jwt生成token返回给前端
- 经过ctx.returnBody返回数据
// app/controller/auth.js
const Controller = require('egg').Controller
class AuthController extends Controller {
async login() {
//... 略
}
async register() {
const { ctx, service } = this;
const { username, password, email } = ctx.request.body
let userData = await ctx.service.user.createUser(username, password, email);
userData = userData.toObject();
let userDataStr = JSON.parse(JSON.stringify(userData));
// 生成token
let token =await ctx.getToken(userDataStr);
ctx.returnBody(true, {access_token: token, userInfo: userData}, "注册成功!")
}
}
module.exports = AuthController;
- 前端请求的时候须要在 headers 里面上默认的验证字断 Authorization 就能够了，如：
axios({
method: 'get',
url: 'http://127.0.0.1:7001/user/info',
headers:{
// 切记 token 不要直接发送，要在前面加上 Bearer 字符串和一个空格
'Authorization':`Bearer ${token}`
}
})
- 接口从toen获取加密信息
- 在app/extend/context.js再扩展个getUser方法获取token加密信息
// app/extend/context.js
// 获取用户信息
async getUserData() {
var token = this.headers.authorization ? this.headers.authorization : '';
token = token.substring(7) //把Bearer 截取掉，解析的时候不须要加上Bearer
let user = {}
try {
user = this.app.jwt.verify(token, this.app.config.jwt.secret);
} catch (err) {
user = {}
}
return user;
}
- 实现获取我的信息接口
// app/controller/user.js
'use strict';
const Controller = require('egg').Controller;
class UserController extends Controller {
async info() {
let {ctx} = this;
let user = await this.ctx.getUserData()
ctx.returnBody(true, user)
}
}
module.exports = UserController;
至此咱们就实现了jwt生成token, 而后经过前端传过来的token获取当前登陆用户的信息, jwt登陆受权这块应该是讲完了，其余的业务接口应该实现起来难度不大
md文档编辑
文档编辑器使用Vditor， 一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（相似 Typora）和分屏预览模式
安装Vditor
npm install vditor --save
在代码中引入并初始化对象
<template>
<div class="editor-component editor-md" ref="editor-component">
<div id="editor-md-dom"></div>
</div>
</template>
<script>
import Vditor from 'vditor'
import "vditor/src/assets/scss/index.scss"
let timer = null;
export default {
data(){
return {
contentEditor: '',
}
},
mounted () {
this.contentEditor = new Vditor('vditor', {
height: 360,
toolbarConfig: {
pin: true,
},
cache: {
enable: false,
},
after: () => {
this.contentEditor.setValue('hello, Vditor + Vue!')
},
})
},
}
</script>
excel表格编辑
安装x-data-spreadsheet
npm install x-data-spreadsheet
<div id="x-spreadsheet-demo"></div>
import Spreadsheet from "x-data-spreadsheet";
// If you need to override the default options, you can set the override
// const options = {};
// new Spreadsheet('#x-spreadsheet-demo', options);
const s = new Spreadsheet("#x-spreadsheet-demo")
.loadData({}) // load data
.change(data => {
// save data to db
});
// data validation
s.validate()
axure原型托管
原型axure页面托管，参考WuliHub让用户上传生成的html压缩包，而后解压到静态资源目录，返回访问地址就ok, 前端拿到原型地址用内嵌iframe渲染出来就ok
打包编译&&静态资源设置
一、配置前端vue页面打包命令
// kage.json script新增打包命令 "build-web": "vue-cli-service build",
二、运行npm run build-web 根目录会生成dist前端代码静态文件，由于egg支持设置多个静态资源目录，这里就直接配置根目录下的dist文件夹为静态目录, 配置config
// config/config.default.js
config.static = {
prefix: '/',// 将静态资源前缀改成'/'（默认是 '/public')
dir: [
path.join(__dirname, '../app/public'),
path.join(__dirname, '../dist')
]
}
打包完成后启动egg,就能够经过http://localhost:7001/index.html 访问到前端页面了
由于直接访问http://localhost:7001 会404
能够再配置个路由重定向，将跟路由'/' 重定向到 '/index.html'
// app/router.js
// 重定向到index页面
app.router.redirect('/', '/index.html', 302);
部署
服务端部署运行start命令
npm run start
性能监控
node服务性能监控这块能够使用阿里免费开源的alinode
一、安装egg-alinode
npm i egg-alinode
二、插件配置
// config/plugin.js
exports.alinode = {
enable: true,
package: 'egg-alinode',
};
三、配置config
// config/config.default.js
exports.alinode = {
enable: true,
appid: 'my app id',
secret: 'my app secret',
};
这样就能够了，监控数据能够在阿里Node.js 性能平台控制台看到监控面板
结束
实现起来并不复杂，该教程只是提供思路，并不是最佳实践