SSM整合之增删改查

一：SSM整合介绍

SpringMVC+Spring+Mybatis　俗称SSM 

　　在下面的整合案例中我将带大家完成整合和简单的CRUD操作，前端页面我将使用Vue和Element-UI来完成简单的布局，下面我将为大家展示全部代码，如果有对SSM部分不了解的也可以参考我的博客（详细）

1：环境介绍

JDK：1.9
tomcat：9.0.12
MySQL：5.5
maven：3.5.2
编译器：Intellij IDEA 2020.2.3 x64

2：项目页面

 3：项目结构

二：代码实现

1：基本配置文件（SQL语句）

<packaging>war</packaging>

    <!--设置maven的代码编译环境 我设置JDK1.9-->
    <properties>
        <maven.compiler.source>1.9</maven.compiler.source>
        <maven.compiler.target>1.9</maven.compiler.target>
        <maven.compiler.compilerVersion>1.9</maven.compiler.compilerVersion>
    </properties>
    
    <dependencies>
        <!-- ##########  Spring家族坐标  ########## -->
        <!--Spring-context主要坐标 核心容器-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>5.2.6.RELEASE</version>
        </dependency>
        <!--spring的jdbc操作数据库的jar包，包含spring自带数据源，jdbcTemplate-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>5.2.6.RELEASE</version>
        </dependency>
        <!--Spring对mybatis的支持-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>2.0.1</version>
        </dependency>
        <!--Spring-test测试坐标-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>5.2.6.RELEASE</version>
        </dependency>
        <!--Spring对Aop支持-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aop</artifactId>
            <version>5.2.6.RELEASE</version>
        </dependency>
        <!--支持解析切入点表达式等等-->
        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjweaver</artifactId>
            <version>1.9.5</version>
        </dependency>
        <!--支持AOP相关注解等等-->
        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjrt</artifactId>
            <version>1.9.5</version>
        </dependency>
        <!--事务管理器jar包-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-tx</artifactId>
            <version>5.2.6.RELEASE</version>
        </dependency>
        <!--springmvc的核心包-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.1.9.RELEASE</version>
        </dependency>

        <!-- ##########  mybatis核心坐标 注解sql语句需要  ########## -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.2</version>
        </dependency>

        <!-- ##########  日志相关坐标  ########## -->
        <!--引入日志的jar包 门面模式-->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-log4j12</artifactId>
            <version>1.6.1</version>
        </dependency>
        <!-- 日志工具包 -->
        <dependency>
            <groupId>org.apache.logging.log4j</groupId>
            <artifactId>log4j-api</artifactId>
            <version>2.10.0</version>
        </dependency>
        <!--日志核心包-->
        <dependency>
            <groupId>org.apache.logging.log4j</groupId>
            <artifactId>log4j-core</artifactId>
            <version>2.10.0</version>
        </dependency>
        <!--web相关的功能包-->
        <dependency>
            <groupId>org.apache.logging.log4j</groupId>
            <artifactId>log4j-web</artifactId>
            <version>2.9.1</version>
        </dependency>
        <!--为java做简单的日志记录-->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>1.7.26</version>
        </dependency>
        <!--slf4j的log4j实现类-->
        <dependency>
            <groupId>org.apache.logging.log4j</groupId>
            <artifactId>log4j-slf4j-impl</artifactId>
            <version>2.9.1</version>
        </dependency>
        <!--程序运行的时候检测用了哪种日志实现类-->
        <dependency>
            <groupId>org.apache.logging.log4j</groupId>
            <artifactId>log4j-jcl</artifactId>
            <version>2.9.1</version>
        </dependency>

        <!-- ##########  jackson之JSON处理相关坐标  ########## -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.9.0</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.0</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.9.0</version>
        </dependency>

        <!-- ##########  JSTL相关坐标 循环标签啥的  ########## -->
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>taglibs</groupId>
            <artifactId>standard</artifactId>
            <version>1.1.2</version>
        </dependency>

        <!-- ##########  Servlet/Jsp坐标  ########## -->
        <!--servlet-api ：引入servlet的功能-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
            <scope>provided</scope>
        </dependency>
        <!--jsp-api: jsp页面的功能包 -->
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
            <scope>provided</scope>
        </dependency>

        <!-- ##########  其它补充坐标  ########## -->
        <!--JDK9废弃了一些注解，使用此坐标导入-->
        <dependency>
            <groupId>javax.annotation</groupId>
            <artifactId>javax.annotation-api</artifactId>
            <version>1.3.2</version>
        </dependency>
        <!--mysql驱动坐标-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.32</version>
        </dependency>
        <!--c3p0连接池坐标-->
        <dependency>
            <groupId>com.mchange</groupId>
            <artifactId>c3p0</artifactId>
            <version>0.9.5.2</version>
        </dependency>
        <!--junit单元测试坐标-->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
        </dependency>
        <!--用来为实体类生成get/set啥的方法-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.8</version>
        </dependency>
    </dependencies>

