基于nodejs+koa2+vue+iView开发的一套文档发系统

时间 2019-12-04

标签基于 nodejs+koa2+vue+iview nodejs koa vue iview 开发一套文档系统繁體版

原文原文链接

name:admin  
password:123456
复制代码

一套能够直接发布产品原型、UI设计稿和在线编辑文档的平台。html

经过项目，你能够参考到前端

基本的nodejs+koa2开发方式，如基本的编写接口、基本的mongodb操做、解决跨域、中间件编写、文件上传、文件操做等
基于nodejs的服务端项目如何在开发阶段实现热更新
如何在nodejs项目中使用ES语法，及如何使用pm2发布项目
如何在阿里云ECS上搭建nodejs部署环境
如何配置线上nginx，如何开启gzip压缩等
如何使用electron开发一款桌面客户端

1.开发背景

目前入职的公司产品文档、UI设计稿、内部文件等相关文档，在公司内部流转主要依靠点对点传输，效率等，信息同步不及时。因此决定开发一个简单的平台，用于发布产品文档、UI设计稿和一些内部文档，不支持协同开发。vue

2.开发理念

内部资源，平台内全部人都可共享，权限相关设置较少，只有两个地方有作权限区分java

除管理员身份外其余用户不能查看用户管理界面
除管理员和文档建立者外不容许其余人删除文档

3.系统功能

产品文档发布

支持上传Axure等产品原型开发工具生成的html文件压缩包
支持自定义查看项目的入口页面
支持压缩包源文件下载

UI设计稿发布

支持上传Sketch等UI设计工具工具生成的html文件压缩包
支持自定义查看项目的入口页面
支持压缩包源文件下载

内部文档发布

支持文档在线编辑发布（使用百度Ueditor开发）
支持编写markdown文档，支持多种代码块主题
支持markdown文档导出和导入
支持建立文件夹管理相关文档

4.使用的技术

server

node
Ko2 + 相关npm包
ES6
pm2
mongoose
nodemon
multer
log4js
node-unzip-2
...

client

vue全家桶
iView
改造的ueditor富文本编辑器
本身开发的markdown编辑器

5.项目代码说明

client

项目由vue-cli 2.x版本建立
...
|--electron  //electron配置文件
...
复制代码

server 服务端代码

重要：因为前台不提供用户注册功能，只能由管理员建立帐户，启动项目时须要定义初始化管理员帐号密码，配置地方在/config/config.jsnode

默认用户名：root 密码 123456linux

目录结构说明

|--config  //配置文件
|--logs //日志文件目录
|--meddleware  // 中间件
|--mongodb  // 数据库相关文件
|--router // 对外提供的接口
|--service
|--static  // 静态文件放置位置
|--tmp // 缓存文件夹，定时任务会定时清空
|--utils  // 封装的工具方法
|--views  // 页面文件，项目只提供接口，无需关注
|--server.js // 服务启动文件
|--index.js  // 项目启动文件
|--package.json

复制代码

因为node并不彻底支持ES规范，项目开发过程当中为了使用ES语法，使用nodemon 去启动项目，实现项目的热更新，发布上线使用pm2发布nginx

6.关于线上部署

前端代码安装依赖打包，默认开启gzip压缩
服务端代码因为使用了ES语法，使用pm2发布项目，不要直接使用node启动/server/server.js文件
服务器部署，以nginx上为例

#user nobody;
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    #tcp_nopush on;
    #keepalive_timeout 0;
    keepalive_timeout  65;
    client_max_body_size 50m;
    #gzip配置
    gzip  on;
    gzip_min_length 1k; 
    gzip_comp_level 3; 
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
    gzip_disable "MSIE [1-6]\.";  
    gzip_vary on; 

    server {
        listen       80;
        server_name  47.99.205.74;
        # 若是使用history模式路由，参见vue-router官网配置
        root   /var/www/client/dist;
        index  index.html;
        location / {
            try_files $uri $uri/ /index.html;
        }
        # 对外提供的接口服务代理，若是不配置，须要将前端项目里的baseUrl修改，服务端支持跨域请求
        location /api/ {
           proxy_pass  http://localhost:8000/;
        }
        error_page 404   /404.html;
 
        location /404.html {
            alias /var/www/static/html/40.html;
        }
        error_page  500 501 502 503 504 /50x.html;

        location /50x.html {
            alias /var/www/static/html/50.html;
        }
    }
}


复制代码

7.发布产品文档业务实现原理简介

分析Axure或者Sketch等工具导出的分享文档，都是生成相关的html文档，支持在浏览器打开查看，直接将文档放置在服务器上，请求对应的静态文件便可实现查看上传的文档git

实现步骤

