SSM 单体框架 - 前端开发：用户权限控制，Nginx 和项目部署与发布
用户权限控制
用户登录
用户登录界面，需要输入手机号密码
登录组件 login.vue
登录按钮：
<el-button type="primary" :loading="loading" @click="submit('login-form')">{{ loading ? 'Loading...' : '登录' }}</el-button>
提交表的方法：
// 提交登录表单
submit(ref) {
// 校验
this.$refs[ref].validate(valid => {
if (!valid) return false;
this.error = null;
this.loading = true;
// 发送登录请求
// 调用 store 仓库的 actions.js 中的 createToken 方法
this.$store.dispatch("createToken", this.model)
.then(res => {
if (res.state !== 200) {
this.error = {
title: 'Error occurred',
message: '帐号错误或密码错误'
};
this.loading = false;
return;
}
this.$router.replace({ path: this.$route.query.redirect || "/" });
this.loading = false;
}).catch(err => {
this.loading = false;
});
});
}
actions.js 中的 createToken 方法发送登录请求，进行登录的代码
/**
* 创建新的客户端令牌
*/
createToken: async ({ commit }, { username, password }) => {
// 请求后台登录接口
const res = await TokenService.userLogin({
phone: username.trim(),
password: password.trim()
});
console.log(res);
// 判断结果不等于 200，登录失败
if (res.state !== 200) {
return Promise.resolve(res);
}
// 获取到 content
const result = res.content;
// 将 token 保存
commit(CHANGE_SESSION, {
accessToken: result.access_token
});
return res;
},
actions.js 导入了 TokenService
import { TokenService, UserService } from "../services";
TokenService 来自 services/tokens.js
/**
* Tokens service
*/
import { Serialize } from '@/utils/index'
import { PostRequest } from './common'
// 登录请求 async ES6 语法, 作用: 发送异步请求
export const userLogin = async (data) => {
// await 表示等待接收返回的数据
return await PostRequest(`${process.env.VUE_APP_API_FAKE}/user/login?${Serialize(data)}`)
}
// 更新 token
export const fetchUpdateToken = async (refreshToken) => {
await PostRequest(`${process.env.VUE_APP_API_FAKE}/user/refresh_token?refreshtoken=${refreshToken}`)
}
动态获取用户菜单
流程分析
1) 在登录成功后，会立即发送第二个请求来获取用户的菜单权限列表
GET /ssm_web/user/getUserPermissions
2) 在 actions.js 中完成请求后台接口获取数据的操作
/**
* 获取当前登录用户权限
*/
getUserPermissions: async ({ commit }) => {
// 1.请求后台 获取当前用户的权限
const res = await UserService.getUserPermissions();
// 2.判断
if (!res.success) {
// 获取失败直接返回 false
return res.success;
}
// 3.获取数据成功，取出菜单与资源列表
const { menuList, resourceList } = res.content;
// 4.下面的代码就是在生成树形结构的菜单
let menus = [];
const formatMenu = treeData => {
if (treeData.length > 0) {
return treeData.map(item => formatMenu(item));
}
const result = {};
// shown 等于表示可以显示，将内容保存
if (treeData.shown == 1) {
result.id = treeData.id;
result.text = treeData.name;
result.label = treeData.name;
result.name = treeData.href;
result.icon = treeData.icon;
result.shown = treeData.shown;
} else {
return "";
}
// 获取子节点
if (treeData.subMenuList) {
result.children = [];
treeData.subMenuList.forEach(item => {
formatMenu(item) && result.children.push(formatMenu(item));
});
if (result.children.length === 0) {
delete result.children;
}
}
return result;
};
const memusMap = {};
const splapMenu = treeData => {
if (treeData.length > 0) {
return treeData.map(item => splapMenu(item));
}
const result = {};
result.id = treeData.id;
result.text = treeData.name;
result.label = treeData.name;
result.name = treeData.href;
result.icon = treeData.icon;
result.shown = treeData.shown;
result.name && (memusMap[result.name] = result);
if (treeData.subMenuList) {
result.children = [];
treeData.subMenuList.forEach(item => {
result.children.push(splapMenu(item));
});
}
return result;
};
splapMenu(menuList);
menus = formatMenu(menuList);
commit(CHANGE_SIDERBAR_MENU, menus);
return { menus, resourceList, menuList, memusMap };
},
验证 Token
导航守卫
在执行路由之前先执行的一些钩子函数，比如验证用户是否有权限之类的操作
1) plugins/authorize.js 中配置了导航守卫来对用户的登录进行限制
// 导航守卫 to 要访问的 url, from 从哪个路径跳转过来, next() 放行
router.beforeHooks.unshift((to, from, next) => {
// 不需要验证直接放行
if (!to.meta.requireAuth) return next();
// 需要验证 token,调用 store 中的 checkToken 方法
store.dispatch("checkToken").then(valid => {
// authorized
if (valid) {
// 发送请求到后台，在后台再次判断 token 是否存在
store.dispatch("getUserPermissions").then(res => {
if (!res) {
// 失效清除 token
store.dispatch("deleteToken");
// 跳转到登录页面
return next({ name: "ToLogin" });
}
// token 正确, 导航到对应的页面
const { memusMap } = res;
if (memusMap.Courses && to.name === "Home") {
return next();
} else if (memusMap[to.name]) {
return next();
} else if (Object.keys(memusMap).length > 0) {
return next({ name: memusMap[Object.keys(memusMap)[0]].name });
} else {
next({ name: "PermissionDenied" });
}
});
return next();
}
// unauthorized
console.log("Unauthorized");
// 用户没有登录跳转到登录页面
next({ name: "Login", query: { redirect: to.fullPath } });
});
});
2) 在 actions.js 中检查 token 是否可用
checkToken: async ({ commit, getters }) => {
// 取出 token
const token = getters.session.accessToken;
if (!token) {
// 不可用
return Promise.resolve(false);
}
return Promise.resolve(true);
},
用户角色分配
流程分析
Users.vue
点击分配角色按钮
<el-button size="mini" type="text" @click="handleSelectRole(scope.row)">分配角色</el-button>
分配角色对话框
代码部分
显示对话框
// 分配角色
handleSelectRole(row) {
// 保存用户 ID
this.allocAdminId = row.id;
// 获取角色列表
this.getRoleList();
// 获取当前用户拥有的角色
this.getUserRoleById(row.id);
// 打开对话框
this.allocDialogVisible = true;
},
获取角色列表，在下拉菜单中展示
getRoleList() {
return axios
.post("/role/findAllRole", { name: "" })
.then((res) => {
this.allRoleList = res.data.content.map((item) => {
return { id: item.id, name: item.name };
});
}).catch((err) => {});
},
获取当前用户拥有的角色，回显默认选中
getUserRoleById(id) {
axios.get("/user/findUserRoleById?id=" + id).then(res => {
const allocRoleList = res.data.content;
this.allocRoleIds = [];
if (allocRoleList != null && allocRoleList.length > 0) {
for (let i = 0; i < allocRoleList.length; i++) {
this.allocRoleIds.push(allocRoleList[i].id);
}
}
});
},
为用户分配角色
handleAllocDialogConfirm() {
const params = {
userId: this.allocAdminId,
roleIdList: this.allocRoleIds
};
axios.post("/user/userContextRole", params).then(res => {
this.allocDialogVisible = false;
});
},
Nginx
What is Nginx?
Nginx 是一款轻量级的 Web 服务器/反向代理服务器及电子邮件（IMAP / POP3）代理服务器，并在一个BSD-like 协议下发行。
其特点是占有内存少，并发能力强，事实上 Nginx 的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用 Nginx 网站用户有：新浪、网易、 腾讯等。
优点：
- 占用内存少，并发能力强
- Nginx 专为性能优化而开发，在高连接并发的情况下，能够支持高达 50000 个并发连接数的响应
- Nginx 支持热部署，可以在不间断服务的情况下，对软件版本进行升级
应用场景
- HTTP 服务器：Nginx 是一个 http 服务可以独立提供 http 服务，可以做网页静态服务器。
- 虚拟主机：可以实现在一台服务器虚拟出多个网站，例如个人网站使用的虚拟主机。
- 反向代理、负载均衡：当网站的访问量达到一定程度后，单台服务器不能满足用户的请求时，需要用多台服务器集群可以使用 nginx 做反向代理；并且多台服务器可以平均分担负载，不会因为某台服务器负载高宕机而某台服务器闲置的情况。
Nginx 安装
官方网站：http://nginx.org/
版本：1.17.8
Nginx 在 Linux 下安装，只提供了源代码，所以需要进行编译
安装环境配置
1）因为 Nginx 是 C 语言编写的，所以需要配置 C 语言编译环境（要在联网状态下安装）。
需要安装 gcc 的环境，执行命令:
yum install gcc-c++
如果执行命令出现这样的提示：
Another app is currently holding the yum lock; waiting for it to exit...
解决办法 - 问题是 yum 在锁定状态中，强制关掉 yum 进程即可：
rm -f /var/run/yum.pid
2）第三方的开发包，在编译之前需要安装这些第三方包。
PCRE
Nginx 的 http 模块使用 pcre 来解析正则表达式，所以需要在 linux 上安装 pcre 库
yum install -y pcre pcre-devel
zlib
Nginx 使用 zlib 对 http 包的内容进行 gzip，所以需要在 linux 上安装 zlib 库。
yum install -y zlib zlib-devel
OpenSSL
OpenSSL 是一个强大的安全套接字层密码库，nginx 不仅支持 http 协议，还支持 https，所以需要在 linux 安装 openSSL 库。
yum install -y openssl openssl-devel
安装 Nginx 步骤
1）将 Nginx 的源码包上传到 Linux
2）解压 Nginx
tar -xvf nginx-1.17.8.tar
3）进入到解压之后的目录 nginx-1.17.8
4）执行命令 configure 生成 Mikefile 文件
./configure
--prefix=/usr/local/nginx
--pid-path=/var/run/nginx/nginx.pid
--lock-path=/var/lock/nginx.lock
--error-log-path=/var/log/nginx/error.log
--http-log-path=/var/log/nginx/access.log
--with-http_gzip_static_module
--http-client-body-temp-path=/var/temp/nginx/client
--http-proxy-temp-path=/var/temp/nginx/proxy
--http-fastcgi-temp-path=/var/temp/nginx/fastcgi
--http-uwsgi-temp-path=/var/temp/nginx/uwsgi
--http-scgi-temp-path=/var/temp/nginx/scgi
执行命令后生成了 MakeFile 文件
5）创建临时文件目录
mkdir /var/temp/nginx/client -p
6）执行 make 命令进行编译
make
7）安装
make install
启动并访问 Nginx
1）进入到 nginx 安装目录
cd /usr/local/nginx/
2）进入到 sbin 目录执行 nginx 命令
# 启动
./nginx
# 关闭
./nginx -s stop
# 查看进程
ps aux | grep nginx
3）通过浏览器进行访问，默认端口 80（注意放行防火墙端口）
# 查看已经开放的端口：
firewall-cmd --list-ports
# 开启端口
firewall-cmd --zone=public --add-port=80/tcp --permanent
# 重启防火墙
firewall-cmd --reload
配置虚拟主机
虚拟主机指的是在一台服务器中，使用 Nginx 来配置多个网站。
区分不同的网站：
- 端口不同
- 域名不同
通过端口区分不同的虚拟主机
Nginx 配置文件
1）Nginx 配置文件的位置，nginx.conf 就是 Nginx 的配置文件
cd /usr/local/nginx/nginx.conf
2）Nginx 核心配置文件说明
# work 的进程数，默认为 1
worker_processes 1;
# 配置影响 nginx 服务器与用户的网络连接
events {
# 单个 work 最大并发连接数
worker_connections 1024;
}
# http 块是配置最频繁的部分，可以嵌套多个 server，配置代理、缓存、日志定义等绝大多数功能
http {
# 引入 mime 类型定义文件
include mime.types;
default_type application/octet-stream;
sendfile on;
# 超时时间
keepalive_timeout 65;
# server 配置虚拟主机的相关参数，可以有多个，一个 server 就是一个虚拟主机
server {
# 监听的端口
listen 80;
# 监听地址
server_name localhost;
# 默认请求配置
location / {
# 默认网站根目录
root html;
# 欢迎页
index index.html index.htm;
}
# 错误提示页面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
使用 Notpad++ 连接 Linux
使用 notepad++ 来编辑 linux 中文件的批量文字，会比直接在 linux 中操作方便快捷很多
1）Notepad 插件中安装 NppFTP
2）打开 NppFTP
3）选择设置
4）配置连接信息
5）连接
配置 nginx.conf
1）使用 Notpad++ 在 nginx.conf 中添加一个新的 server
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
# tcp_nopush on;
# keepalive_timeout 0;
keepalive_timeout 65;
# gzip on;
server {
listen 80;
server_name localhost;
location / {
root html;
index index.html index.htm;
}
}
# 配置新的 server
server {
# 修改端口，防火墙需要开放 81 端口
listen 81;
server_name localhost;
location / {
# 重新制定一个目录
root html81;
index index.html index.htm;
}
}
}
2）复制一份 html 目录
cp -r html html81
3）重新加载配置文件
sbin/nginx -s reload
4）访问
# 访问第一个 server
http://192.168.52.100
# 访问第二个 server
http://192.168.52.100:81/
通过域名区分不同的虚拟主机
什么是域名
网址就是域名，是一个网站的地址，由域名提供商提供，一般需要购买。
域名级别
一级域名
.com.org.cn
二级域名 - 在一级域名前加一级
baidu.comzhihu.com
三级域名
www.baidu.comimage.baidu.com
域名绑定
- 一个域名对应一个 ip 地址，一个 ip 地址可以被多个域名绑定
- 通过 DNS 服务器去解析域名
配置域名映射
1）本地测试可以修改 hosts 文件，修改 window 的 hosts 文件：
C:WindowsSystem32driversetc
可以配置域名和 ip 的映射关系，如果 hosts 文件中配置了域名和 ip 的对应关系，不需要走 dns 服务器。
配置一下 nginx 的映射
192.168.186.128 www.test.com
2）使用 SwitchHosts 工具修改 hosts
配置 IP 与域名的映射：
# My hosts edu
192.168.186.128 www.t1.com
192.168.186.128 www.t2.com
配置 nginx.conf
通过域名区分虚拟主机
server {
listen 80;
server_name www.t1.com;
location / {
root html-t1;
index index.html index.htm;
}
}
server {
listen 80;
server_name www.t2.com;
location / {
root html-t2;
index index.html index.htm;
}
}
创建 html-t1 和 html-t2 目录
cp -r html html-t1
cp -r html html-t2
修改一下 index.html 并刷新
sbin/nginx -s reload
访问 www.t1.com 和 www.t2.com
虽然只有一台服务器，但是这台服务器上运行着多个网站，访问不同的域名就可访问到不同的网站内容
反向代理
什么是代理
代理其实就是一个中介，A 和 B 本来可以直连，中间插入一个 C，C 就是中介。刚开始的时候，代理多数是帮助内网 client 访问外网 server 用的
客户机在发送请求时，不会直接发送给目的主机，而是先发送给代理服务器，代理服务接受客户机请求之后，再向主机发出，并接收目的主机返回的数据再发送给客户机。
正向代理
比如国内访问谷歌，直接访问访问不到，这里就可以通过一个正向代理服务器，先将请求发送到到代理服务器；代理服务器能够访问谷歌，这样由代理去谷歌取到返回数据，从而能访问谷歌了。
正向代理代理的是客户端，服务端不知道实际发出请求的客户端。
客户端和代理成为一个整体与服务端进行交互。
反向代理
反向代理和正向代理的区别就是：正向代理代理客户端，反向代理代理服务器。
反向代理是指用代理服务器接收客户端的请求，然后将请求转发给网站内部应用服务器，并将从服务器上得到的结果返回给客户端。
服务器和代理成为一个整体与客户端进行交互。
Nginx 实现反向代理
Nginx 作为反向代理服务器安装在服务端，Nginx 的功能就是把请求转发给后面的应用服务器（如 Tomcat）。
配置步骤：
第一步 - 简单的使用 2 个 tomcat 实例模拟两台 http 服务器，分别将 tomcat 的端口改为8080 和 8081
第二步 - 启动两个 tomcat
./bin/startup.sh
# 访问两个 tomcat
http://192.168.186.128:8080/
http://192.168.186.128:8081/
第三步：反向代理服务器的配置
# 反向代理配置
# upstream 中的 server 是真正处理请求的应用服务器地址
upstream renda1 {
# 用 server 定义 HTTP 地址
server 192.168.186.128:8080;
}
server {
listen 80;
server_name www.renda1.com;
location / {
# 利用 proxy_pass 可以将请求代理到 upstream 命名的 HTTP 服务
proxy_pass http://renda1;
index index.html index.htm;
}
}
upstream renda2 {
# 用 server 定义 HTTP 地址
server 192.168.186.128:8081;
}
server {
listen 80;
server_name www.renda2.com;
location / {
# 转发到的地址
proxy_pass http://renda2;
index index.html index.htm;
}
}
第四步 - nginx 重新加载配置文件
nginx -s reload
第五步 - 配置域名，在 hosts 文件中添加域名和 ip 的映射关系
# My hosts edu
192.168.186.128 www.renda1.com
192.168.186.128 www.renda2.com
通过浏览器输入域名，访问 Nginx 代理服务器，Nginx 根据域名将请求转发给对应的目标服务器，作为用户看到的是服务器的响应结果页面，在整个过程中目标服务器相对于客户端是不可见的，服务端向外暴露的就是 Nginx 的地址。
负载均衡
什么是负载均衡
当一个请求发送过来的时候，Nginx 作为反向代理服务器，会根据请求找到后面的目标服务器去处理请求，这就是反向代理。
如果目标服务器有多台的话，找哪一个服务器去处理当前请求呢 ? 这个合理分配请求到服务器的过程就叫做负载均衡。
为什么用负载均衡
当系统面临大量用户访问，负载过高的时候，通常会使用增加服务器数量来进行横向扩展；负载均衡主要是为了分担访问量，将请求合理分发给不同的服务器，避免临时的网络堵塞。
负载均衡策略
轮询 - polling
默认策略，每个请求按照时间顺序逐一分配到不同的服务器，如果某一个服务器下线，能自动剔除。
# 负载均衡
upstream rendaServer{
# 用 server 定义 HTTP 地址
server 192.168.186.128:8080;
server 192.168.186.128:8081;
}
server {
listen 80;
server_name www.renda.com;
location / {
# 利用 proxy_ pass 可以将请求代理到 upstream 命名的 HTTP 服务
proxy_pass http://rendaServer;
index index.html index.htm;
}
}
权重 - weight
可以根据服务器的实际情况调整服务器权重；权重越高分配的请求越多，权重越低，请求越少，默认是都是 1。
# 负载均衡
upstream rendaServer{
# 用 server 定义 HTTP 地址
server 192.168.186.128:8080 weight=1;
server 192.168.186.128:8081 weight=10;
}
server {
listen 80;
server_name www.renda.com;
location / {
# 利用 proxy_ pass 可以将请求代理到 upstream 命名的 HTTP 服务
proxy_pass http://rendaServer;
index index.html index.htm;
}
}
项目部署与发布
后台项目部署
Linux 环境准备
1) 需要安装的软件
- JDK 11
- Tomcat 8.5
- MySQL 5.7
- Nginx 1.17.8
2) 防火墙开放对应的端口号：80、8080、3306
3) 使用 SQLYog 连接 Linux 上的 MySQL，导入 SQL 脚本创建项目所需的数据库
项目打包发布
在平常开发的过程中，不同的环境中项目的相关配置也会有相关的不同；在不同的环境中部署就要手动修改为对应环境的配置，这样比较麻烦而且也很容易出错。
接下来就通过 maven 的相关配置来在打包时指定各个环境对应配置文件
修改 ssm_dao 子模块
resources 目录中 创建 filter 文件夹；
创建配置文件
在 ssm_dao 的 src/main/resources/filter 目录中，创建 development.properties，product.properties 两个文件。
development.properties 是开发配置内容：
jdbc.driverClassName=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql:///ssm_lagou_edu?characterEncoding=utf8&useSSL=false
jdbc.username=root
jdbc.password=password
product.properties 是正式配置内容：
jdbc.driverClassName=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://192.168.186.128:3306/ssm_lagou_edu?characterEncoding=utf8&useSSL=false
jdbc.username=root
jdbc.password=RendaZhang@666
配置 `jdbc.properties` 文件
jdbc.properties 中的内容从上面两个文件中获取
jdbc.driverClassName=${jdbc.driverClassName}
jdbc.url=${jdbc.url}
jdbc.username=${jdbc.username}
jdbc.password=${jdbc.password}
配置 `dao` 模块的的 `pom.xml` 文件
添加如下配置
<profiles>
<profile>
<id>dev</id>
<properties>
<!-- 测试环境 -->
<env>development</env>
</properties>
<activation>
<activeByDefault>true</activeByDefault>
</activation>
</profile>
<profile>
<id>prod</id>
<properties>
<!-- 正式环境 -->
<env>product</env>
</properties>
</profile>
</profiles>
<build>
<finalName>web</finalName>
<filters>
<filter>src/main/resources/filter/${env}.properties</filter>
</filters>
<resources>
<resource>
<directory>src/main/resources</directory>
<excludes>
<exclude>filter/*.properties</exclude>
</excludes>
<filtering>true</filtering>
</resource>
</resources>
</build>
`profile` 说明
profile 可以定义一系列的配置信息，然后指定其激活条件。这样就可以定义多个 profile，然后每个 profile 对应不同的激活条件和配置信息，从而达到不同环境使用不同配置信息的效果。
默认启用的是 dev 环境配置：
<profiles>
<profile>
<id>dev</id>
<properties>
<!-- 开发环境 -->
<env>development</env>
</properties>
<activation>
<activeByDefault>true</activeByDefault>
</activation>
</profile>
<profile>
<id>prod</id>
<properties>
<!-- 正式环境 -->
<env>product</env>
</properties>
</profile>
</profiles>
指定数据库配置文件路径，此路径可以自定义：
<filters>
<filter>src/main/resources/filter/${env}.properties</filter>
</filters>
指定资源目录路径：
<resources>
<resource>
<directory>src/main/resources</directory>
<!-- 资源根目录排除各环境的配置 -->
<excludes>
<exclude>filter/*.properties</exclude>
</excludes>
<filtering>true</filtering>
</resource>
</resources>
打包
命令打包
# 打本地包
mvn -Pdev install
# 或者 (因为本例 activeByDefault 配的为 true)
mvn install
# 打产品包
mvn -Pprod install
# 结果：src/main/resources/config/jdbc.properties 根据 mvn -P 参数决定值
使用 idea 打包：先选择 Maven 下的 Profiles 的打包方式，然后选择 Maven 生命周期下的 package 完成打包。
打包后的文件
使用生产环境的配置文件进行打包
打开 ssm-web 模块下的 war 包会发现其他子模块都已经被打成 jar 包，放到了 lib 文件夹下。
发布
修改一下项目名称为 ssm_web.war
上传到虚拟机中的 tomcat 的 webapps 中启动测试
在部署 tomcat 的 webapps 目录下创建一个 upload 文件夹，来保存图片：
mkdir upload
访问：
http://192.168.186.128:8080/ssm_web/user/login?phone=15321919577&password=123456
获取到响应的 JSON，说明发布成功
前端项目部署
修改配置文件
生产环境配置文件 .env.production 配置后台 URL
VUE_APP_NAME = Edu Boss
VUE_APP_TITLE = Lagou Edu Boss (Dev)
VUE_APP_STORAGE_PREFIX = lagou_edu_boss_dev
# 开发
# VUE_APP_API_FAKE = http://localhost:8080/ssm_web
# VUE_APP_API_BASE = http://localhost:8080/ssm_web
# 生产
VUE_APP_API_FAKE = http://192.168.186.128:8080/ssm_web
VUE_APP_API_BASE = http://192.168.186.128:8080/ssm_web
自定义配置文件，配置打包相关信息
将下面内容拷贝到 vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "/edu-boss/" : "/",
indexPath: "index.html",
assetsDir: "static",
lintOnSave: process.env.NODE_ENV !== "production",
productionSourceMap: false,
devServer: {
open: true,
port: 8081
}
};
打包测试操作
打包命令
npm run build
在项目下会生成一个 dist 目录
在本地 tomcat 的 webapps 目录下创建一个 edu-boss 文件夹，将 dist 目录中的文件拷贝到里面
启动本地 tomcat，访问前端项目路径为：
http://localhost:8081/edu-boss/
发布前端项目
1）解压一个新的 tomcat，修改端口号
# 解压
tar xvf apache-tomcat-8.5.50.tar
# 改名
mv apache-tomcat-8.5.50 ui-tomcat
# 修改三个端口号
cd ui-tomcat/conf/
vim server.xml
2）上传前端项目到 webapps
# 上传 edu-boss.zip 并解压
unzip edu-boss.zip
# 删除 edu-boss.zip
rm -rf edu-boss.zip
3）运行前端项目并访问
./bin/startup.sh
# 动态查看日志
tail -f logs/catalina.out
# 访问
http://192.168.186.128:8081/edu-boss/
修改 Tomcat 默认访问项目
使用 notepad++ 打开前端 tomcat 的配置文件 server.xml，找到 Host 标签
在 Host 标签内加入：
<Context path="" docBase="edu-boss" reloadable="true" debug="0" privileged="true">
</Context>
重新启动并访问前端项目这个时候只需要直接访问 8081 即可
http://192.168.186.128:8081/
配置反向代理
1）使用 notepad++ 打开 nginx 的配置文件 nginx.conf
2）配置反向代理
# 配置 ssm 项目反向代理
upstream rendaedu {
server 192.168.186.128:8081;
}
server {
listen 80;
server_name www.edu-boss.com;
location / {
# 转发的地址
proxy_pass http://rendaedu;
index index.html index.htm;
}
}
3）修改本地 hosts 配置域名映射
# My hosts edu
192.168.186.128 www.edu-boss.com
4）访问 www.edu-boss.com
- Silverlight调用本机exe程序
- 游戏开发之UE4添加角色到场景中
- 人工智能取代人类？高通副总裁这样说
- Disque：Redis之父新开源的分布式内存作业队列
- mac OS X Yosemite 上编译hadoop 2.6.0/2.7.0及TEZ 0.5.2/0.7.0 注意事项
- EasyStack郭长波连任OpenStack基金会独立董事
- VMware Fusion 中如何复制centos/linux虚拟机
- 浅谈国外航空发动机大数据应用
- asp.net mvc SelectList 的selected 失效及解决方案
- 类极客公园火箭发射“返回顶部”jQuery效果（WordPress代码教程）
- 利用ganymed-ssh2远程执行其它Linux机器上的shell命令
- 浅析软件开发的3个层次
- MSBUILD 命令行编译的时候请注意msbuild文件名称或路经中空格导致出错
- Python可以用来做什么？
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 这样使用df和du命令更完美
- 批处理中的IF详解
- 来，我们一起打造一款代码命名工具
- HTML转PDF工具Wkhtmltopdf安装使用
- 【Vue.js】Vue.js组件库Element中的时间选择器、日期选择器、日期时间选择器和颜色选择器
- 【Vue.js】Vue.js的Chrome浏览器开发插件DevTools的安装步骤
- 训练提速60%！只需5行代码，PyTorch 1.6即将原生支持自动混合精度训练。
- TensorFlow 模型剪枝
- 机器人如何使用 RRT 进行路径规划？
- 高效 PyTorch：6个训练Tips
- 机器学习与情绪交易（附代码）
- 社区前端游戏框架LollipopCreator v1.0.X正式开源
- 社区开源框架音效管理模块:AudioManager详解
- 社区开源框架音效管理模块:AvatarManager详解
- vue-element-admin实现一个可编辑的table