egg+vue+mongodb实践开发在线文档管理平台——水墨文档

围的围
7,355 阅读8分钟

前言

团队中会遇到在线文档管理的需求，包括技术文档，接口文档，excel文档，和产品原型的托管等需求，一直没有找到合适的开源项目来满足需求，所以动手实现了个文档管理系统（实现起来并不复杂，该教程只是提供思路，并非最佳实践）

Github: 传送门
演示地址：传送门

功能列表

  • 登录注册
  • 工作台|文档列表
  • 文档编辑预览（支持：md， excel，html产品原型托管）
  • 协作编辑
  • 访问权限设置
  • 团队管理
  • 点赞收藏
  • 模板管理
  • 浏览历史
  • 回收站
  • 文件夹形式阅读（接口文档）
  • 编辑历史版本

系统界面预览

阅读前准备

1、了解vue技术栈开发
2、了解koa
3、了解egg
4、了解mongodb

技术栈

前端：
vue: 模块化开发少不了angular，react，vue三选一，这里选择了vue。
vuex: 状态管理
sass: css预编译器。
element-ui：不造轮子，有现成的优秀的vue组件库当然要用起来。

服务端：
egg.js：企业级框架，按照一套统一的约定进行应用开发，开发十分高效。
mongodb：一个基于分布式文件存储的数据库，比较灵活。
egg-alinode：阿里提供的免费nodejs服务器性能监控。

工程搭建

这里我们将前后端项目放在同一个目录下管理，分别用egg脚手架和vue-cli3生成初始化项目，拷贝合并到同一个目录下，记得合并下package.json内容。（脚手架生成项目就不介绍了，按照文档来就是了），合并后将vue项目src目录改为web,如下：

···
·
|-- app					// egg 初始化app目录
|-- config				// egg 初始化app目录
|-- public				// vue 静态资源目录
|-- web					// 原 src 目录，改成 web 用作前端项目目录
·
···

这样的话 我们需要再把我们vue webpack打包配置稍作一下调整，首先是把原先的编译指向src的目录改成 web，其次为了 npm run build 能正常编译 web 我们也需要为 babel-loader 再增加一个编译目录：

  • 根目录新增vue.config.js,目的是为了改造vue项目入口,改为:web/main.js

        module.exports = {    
      pages: {        
        index: {            
          entry: "web/main.js"        
        }    
      }
    }

  • babel-loader能正常编译 web目录， 在vue.config.js新增如下配置

    // 扩展 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 dev

工程目录结构

|-- 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配置

1、安装mongoose模块

npm install egg-mongoose --save

2、配置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: {},
};

全局中间件和扩展配置

1、后端接口开发中我们需要一个统一得返回格式，可以在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, {}, "成功");

2、添加统一处理错误得中间件 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鉴权登录认证

1、安装egg-jwt token生成以及验证包

npm install egg-jwt --save

2、安装完成后在根目录下的 config/plugin.js 配置一下，如：

'use strict';

/** @type Egg.EggPlugin */
module.exports = {
	jwt: {
		enable: true,
		package: "egg-jwt"
	},
  mongoose: {
    enable: true,
    package: 'egg-mongoose',
  }
};

3、接下来在 config/config.default.js 里面继续配置：

config.jwt = {
  secret: "123456"//自定义 token 的加密条件字符串
};

4、在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)
}

5、编写个中间件实现登录验证拦截 在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上扩展的两个通用方法
    1. 通过ctx.getToken(用户信息object对象)将用户信息通过jwt生成token返回给前端
    2. 通过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获取加密信息
  1. 在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;
	}
  1. 实现获取个人信息接口
// 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

打包编译&&静态资源设置

1、配置前端vue页面打包命令

// kage.json script新增打包命令
"build-web": "vue-cli-service build",

2、运行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 1、安装egg-alinode

npm i egg-alinode

2、插件配置

// config/plugin.js
exports.alinode = {
  enable: true,
  package: 'egg-alinode',
};

3、配置config

// config/config.default.js
exports.alinode = {
  enable: true,
  appid: 'my app id',
  secret: 'my app secret',
};

这样就可以了，监控数据可以在阿里Node.js 性能平台控制台看到监控面板

结束

实现起来并不复杂，该教程只是提供思路，并非最佳实践

捐赠作者

如果你觉得这个项目对你有用或者有所启发，可以请作者喝杯果汁：（黄维）

d023c7f64e8d9f8b899b561f31a7463.jpg

avatar
文章
阅读
粉丝
相关推荐
如何实现多人协作的在线文档
8.0k阅读
 · 
47点赞
FortuneSheet: 支持协同的开源表格组件
4.0k阅读
 · 
10点赞
浅谈在线文档的那些事儿
1.5k阅读
 · 
23点赞
在线电子表格分析调研
2.6k阅读
 · 
6点赞
基于Vite+React构建在线Excel
1.2k阅读
 · 
13点赞
如何实现可多人协作的“在线excel”系统？
3.1k阅读
 · 
1点赞
node-xlsx读取Excle表格重新写入新的Excle表格
476阅读
 · 
1点赞
在线Excel多人协作冲突怎么办
1.9k阅读
 · 
10点赞
office 文件在线协作编辑——解决方案1（基于sharepoint的二次开发）
1.1k阅读
 · 
2点赞

友情链接：