新建一个项目
进入项目编辑页面，填写项目名称，项目简介等信息
在编辑页面上传一个产品文档压缩包（目前只支持zip格式），后台会对zip压缩包进行解压缩，并循环遍历里面存在的html文件，将html文件路径列表返回给前在台，此时文件和解压过的文件存储在缓存文件夹tmp内
选中默认首页对应的html路径
提交项目，服务端先将前一步存储在缓存文件夹内的压缩包和文件复制到静态文件夹static内，删除缓存文件，解析对应的数据，存入数据库。（若是一次编辑屡次选中zip压缩包，数据提交时后台只会删除一个对应的压缩包，其余的垃圾文件不会当即删除，会在定时任务里天天定时清除文件夹）
结束

8.关于项目内使用的编辑器简介

富文本编辑器，使用的百度Ueditor二次开发，定制UI界面，配置根据实际场景定制，集成了秀米排版

markdown编辑器，本身开发的一款富文本编辑器的简化版，支持常见的markdown语法，内置多款代码块主题，详细介绍可参见：https://github.com/zhaoxuhui1122/vue-markdown

9.基于Electron打包为桌面客户端

开发客户端前必定要考虑清除是否真的须要，再决定技术选型，架构搭建

我的对这一块只知其一;不知其二，也是项目开发完成才开始考虑作客户端的，若是一开始就须要作客户端，能够参见成熟的架构，例如electron-vue等，另外此处打包出来的文件过大，还没仔细检查

相关配置位于/client/electron下

每一个文件还内均有对应的配置备注

打包时注意electron和相关依赖的版本，须要指定版本

以打包mac系统的.app为例
复制代码

# "build:mac": "rimraf ./build/mac && electron-packager . document --platform=darwin --out ./build/mac --arch=x64 --app-version=0.0.1 --overwrite --electron-version=4.0.8 --ignore=node_modules --icon=./static/logo.ico"

# rimraf ./build/mac //删除上次打包生成的文件
# electron-packager // 使用electron-packager进行打包
# document //打包出来的我文件名称
# --out ./build/mac // 输出目录
# --arch=x64 // 平台
# --app-version=0.0.1 // 版本号
# --overwrite // 覆盖
# --electron-version=4.0.8 //指定打包的electron版本，很关键
# --ignore=node_modules // 忽略node_modules
# --icon=./static/logo.ico // 制定打包icon

复制代码

注：此处打包的app，为了方便打包，入口文件直接使用的线上环境的，此处可改成本地文件，打包文件时相应的数据请求地址均须要修改

win.loadURL('http://http://47.99.205.74');
复制代码

10.阿里云ECS搭建nodejs开发环境简介

安装nvm 及 node

1.安装git

yum install git
复制代码

2.安装nvm

git clone https://github.com/cnpm/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`
复制代码

3.激活nvm

echo ". ~/.nvm/nvm.sh" >> /etc/profile
source /etc/profile
复制代码

4.查看远程版本

nvm list-remote
复制代码

5.安装指定版本

nvm install v10.8.0
复制代码

6.使用指定版本

nvm use v10.8.0
复制代码

7.设置默认node版本

nvm alias default v10.8.0
复制代码

8.安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
复制代码

安装pm2

npm install pm2 -g
复制代码

安装nginx

cd /usr/local
复制代码

yum -y install pcre pcre-devel
复制代码

yum install -y zlib-devel
复制代码

下载nginx压缩包

wget http://nginx.org/download/nginx-1.9.9.tar.gz
复制代码

解压、重命名

tar -xvzf nginx-1.9.9.tar.gz

mv nginx-1.9.9 nginx
复制代码

安装

cd nginx 
 ./configure --prefix=/usr/local/nginx
 make && make install
复制代码

// 运行

/usr/local/nginx/sbin/nginx
复制代码

此时nginx命令不是全局的，若是想方便使用，将nginx命令配置到全局

cd /etc
vi /etc/profile

复制代码

找到 export PATH USER LOGNAME MAIL HOSTNAME HISTSIZE INPUTRC这一行，在其下一行添加一行：

export PATH=$PATH:/usr/local/nginx/sbin
复制代码

保存文件

source /etc/profile
复制代码

执行nginx -h 查看

此时输入ip查看，若是没法访问,修改服务器安全组规则，放开http、https等端口

安装mongodb

下载

wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.4.9.tgz
复制代码

解压

tar -xvzf mongodb-linux-x86_64-3.4.9.tgz 
复制代码

重命名

mv mongodb-linux-x86_64-3.4.9 mongodb
复制代码

配置命令到全局

vi /etc/profile
// 增长
export PATH=$PATH:/usr/local/mongodb/bin

source /etc/profile
复制代码

启动mongod

mongod --dbpath=/data/db --fork --logpath=/data/logs

复制代码

安装zsh、oh-my-zsh

查看系统当前的shell

echo $SHELL
///bin/bash
复制代码

yum -y install zsh

chsh -s /bin/zsh
复制代码

查看系统当前的shell

echo $SHELL
//bin/bash 未改变
重启服务器
复制代码

安装oh-my-zsh

wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | sh
复制代码