ssm整合的详解及crud操作

子非鱼呀

已于 2022-08-11 16:36:21 修改

阅读量1.1k

点赞数

文章标签： spring java 后端

于 2022-06-17 21:57:05 首次发布

本文链接：https://blog.csdn.net/weixin_56028042/article/details/125339708

版权

一.ssm整合原理

“ssm框架的整合,其实是把springmvc、mybatis整合到spring框架中,说的更简单一点,就是把之前由开发者创建springmvc、mybatis对象的工作交给spring。而spring更强大的地方在于,整合之后,开发者能以更简单的方式使用这些框架。

二.整合准备

1.创建一个MAVEN-web工程

2.替换web.xml文件内容

<?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.在pom.xml文件中添加依赖

  <dependencies>
    <!--spring-webmvc-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.2.15.RELEASE</version>
    </dependency>

    <!--mybatis依赖-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.5.6</version>
    </dependency>

    <!--mybatis和spring整合的依赖-->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>2.0.6</version>
    </dependency>

    <!--mysql驱动-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.28</version>
    </dependency>

    <!--druid连接池依赖-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.2.1</version>
    </dependency>

    <!--lombok依赖-->
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.24</version>
    </dependency>
    <!--jackson java对象转换为json对象 @ResponseBody-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.13.2.2</version>
    </dependency>
    <!--servlet-api依赖-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>4.0.1</version>
    </dependency>

<!--    spring连接mysql的中间jar包-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>5.2.15.RELEASE</version>
    </dependency>

<!--    快速生成mybaits框架的jar包-->
    <dependency>
      <groupId>org.mybatis.generator</groupId>
      <artifactId>mybatis-generator-core</artifactId>
      <version>1.4.0</version>
    </dependency>

<!--    日志文件-->
    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-log4j12</artifactId>
      <version>1.7.30</version>
    </dependency>

<!--    分页操作-->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.3.0</version>
    </dependency>


  </dependencies>

4.编写springmvc配置文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">

<!--    包扫描-->
    <context:component-scan base-package="com.wt" />
<!--    注解注入-->
    <mvc:annotation-driven />
<!--    开启静态资源-->
    <mvc:default-servlet-handler />


<!--    设置拦截器-->
    <mvc:interceptors>
        <mvc:interceptor>
            <mvc:mapping path="/**"/>
            <mvc:exclude-mapping path="/login"/>
            <mvc:exclude-mapping path="/css/**"/>
            <mvc:exclude-mapping path="/js/**"/>
            <mvc:exclude-mapping path="/imgs/**"/>
            <bean class="com.wt.interceptor.MyInterceptor" />
        </mvc:interceptor>
    </mvc:interceptors>
<!--    spring的配置-->
<!--    数据源的配置-->
    <bean id="ds" class="com.alibaba.druid.pool.DruidDataSource">
<!--        连接数据库的基本设置-->
        <property name="driverClassName" value="com.mysql.cj.jdbc.Driver" />
        <property name="url" value="jdbc:mysql://localhost:3306/mybatis?serverTimezone=Asia/Shanghai" />
        <property name="username" value="root" />
        <property name="password" value="root" />
<!--        初始化连接池个数-->
        <property name="initialSize" value="5"/>
<!--        连接池至少个数-->
        <property name="minIdle" value="5" />
<!--        连接池最多个数-->
        <property name="maxActive" value="10" />
<!--        连接最长等待时间(毫秒)-->
        <property name="maxWait" value="3000" />

    </bean>

<!--    mybatis的配置-->
<!--    SqlsessionFactory的整合-->
        <bean id="sessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
            <property name="dataSource" ref="ds" />
<!--            设置映射文件路径-->
            <property name="mapperLocations" value="classpath:mapper/*.xml" />

<!--            配置分页文件-->
            <property name="plugins">
                <array>
                    <bean class="com.github.pagehelper.PageInterceptor"></bean>
                </array>
            </property>
        </bean>

<!--        配置mapper接口的代理实现类-->
        <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
             <!--为com.ykq.dao包下的接口生成代理实现类-->
            <property name="basePackage" value="com.wt.dao" />
        </bean>




</beans>

5.配置web.xml文件

<servlet>
    <servlet-name>DispatcherServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
<!--      读取springmvc文件-->
      <param-value>classpath:springmvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </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.配置Tomcat并启动

如果启动Tomcat时出现以下错误，是缺少jar包问题

