SpringMVC回显数据和拦截器

塘枫蒲

已于 2022-06-13 09:55:51 修改

阅读量602

点赞数

文章标签： java 开发语言

于 2022-06-13 09:45:20 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_53997529/article/details/125254268

版权

本文介绍了SpringMVC中如何实现数据回显和拦截器的使用。首先讲解了在Controller中如何将数据返回到网页并进行回显，通过request和session进行数据传递，并使用EL表达式在网页上显示。接着，阐述了SpringMVC返回JSON数据的步骤，包括利用Jackson库，创建实体类和通用结果类，以及如何访问返回JSON的路径。最后，详细描述了SpringMVC拦截器的配置和使用，包括创建LoginInterceptor，定义LoginController和StudentController，配置拦截器以及展示登录和元素UI页面的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.controller里的数据返回网页并回显

2.springmvc返回json数据

3.springmvc拦截器

1.controller里的数据返回网页并回显

在servlet中，用request和session把数据保存并在网页上获取该数据。

request: 作用范围: 同一个请求内有效。setAttribute(key,value)

session：作用范围: 同一个会话有效，只要会话不关闭会一直有效。setAttribute(key,value)

网页获取保存的数据:

使用EL表达式。${scope.key}

package com.cmw.controller;

import com.cmw.entity.Student;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.SessionAttributes;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.Date;

/**
* @Author 86151
* @Create 2022/6/8 - 14:52
*/
@Controller
@SessionAttributes(value = {"user1","user2"})//设置哪些model的key值在session的范围内
public class HelloController {
    @RequestMapping(value = "/list1")
    public String list1(HttpServletRequest request){
        Student student=new Student(1,"士大夫",new Date(),"sdf");
        request.setAttribute("s1",student);
        return "list.jsp";//转发
    }
//request和tomcat绑定，model是springmvc里面的

    @RequestMapping(value = "list2")
    public String list2(Model model){
        Student student=new Student(2,"撒地方",new Date(),"xzv");
        //可以保存到model中，和request一样，同一个请求
        model.addAttribute("s2",student);
        return "list.jsp";
    }

    //在session范围保存
    @RequestMapping("/list3")
    public String list3(HttpSession session){
        Student student=new Student(3,"赌神发哥",new Date(),"qwe");
        session.setAttribute("user",student);
        return "list.jsp";
    }

    @RequestMapping("/list4")
    public String list4(Model model){
        Student student=new Student(4,"公鸡",new Date(),"fgh");
        Student student1=new Student(5,"顺丰大概",new Date(),"bnm");
        model.addAttribute("user1",student);
        model.addAttribute("user2",student1);
        return "list.jsp";
    }

    @RequestMapping("/list5")
    public String list5() {
        System.out.println("----==========----");
        return "redirect:error.jsp";//当springmvc检测返回的字符串中含有redirect:时 它认为要进行重定向跳转
    }
}

在webapp中创建list.jsp

<%--
  Created by IntelliJ IDEA.
  User: 86151
  Date: 2022/6/8
  Time: 14:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <%--list1--%>
    ${requestScope.s1}
    
    <%--list2--%>
    ${requestScope.s2}<br>
    
    <%--list3--%>
    ${sessionScope.user}<br>
    
    <%--lsit4--%>
    ${sessionScope.user1}<br>
    ${sessionScope.user2}<br>
</body>
</html>

2.springmvc返回json数据

（1）内置了一个jar. jackson的jar包

<!--jackson依赖 可以把java对象转换为json对象-->
<dependency>
  <groupId>com.fasterxml.jackson.core</groupId>
  <artifactId>jackson-databind</artifactId>
  <version>2.13.2.2</version>

(2) 在controller返回的数据类型变成javabean对象。

package com.cmw.controller;

import com.cmw.entity.Student;
import com.cmw.util.CommonResult;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

/**
 * @Author 86151
 * @Create 2022/6/9 - 10:57
 */
@Controller
public class StudentController {
    @RequestMapping("list")
    @ResponseBody       //将java对象转化为json格式的数据
    public CommonResult list(){
        List<Student> list=new ArrayList<Student>();
        list.add(new Student(1,"撒旦",new Date(),"郑州"));
        list.add(new Student(2,"周星驰",new Date(),"撒地方"));
        list.add(new Student(3,"杜甫",new Date(),"vbd"));
        list.add(new Student(4,"用途",new Date(),"阿文"));
        return new CommonResult(2000,"查询成功",list);
    }
}

建Student实体类

package com.cmw.entity;

import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.Date;

/**
 * @Author 86151
 * @Create 2022/6/9 - 10:32
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Student {
    private Integer id;
    private String name;

    @JsonFormat(pattern = "yyyy-MM-dd")//转化为json格式的时间
    private Date birthday;
    private String address;
}

建一个CommonResult类

package com.cmw.util;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * @Author 86151
 * @Create 2022/6/9 - 10:33
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
public class CommonResult {
    private Integer code;
    private String msg;
    private Object data;
}

(3) 访问该路径

3.springmvc拦截器

（1）创建一个LoginInterceptor,并实现HandlerInterceptor

package com.cmw.interceptor;

import com.cmw.util.CommonResult;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;

/**
 * @Author 86151
 * @Create 2022/6/9 - 10:43
 */
public class LoginInterceptor implements HandlerInterceptor {
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        response.setContentType("application/json;charset=utf-8");
        //判断session中是否有值
        System.out.println("session中有值");
        Object user = request.getSession().getAttribute("user");
        if (user!=null){
            return true;
        }
        PrintWriter writer = response.getWriter();
        CommonResult commonResult=new CommonResult(5001,"请先登录",null);
        //把java对象转为json字符串
        ObjectMapper objectMapper=new ObjectMapper();
        String json=objectMapper.writeValueAsString(commonResult);
        writer.print(json);
        writer.flush();
        writer.close();
        return false;
    }
}