<?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:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        https://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/aop
        https://www.springframework.org/schema/aop/spring-aop.xsd
         http://www.springframework.org/schema/tx
        https://www.springframework.org/schema/tx/spring-tx.xsd">

    <!--开启注解扫描 放入Spring容器-->
    <context:component-scan base-package="cn.xw">
        <!--不扫描Controller和Repository注解的类 Repository下面集成Mybatis扫描了 Controller在Springmvc.xml扫描-->
        <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
        <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Repository"/>
    </context:component-scan>

    <!--数据库连接基本信息properties文件引入-->
    <context:property-placeholder location="classpath:jdbc.properties"/>

    <!--配置C3P0连接池-->
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <property name="driverClass" value="${jdbc.driver}"/>
        <property name="jdbcUrl" value="${jdbc.url}"/>
        <property name="user" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
    </bean>

    <!--设置Mybatis工厂类bean对象-->
    <bean id="factoryBean" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--设置mybatis数据源-->
        <property name="dataSource" ref="dataSource"/>
        <!--配置别名-->
        <property name="typeAliasesPackage" value="cn.xw.pojo"/>
        <!--配置mybatis配置文件，如果有别的配置文件可以使用此标签导入-->
        <!--<property name="configuration" value="classpath:SqlMapConfig.xml"/>-->
    </bean>

    <!--配置mapper扫描映射类 一旦设置这个  说明dao包下的类都被扫描到Spring容器了-->
    <bean id="mapperScannerConfigurer" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="cn.xw.dao"/>
    </bean>

    <!--配置Spring自带的事务管理器  此时我使用的是Mybatis，所以要使用DataSourceTransactionManager实现类-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>

    <!--配置事务通知-->
    <tx:advice id="txAdvice" transaction-manager="transactionManager">
        <tx:attributes>
            <tx:method name="*" propagation="REQUIRED" read-only="false"/>
            <tx:method name="find*" propagation="SUPPORTS" read-only="true"/>
        </tx:attributes>
    </tx:advice>

    <!--配置AOP切入点表达式-->
    <aop:config>
        <aop:pointcut id="pt1" expression="execution(* cn.xw.service.impl.*.*(..))"/>
        <!--我们使用Spring提供的事务通知的话就不用再配置<aop:aspect>来指定啥前/后/环绕啥的通知了-->
        <aop:advisor advice-ref="txAdvice" pointcut-ref="pt1"/>
    </aop:config>
</beans>

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/demo_school
jdbc.username=root
jdbc.password=123

<?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">

    <!--注解扫描 加入Spring容器-->
    <context:component-scan base-package="cn.xw.controller">
        <!--设置只扫描Controller注解-->
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>

    <!--视图解析器-->
    <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/pages/"/>
        <property name="suffix" value=".jsp"/>
    </bean>

    <!--配置放行静态资源 Spring3.0以后发布  如果配置*.do在前端控制器就不要释放静态资源了-->
    <!--<mvc:default-servlet-handler/>-->
    <!--配置放行静态资源 Spring3.0之前 2选一-->
    <!--<mvc:resources mapping="/plugins/" location="/js/**"/>
    <mvc:resources mapping="/css/" location="/css/**"/>
    <mvc:resources mapping="/img/" location="/img/**"/>-->

    <!--开启MVC注解-->
    <mvc:annotation-driven/>
</beans>

<?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">

    <!--监听ServletContext对象创建-->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    <!--配置Spring配置文件加载 当tomcat启动会为每个WEB创建一个ServletContext对象，ServletContext初始化会执行-->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:applicationConfig.xml</param-value>
    </context-param>

    <!--配置前端控制器-->
    <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>*.do</url-pattern>
    </servlet-mapping>

    <!--配置post请求字符乱码拦截器-->
    <filter>
        <filter-name>characterEncodingFilter</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>characterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

2：一些实体类及业务

/**
 * @author: xiaofeng
 * @date: Create in $DATE
 * @description: 此结果类用来和前端交互
 * @version: v1.0.0
 */
@Data   //使用data一定要下载lombok插件
public class Result {
    private Boolean flag;       //记录此处操作是否成功
    private String Message;     //返回的信息提示
    private List data;       //返回的数据
    public Result(Boolean flag, String message, List data) {
        this.flag = flag;
        Message = message;
        this.data = data;
    }
    public Result(Boolean flag, String message) {
        this.flag = flag;
        Message = message;
    }
}