若添加后启动还会出错，可能是springmvc配置文件有误

<dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>5.2.15.RELEASE</version>
    </dependency>

7.mybatis快速生成器

使用generator快速生成实体类(entity)，dao接口，mapper映射文件

(1)配置相关jar包

    <!--generator-->
    <dependency>
      <groupId>org.mybatis.generator</groupId>
      <artifactId>mybatis-generator-core</artifactId>
      <version>1.4.0</version>
    </dependency>

(2)配置generator文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
        PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
        "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">

<generatorConfiguration>
    <!--    将location改为本地mysql.jar包所在路径-->
    <classPathEntry location="D:\qy151\repMaven\mysql\mysql-connector-java\8.0.28\mysql-connector-java-8.0.28.jar"/>


    <context id="DB2Tables" targetRuntime="MyBatis3">
        <!--        取消注释-->
        <commentGenerator>
            <property name="suppressAllComments" value="true"/>
        </commentGenerator>

        <jdbcConnection driverClass="com.mysql.cj.jdbc.Driver"
                        connectionURL="jdbc:mysql://localhost:3306/mybatis?serverTimezone=Asia/Shanghai"
                        userId="root"
                        password="root">
        </jdbcConnection>

        <javaTypeResolver>
            <property name="forceBigDecimals" value="false"/>
        </javaTypeResolver>

        <javaModelGenerator targetPackage="com.wt.entity" targetProject=".\src\main\java">
            <property name="enableSubPackages" value="true"/>
            <property name="trimStrings" value="true"/>
        </javaModelGenerator>

        <sqlMapGenerator targetPackage="mapper" targetProject=".\src\main\resources">
            <property name="enableSubPackages" value="true"/>
        </sqlMapGenerator>

        <javaClientGenerator type="XMLMAPPER" targetPackage="com.wt.dao" targetProject=".\src\main\java">
            <property name="enableSubPackages" value="true"/>
        </javaClientGenerator>

        <table schema="mybatis" tableName="tb_stu" domainObjectName="Student"
               enableCountByExample="false" enableDeleteByExample="false" enableUpdateByExample="false"
               enableSelectByExample="false">
        </table>
        <table schema="mybatis" tableName="tb_class" domainObjectName="Claszz"
               enableCountByExample="false" enableDeleteByExample="false" enableUpdateByExample="false"
               enableSelectByExample="false">
        </table>
        <table schema="mybatis" tableName="tbl_user" domainObjectName="User"
               enableCountByExample="false" enableDeleteByExample="false" enableUpdateByExample="false"
               enableSelectByExample="false">
        </table>

    </context>
</generatorConfiguration>

(3)测试生成

import org.mybatis.generator.api.MyBatisGenerator;
import org.mybatis.generator.config.Configuration;
import org.mybatis.generator.config.xml.ConfigurationParser;
import org.mybatis.generator.internal.DefaultShellCallback;

import java.io.File;
import java.util.ArrayList;
import java.util.List;

public class Test01 {
    public static void main(String[] args) throws Exception{
        List<String> warnings = new ArrayList<String>();
        boolean overwrite = true;
        //要与自己的generator.xml文件名相同
        File configFile = new File("generator.xml");
        ConfigurationParser cp = new ConfigurationParser(warnings);
        Configuration config = cp.parseConfiguration(configFile);
        DefaultShellCallback callback = new DefaultShellCallback(overwrite);
        MyBatisGenerator myBatisGenerator = new MyBatisGenerator(config, callback, warnings);
        myBatisGenerator.generate(null);
    }

}

三.开始项目功能添加

创建commentResult实体类：

@Data
@AllArgsConstructor
@NoArgsConstructor
public class CommentResult {
    private int code;
    private String msg;
    private Object data;
}

1.查询所有

(1) 创建service接口

public interface ElementService {
    //创建方法
    public CommentResult selc();

}

(2)创建Impl文件连接service接口

@Service
public class ElementServiceImpl implements ElementService {
    //通过类型创建bean文件
    @Autowired
    private StudentMapper studentMapper;


    public CommentResult selc() {
        List<Student> all = studentMapper.findAll(map);
        if (all!=null){
            return new CommentResult(2000,"查询成功",all);
        }
        return new CommentResult(5000,"查询失败",null);
    }

    

    
}

(3) 创建controller文件

//将数据转为json格式并同时执行@Controller功能
@RestController
public class ElementController {

