案例--springmvc实现登录并使用拦截器

最新推荐文章于 2025-03-26 22:54:49 发布

最不会程序的程序猿

最新推荐文章于 2025-03-26 22:54:49 发布

阅读量411

点赞数 2

分类专栏： Java 文章标签：前端

本文链接：https://blog.csdn.net/weixin_44720982/article/details/125196627

版权

Java 专栏收录该内容

35 篇文章

订阅专栏

（1）配置springmvc，lombok,servlet,jackson依赖

<dependencies>
    <dependency>
      <groupId>repMaven.org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.2.15.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>repMaven.org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.24</version>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>4.0.1</version>
    </dependency>
    <dependency>
      <groupId>repMaven.com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.13.2.2</version>
    </dependency>
  </dependencies>

（2）更改web.xml的配置文件（版本达到3.0以上否则无法使用注解）

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
  
</web-app>

（3）写包名
在这里插入图片描述

（4）配置springmvc的配置文件
在这里插入图片描述

 <!--包扫描-->
    <context:component-scan base-package="com.wx.interceptor,com.wx.controller"/>
    <!--放行静态资源-->
    <mvc:annotation-driven />
    <mvc:default-servlet-handler />

（5）配置web.xml

 <!--注册DispatcherServlet-->
    <servlet>
        <servlet-name>DispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc.xml</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>DispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    
    
    <!--编码过滤器-->
   <filter>
       <filter-name>encodingFilter</filter-name>
       <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
       <init-param>
           <param-name>encoding</param-name>
           <param-value>utf-8</param-value>
       </init-param>
   </filter>
    <filter-mapping>
        <filter-name>encodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

(6)写前端页面
登录页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!--引入element得css样式-->
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <!--引入vue得js文件 这个必须在element之前引入-->
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/qs.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <!--element得js文件-->
    <script type="text/javascript" src="js/index.js"></script>
    <style>
        body,.box{
            overflow: hidden;
            height: 100%;
        }
        .box{
            background: url("imgs/bg.gif");
        }
        #loginBox {
            width: 450px;
            height: 300px;
            background: white;
            border-radius: 3px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        #loginBox>.avatar_box{
            height: 130px;
            width: 130px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
        }
        #loginBox>.avatar_box>img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
        .login_form {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body background="imgs/bg.gif">
<div class="box">
    <div id="loginBox">
        <!-- 头像 -->
        <div class="avatar_box">
            <img src="imgs/dog.jpg" />
        </div>
        <el-form label-width="80px" :model="loginForm" :rules="rules" ref="loginFormRef" class="login_form">
            <el-form-item label="账号:" prop="name">
                <el-input v-model="loginForm.name"></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="pwd">
                <el-input v-model="loginForm.pwd"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>

<script>
    var app = new Vue({
        el: ".box",
        data: {
            loginForm: {},
            //校验规则
            rules: {
                name: [
                    {required: true, message: "请输入账号", trigger: "blur"},
                    {min: 2, max: 12, message: "账号的长度必须{2~12}", trigger: "blur"},
                ],
                pwd: [
                    {required: true, message: "请输入密码", trigger: "blur"},
                    {min: 1, max:4, message: "密码的长度必须{1~4}", trigger: "blur"},
                ]
            }
        },
        methods: {
            submitForm() {
                var that = this;
                var qs = Qs;
                this.$refs['loginFormRef'].validate((valid) => {
                    if (valid) {
                        axios.post("login", qs.stringify(this.loginForm)).then(function (result) {
                            if (result.data.code === 2000) {
                                that.$message.success(result.data.msg);
                                location.href = "main.jsp"
                            } else {
                                that.$message.error(result.data.msg);
                            }
                        });
                    }
                })
            }
        }
    })
</script>
</body>
</html>

主页

<%--
  Created by IntelliJ IDEA.
  User: 11319
  Date: 2022/6/8
  Time: 21:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/qs.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
</head>
<body>
<div id="app">

    <el-table
            :data="tableData"
            border
            style="width: 100%">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
        >
        </el-table-column>

        <el-table-column
                prop="sex"
                label="性别">
        </el-table-column>

        <el-table-column
                prop="birthday"
                label="生日"
        >
        </el-table-column>


        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>

    </el-table>
</div>
</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            tableData:[],
            rules: {
                name: [
                    {required: true, message: '请输入姓名', trigger: 'blur'}
                ],
                age:[
                    {required: true, message: '请输入年龄', trigger: 'blur'},
                    {type:'number',message: '请输入数字', trigger: 'blur'}
                ],
                address: [
                    {required: true, message: '请输入地址', trigger: 'blur'}
                ],
            },
        },
        created(){
            this.initTable();
        },
        methods:{
            //初始化学生信息
            initTable(){
                axios.post("stuList").then(function (result){
                    if(result.data.code==2000){
                        app.tableData = result.data.data;
                    }else if(result.data.code==501){
                        app.$message.error(result.data.msg);
                        location.href="login.jsp";
                    }else{
                        app.$message.error(result.data.msg);
                    }
                })
            }
        }
    })
</script>
</html>

（7）写实体层代码
在这里插入图片描述

@NoArgsConstructor
@AllArgsConstructor
@Data
public class Student {
    private String name;
    private String sex;

    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date birthday;
    private String address;
}

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String name;
    private String pwd;
}

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result {
    private Integer code;
    private String name;
    private Object Data;
}

（8）写控制层代码

@Controller
public class LoginController {
    
    @RequestMapping("login")
    @ResponseBody
    public Result login(String name, String pwd, HttpSession session){
        if ("admin".equals(name) && "123".equals(pwd)) {
            User user = new User(name, pwd);
            session.setAttribute("user",user);
            Result result = new Result(2000, "登陆成功", null);
            return result;
        }else{
            Result result = new Result(500, "账号或者密码错误", null);
            return result;
        }
    } 
}

@Controller
public class StuMainController {

    @RequestMapping("stuList")
    @ResponseBody
    public Result stuMain(){
        List<Student> list = new ArrayList<Student>();
        list.add(new Student("张三","男",new Date(),"北京1"));
        list.add(new Student("李四","男",new Date(),"北京2"));
        list.add(new Student("王五","女",new Date(),"北京3"));
        list.add(new Student("赵六","女",new Date(),"北京4"));
        Result result = new Result(2000, "查询成功", list);
        return result;
    }
}

(9)拦截器

@ControllerAdvice
public class MyInterceptor implements HandlerInterceptor {
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        HttpSession session = request.getSession();
        Object user = session.getAttribute("user");
        if(user!=null){
            return true;
        }else{
            Result result = new Result(501, "请先登录", null);
            PrintWriter writer = response.getWriter();
            ObjectMapper mapper = new ObjectMapper();
            String s = mapper.writeValueAsString(result);
            writer.print(s);
            writer.flush();
            writer.close();
            return false;
        }
    }
}

在springmvc.xml中配置拦截器

<mvc:interceptors>
        <mvc:interceptor>
            <mvc:mapping path="/**"/>
            <mvc:exclude-mapping path="/login.jsp"/>
            <mvc:exclude-mapping path="/js/**"/>
            <mvc:exclude-mapping path="/css/**"/>
            <mvc:exclude-mapping path="/imgs/**"/>
            <bean class="com.wx.interceptor.MyInterceptor"/>
        </mvc:interceptor>
    </mvc:interceptors>