//+++++++++++++++++++++++++++++++++++++

/**
 * @author: xiaofeng
 * @date: Create in 2020/12/8
 * @description: 学生实体类
 * @version: v1.0.0
 */
@Data
public class Student {
    private int id;            //主键id
    private String name;       //姓名
    private String sex;        //性别
    private int age;           //年龄
    private double credit;     //学分
    private double money;      //零花钱
    private String address;    //住址
    private String enrol;      //入学时间
    //因为简单的单表CRUD就不涉及到外键
    //private int fid;            //外键 连接家庭表信息学生对家庭，一对一
    //private int tid;            //外键 连接老师信息 学生对老师，一对一
    //创建构造器/get/set/toString就不展示了
}

/**
 * @author: xiaofeng 
 * @date: Create in $DATE
 * @description: 学生Controller
 * @version: v1.0.0
 */
@RestController
@RequestMapping("/student")
public class StudentController {

    //自动注入StudentService实现类
    @Autowired
    private StudentService studentService;
    
    //查询全部
    @RequestMapping("/findAll")
    public Result findAll() {
        try {
            List<Student> studentList = studentService.findAll();
            return new Result(true, "数据查询完成", studentList);
        } catch (Exception e) {
            e.printStackTrace();
            return new Result(false, "数据查询失败");
        }
    }

    //根据ID查询数据
    @RequestMapping("/findById")
    public Result findById(@RequestParam("id") Integer stuId) {
        try {
            Student student = studentService.findById(stuId);
            //查询的数据封装到List对象
            ArrayList<Student> arrayList = new ArrayList<>();
            arrayList.add(student);
            return new Result(true, "数据查询完成", arrayList);
        } catch (Exception e) {
            e.printStackTrace();
            return new Result(false, "数据查询失败");
        }
    }

    //更新学生
    @RequestMapping("/update")
    public Result updateStudent(@RequestBody Student student) {
        try {
            Boolean boo = studentService.update(student);
            if (boo) {
                return new Result(true, "更新成功");
            } else {
                return new Result(false, "未更新成功");
            }
        } catch (Exception e) {
            e.printStackTrace();
            return new Result(false, "更新出错");
        }
    }

    //添加
    @RequestMapping("/save.do")
    public Result saveStudent(@RequestBody Student student) {

        System.out.println(student);
        try {
            Boolean boo = studentService.save(student);
            if (boo) {
                return new Result(true, "添加成功");
            } else {
                return new Result(false, "添加失败");
            }
        } catch (Exception e) {
            e.printStackTrace();
            return new Result(false, "添加出错");
        }
    }

    //删除
    @RequestMapping("/delete.do")
    public Result deleteStudent(Integer id) {
        try {
            Boolean boo = studentService.deleteById(id);
            if (boo) {
                return new Result(true, "删除成功");
            } else {
                return new Result(false, "删除失败");
            }
        } catch (Exception e) {
            e.printStackTrace();
            return new Result(false, "删除出错");
        }
    }
}

/**
 * @author: xiaofeng
 * @date: Create in $DATE
 * @description: 学生dao接口
 * @version: v1.0.0
 */
public interface StudentDao {

    /**
     * 根据ID查询学生
     * @param id
     * @return
     */
    @Select("select * from student where sid=#{sid}")
    @Results(id = "studentMapper", value = {
            @Result(id = true, column = "sid", property = "id"),
            @Result(column = "sname", property = "name"),
            @Result(column = "ssex", property = "sex"),
            @Result(column = "sage", property = "age"),
            @Result(column = "scredit", property = "credit"),
            @Result(column = "smoney", property = "money"),
            @Result(column = "saddress", property = "address"),
            @Result(column = "senrol", property = "enrol")
    })
    Student findById(@Param(value = "sid") Integer id);

    /**
     * 查询全部学生
     * @return
     */
    @Select("select * from student limit 6")
    @ResultMap(value = {"studentMapper"})
    List<Student> findAll();

    /**
     * 添加学生
     * @param student
     * @return
     */
    @Insert("insert into student(sname,ssex,sage,scredit,smoney,saddress,senrol)" +
            " values (#{name},#{sex},#{age},#{credit},#{money},#{address},#{enrol})")
    Boolean save(Student student);

    /**
     * 更新学生
     * @param student
     * @return
     */
    @Update("update student set sname=#{name},ssex=#{sex},sage=#{age}," +
            "scredit=#{credit},smoney=#{money},senrol=#{enrol},saddress=#{address} where sid=#{id}")
    Boolean update(Student student);

