開(kāi)源表單系統(tǒng)部署文檔
目前支持部署方式
- 通過(guò)jar包快速安裝
- 通過(guò)docker文件快速安裝
一着帽、本地運(yùn)行
開(kāi)發(fā)環(huán)境本地運(yùn)行 正式環(huán)境請(qǐng)參考部署教程！
-
項(xiàng)目運(yùn)行所需環(huán)境：
創(chuàng)建一個(gè)tduck的數(shù)據(jù)庫(kù)祭芦，并執(zhí)行項(xiàng)目目錄下doc/tduck.sql文件
-
啟動(dòng)后端服務(wù)
拉取后端代碼
git clone https://gitee.com/TDuckApp/tduck-platform.git打開(kāi)命令行筷笨，輸入以下命令
mvn clean install -DskipTests cd tduck-platform/tduck-api mvn clean package -DskipTests java -Dfile.encoding=UTF-8 -jar tduck-api.jar -
啟動(dòng)前端項(xiàng)目
拉取前端代碼
git clone https://gitee.com/TDuckApp/tduck-front.git -
打開(kāi)命令行，輸入以下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org cd tduck-front cnpm install cnpm run serve此時(shí)龟劲，瀏覽器打開(kāi)胃夏，輸入網(wǎng)址
http://localhost:8888, 進(jìn)入頁(yè)面
二、線上部署
#后端部署
mvn clean install -DskipTests
cd tduck-platform/tduck-api
mvn clean package -DskipTests
nohup java -Dfile.encoding=UTF-8 -jar tduck-api.jar &
nohup意為后臺(tái)不掛斷運(yùn)行昌跌，與是否賬號(hào)退出無(wú)關(guān)
#前端部署
拉取前端代碼 進(jìn)入tduck-front目錄執(zhí)行命令 試用cnpm或者yarn都可以 推薦使用yarn yarn命令
npm install -g yarn
yarn install
yarn run build
cnpm 命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install
cnpm run build
構(gòu)建打包成功之后仰禀，會(huì)在根目錄生成 dist 文件夾，里面就是構(gòu)建打包好的文件蚕愤，通常是 ***.js 答恶、***.css、index.html 等靜態(tài)文件萍诱。
通常情況下 dist 文件夾的靜態(tài)文件發(fā)布到你的 nginx 或者靜態(tài)服務(wù)器即可悬嗓，其中的 index.html 是項(xiàng)目的入口頁(yè)面。
#nginx配置
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
# 靜態(tài)文件地址
root /usr/share/nginx/html/tduck;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
location /tduck-api/{
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 改為你后端接口地址 http://xxxx/tduck-api/
proxy_pass http://localhost:8999/tduck-api/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
三裕坊、后端項(xiàng)目配置
#必要配置
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: #數(shù)據(jù)庫(kù)地址
username: #用戶名
password: #密碼
redis:
database: 1
host: #地址
port: #端口
password: # 密碼（默認(rèn)為空）
#文件存儲(chǔ)配置
不配置文件存儲(chǔ)系統(tǒng)中上傳文件無(wú)法使用
oss:
ossType: #oss類(lèi)型 0：阿里云 1：七牛云
endpoint:
accessKeyId:
accessKeySecret:
bucketName:
domain:
#微信公眾號(hào)配置
不配置在使用微信公眾號(hào)相關(guān)功能時(shí)會(huì)拋出異常(登錄包竹，微信通知，微信中分享信息定義等)碍庵，可以申請(qǐng)微信測(cè)試公眾號(hào)
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
wx:
mp:
configs:
- appId:
secret:
token:
aesKey:
如圖所示 把對(duì)應(yīng)參數(shù)appId等配置到項(xiàng)目中映企，然后啟動(dòng)項(xiàng)目，本地可以使用內(nèi)網(wǎng)穿透 微信接口配置信息 url填入 外網(wǎng)可訪問(wèn)地址/tduck-api/wx/mp/portal/你的appId token可自行定義 需要與項(xiàng)目中token相同
如果提示配置失敗請(qǐng)仔細(xì)檢查項(xiàng)目中參數(shù)是否配置正確
#郵箱配置
具體配置去對(duì)應(yīng)郵箱客戶端設(shè)置中查看 我這里以88完美郵箱為例
經(jīng)測(cè)試 163等郵箱對(duì)發(fā)送次數(shù)上限比較低 目前88郵箱限制還比較低
mail:
host: smtp.88.com #郵箱服務(wù)提供者
username: tduck
password: 12345678
四静浴、文件存儲(chǔ)配置
項(xiàng)目目前支持 七牛云oss 阿里云oss 又拍云 本地存儲(chǔ)方式存儲(chǔ)文件
-
Oss存儲(chǔ)（以七牛云為例）
oss: ossType: 1 # 0:阿里云 1：七牛云 2：又拍云 3：本地存儲(chǔ) endpoint: # 阿里云需配置 accessKeyId: # 平臺(tái)認(rèn)證參數(shù) 需要去對(duì)應(yīng)oss提供平臺(tái)獲取 accessKeySecret: # 平臺(tái)認(rèn)證參數(shù) 需要去對(duì)應(yīng)oss提供平臺(tái)獲取 bucketName: tduck-cloud #oss存儲(chǔ)桶名 domain: https://qiniu.smileyi.top #oss可供訪問(wèn)的域名
2.本地存儲(chǔ) 使用項(xiàng)目本身對(duì)外提供文件訪問(wèn)
oss:
ossType: 3 # 3表示使用本地存儲(chǔ)
endpoint:
accessKeyId:
accessKeySecret:
bucketName:
domain: http://localhost:8999/tduck-api/u/ #對(duì)外訪問(wèn)的地址 使用后端項(xiàng)目部署的ip+端口 后面可以固定
upload-folder: C:\temp #文件存放的位置
access-path-pattern: /u/** # 文件訪問(wèn)路徑前綴 這里更改domain也需要更改
五堰氓、前端項(xiàng)目配置
tduck-front 項(xiàng)目中 src目錄下
- .env.development 開(kāi)發(fā)環(huán)境配置
- .env.production 正式環(huán)境配置
# 頁(yè)面標(biāo)題
VUE_APP_TITLE = 填鴨測(cè)試環(huán)境
# 接口請(qǐng)求地址，會(huì)設(shè)置到 axios 的 baseURL 參數(shù)上
VUE_APP_API_ROOT = /tduck-api
# 調(diào)試工具苹享，可設(shè)置 eruda 或 vconsole双絮，如果不需要開(kāi)啟則留空
VUE_APP_DEBUG_TOOL =
# 高德地圖key
VUE_APP_MAP_KEY = f2200337d0d08538e78729572749882d
# 微信功能開(kāi)關(guān) 開(kāi)啟設(shè)置 ON浴麻，關(guān)閉設(shè)置 OFF
VUE_APP_WX = ON
六、接口安全配置
為了保證接口調(diào)用的安全性囤攀，防止惡意請(qǐng)求接口软免，項(xiàng)目對(duì)接口進(jìn)行了簽名驗(yàn)證，接口請(qǐng)求時(shí)對(duì)參數(shù)進(jìn)行排序加密計(jì)算簽名焚挠，后端對(duì)簽名進(jìn)行校驗(yàn)膏萧，如果校驗(yàn)失敗，則提示非法請(qǐng)求蝌衔。
項(xiàng)目配置如下
platform:
sign:
enable: true # 是否啟用簽名校驗(yàn) 關(guān)閉之后所有請(qǐng)求無(wú)需校驗(yàn) 本地調(diào)試方便可以設(shè)置false
secret: 916lWh2WMcbSWiHv # 簽名秘鑰
ignore-urls: # 簽名校驗(yàn)忽略的地址
- /tduck-api/webjars/**
- /tduck-api/swagger/**
#實(shí)現(xiàn)部分
前端：/src/api/index.js
使用axios在請(qǐng)求前統(tǒng)一計(jì)算簽名
簽名具體算法如下
請(qǐng)求參數(shù)統(tǒng)一添加當(dāng)前時(shí)間戳榛泛，然后根據(jù)key做升序
（ 簽名秘鑰（secret）+ 請(qǐng)求參數(shù)json字符串）做MD5然后轉(zhuǎn)小寫(xiě)
拼接的秘鑰和參數(shù)
916lWh2WMcbSWiHv{"current":"1","name":"","size":"10","timestamp":"1616904031441"}
md5之后
81deff67b73d2669f04e48f45faa20ac
后端請(qǐng)參考SignAuthFilter.java
如果正常情況下出現(xiàn)提示“非法訪問(wèn)，請(qǐng)檢查請(qǐng)求信息” 請(qǐng)檢查部署環(huán)境時(shí)間是否正常
七噩斟、圖形驗(yàn)證碼
#圖形驗(yàn)證碼能使敏感操作更安全曹锨，建議開(kāi)啟。
如需關(guān)閉請(qǐng)打開(kāi)tduck-platform/tduck-api/src/main/resources/application.yml
aj:
captcha:
enable: true # 關(guān)閉驗(yàn)證碼
#驗(yàn)證碼攔截邏輯
tduck-api/src/main/java/com/tduck/cloud/api/web/filter/ValidateCodeFilter.java
public class ValidateCodeFilter implements Filter {
//需要進(jìn)行滑動(dòng)驗(yàn)證的接口
private List<String> validateUrls = Lists.newArrayList(
"/login/account",
"/retrieve/password/email",
"/retrieve/password/phone/code");
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException {
HttpServletRequest httpServletRequest = (HttpServletRequest) request;
// 如果不是需要攔截的 則不攔截
if (!StrUtil.containsAnyIgnoreCase(httpServletRequest.getRequestURI(),
validateUrls.toArray(new String[validateUrls.size()]))) {
filterChain.doFilter(request, response);
return;
}
// 判斷是否攜帶滑動(dòng)驗(yàn)證碼驗(yàn)證
String code = request.getParameter("slideCode");
if (StrUtil.isBlank(code)) {
ResponseUtils.outJson(response, Result.failed(ResponseCodeConstants.NEED_VERIFICATION, ""));
return;
}
CaptchaService captchaService = SpringContextUtils.getBean(CaptchaService.class);
CaptchaVO vo = new CaptchaVO();
vo.setCaptchaVerification(code);
if (!captchaService.verification(vo).isSuccess()) {
ResponseUtils.outJson(response, Result.failed(ResponseCodeConstants.FAIL, ResponseCodeConstants.VALIDATE_CODE_FAIL_MSG));
return;
}
filterChain.doFilter(request, response);
}
}
八剃允、微信功能
#微信配置比較麻煩 如果無(wú)需使用 需要關(guān)閉可以在如下配置關(guān)閉
.env.development # 本地環(huán)境配置 .env.production # 正式環(huán)境配置
# 微信功能開(kāi)關(guān) 開(kāi)啟設(shè)置 ON沛简，關(guān)閉設(shè)置 OFF
VUE_APP_WX = ON
官網(wǎng)地址：https://www.tduckcloud.com