    //调用service接口
    @Autowired
    private ElementService elementService;

    @RequestMapping("selc")
    public CommentResult selc(){
        //通过service接口调用方法selc查询所有
        CommentResult selc = elementService.selc();
        return selc;
    }
}

(4) 测试查询是否成功

(5) 添加前端页面

通过ajax请求向controller层提交请求并接收数据

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/qs.min.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="hz">

    <el-button type="success" @click="add = true">添加</el-button>
    <el-button type="success" @click="tc">退出</el-button>

    <el-dialog
            title="提示"
            :visible.sync="add"
            width="30%"
    >
        <el-form :model="addform" label-width="55px" :rules="rules" ref="addform">
            <el-form-item label="名字" prop="name">
                <el-input v-model="addform.stuName"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model.number="addform.stuAge"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio v-model="addform.sex" label="男">男</el-radio>
                <el-radio v-model="addform.sex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="cid">
                <el-input v-model="addform.classId"></el-input>
            </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
                <el-button @click="add = false">取 消</el-button>
                <el-button type="primary" @click="addStu">确 定</el-button>
            </span>
    </el-dialog>

    <el-dialog
            title="提示"
            :visible.sync="updd"
            width="30%"
    >
        <el-form :model="updform" label-width="55px" :rules="rules" ref="updform">
            <el-form-item label="名字" prop="name">
                <el-input v-model="updform.stuName"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model.number="updform.stuAge"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio v-model="updform.sex" label="男">男</el-radio>
                <el-radio v-model="updform.sex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="cid">
                <el-input v-model="updform.classId"></el-input>
            </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
                <el-button @click="updd = false">取 消</el-button>
                <el-button type="primary" @click="updStu">确 定</el-button>
            </span>
    </el-dialog>

    <el-table
            :data="tableData"
            style="width: 100%"
    >
        <el-table-column
                prop="stuId"
                label="编号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="stuName"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="stuAge"
                label="年龄"
                width="180">
        </el-table-column>
        <el-table-column
                prop="sex"
                label="性别"
                width="180">
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.sex=='男'?"男":"女" }}</el-tag>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column
                prop="classId"
                label="cid"
                width="180">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="200">
            <template slot-scope="scope">
                <el-button @click="upd(scope.row)" class="el-icon-edit" type="primary" size="small">修改</el-button>
                <el-button type="success" class="el-icon-delete" size="small" @click="del(scope.row.stuId)" >删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
