用户登录界面,需要输入手机号密码
登录组件 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 };
},
在执行路由之前先执行的一些钩子函数,比如验证用户是否有权限之类的操作
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 是一款轻量级的 Web 服务器/反向代理服务器及电子邮件(IMAP / POP3)代理服务器,并在一个BSD-like 协议下发行。
其特点是占有内存少,并发能力强,事实上 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
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
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 来配置多个网站。
区分不同的网站:
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;
}
}
}
使用 notepad++ 来编辑 linux 中文件的批量文字,会比直接在 linux 中操作方便快捷很多
1)Notepad 插件中安装 NppFTP
2)打开 NppFTP
3)选择设置
4)配置连接信息
5)连接
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.com
zhihu.com
三级域名
www.baidu.com
image.baidu.com
1)本地测试可以修改 hosts 文件,修改 window 的 hosts 文件:
C:\Windows\System32\drivers\etc
可以配置域名和 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
通过域名区分虚拟主机
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 的功能就是把请求转发给后面的应用服务器(如 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 作为反向代理服务器,会根据请求找到后面的目标服务器去处理请求,这就是反向代理。
如果目标服务器有多台的话,找哪一个服务器去处理当前请求呢 ? 这个合理分配请求到服务器的过程就叫做负载均衡。
当系统面临大量用户访问,负载过高的时候,通常会使用增加服务器数量来进行横向扩展;负载均衡主要是为了分担访问量,将请求合理分发给不同的服务器,避免临时的网络堵塞。
默认策略,每个请求按照时间顺序逐一分配到不同的服务器,如果某一个服务器下线,能自动剔除。
# 负载均衡
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;
}
}
可以根据服务器的实际情况调整服务器权重;权重越高分配的请求越多,权重越低,请求越少,默认是都是 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;
}
}
1) 需要安装的软件
2) 防火墙开放对应的端口号:80、8080、3306
3) 使用 SQLYog 连接 Linux 上的 MySQL,导入 SQL 脚本创建项目所需的数据库
在平常开发的过程中,不同的环境中项目的相关配置也会有相关的不同;在不同的环境中部署就要手动修改为对应环境的配置,这样比较麻烦而且也很容易出错。
接下来就通过 maven 的相关配置来在打包时指定各个环境对应配置文件
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.driverClassName=${jdbc.driverClassName}
jdbc.url=${jdbc.url}
jdbc.username=${jdbc.username}
jdbc.password=${jdbc.password}
添加如下配置
<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 对应不同的激活条件和配置信息,从而达到不同环境使用不同配置信息的效果。
默认启用的是 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/
使用 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