1，vue-cli进行项目搭建
2，使用ELement-UI
3，使用vue组件路由
4，点击登录，向后端进行账号密码比对
三种情况：
密码有误
服务器忙
密码正确。
具体步骤：
首先写好前端一个大体框架，然后点击登录按钮时触发的函数，还有使用v-model对数据进行双向绑定。
<template>
<!-- 一个组件中只能有一个根标签-->
<div class="login_container">
<!-- 登录盒子-->
<div class="login_box">
<!-- 头像盒子-->
<div class="img_box">
<img src="./assets/logo.png" />
</div>
<div style="padding: 100px 30px 30px 0px;">
<el-form label-width="80px">
<el-form-item label="账号">
<el-input v-model="from.account"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password" v-model="from.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" round @click="login()">登录</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>其次就是js代码：这是vue框架所以格式是按照vue框架给定的来的。这段代码主要作用就是，前端传给后端账号密码后，后端给前端的响应，前端对响应做出判断，通过状态码做出判断 。
<script>
export default {
data() {
return {
from: {
account: "adele",
password: "12345678"
}
}
},
methods: {
login() {
this.$http.post("LoginServlet", jsonToString(this.from)).then(resp => {
if (resp.data.code == 201) {
this.$message({
message: resp.data.message,
type: 'warning'
});
} else if (resp.data.code == 200) {
this.$message({
message: resp.data.message,
type: 'success'
});
sessionStorage.setItem("account", resp.data.data.account);
sessionStorage.setItem("userToken", resp.data.data.token);
this.$router.push("/main"); //在js中进行路由导航
}
})
}
},
}
//将json对象序列化为键=值&键=值
function jsonToString(jsonobj) {
console.log(jsonobj)
var str = "";
for (var s in jsonobj) {
str += s + "=" + jsonobj[s] + "&";
}
return str.substring(0, str.length - 1);
}
</script>
由于后端
5，接下来就是后端：
在写后端之前需要在数据库中创建一个管理员的表，代表登录人信息，因为后端需要和数据库进行比对，如果数据库中存在当前登录的信息才可以进入主页面。
这是登录的servlet，读入流，调用dao的函数进行账号密码比对，通过比对结果向前端传入数据。
由于json跨平台兼容，数据体积小等优点，所以我们通过json格式化java对象传给前端。
package com.ffyc.webserver.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.ffyc.webserver.Models.CommonData;
import com.ffyc.webserver.dao.LoginDao;
import com.ffyc.webserver.Models.User;
import com.ffyc.webserver.util.JWTUtil;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
public class LoginServlet extends HttpServlet {
private LoginDao dao=new LoginDao();
// @Override
// protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//
// }
// @Override
// protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// String account=req.getParameter("account");//接收请求中我们自己提交的数据
// User user=new User("adele","123456789");
// ObjectMapper objectMapper=new ObjectMapper();
// String stu=objectMapper.writeValueAsString(user);
// resp.getWriter().print(stu);
// System.out.println(objectMapper.writeValueAsString(user));
// if(account.equals("admin"))
// {
// resp.getWriter().print("账号已注册");
// }
// else
// {
// resp.getWriter().print("账号未注册");
// }
// }
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String account=req.getParameter("account");
String password=req.getParameter("password");
System.out.println(account);
System.out.println(password);
PrintWriter printWriter=resp.getWriter();
User user= null;
CommonData commonData=null;
try {
user = dao.logindao(account,password);
if(user==null) {
commonData=new CommonData(201,"账号或密码输入有误，请重新输入！");
}
else {
user.setToken(JWTUtil.getToken(user));
commonData=new CommonData(200,user,"登录成功");
System.out.println(user.getToken());
}
} catch (Exception throwables) {
commonData=new CommonData(500,"服务器忙...请稍后重试！");
}
ObjectMapper objectMapper=new ObjectMapper();
String json=objectMapper.writeValueAsString(commonData);
printWriter.print(json);
}
}
然后就是dao层的调用了，因为只要是对数据库进行增删改查操作时，我们都需要调用一次数据库，所以，将数据库连接打包成一个类，每当进行操作，调用该类即可。
DBUtil.java
package com.ffyc.webserver.util;
import java.sql.*;
public class DButils {
static {
try {
Class.forName("com.mysql.cj.jdbc.Driver");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
public static Connection getConnection() throws SQLException {
String url = "jdbc:mysql://127.0.0.1:3306/userdb?serverTimezone=Asia/Shanghai";
Connection connection = DriverManager.getConnection(url, "root", "123456");
return connection;
}
public static void close(ResultSet resultSet, Statement statement, Connection connection) throws SQLException {
if (resultSet != null) {
resultSet.close();
}
if (statement != null) {
statement.close();
}
if (connection != null) {
connection.close();
}
}
}
然后再写一个登录对账号密码验证的dao：使用sql语言调用数据库进行查询，最后将查询到数据以对象形式返回。如果对象为空代表未在数据库查到当前账号，说明账号或密码有误，不为空则说明登录成功。
package com.ffyc.webserver.dao;
import com.ffyc.webserver.Models.User;
import com.ffyc.webserver.util.DButils;
import java.sql.*;
public class LoginDao {
public User logindao(String account, String password) throws SQLException {
String sql="select * from user where account=? and password=?";
Connection connection=DButils.getConnection();
PreparedStatement preparedStatement= connection.prepareStatement(sql);
preparedStatement.setObject(1,account);
preparedStatement.setObject(2,password);
ResultSet resultSet=preparedStatement.executeQuery();
User user=null;
if(resultSet.next())
{
user=new User();
String psw=resultSet.getString("password");
user.setAccount(account);
user.setPassword(psw);
}
DButils.close(resultSet,preparedStatement,connection);
return user;
}
}
因为要以对象形式返回数据，所以需要创建登录者信息类：
package com.ffyc.webserver.Models;
public class User {
String id;
String account;
String password;
String token;
public String getToken() {
return this.token;
}
public void setToken(String token) {
this.token = token;
}
public void setAccount(String account) {
this.account = account;
}
public void setPassword(String password) {
this.password = password;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getAccount() {
return account;
}
public String getPassword() {
return password;
}
}
最后，不要忘记配置当前servlet：
<servlet>
<servlet-name>Login</servlet-name>
<servlet-class>com.ffyc.webserver.servlet.LoginServlet</servlet-class>
<!-- <load-on-startup>0</load-on-startup>-->
</servlet>
<servlet-mapping>
<servlet-name>Login</servlet-name>
<url-pattern>/LoginServlet</url-pattern>
</servlet-mapping>这样，一个简单的登录就完成了。
6，我们发现，类似于状态码为500的公共拦截码如果每次都写一遍很费时间，所以在前端为axios配置响应拦截器，将500这种公共拦截码进行拦截。
import axios from 'axios';
//设置访问后台服务器地址
axios.defaults.baseURL = "http://localhost:8088/webServer/";
//将 axios 挂载到 vue 全局对象中,使用 this 可以直接访问
//axios 请求拦截 每次向后端发送
axios.interceptors.request.use(config => {
//为请求头对象，添加 Token 验证的 token 字段
config.headers.userToken = window.sessionStorage.getItem('userToken');
return config;
})
axios.interceptors.response.use((resp) => { //正常响应拦截
if (resp.data.code == 500) {
ElementUI.Message({
message: resp.data.message,
type: "error"
})
}
if (resp.data.code == 402) {
ElementUI.Message({
message: resp.data.message,
type: "error"
})
router.replace("/login");
}
return resp;
});
Vue.prototype.$http = axios;为axios框架配置响应拦截器，一旦后端做出响应，响应器拦截。
7，存在的问题：在登录页面的地址栏输入主页面地址可以直接访问，无需验证账号密码。
解决办法：在登录前判断验证用户是否登录，未登录就不能访问/main。
路由导航守卫：每当发生路由，自动调用此方法。
路由导航守卫是一种在路由导航过程中进行拦截和控制的机制。它允许开发者在用户导航到某个路由之前、之后或在路由发生变化时执行相应的操作。
路由导航守卫可以用于实现诸如身份验证、权限检查、日志记录等功能。通过注册守卫函数，开发者可以在路由导航事件发生时介入，并根据需要执行特定的逻辑。
to：访问组件地址
from：从哪个组件发起的路由
next()：放行函数。
写入index.js中：导出路由器对象，并将代码包装在模块中并导出对象
import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */
/* 导入需要路由的组件 */
import Login from "../Login.vue";
import Main from "../Main.vue";
import student from '../student/student.vue';
import marjor from '../marjor/marjor.vue';
Vue.use(router)
/* 定义组件路由 */
var rout = new router({
routes: [{
path: '/',
component: Login
},
{
path: '/login',
/* 地址 */
name: 'login',
/* 地址名 */
component: Login /* 调用地址 */
},
{
path: '/main',
component: Main,
children: [{
path: "/student",
component: student,
}, {
path: "/marjor",
component: marjor
}],
}
]
});
//导出路由对象
rout.beforeEach((to, from, next) => {
if (to.path == '/login') {
//如果用户访问的登录页， 直接放行
return next();
} else {
var account = window.sessionStorage.getItem("account");
if (account == null) {
return next("/login");
} else {
next();
}
}
})
export default rout;8， 前端显示用户信息，并实现安全退出。
<script>
export default {
name: "main",
data() {
return {
account: ""
}
},
methods: {
open() {
this.$confirm('此操作将退出当前账号, 是否继续?', '操作提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '账号已退出!',
});
sessionStorage.clear();
this.$router.push("/login"); //在js中进行路由导航
});
},
test() {
this.$http.get("admin/LoginServlet");
}
},
mounted() {
this.account = sessionStorage.getItem("account");
}
}
</script>9，登录成功后，进入管理后台，需要会话跟踪。
由于http请求是无状态的，默认不携带用户信息，所以在一次会话中，需要多次向后端发送请求，我们需要让后端程序知道是谁发送的请求。这个过程称为会话跟踪。
①传统的session会话：登录成功后，在后端生成HttpSession对象。里面可以存储用户信息和id，存储在服务器端，id号响应给前端，前端提交id到后端，查询session对象。（不适合分布式架构）
在分布式架构中，各个子系统通常相互独立且自治，它们可以并行地处理任务，从而提高系统的处理能力。每个子系统可以运行在自己的硬件设备上，也可以共享资源，例如数据库、存储等。通过将负载均衡和故障容错机制引入到系统中，分布式架构可以实现系统的高可用性和容错性。
②token会话：
jwt搭建：
①配置安装jar包；
②创建生成token方法；
③之后每次请求都要发送token（在前端axios中配置拦截器，每次向后端发送）
//axios 请求拦截 每次向后端发送
axios.interceptors.request.use(config => {
//为请求头对象，添加 Token 验证的 token 字段
config.headers.userToken = window.sessionStorage.getItem('userToken');
return config;
})④每次做出响应之前进行token验证
package com.ffyc.webserver.util;
import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.interfaces.DecodedJWT;
import com.ffyc.webserver.Models.User;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
/**
* JWT工具类
*/
public class JWTUtil {
/**
* 根据用户id,账号生成token
* @param u
* @return
*/
public static String getToken(User u) {
String token = "";
try {
//过期时间 为1970.1.1 0:0:0 至 过期时间 当前的毫秒值 + 有效时间
Date expireDate = new Date(new Date().getTime() + 3600*1000);
//秘钥及加密算法
Algorithm algorithm = Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE");
//设置头部信息
Map<String,Object> header = new HashMap<>();
header.put("typ","JWT");
header.put("alg","HS256");
//携带id，账号信息，生成签名
token = JWT.create()
.withHeader(header)
.withClaim("id",u.getId())
.withClaim("account",u.getAccount())
.withExpiresAt(expireDate)
.sign(algorithm);
}catch (Exception e){
e.printStackTrace();
return null;
}
return token;
}
/**
* 验证token是否有效
* @param token
* @return
*/
public static boolean verify(String token){
try {
//验签
Algorithm algorithm = Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE");
JWTVerifier verifier = JWT.require(algorithm).build();
DecodedJWT jwt = verifier.verify(token);
return true;
} catch (Exception e) {//当传过来的token如果有问题,抛出异常
return false;
}
}
/**
* 获得token 中playload部分数据,按需使用
* @param token
* @return
*/
public static DecodedJWT getTokenInfo(String token){
return JWT.require(Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE")).build().verify(token);
}
}
package com.ffyc.webserver.filter;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.ffyc.webserver.Models.CommonData;
import com.ffyc.webserver.util.JWTUtil;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
import java.io.PrintWriter;
public class TokenFilter implements Filter {
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletRequest httpServletRequest=(HttpServletRequest) servletRequest;
String userToken = httpServletRequest.getHeader("userToken");
if(JWTUtil.verify(userToken))
{
filterChain.doFilter(servletRequest, servletResponse);
}else{
PrintWriter printWriter=servletResponse.getWriter();
CommonData commonData=new CommonData(402,"Token认证失败！");
ObjectMapper objectMapper=new ObjectMapper();
String json=objectMapper.writeValueAsString(commonData);
printWriter.print(json);
}
}
}
会话跟踪实现：
第一次登录成功时，在后端根据管理员信息以及密钥生成的token（字符串），响应给前端，之后每次请求都携带token到后端，后端对token进行验证。