</body>
</html>
<script>
    var app = new Vue({
        el:"#hz",
        data:{
            tableData:[],
            add:false,
            addform:{"sex":'男'},
            updd:false,
            updform:{"sex":'男'},
            rules:{
                stuName:[
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                stuAge:[
                    { required: true, message: '年龄不能为空'},
                    { type: 'number', message: '年龄必须为数字值'}
                ],
                classId:[
                    { required: true, message: 'cid不能为空'},
                    { type: 'number', message: 'cid必须为数字值'}
                ]
            }
        },
        created(){
            this.selcAll()
        },
        methods:{
            selcAll(){
                var that = this;
                axios.post("selc").then(function (result){
                    //console.log(result)
                    if (result.data.code===2000){
                        // that.$message.success(result.data.msg)
                        that.tableData = result.data.data;

                    }else if(result.data.code===5001){
                        that.$message.error(result.data.msg)
                        location.href = "dl.jsp"
                    }else {
                        that.$message.error(result.data.msg)
                    }

                })
            },
            del(btn){
                var that = this;
                var qs = Qs;
                console.log(btn)
                axios.post("delt?id="+btn).then(function (result){

                    if (result.data.code==2000){
                        that.$message.success(result.data.msg)
                        that.selcAll();
                    }
                })
            },
            addStu(){
                this.$refs['addform'].validate((valid) => {
                    if (valid) {
                        var that = this;
                        var qs = Qs;
                        console.log(this.addform)
                        axios.post("/inst",qs.stringify(that.addform)).then(function (result){
                            // console.log(result);
                            if (result.data.code==2000){
                                that.add = false;
                                that.addform = {"sex":'男'}
                                that.$message.success(result.data.msg);
                                that.selcAll();
                            }
                        })
                    }
                });

            },
            upd(row){
                this.updd = true;
                //console.log(row)
                this.updform = row;
            },
            updStu(){
                this.$refs['updform'].validate((valid) => {
                    if (valid) {
                        var that = this;
                        var qs = Qs;
                        //console.log(this.updform)
                        axios.post("/updt",qs.stringify(that.updform)).then(function (result){
                            // console.log(result);
                            if (result.data.code==2000){
                                that.updd = false;
                                that.updform = {"sex":'男'}
                                that.$message.success(result.data.msg);
                                that.selcAll();
                            }
                        })
                    }
                });
            },
            tc(){
                axios.post("tc").then(function (result){
                    location.href="dl.jsp"
                })
            }
        }
    })
</script>

出现以下页面则查询成功

2.增加、删除、修改

(1) 在service接口中添加增删改的方法

public interface ElementService {
    //查询所有
    public List<Student> slec();
    //删除
    public CommentResult dele(Integer id);
    //修改
    public CommentResult upd(Student student);
    //增加
    public CommentResult inst(Student student);
}

(2) 在impl文件中通过mapper接口调用相应的方法

@Service
public class ElementServiceImpl implements ElementService {
    //查询所有

    @Autowired
    private StudentMapper studentMapper;

    public List<Student> slec() {
        List<Student> all = studentMapper.findAll();
        return all;
    }

    //删除
    public CommentResult dele(Integer id) {
        int i = studentMapper.deleteByPrimaryKey(id);
        System.out.println(i);
        if (i>0){
            return new CommentResult(2000,"删除成功",null);
        }
        return new CommentResult(5000,"删除失败",null);
    }

    //修改
    public CommentResult upd(Student student) {
        int i = studentMapper.updateByPrimaryKeySelective(student);
        if (i>0){
            return new CommentResult(2000,"修改成功",null);
        }
        return new CommentResult(5000,"修改失败",null);
    }
    
    //增加
    public CommentResult inst(Student student) {
        int i = studentMapper.insertSelective(student);
        if (i>0){
            return new CommentResult(2000,"添加成功",null);
        }
        return new CommentResult(5000,"添加失败",null);

    }
}

(3) 在controller文件中添加并调用相迎的增删改方法

@Controller
public class ElementController {
    @Autowired
    private ElementService elementService;

    @RequestMapping("selc")
    @ResponseBody
    public CommentResult selc(){
        List<Student> slec = elementService.slec();
        if (slec!=null){
            return new CommentResult(2000,"查询成功",slec);
        }
        return new CommentResult(5000,"查询失败",null);
    }

    @RequestMapping("delt")
    @ResponseBody
    public CommentResult delt(Integer id){
        CommentResult dele = elementService.dele(id);
        return dele;
    }

    @RequestMapping("updt")
    @ResponseBody
    public CommentResult updt(Student student){
        CommentResult upd = elementService.upd(student);
        return upd;
    }


    @RequestMapping("inst")
    @ResponseBody
    public CommentResult inst(Student student){
        CommentResult inst = elementService.inst(student);
        return inst;
    }

    
}

(4)在搭建好的前端页面进行功能测试

四.登录页面的制作

1.通过username 和password进行查询登录

(1) 创建相应的service接口

public interface UserService {
    public CommentResult login(String name, String password);
}

(2) 创建Impl文件连接service接口

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserMapper userMapper;


    public CommentResult login(String name, String password) {
        String selc = userMapper.selc(name,password);
        if (selc!=null){
            HttpSession session = WebUtils.getSession();
            session.setAttribute("user",name);
            return new CommentResult(2000,"登录成功",null);
        }
        return new CommentResult(5000,"登录失败",null);
    }
}

(3) 创建controller文件调用service接口

@Controller
public class UserController {
    @Autowired
    private UserService userService;

    @RequestMapping("login")
    @ResponseBody
    public CommentResult logint(String name,String password){
        System.out.println(name+" "+password);
        CommentResult logind = userService.login(name, password);
        return logind;
    }
}

(4) 测试登录

(5) 添加前端页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <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>
<style>
    body,.box{
        overflow: hidden;
        height: 100%;
    }
    .box{
        background: url("img/img.png")  repeat;
    }
    #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>
<body>
<div class="box">
    <div id="loginBox">
        <!-- 头像 -->
        <div class="avatar_box">
            <img src="img/logo.png" />
        </div>
        <el-form label-width="80px" :model="dlForm" :rules="rules" ref="loginFormRef" class="login_form">
            <el-form-item label="账号:" prop="name">
                <el-input v-model="dlForm.name"></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="password">
                <el-input v-model="dlForm.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</body>