    /**
     * 根据ID删除学生
     * @param id
     * @return
     */
    @Delete("delete from student where sid = #{sid}")
    Boolean deleteById(@Param(value = "sid") Integer id);
    
}

/**
 * @author: xiaofeng
 * @date: Create in $DATE
 * @description: 学生业务接口
 * @version: v1.0.0
 */
public interface StudentService {

    List<Student> findAll();

    Boolean save(Student student);

    Boolean update(Student student);

    Boolean deleteById(Integer id);
    
    Student findById(Integer stuId);
}

//+++++++++++++++++++++++++++++++++++++

/**
 * @author: xiaofeng
 * @date: Create in $DATE
 * @description: 学生业务接口实现类
 * @version: v1.0.0
 */
@Service
public class StudentServiceImpl implements StudentService {

    //自动注入 提供构造方法 或者使用@Autowired也OK
    private final StudentDao studentDao;

    public StudentServiceImpl(StudentDao studentDao) {
        this.studentDao = studentDao;
    }

    /**
     * 查询全部学生
     * @return
     */
    @Override
    public List<Student> findAll() {
        return studentDao.findAll();
    }


    /**
     * 根据ID查询
     * @param stuId
     * @return
     */
    @Override
    public Student findById(Integer stuId) {
        return studentDao.findById(stuId);
    }

    /**
     * 添加学生
     * @return
     */
    @Override
    public Boolean save(Student student) {
        return studentDao.save(student);
    }

    /**
     * 更新学生
     * @param student
     * @return
     */
    @Override
    public Boolean update(Student student) {
        return studentDao.update(student);
    }

    /**
     * 删除学生
     * @param id
     * @return
     */
    @Override
    public Boolean deleteById(Integer id) {
        System.out.println(id);
        return studentDao.deleteById(id);
    }
}

3：测试代码（有需求的可以在写完这个测试）

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(value = "classpath:applicationConfig.xml")
public class MyTest {

    @Autowired
    private StudentService studentService;
    @Test
    public void testFindAll() {
        List<Student> students = studentService.findAll();
        for (Student student : students) {
            System.out.println(student);
        }
    }
    @Test
    public void testSave() {
        Student stu = new Student();
        stu.setName("许龄月");
        stu.setSex("女");
        stu.setAge(25);
        stu.setCredit(65);
        stu.setMoney(600.5);
        stu.setAddress("安徽六安");
        stu.setEnrol("2020-12-8");
        Boolean boo = studentService.save(stu);
        System.out.println("是否保存完成：" + boo);
    }
    @Test
    public void testUpdate() {
        Student stu = new Student();
        stu.setId(1);
        stu.setName("蚂蚁小哥");
        stu.setSex("男");
        stu.setAge(25);
        stu.setCredit(65);
        stu.setMoney(600.5);
        stu.setAddress("安徽六安");
        stu.setEnrol("2020-12-8");
        Boolean boo = studentService.update(stu);
        System.out.println("是否更新完成：" + boo);
    }
    @Test
    public void testDelete() {
        //有主见存在，不能乱删只能删除最后添加的
        Boolean boo = studentService.deleteById(66);
        System.out.println("是否删除完成：" + boo);
    }
}

