第1章 项目概述和环境搭建
前言
为了巩固web基础知识，提高综合运用能力。故在此章节我们将做了一个在线教育系统，要求每一位同学都能独立完成此案例
1. 项目概况
1.1 项目概述
- 软件开发流程
- 项目开发角色
参考PPT
1.2 项目需求
优学管理系统是一款专门针对培训机构定制开发的一套在线教学的后台管理系统，实现课程管理工作内容可视化、用户管理专业化、用户选课干预流程化，从而提高教务人员的工作效率，加强与用户间的互动，增强管理者对课程及用户管理，方便机构对运营情况的实时洞察。
1.3 功能展示
参见PPT
1.4 技术架构
1.5 系统架构
2. 环境搭建
2.1 项目目录结构
| 编号 | 中文名称 | 英文名称 | 备注 |
|---|---|---|---|
| 1 | web层 | servlet | 用于编写各个模块的控制类 |
| 2 | service层 | service | 用于实现各个功能的业务逻辑 |
| 3 | 持久层 | dao | 用于实现和数据库进行数据交互 |
| 4 | 实体类 | entity | 用于模块中的实体类交互 |
| 5 | 工具类 | utils | 用于简化模块中的重复代码 |
2.2 maven项目搭建
-
创建Maven的Web工程
-
导入依赖坐标pom.xml
-
配置数据库连接信息
-
建立包结构
-
导入静态资源到VScode中
-
根据资料中提供的uedu文件导入SQL脚本
-
创建用户模块实体类
-
创建BaseServlet
-
创建BaseDao
-
固定统一的返回数据格式
2.2.1.创建MavenWeb项目
2.2.2.导入依赖坐标
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<packaging>war</packaging>
<groupId>com.offcn</groupId>
<artifactId>education</artifactId>
<version>1.0-SNAPSHOT</version>
<modelVersion>4.0.0</modelVersion>
<!-- properties 是全局设置,可以设置整个maven项目的编译器 JDK版本 -->
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
</properties>
<dependencies>
<!--servlet-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<!--在编译和测试时期有效-->
<scope>provided</scope>
</dependency>
<!--jackson-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.7.3</version>
</dependency>
<!--StringUtils-->
<dependency>
<groupId>commons-lang</groupId>
<artifactId>commons-lang</artifactId>
<version>2.6</version>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.13</version>
<scope>test</scope>
</dependency>
<!-- Beanutils -->
<dependency>
<groupId>commons-beanutils</groupId>
<artifactId>commons-beanutils</artifactId>
<version>1.8.3</version>
</dependency>
<!-- DBUtils -->
<dependency>
<groupId>commons-dbutils</groupId>
<artifactId>commons-dbutils</artifactId>
<version>1.6</version>
</dependency>
<!-- 数据库相关 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.6</version>
</dependency>
<!--c3p0-->
<dependency>
<groupId>com.mchange</groupId>
<artifactId>c3p0</artifactId>
<version>0.9.5</version>
</dependency>
</dependencies>
</project>
2.2.3.在c3p0-config.xml中添加数据库连接信息
2.2.4.建立包结构：dao、service、web.servlet、entity、utils
2.2.5.导入静态资源到VScode
2.2.6.根据资料中提供的uedu文件导入SQL脚本
2.2.7. 创建实体类
在com.ujiuye.entity包中创建User
package com.ujiuye.entity;
import java.util.List;
public class User {
private int uid; // 编号
private String name; // 真实姓名
private String phone; // 手机号
private int age; // 年龄
private int sex; // 性别 0：男 1：女
private String username; // 用户名
private String password; // 用户密码
private String picture; // 用户头像路径
private int status; // 用户状态 1：启用 0：禁用
private String createtime; // 注册时间
private int role; // 用户角色 1管理员 2经理 3学员
public int getUid() {
return uid;
}
public void setUid(int uid) {
this.uid = uid;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public int getSex() {
return sex;
}
public void setSex(int sex) {
this.sex = sex;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getPicture() {
return picture;
}
public void setPicture(String picture) {
this.picture = picture;
}
public int getStatus() {
return status;
}
public void setStatus(int status) {
this.status = status;
}
public String getCreatetime() {
return createtime;
}
public void setCreatetime(String createtime) {
this.createtime = createtime;
}
public int getRole() {
return role;
}
public void setRole(int role) {
this.role = role;
}
}
2.2.8.创建BaseServlet
在com.ujiuye.web.servlet包中创建BaseServlet
package com.ujiuye.web.servlet;
import java.io.IOException;
import java.lang.reflect.Method;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class BaseServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//定义个参数(页面传递过来的) method:表示method的值是什么那么我们对应的Servlet中就调用对应的方法
String method = req.getParameter("method");
//获取某个Servlet类的Class类型对象
Class<? extends BaseServlet> clazz = this.getClass();
//调用method对应的方法
try {
Method m = clazz.getMethod(method, HttpServletRequest.class,HttpServletResponse.class);
//方法调用
m.invoke(this, req,resp);
} catch (Exception e) {
throw new RuntimeException(e);
}
}
}
2.2.9创建BaseDao
package com.ujiuye.dao;
import com.mchange.v2.c3p0.ComboPooledDataSource;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import java.sql.SQLException;
import java.util.List;
public class BaseDao<T> {
ComboPooledDataSource dataSource =new ComboPooledDataSource();
QueryRunner qr= new QueryRunner(dataSource);
//返回一个对象的方法
public T getEntity(String sql, Class claz, Object... obj){
try {
return qr.query(sql, new BeanHandler<T>(claz), obj);
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
//返回多个对象的方法
public List<T> getListEntity(String sql, Class claz, Object...obj){
try {
return qr.query(sql, new BeanListHandler<T>(claz), obj);
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
//执行增删改
public int update(String sql, Object...obj){
try {
return qr.update(sql, obj);
} catch (SQLException e) {
e.printStackTrace();
}
return 0;
}
}
2.3.0.固定统一的返回数据格式
在com.ujiuye.entity包中创建ResultVO
package com.ujiuye.entity;
public class ResultVO{
private int code;//响应状态码
private String message;//消息
private Object data;//数据
public ResultVO() {
}
public ResultVO(int code, String message, Object data) {
this.code = code;
this.message = message;
this.data = data;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
}
3.登录功能
3.1 验证码改造
登录页面对应的是login.html页面，根据产品设计的原型已经完成了页面基本结构的编写，现在需要完善页面动态效果。
3.1.1 实现后端业务控制器
在com.ujiuye.utils包中创建VerifyCodeUtils
package com.ujiuye.utils;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.geom.AffineTransform;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Arrays;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
@WebServlet("/code")
public class VerifyCodeUtils extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//生成随机字串
String verifyCode = VerifyCodeUtils.generateVerifyCode(4);
//存入会话session
HttpSession session = req.getSession();
session.setAttribute("verCode", verifyCode.toLowerCase());
//生成图片
int w = 100, h = 30;
VerifyCodeUtils.outputImage(w, h, resp.getOutputStream(), verifyCode);
}
//使用到Algerian字体，系统里没有的话需要安装字体，字体只显示大写，去掉了1,0,i,o几个容易混淆的字符
public static final String VERIFY_CODES = "23456789ABCDEFGHJKLMNPQRSTUVWXYZ";
private static Random random = new Random();
/**
* 使用系统默认字符源生成验证码
* @param verifySize 验证码长度
* @return
*/
public static String generateVerifyCode(int verifySize){
return generateVerifyCode(verifySize, VERIFY_CODES);
}
/**
* 使用指定源生成验证码
* @param verifySize 验证码长度
* @param sources 验证码字符源
* @return
*/
public static String generateVerifyCode(int verifySize, String sources){
if(sources == null || sources.length() == 0){
sources = VERIFY_CODES;
}
int codesLen = sources.length();
Random rand = new Random(System.currentTimeMillis());
StringBuilder verifyCode = new StringBuilder(verifySize);
for(int i = 0; i < verifySize; i++){
verifyCode.append(sources.charAt(rand.nextInt(codesLen-1)));
}
return verifyCode.toString();
}
/**
* 生成随机验证码文件,并返回验证码值
* @param w
* @param h
* @param outputFile
* @param verifySize
* @return
* @throws IOException
*/
public static String outputVerifyImage(int w, int h, File outputFile, int verifySize) throws IOException{
String verifyCode = generateVerifyCode(verifySize);
outputImage(w, h, outputFile, verifyCode);
return verifyCode;
}
/**
* 输出随机验证码图片流,并返回验证码值
* @param w
* @param h
* @param os
* @param verifySize
* @return
* @throws IOException
*/
public static String outputVerifyImage(int w, int h, OutputStream os, int verifySize) throws IOException{
String verifyCode = generateVerifyCode(verifySize);
outputImage(w, h, os, verifyCode);
return verifyCode;
}
/**
* 生成指定验证码图像文件
* @param w
* @param h
* @param outputFile
* @param code
* @throws IOException
*/
public static void outputImage(int w, int h, File outputFile, String code) throws IOException{
if(outputFile == null){
return;
}
File dir = outputFile.getParentFile();
if(!dir.exists()){
dir.mkdirs();
}
try{
outputFile.createNewFile();
FileOutputStream fos = new FileOutputStream(outputFile);
outputImage(w, h, fos, code);
fos.close();
} catch(IOException e){
throw e;
}
}
/**
* 输出指定验证码图片流
* @param w
* @param h
* @param os
* @param code
* @throws IOException
*/
public static void outputImage(int w, int h, OutputStream os, String code) throws IOException{
int verifySize = code.length();
BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
Random rand = new Random();
Graphics2D g2 = image.createGraphics();
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);
Color[] colors = new Color[5];
Color[] colorSpaces = new Color[] { Color.WHITE, Color.CYAN,
Color.GRAY, Color.LIGHT_GRAY, Color.MAGENTA, Color.ORANGE,
Color.PINK, Color.YELLOW };
float[] fractions = new float[colors.length];
for(int i = 0; i < colors.length; i++){
colors[i] = colorSpaces[rand.nextInt(colorSpaces.length)];
fractions[i] = rand.nextFloat();
}
Arrays.sort(fractions);
g2.setColor(Color.GRAY);// 设置边框色
g2.fillRect(0, 0, w, h);
Color c = getRandColor(200, 250);
g2.setColor(c);// 设置背景色
g2.fillRect(0, 2, w, h-4);
//绘制干扰线
Random random = new Random();
g2.setColor(getRandColor(160, 200));// 设置线条的颜色
for (int i = 0; i < 20; i++) {
int x = random.nextInt(w - 1);
int y = random.nextInt(h - 1);
int xl = random.nextInt(6) + 1;
int yl = random.nextInt(12) + 1;
g2.drawLine(x, y, x + xl + 40, y + yl + 20);
}
// 添加噪点
float yawpRate = 0.05f;// 噪声率
int area = (int) (yawpRate * w * h);
for (int i = 0; i < area; i++) {
int x = random.nextInt(w);
int y = random.nextInt(h);
int rgb = getRandomIntColor();
image.setRGB(x, y, rgb);
}
shear(g2, w, h, c);// 使图片扭曲
g2.setColor(getRandColor(100, 160));
int fontSize = h-4;
Font font = new Font("Algerian", Font.ITALIC, fontSize);
g2.setFont(font);
char[] chars = code.toCharArray();
for(int i = 0; i < verifySize; i++){
AffineTransform affine = new AffineTransform();
affine.setToRotation(Math.PI / 4 * rand.nextDouble() * (rand.nextBoolean() ? 1 : -1), (w / verifySize) * i + fontSize/2, h/2);
g2.setTransform(affine);
g2.drawChars(chars, i, 1, ((w-10) / verifySize) * i + 5, h/2 + fontSize/2 - 10);
}
g2.dispose();
ImageIO.write(image, "jpg", os);
}
private static Color getRandColor(int fc, int bc) {
if (fc > 255)
fc = 255;
if (bc > 255)
bc = 255;
int r = fc + random.nextInt(bc - fc);
int g = fc + random.nextInt(bc - fc);
int b = fc + random.nextInt(bc - fc);
return new Color(r, g, b);
}
private static int getRandomIntColor() {
int[] rgb = getRandomRgb();
int color = 0;
for (int c : rgb) {
color = color << 8;
color = color | c;
}
return color;
}
private static int[] getRandomRgb() {
int[] rgb = new int[3];
for (int i = 0; i < 3; i++) {
rgb[i] = random.nextInt(255);
}
return rgb;
}
private static void shear(Graphics g, int w1, int h1, Color color) {
shearX(g, w1, h1, color);
shearY(g, w1, h1, color);
}
private static void shearX(Graphics g, int w1, int h1, Color color) {
int period = random.nextInt(2);
boolean borderGap = true;
int frames = 1;
int phase = random.nextInt(2);
for (int i = 0; i < h1; i++) {
double d = (double) (period >> 1)
* Math.sin((double) i / (double) period
+ (6.2831853071795862D * (double) phase)
/ (double) frames);
g.copyArea(0, i, w1, 1, (int) d, 0);
if (borderGap) {
g.setColor(color);
g.drawLine((int) d, i, 0, i);
g.drawLine((int) d + w1, i, w1, i);
}
}
}
private static void shearY(Graphics g, int w1, int h1, Color color) {
int period = random.nextInt(40) + 10; // 50;
boolean borderGap = true;
int frames = 20;
int phase = 7;
for (int i = 0; i < w1; i++) {
double d = (double) (period >> 1)
* Math.sin((double) i / (double) period
+ (6.2831853071795862D * (double) phase)
/ (double) frames);
g.copyArea(i, 0, 1, h1, 0, (int) d);
if (borderGap) {
g.setColor(color);
g.drawLine(i, (int) d, i, 0);
g.drawLine(i, (int) d + h1, i, h1);
}
}
}
}
3.1.2 找到login.html中验证码图片位置添加点击事件（注意案例中后台服务器tomcat端口为80）
3.2 登录功能页面改造
3.2.1 在vue的data中填了变量msg(存储验证码|密码|权限等错误信息)
<script>
axios.defaults.withCredentials = true
new Vue({
el: "#app",
data: {
src:'http://localhost/education/code',
//存放错误信息
msg:'',
ruleForm: {
username: '',
password: '',
code:''
},
rules: {
username: [
{ required: true, message: '请输入用户名称', trigger: 'blur' },
{ min: 3, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
password: [
{
required: true,
message: '请输入密码',
trigger: 'blur'
}, {
min: 6,
max: 30,
message: '长度在 6 到 30 个字符'
}, {
pattern: /^(\w){6,20}$/,
message: '只能输入6-20个字母、数字、下划线'
}
],
code: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
]
}
},
methods: {
/* 切换验证码 */
checkCode(){
//每次定义让src属性进行更新
this.src='http://localhost/education/code?time='+new Date()
}
}
})
</script>
3.2.2 在vue中添加登录函数
点击登录按钮组装数据发送axios请求，在methods中添加登录函数
/* 登录 */
submitForm(ruleForm){
//获取表单 this.$refs[ruleForm]
//validate()校验表单 valid:验证表单函数的返回值
this.$refs[ruleForm].validate((valid)=>{
if(valid){
//表单校验通过了
var params= new URLSearchParams()
params.append("username",this.ruleForm.username)
params.append("password",this.ruleForm.password)
params.append("code",this.ruleForm.code)
//发送ajax请求
axios({
//请求地址
url:"http://localhost/education/user?method=login",
//请求方式 必须是post
method:"post",
//携带的参数
data:params
}).then(resp=>{
if(resp.data.code==200){
//消息组件 提示成功
this.$message.success(resp.data.message)
//登录成功
//1秒后跳转到首页面
window.setTimeout("location.href='http://127.0.0.1:5500/edu/html/index.html'",1000)
}else{
//登录失败
this.msg=resp.data.message
}
})
}else{
//表单校验失败
//消息组件提示
this.$message.warning(`表单校验失败`)
}
})
}
3.3 登录后台实现
3.3.1 跨域服务端过滤器（什么是跨域请参见知识点章节）
在com.ujiuye.filter包中创建CorsFilter1
package com.ujiuye.utils;
import org.apache.commons.lang.StringUtils;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/*
跨域请求
*/
@WebFilter("/*")
public class CorsFilter1 implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) servletResponse;
HttpServletRequest request = (HttpServletRequest) servletRequest;
request.setCharacterEncoding("utf-8");
//处理响应乱码
response.setContentType("text/html;charset=utf-8");
// 不使用*，自动适配跨域域名，避免携带Cookie时失效
String origin = request.getHeader("Origin");
if(StringUtils.isNotBlank(origin)) {
response.setHeader("Access-Control-Allow-Origin", origin);
}
// 自适应所有自定义头
String headers = request.getHeader("Access-Control-Request-Headers");
if(StringUtils.isNotBlank(headers)) {
response.setHeader("Access-Control-Allow-Headers", headers);
response.setHeader("Access-Control-Expose-Headers", headers);
}
// 允许跨域的请求方法类型
response.setHeader("Access-Control-Allow-Methods", "*");
// 预检命令（OPTIONS）缓存时间，单位：秒
response.setHeader("Access-Control-Max-Age", "3600");
// 明确许可客户端发送Cookie，不允许删除字段即可
response.setHeader("Access-Control-Allow-Credentials", "true");
filterChain.doFilter(request, response);
}
@Override
public void destroy() {
}
}
3.3.2 在com.ujiuye.utils下创建对象转json工具类
package com.ujiuye.utils;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.http.HttpServletResponse;
public class JsonUtils {
public static void objToJson(Object obj, HttpServletResponse response) {
ObjectMapper mapper = new ObjectMapper();
try {
String s = mapper.writeValueAsString(obj);
response.getWriter().print(s);
} catch (Exception e) {
e.printStackTrace();
}
}
}
3.3.3 在com.ujiuye.web.servlet.back包中创建UserServlet
package com.ujiuye.web.back;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.ujiuye.entity.User;
import com.ujiuye.service.UserService;
import com.ujiuye.utils.JsonUtils;
import com.ujiuye.utils.ResultVo;
import com.ujiuye.web.BaseServlet;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
@WebServlet("/user")
public class UserServlet extends BaseServlet {
ResultVo vo;
UserService service= new UserService();
public void login(HttpServletRequest request, HttpServletResponse response) throws IOException {
//接受请求参数
String username = request.getParameter("username");
String password = request.getParameter("password");
String inputCode = request.getParameter("code");
HttpSession session = request.getSession();
//获取生成的验证码
String verCode = (String) session.getAttribute("verCode");
if(verCode.equalsIgnoreCase(inputCode)){
//一致
User user= service.checkLogin(username,password);
if(user!=null){
if (user.getStatus()!=1) {
//当你账号被禁用
vo = new ResultVo(500, "该用户已被封停", null);
}else{
//在账号没被禁用的基础上
if(user.getRole()!=1) {
//在判断账号角色是否是1
vo = new ResultVo(500, "权限不足", null);
}else{
//角色是管理员 登录成功
session.setAttribute("user",user);
vo = new ResultVo(200, "登录成功", null);
}
}
}else{
vo = new ResultVo(500, "用户名或密码错误", null);
}
}else{
vo = new ResultVo(500, "验证码错误", null);
}
//将数据转成json响应回页面
JsonUtils.objToJson(vo,response);
}
}
- UserService类
在com.ujiuye.service包中创建UserService
public class UserService {
UserDao dao= new UserDao();
public User checkLogin(String username, String password) {
String sql = "select * from user where username =? and password =?";
return dao.getEntity(sql, User.class, username, password);
}
}
- UserDao类
在com.ujiuye.dao包中创建UserDao类
package com.ujiuye.dao;
import com.ujiuye.entity.User;
public class UserDao extends BaseDao<User> {
}
4.首页面用户信息回显
4.1.1 在index页面欢迎您的span中绑定文本值
4.1.2 在vue的data中创建user变量、以及在vue的methods中创建函数findUser
<script>
axios.defaults.withCredentials = true
new Vue({
el: "#app",
data: {
user:''
},
methods: {
findUser(){
//发送ajax
axios({
url:"http://localhost/education/user?method=findUser",
method:"get"
}).then(resp=>{
if(resp.data.code==200){
//消息提示
this.$message.success(resp.data.message)
//赋值
this.user=resp.data.obj
}else{
//消息提示
this.$message.warning(resp.data.message)
//跳转回登录页面
window.setTimeout("location.href='http://127.0.0.1:5500/edu/html/login.html'",1000);
}
})
}
},
created() {
this.findUser()
},
})
</script>
4.1.3 获取用户后台实现
在UserServlet中创建方法findUser
public void findUser(HttpServletRequest request, HttpServletResponse response){
//获取session
HttpSession session = request.getSession();
//从session中获取用户对象
User user = (User) session.getAttribute("user");
if (user!=null) {
vo = new ResultVo(200, "获取用户信息成功", user);
}else{
vo = new ResultVo(500, "获取用户信息失败", null);
}
JsonUtils.objToJson(vo,response);
}
5.返回前台功能
5.1.1 在index.html中找到返回前台按钮添加点击事件 backIndex
5.1.2 在vue实例中添加函数
6.退出登录功能
6.1.1 在index.html中找到退出按钮添加点击事件 loginOut
6.1.2 在vue事例中添加函数loginOut
/* 退出登录 */
loginOut(){
axios({
url:"http://localhost/education/user?method=loginOut",
method:"get"
}).then(resp=>{
if(resp.data.code==200){
//退出登录成功
this.$message.success(resp.data.message)
//1秒后跳转到登录页面
setTimeout("location.href='http://127.0.0.1:5500/edu/html/login.html'",1000)
}
})
}
6.1.3 退出登录后台实现
在UserServlet中创建方法loginOut
public void loginOut(HttpServletRequest request, HttpServletResponse response){
//获取session
HttpSession session = request.getSession();
//销毁session
session.invalidate();
vo = new ResultVo(200, "退出登录成功", null);
JsonUtils.objToJson(vo,response);
}
