前后端分离html ssm,vueElementAdmin

wueElementAdmin

介绍

这是一个vue+ssm的前后端分离的基础功能模版(前端部分)后端项目地址，后续还会不断完善功能、解决bug。

内置功能

用户管理：编辑用户基本信息。

角色管理：管理用户-菜单、用户-api接口、用户-工作流权限。

系统接口：根据业务代码自动生成相关的api接口文档。

工作流：整合了activiti6、可在线创建、编辑工作流，管理、查看流程任务。

演示图

安装

下载好代码后，进入到项目根目录

安装依赖：npm install

如果提示错误的话就执行：npm audit fix

运行：npm run dev

当后端代码也成功启动后系统就可以使用了,账号：admin 密码：zzxxssaaz

注意：

默认后端端口8077、前端端口8092

"模版管理"、"swagger接口文档"界面 是直接iframe后端的链接所以要使用这两个界面请到对应的界面修改url

需要更改地址/端口时：

在文件 .env.development 中 VUE_APP_BASE_API = 'http://xxx.xxx.xxx:xxxx/' 设置测试境的后端地址

在文件 .env.production 中 VUE_APP_BASE_API = 'http://xxx.xxx.xxx:xxxx/' 设置生产环境的后端地址

在文件 vue.config.js 中 proxy: 的 target: 'http://xxx.xxx.xxx:xxxx' 设置后端地址

在文件 vue.config.js 中 的 const port = process.env.port || process.env.npm_config_port || 8092 // dev port 设置前端端口

部署

一般部署

执行: npm run build:prod --report 将在vue项目根目录下产生一个新的dist文件

将这个文件压缩成zip包然后压缩到(nginx或apache)服务器上对应端口下的目录

docker部署

1.创建Dockerfile文件

并编辑内容:

FROM nginx

COPY dist/ /usr/share/nginx/html/

COPY nginx/default.conf /etc/nginx/conf.d/default.conf

2.创建nginx.conf文件

并编辑内容:

#user nobody;

worker_processes 1;

#error_log logs/error.log;

#error_log logs/error.log notice;

#error_log logs/error.log info;

#pid logs/nginx.pid;

events {

worker_connections 1024;

}

http {

include mime.types;

default_type application/octet-stream;

#access_log logs/access.log main;

sendfile on;

#tcp_nopush on;

#keepalive_timeout 0;

keepalive_timeout 65;

#gzip on;

client_max_body_size 20m;

server {

listen 8091;

server_name www.aaaaaa.com;

#charset koi8-r;

#access_log logs/host.access.log main;

location / {

root /usr/share/nginx/html;

index index.html index.htm;

try_files $uri $uri/ /index.html;

}

}

}

3.将以上两个文件放到vue项目根目录下

4.创建镜像

在项目根目录下执行命令：docker build -t vuenginxcontainer .

5.运行镜像

在项目根目录下执行命令：docker run -p 3000:80 -d --name vueApp  vuenginxcontainer

6.效果

在浏览器上输入ip地址+端口(3000)即可

例如：localhost:3000