（2）在Controller层创建一个LoginController

package com.cmw.controller;

import com.cmw.util.CommonResult;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpSession;

/**
 * @Author 86151
 * @Create 2022/6/9 - 10:33
 */
@Controller
public class LoginController {
    @RequestMapping("/login")
    @ResponseBody   //将java对象转化为json格式的数据
    public CommonResult login(String username, String password, HttpSession session){
        if ("admin".equals(username)&& "123456".equals(password)){
            session.setAttribute("user",username);
            return new CommonResult(2000,"登录成功",null);
        }else {
            return new CommonResult(5000,"账号或密码错误",null);
        }
    }
}

（3）在Controller层创建一个StudentController

package com.cmw.controller;

import com.cmw.entity.Student;
import com.cmw.util.CommonResult;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

/**
 * @Author 86151
 * @Create 2022/6/9 - 10:57
 */
@Controller
public class StudentController {
    @RequestMapping("list")
    @ResponseBody       //将java对象转化为json格式的数据
    public CommonResult list(){
        List<Student> list=new ArrayList<Student>();
        list.add(new Student(1,"撒旦",new Date(),"郑州"));
        list.add(new Student(2,"周星驰",new Date(),"撒地方"));
        list.add(new Student(3,"杜甫",new Date(),"vbd"));
        list.add(new Student(4,"用途",new Date(),"阿文"));
        return new CommonResult(2000,"查询成功",list);
    }
}

（4）在webapp中创建login.jsp

<%--
  Created by IntelliJ IDEA.
  User: 86151
  Date: 2022/6/9
  Time: 11:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <link href="css/index.css" rel="stylesheet">
    <link href="css/login.css" rel="stylesheet">
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/qs.min.js"></script>
</head>
<body>
<div id="app">
    <el-dialog
            title="注册"
            :visible.sync="addDialogVisible"
            width="30%"
    >
        <!--:model==绑定表单数据-->
        <el-form :model="addForm" :rules="loginrules" ref="loginrules">
            <el-form-item label="用户名" label-width="80px" prop="username">
                <el-input v-model="addForm.username" autocomplete="off" class="inps"></el-input>
            </el-form-item>
            <el-form-item label="密码" label-width="80px" prop="password">
                <el-input v-model.number="addForm.password" autocomplete="off" class="inps"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="zc">提交</el-button>
                    <el-button  @click="addDialogVisible=false">返回</el-button>
                </span>
    </el-dialog>

    <div>
        <div class="login-box">
            <h2>登录系统</h2>
            <el-form :model="loginForm"  :rules="loginrules" ref="loginrules" >
                <div class="user-box" >
                    <el-form-item  prop="username" label-width="80px">
                        <el-input v-model="loginForm.username" autocomplete="off">
                        </el-input>
                        <label>账号</label>
                    </el-form-item>
                </div>
                <div class="user-box" >
                    <el-form-item prop="password" label-width="80px">
                        <el-input type="password" v-model.number="loginForm.password" autocomplete="off" >
                        </el-input>
                        <label>密码</label>
                    </el-form-item>
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a @click="login">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    登录
                </a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a @click="addDialogVisible = true">注册 </a>
            </el-form>
        </div>
    </div>
</div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data: {
            loginForm: {},
            //添加对话框的显示和隐藏，如果为true显示，false则隐藏
            addDialogVisible:false,
            //添加表单的数据
            addForm:{},
            loginrules: {
                username: [
                    {required: true, message: '请输入账号', trigger: 'blur'},
                    {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'}
                ],
            }
        },
        methods:{
            login(){
                var that=this;
                var qs=Qs;
                axios.post("/login",qs.stringify(this.loginForm)).then(function (result){
                    if (result.data.code===2000){
                        that.$message.success(result.data.msg);
                        location.href="elementui.jsp";
                    }else {
                        that.$message.error(result.data.msg);
                    }
                })
            },
        },

    });
</script>
</html>

（5）在webapp中创建一个elementui.jsp

<%--
  Created by IntelliJ IDEA.
  User: 86151
  Date: 2022/6/9
  Time: 11:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>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>
</head>
<body>
<div id="app">
    <el-table
            :data="students"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="编号"
                width="150">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="150">
        </el-table-column>
        <el-table-column
                prop="birthday"
                label="日期"
                width="150">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
                width="150">
        </el-table-column>
    </el-table>
</div>

</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            students:[],
        },
        created(){
            this.initTable();
        },
        methods:{
            initTable() {
                var that=this;
                axios.get("list").then(function (result){
                    if (result.data.code===2000){
                        that.students=result.data.data;
                    }else if(result.data.code===5001){
                        that.$message.error(result.data.msg);
                        location.href="login.jsp";
                    }else {
                        that.$message.error(result.data.msg);
                    }
                })
            }
        }
    })
</script>
</html>

（6）在springmvc.xml中配置拦截器

<!--配置拦截器-->
    <mvc:interceptors>
        <mvc:interceptor>
            <!--拦截的路径 /**表示拦截所有路径-->
            <mvc:mapping path="/**"/>
            <!--不经过拦截的路径 /*表示一层路径-->
            <mvc:exclude-mapping path="/login"/>
            <mvc:exclude-mapping path="/css/*"/>
            <mvc:exclude-mapping path="/js/*"/>
            <!--自定义的拦截器类路径-->
            <bean class="com.cmw.interceptor.LoginInterceptor"/>
        </mvc:interceptor>
    </mvc:interceptors>

（7）运行界面如图