基於nodejs+koa2+vue+iView開發的一套文檔發系統

GitHub地址

演示地址

name:admin  
password:123456
複製代碼

一套能夠直接發佈產品原型、UI設計稿和在線編輯文檔的平臺。

經過項目，你能夠參考到

1. 基本的nodejs+koa2開發方式，如基本的編寫接口、基本的mongodb操做、解決跨域、中間件編寫、文件上傳、文件操做等
2. 基於nodejs的服務端項目如何在開發階段實現熱更新
3. 如何在nodejs項目中使用ES語法，及如何使用pm2發佈項目
4. 如何在阿里雲ECS上搭建nodejs部署環境
5. 如何配置線上nginx，如何開啓gzip壓縮等
6. 如何使用electron開發一款桌面客戶端

1.開發背景

目前入職的公司產品文檔、UI設計稿、內部文件等相關文檔，在公司內部流轉主要依靠點對點傳輸，效率等，信息同步不及時。因此決定開發一個簡單的平臺，用於發佈產品文檔、UI設計稿和一些內部文檔，不支持協同開發。

2.開發理念

內部資源，平臺內全部人都可共享，權限相關設置較少，只有兩個地方有作權限區分

1. 除管理員身份外其餘用戶不能查看用戶管理界面
2. 除管理員和文檔建立者外不容許其餘人刪除文檔

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.js

默認用戶名：root 密碼 123456

目錄結構說明

|--config  //配置文件
|--logs //日誌文件目錄
|--meddleware  // 中間件
|--mongodb  // 數據庫相關文件
|--router // 對外提供的接口
|--service
|--static  // 靜態文件放置位置
|--tmp // 緩存文件夾，定時任務會定時清空
|--utils  // 封裝的工具方法
|--views  // 頁面文件，項目只提供接口，無需關注
|--server.js // 服務啓動文件
|--index.js  // 項目啓動文件
|--package.json

複製代碼

因爲node並不徹底支持ES規範，項目開發過程當中爲了使用ES語法，使用nodemon 去啓動項目，實現項目的熱更新，發佈上線使用pm2發佈

6.關於線上部署

1. 前端代碼安裝依賴打包，默認開啓gzip壓縮
2. 服務端代碼因爲使用了ES語法，使用pm2發佈項目，不要直接使用node啓動/server/server.js文件
3. 服務器部署，以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文檔，支持在瀏覽器打開查看，直接將文檔放置在服務器上，請求對應的靜態文件便可實現查看上傳的文檔

實現步驟

1. 新建一個項目
2. 進入項目編輯頁面，填寫項目名稱，項目簡介等信息
3. 在編輯頁面上傳一個產品文檔壓縮包（目前只支持zip格式），後臺會對zip壓縮包進行解壓縮，並循環遍歷裏面存在的html文件，將html文件路徑列表返回給前在臺，此時文件和解壓過的文件存儲在緩存文件夾tmp內
4. 選中默認首頁對應的html路徑
5. 提交項目，服務端先將前一步存儲在緩存文件夾內的壓縮包和文件複製到靜態文件夾static內，刪除緩存文件，解析對應的數據，存入數據庫。（若是一次編輯屢次選中zip壓縮包，數據提交時後臺只會刪除一個對應的壓縮包，其餘的垃圾文件不會當即刪除，會在定時任務裏天天定時清除文件夾）
6. 結束

   

8.關於項目內使用的編輯器簡介

1. 富文本編輯器，使用的百度Ueditor二次開發，定製UI界面，配置根據實際場景定製，集成了秀米排版

2. 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
複製代碼