4：页面代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SSM框架整合</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- CDN引入样式  这样就不用下载了 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--<link rel="stylesheet" href="../elementui/index.css">-->
</head>
<body class="hold-transition">
<!--组件开始-->
<div id="app">

    <div class="content-header">
        <h1><small>学生管理</small></h1>
    </div>

    <div class="app-container">
        <div class="box">
            <!--新建按钮-->
            <div class="filter-container">
                <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
            </div>
            <!--表单正文-->
            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                <el-table-column type="index" align="center" label="序号"></el-table-column>
                <el-table-column prop="name" align="center" label="姓名"></el-table-column>
                <el-table-column prop="sex" align="center" label="性别"></el-table-column>
                <el-table-column prop="age" align="center" label="年龄"></el-table-column>
                <el-table-column prop="credit" align="center" label="学分"></el-table-column>
                <el-table-column prop="money" align="center" label="零花钱"></el-table-column>
                <el-table-column prop="address" align="center" label="地址"></el-table-column>
                <el-table-column prop="enrol" align="center" label="入学时间"></el-table-column>

                <el-table-column fixed="right" width="150" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 新增标签弹层 -->
            <div class="add-form">
                <el-dialog title="新增账户" :visible.sync="dialogFormVisible">
                    <el-form ref="dataAddForm" :model="formData" label-position="right" label-width="100px">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="学生姓名">
                                    <el-input v-model="formData.name" type="text"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="性别">
                                    <el-input v-model="formData.sex" type="text"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="年龄">
                                    <el-input v-model="formData.age" type="text"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="学分">
                                    <el-input v-model="formData.credit" type="text"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="零花钱">
                                    <el-input v-model="formData.money" type="text"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="住址">
                                    <el-input v-model="formData.address" type="text"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col>
                                <el-form-item label="入学时间">
                                    <el-date-picker :span="24"
                                                    value-format="yyyy-MM-dd"
                                                    v-model="formData.enrol"
                                                    type="date"
                                                    placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="handleAdd()">确定</el-button>
                    </div>
                </el-dialog>
            </div>
            <!-- 编辑标签弹层 -->
            <div class="add-form">
                <el-dialog title="编辑账户" :visible.sync="dialogFormVisible4Edit">
                    <el-form ref="dataAddForm" :model="formData" label-position="right" label-width="100px">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="学生编号">
                                    <el-input v-model="formData.id" disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="学生姓名">
                                    <el-input v-model="formData.name" type="text"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="性别">
                                    <el-input v-model="formData.sex" type="text"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="年龄">
                                    <el-input v-model="formData.age" type="text"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="学分">
                                    <el-input v-model="formData.credit" type="text"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="零花钱">
                                    <el-input v-model="formData.money" type="text"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="住址">
                                    <el-input v-model="formData.address" type="text"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="入学时间">
                                    <el-input v-model="formData.enrol" type="text" disabled type="date"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                        <el-button type="primary" @click="handleEdit()">确定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</div>
</body>
<!-- CDN引入 这样就不用下载了-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--<script src="../js/vue.js"></script>-->
<!--<script src="../elementui/index.js"></script>-->
<!--<script src="../js/axios-0.18.0.js"></script>-->
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            dataList: [
                {
                    id: 1,
                    name: "蚂蚁小哥",
                    sex: "男",
                    age: 25,
                    credit: 65.0,
                    money: 600.5,
                    address: "安徽六安",
                    enrol: "2020-12-12"
                }
            ],//当前页要展示的分页列表数据
            formData: {},//表单数据
            dialogFormVisible: false,//增加表单是否可见
            dialogFormVisible4Edit: false//编辑表单是否可见
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            this.findPage();
        },
        methods: {
            //编辑
            handleEdit() {
                axios.post("http://localhost:8080/ssm/student/update.do",this.formData).then(response=>{
                    if(response.data.flag){
                       this.$message.success(response.data.message);
                        //再次更新一下表单
                        this.findPage();
                        //操作成功后改变修改表单到隐藏
                        this.dialogFormVisible4Edit=false;
                    }else{
                        this.$message.error(response.data.message)
                    }
                })
            },
            //添加
            handleAdd() {
                axios.post("http://localhost:8080/ssm/student/save.do",this.formData).then(response=>{
                    if(response.data.flag){
                        this.$message.success(response.data.message)
                        //再次更新一下表单
                        this.findPage();
                        //操作成功后改变修改表单到隐藏
                        this.dialogFormVisible=false;
                    }else{
                        this.$message.error(response.data.message)
                    }

                })

            },
            //查询
            findPage() {
                //发送ajax请求获取全部数据
                axios.get("http://localhost:8080/ssm/student/findAll.do").then(response => {
                    if(response.data.flag){
                        console.log(response.data);
                        this.dataList = response.data.data;
                    }else{
                        this.$message.error(response.data.message)
                    }
                })
            },
            // 新增弹窗
            handleCreate() {
                this.dialogFormVisible = true;
                this.formData = {};
            },
            //编辑弹框
            handleUpdate(row) {
                this.dialogFormVisible4Edit = true;
                //把原有的表单数据赋值给编辑页面，但是不推荐，因为中途表单已经被更改了 所以先id查询回显
                //this.formData = row;
                axios.get("http://localhost:8080/ssm/student/findById.do?id="+row.id).then(response => {
                    if(response.data.flag){
                        this.formData = response.data.data[0];
                    }else{
                        this.$message.error(response.data.message)
                    }
                })
            },
            // 删除
            handleDelete(row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //ajax发送删除
                    axios.get("http://localhost:8080/ssm/student/delete.do?id="+row.id).then(response=>{
                        if(response.data.flag){
                            this.$message.success(response.data.message)
                            //再次更新一下表单
                            this.findPage();
                        }else{
                            this.$message.error(response.data.message)
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    })
</script>
</html>

。