开源表单系统部署文档
目前支持部署方式
- 通过jar包快速安装
- 通过docker文件快速安装
一、本地运行
开发环境本地运行 正式环境请参考部署教程！
-
项目运行所需环境：
创建一个tduck的数据库，并执行项目目录下doc/tduck.sql文件
-
启动后端服务
拉取后端代码
git clone https://gitee.com/TDuckApp/tduck-platform.git打开命令行，输入以下命令
mvn clean install -DskipTests cd tduck-platform/tduck-api mvn clean package -DskipTests java -Dfile.encoding=UTF-8 -jar tduck-api.jar -
启动前端项目
拉取前端代码
git clone https://gitee.com/TDuckApp/tduck-front.git -
打开命令行，输入以下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org cd tduck-front cnpm install cnpm run serve此时，浏览器打开，输入网址
http://localhost:8888, 进入页面
二、线上部署
#后端部署
mvn clean install -DskipTests
cd tduck-platform/tduck-api
mvn clean package -DskipTests
nohup java -Dfile.encoding=UTF-8 -jar tduck-api.jar &
nohup意为后台不挂断运行，与是否账号退出无关
#前端部署
拉取前端代码 进入tduck-front目录执行命令 试用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
构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 ***.js 、***.css、index.html 等静态文件。
通常情况下 dist 文件夹的静态文件发布到你的 nginx 或者静态服务器即可，其中的 index.html 是项目的入口页面。
#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 / {
# 静态文件地址
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;
}
}
}
三、后端项目配置
#必要配置
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: #数据库地址
username: #用户名
password: #密码
redis:
database: 1
host: #地址
port: #端口
password: # 密码（默认为空）
#文件存储配置
不配置文件存储系统中上传文件无法使用
oss:
ossType: #oss类型 0：阿里云 1：七牛云
endpoint:
accessKeyId:
accessKeySecret:
bucketName:
domain:
#微信公众号配置
不配置在使用微信公众号相关功能时会抛出异常(登录，微信通知，微信中分享信息定义等)，可以申请微信测试公众号
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
wx:
mp:
configs:
- appId:
secret:
token:
aesKey:
如图所示 把对应参数appId等配置到项目中，然后启动项目，本地可以使用内网穿透 微信接口配置信息 url填入 外网可访问地址/tduck-api/wx/mp/portal/你的appId token可自行定义 需要与项目中token相同
如果提示配置失败请仔细检查项目中参数是否配置正确
#邮箱配置
具体配置去对应邮箱客户端设置中查看 我这里以88完美邮箱为例
经测试 163等邮箱对发送次数上限比较低 目前88邮箱限制还比较低
mail:
host: smtp.88.com #邮箱服务提供者
username: tduck
password: 12345678
四、文件存储配置
项目目前支持 七牛云oss 阿里云oss 又拍云 本地存储方式存储文件
-
Oss存储（以七牛云为例）
oss: ossType: 1 # 0:阿里云 1：七牛云 2：又拍云 3：本地存储 endpoint: # 阿里云需配置 accessKeyId: # 平台认证参数 需要去对应oss提供平台获取 accessKeySecret: # 平台认证参数 需要去对应oss提供平台获取 bucketName: tduck-cloud #oss存储桶名 domain: https://qiniu.smileyi.top #oss可供访问的域名
2.本地存储 使用项目本身对外提供文件访问
oss:
ossType: 3 # 3表示使用本地存储
endpoint:
accessKeyId:
accessKeySecret:
bucketName:
domain: http://localhost:8999/tduck-api/u/ #对外访问的地址 使用后端项目部署的ip+端口 后面可以固定
upload-folder: C:\temp #文件存放的位置
access-path-pattern: /u/** # 文件访问路径前缀 这里更改domain也需要更改
五、前端项目配置
tduck-front 项目中 src目录下
- .env.development 开发环境配置
- .env.production 正式环境配置
# 页面标题
VUE_APP_TITLE = 填鸭测试环境
# 接口请求地址，会设置到 axios 的 baseURL 参数上
VUE_APP_API_ROOT = /tduck-api
# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
VUE_APP_DEBUG_TOOL =
# 高德地图key
VUE_APP_MAP_KEY = f2200337d0d08538e78729572749882d
# 微信功能开关 开启设置 ON，关闭设置 OFF
VUE_APP_WX = ON
六、接口安全配置
为了保证接口调用的安全性，防止恶意请求接口，项目对接口进行了签名验证，接口请求时对参数进行排序加密计算签名，后端对签名进行校验，如果校验失败，则提示非法请求。
项目配置如下
platform:
sign:
enable: true # 是否启用签名校验 关闭之后所有请求无需校验 本地调试方便可以设置false
secret: 916lWh2WMcbSWiHv # 签名秘钥
ignore-urls: # 签名校验忽略的地址
- /tduck-api/webjars/**
- /tduck-api/swagger/**
#实现部分
前端：/src/api/index.js
使用axios在请求前统一计算签名
签名具体算法如下
请求参数统一添加当前时间戳，然后根据key做升序
（ 签名秘钥（secret）+ 请求参数json字符串）做MD5然后转小写
拼接的秘钥和参数
916lWh2WMcbSWiHv{"current":"1","name":"","size":"10","timestamp":"1616904031441"}
md5之后
81deff67b73d2669f04e48f45faa20ac
后端请参考SignAuthFilter.java
如果正常情况下出现提示“非法访问，请检查请求信息” 请检查部署环境时间是否正常
七、图形验证码
#图形验证码能使敏感操作更安全，建议开启。
如需关闭请打开tduck-platform/tduck-api/src/main/resources/application.yml
aj:
captcha:
enable: true # 关闭验证码
#验证码拦截逻辑
tduck-api/src/main/java/com/tduck/cloud/api/web/filter/ValidateCodeFilter.java
public class ValidateCodeFilter implements Filter {
//需要进行滑动验证的接口
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;
}
// 判断是否携带滑动验证码验证
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);
}
}
八、微信功能
#微信配置比较麻烦 如果无需使用 需要关闭可以在如下配置关闭
.env.development # 本地环境配置 .env.production # 正式环境配置
# 微信功能开关 开启设置 ON，关闭设置 OFF
VUE_APP_WX = ON