</html>
<script>
    var app = new Vue({
        el:".box",
        data:{
            dlForm:{},
            rules:{
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password: [
                    {required: true, message: "请输入密码", trigger: "blur"},
                    {min: 2, max: 12, message: "密码的长度必须{2~12}", trigger: "blur"},
                ]
            }
        },
        methods:{
            submitForm(){
                var that = this;
                var qs = Qs;
                axios.post("login",qs.stringify(this.dlForm)).then(function (result){
                    console.log(result.data.code)
                    if (result.data.code==2000){
                        that.$message.success(result.data.msg)
                        location.href = "element01.jsp"
                    }else {
                        that.$message.error(result.data.msg)
                    }
                })
            }
        }
    })
</script>

五.添加过滤器

添加过滤器，防止用户未登录就可访问信息界面

1.创建拦截器文件并实现接口

public class MyInterceptor implements HandlerInterceptor {
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        System.out.println("经过了拦截器");
        HttpSession session = request.getSession();
        Object user = session.getAttribute("user");
        System.out.println(user);
        if (user!=null){
            return  true;
        }
        PrintWriter writer = response.getWriter();
        CommentResult result = new CommentResult(5001,"请先进行登录",null);
        ObjectMapper objectMapper = new ObjectMapper();
        String s = objectMapper.writeValueAsString(result);
        writer.print(s);
        writer.flush();
        writer.close();
        return false;
    }
}

2.在springmvc中配置相关信息

    <!--    设置拦截器-->
    <mvc:interceptors>
        <mvc:interceptor>
<!--            设置拦截路径-->
            <mvc:mapping path="/**"/>
<!--            设置不经过拦截器的文件及相关路径-->
            <mvc:exclude-mapping path="/login"/>
            <mvc:exclude-mapping path="/css/**"/>
            <mvc:exclude-mapping path="/js/**"/>
            <mvc:exclude-mapping path="/imgs/**"/>
            <bean class="com.wt.interceptor.MyInterceptor" />
        </mvc:interceptor>
    </mvc:interceptors>

六.添加分页操作

我们发现在查询过程中，一页内显示出的数据过于多，我们在此加上分页操作：前端相关代码已在上面信息页面前端页面布局发布过

1.修改service接口的查询方法

为其添加两个参数即可

public CommentResult selc(Integer currentPage,Integer pageSize);

2.修改impl文件

public CommentResult selc(Integer currentPage,Integer pageSize) {
        PageHelper.startPage(currentPage,pageSize);
        List<Student> all = studentMapper.findAll();
        if (all!=null){

            PageInfo<Student> pageInfo = new PageInfo<Student>(all);
            return new CommentResult(2000,"查询成功",pageInfo);
        }
        return new CommentResult(5000,"查询失败",null);
    }

3.修改controller层代码

@RequestMapping("selc")
    public CommentResult selc(Integer currentPage,Integer pageSize) {
        CommentResult selc = elementService.selc(currentPage,pageSize);
        return selc;
    }

七.添加条件搜索操作

1.修改信息mapper方法并修改相应地mapper.xml映射文件的查询方法

//mapper接口修改
List<Student> findAll(Map map);

//mapper映射文件修改
<select id="findAll" resultMap="BaseResultMap">
  select <include refid="Base_Column_List" /> from tb_stu
  <where>
    <if test="stuName!=null and stuName!=''">
      and stu_Name = #{stuName}
    </if>
      <if test="sex!=null and sex!=''">
        and sex=#{sex}
      </if>
  </where>
</select>

2.修改service接口的查询方法

public CommentResult selc(Integer currentPage,Integer pageSize,Map map);

3.修改impl文件的查询方法

public CommentResult selc(Integer currentPage,Integer pageSize,Map map) {
        PageHelper.startPage(currentPage,pageSize);
        List<Student> all = studentMapper.findAll(map);
        if (all!=null){

            PageInfo<Student> pageInfo = new PageInfo<Student>(all);
            return new CommentResult(2000,"查询成功",pageInfo);
        }
        return new CommentResult(5000,"查询失败",null);
    }

4.修改controller层查询代码

  @RequestMapping("selc")
    public CommentResult selc(Integer currentPage,Integer pageSize,@RequestBody Map map) {
        CommentResult selc = elementService.selc(currentPage,pageSize,map);
        return selc;
    }

修改完毕后重启服务器，测试条件查询功能是否能够正常运行。