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

小眼萌發表於2019-03-13

name:admin  
password:123456
複製程式碼

一套可以直接釋出產品原型、UI設計稿和線上編輯文件的平臺。

通過專案，你可以參考到

基本的nodejs+koa2開發方式，如基本的編寫介面、基本的mongodb操作、解決跨域、中介軟體編寫、檔案上傳、檔案操作等
基於nodejs的服務端專案如何在開發階段實現熱更新
如何在nodejs專案中使用ES語法，及如何使用pm2釋出專案
如何在阿里雲ECS上搭建nodejs部署環境
如何配置線上nginx，如何開啟gzip壓縮等
如何使用electron開發一款桌面客戶端

1.開發背景

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

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.關於線上部署

前端程式碼安裝依賴打包，預設開啟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文件，支援在瀏覽器開啟檢視，直接將文件放置在伺服器上，請求對應的靜態檔案即可實現檢視上傳的文件

實現步驟

新建一個專案
進入專案編輯頁面，填寫專案名稱，專案簡介等資訊
在編輯頁面上傳一個產品文件壓縮包（目前只支援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
複製程式碼

基於tp開發的線上教育系統
2019-05-11
基於thinkphp 5.1.5開發的一套B2B2C商城系統京東風格
2019-05-11
PHP
基於本人開發的許可權系統開發的企業站
2019-05-11
基於THINKPHP3.2 開發商城系統
2019-05-11
PHP
基於OT開發系統的專利問題
2020-04-04
基於adminlte的後臺管理系統開發
2019-03-03
基於Tp23開發的bug管理系統
2019-05-11
基於JSP開發的物流資訊管理系統
2020-11-13
JS
基於SSM開發的物業維修管理系統
2020-11-13
SSM
一套基於 .NET Core 開發的支付SDK集 - paylink
2023-10-06
鴻蒙系統應用開發之基於API6的藍芽開發
2023-01-30
鴻蒙API藍芽
基於區塊鏈的身份認證系統開發
2019-02-22
區塊鏈
基於SSM開發的企業人事管理系統
2020-11-12
SSM
基於SSM開發的健身俱樂部管理系統 JAVA MySQL
2020-11-12
SSMJavaMySql
.NET 8來了，那就開發一套基於.NET 8的快速開發框架吧，就叫Simple
2023-11-18
框架
將VR用於汽車開發，寶馬推出一套虛擬現實系統
2018-03-01
VR
開發了一個基於thinkphp6.0的快速開發後臺管理系統
2021-05-27
PHP
深夜發文。。。。求一套ERP系統，最好是PHP開發的，謝謝！
2021-07-08
PHP
基於 Laravel 的開源文件管理系統 Wizard 1.0.8 釋出了
2019-10-10
Laravel
用 Laravel 開發的一款文件管理系統
2019-05-06
Laravel
官方翻譯 | 有關基於文件的iOS應用開發
2019-02-01
iOS
記一次基於雲服務開發文件線上編輯系統的開發記錄，支援版本記錄、可增加批註。
2021-03-08
基於 Golang 開發的分散式定時任務管理系統
2019-09-06
Golang分散式
基於TP3.1開發的企業網站管理系統
2019-05-11
網站
基於thinkphp開發的wemall微信商城原始碼系統修復
2019-05-11
PHP原始碼
基於SSM開發的企業進存銷系統 JAVA MySQL
2020-10-27
SSMJavaMySql
基於Hyperf + Vue + Element 開發的管理系統（內建聊天模組）
2022-02-10
Vue
基於Linux系統的語音卡開發平臺(轉)
2007-08-11
Linux
go 基於gin-vue 構建一套mvc開發應用
2020-10-05
GoVueMVC
基於Android 4.4 開發的多視窗系統開放原始碼
2015-06-06
Android原始碼
基於javaEE的土地檔案管理系統的設計及開發
2020-12-20
Java
一整套基於Java開發的的區塊鏈系統
2022-07-18
Java區塊鏈
期貨量化合約交易系統開發多少錢一套？（期貨量化合約交易系統開發流程）
2023-04-23
玩轉iOS開發：iOS 11 新特性《基於文件管理的App》
2017-12-14
iOSAPP
為什麼要建立一套統一開發框架體系
2019-09-05
框架
分享一套基於bootstrap的後臺管理系統html模板
2019-05-11
bootHTML
基於 hyperf,vuetify,casbin 開發的前後端分離管理系統
2020-03-30
Vue後端
如何為「紐約時報」開發基於內容的推薦系統
2019-02-27

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

1.開發背景

2.開發理念

3.系統功能

產品文件釋出

UI設計稿釋出

內部文件釋出

4.使用的技術

server

client

5.專案程式碼說明

client

server 服務端程式碼

目錄結構說明

6.關於線上部署

7.釋出產品文件業務實現原理簡介

8.關於專案內使用的編輯器簡介

9.基於Electron打包為桌面客戶端

10.阿里雲ECS搭建nodejs開發環境簡介

安裝nvm 及 node

安裝pm2

安裝nginx

安裝mongodb

安裝zsh、oh-my-zsh

相關文章