Vue+Mysql+SpringBoot简单增删改查

关于Spring篇

关于mybatis+maven基本知识掌握总结

maven中spring+springmvc+mybatis整合详细配置

SpringBoot+Mybatis+Redis基础配置

这两天写的一个补考作业，敲完还是记录下。不然一个月后没敲代码又忘记了，废话多说，需要项目源码自己拿。

链接：https://pan.baidu.com/s/1RQ1rD9fARI37bhCHwLLVOg
提取码：gio8
先贴张效果图，GIF图没下软件懒得弄了。自己试验。

首先需要你有一定的vue和springboot基础，springboot可以先看看我这篇博客，可能没讲的细，但是问题点我是提到了。

https://blog.csdn.net/qq_41520636/article/details/87192263

老规矩，先说说这个东西遇到的麻烦。

问题一：

在使用vue和axios时，对接后台的post请求，后台一直接收null值。几近百度没法后，选择放弃治疗。换了GET请求方式，有大佬可以解决，麻烦再私信或评论告知。谢谢！

--------------20200417更新----------------------------

此问题已解决！

解决方案链接：https://blog.csdn.net/qq_41520636/article/details/104726763

问题二：

其实只是我忘记vue怎么使用的问题，我想要复选框选中的值，而我在data中写的v-model对应值是

checkData:''

这是错误的写法，不然会点击一个复选框，其他复选框全部选上。

正确的做法是

checkData：[]

问题三：

我使用的是自动生成代码generator辅助，所以百度了很多东西，要安装神马插件，有这么麻烦吗？pom.xml里的配置也是。

这个不算问题吧，只是我被误导了而已。

直接写java运行多好，简单方便易捷。

问题四：

就是我设计数据库时，是按照兴趣一对多的关系来的，因为以前的代码忘干净了，所以一时脑袋卡壳，做不出来。

从controller中我想要的学生表，通过List<Hobbys>直接在

@ResponseBody
@RequestMapping(value ="/addStudent")
public ResponseCode addStudent(@Valid Student student){System.out.println(student.toString());int insert = studentService.insert(student);return new ResponseCode(insert);
}

public class Student implements Serializable {

private List<Hobbys> hobby;

这个list直接通过

hobby.id直接添加进数据，可惜失败了。获取到的值一直是null值，退而次之，我只能单独添加一个hobby参数来获取。

问题五：

关于请求跨域问题，我配置了下，才解决问题。

以上差不多就是我遇到的问题了，下面是代码贴。

先贴代码自动生成

package org.lanqiao.test;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;/*** @ClassName TestGenerator* @Description TODO* @Author lisonglin* @Date 2018/12/5 17:00* @Version 1.0*/
public class TestGenerator {/**** 功能描述:*  调用generatorConfig.xml* @param: []* @return: void* @auther: 李松林* @date: 2018/12/8 19:50*/public void generator(){List<String> warnings=new ArrayList<String>();//更新数据库时，请修改项目的xml配置绝对路径File file=new File("E:\\MyJAVA\\SpringMakeup\\src\\main\\conf\\generatorConfig.xml");ConfigurationParser cp = new ConfigurationParser(warnings);Configuration config = null;try {config = cp.parseConfiguration(file);DefaultShellCallback shellCallback = new DefaultShellCallback(true);MyBatisGenerator myBatisGenerator = new MyBatisGenerator(config, shellCallback, warnings);myBatisGenerator.generate(null);System.out.println(warnings);} catch (Exception e) {e.printStackTrace();}}/**** @param args* @throws Exception*/public static void main(String[] args) throws Exception {try {TestGenerator generatorSqlmap = new TestGenerator();generatorSqlmap.generator();} catch (Exception e) {e.printStackTrace();}}}

<?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><context id="testTables" targetRuntime="MyBatis3" defaultModelType="flat"><property name="beginningDelimiter" value="`"/><property name="endingDelimiter" value="`"/><property name="javaFileEncoding" value="UTF-8"/><!-- 生成注释配置 --><commentGenerator><!-- 是否去除自动生成的注释 true：是 ： false:否 --><property name="suppressAllComments" value="true"/><property name="javaFileEncoding" value="UTF8"/><!--生成的注释包含时间戳(避免重复提交SVN,设为true)--><property name="suppressDate" value="true"/></commentGenerator><!--数据库连接的信息：驱动类、连接地址、用户名、密码 --><!--<jdbcConnection driverClass="oracle.jdbc.driver.OracleDriver"connectionURL="jdbc:oracle:thin:@150.16.17.22:1521/wsbs" userId="hr"password="hr123"></jdbcConnection>--><jdbcConnection driverClass="com.mysql.jdbc.Driver"connectionURL="jdbc:mysql://localhost:3306/sys?useUnicode=true&amp;characterEncoding=utf8&amp;useSSL=false"userId="root"password="123"></jdbcConnection><!-- 默认false，把JDBC DECIMAL 和 NUMERIC 类型解析为 Integer，为 true时把JDBC DECIMAL 和NUMERIC 类型解析为java.math.BigDecimal --><javaTypeResolver><property name="forceBigDecimals" value="false"/></javaTypeResolver><!-- targetProject:生成PO类的位置 --><javaModelGenerator targetPackage="org.lanqiao.model"targetProject="E:/MyJAVA/SpringMakeup/src/main/java"><!-- enableSubPackages:是否让schema作为包的后缀 --><property name="enableSubPackages" value="false"/><!-- 从数据库返回的值被清理前后的空格 --><property name="trimStrings" value="true"/></javaModelGenerator><!-- targetProject:mapper.xml映射文件生成的位置 --><sqlMapGenerator targetPackage="org.lanqiao.mapper"targetProject="E:/MyJAVA/SpringMakeup/src/main/conf"><!-- enableSubPackages:是否让schema作为包的后缀 --><property name="enableSubPackages" value="false"/></sqlMapGenerator><!-- targetPackage：mapper.java接口生成的位置 --><javaClientGenerator type="XMLMAPPER"targetPackage="org.lanqiao.mapper"targetProject="E:/MyJAVA/SpringMakeup/src/main/java"><!-- enableSubPackages:是否让schema作为包的后缀 --><property name="enableSubPackages" value="false"/></javaClientGenerator><!-- 指定数据库表 --><!--  enableCountByExample="false" enableUpdateByExample="false" enableDeleteByExample="false"enableSelectByExample="false" selectByExampleQueryId="false"--><!--不生成example--><!--<table tableName="items"></table> --><table tableName="hobbys" mapperName="HobbysMapper" domainObjectName="Hobbys"enableCountByExample="false" enableUpdateByExample="false" enableDeleteByExample="false"enableSelectByExample="false" selectByExampleQueryId="false"><!--下划线转驼峰命名--><property name="useActualColumnNames" value="false"/><!--指定自动生成主键的属性--><generatedKey column="id" sqlStatement="MySql" identity="true"></generatedKey><!--元素从将某些属性默认计算的值更改为指定的值。--><!--<columnOverride  column="message_content" javaType="List&lt;Teacher&gt;"></columnOverride >--><!--忽略字段--><!--<ignoreColumn column="file_id"></ignoreColumn>--><!--<ignoreColumn column="lyric_id"></ignoreColumn>--></table></context>
</generatorConfiguration>

项目包图


#热部署
#开启
spring.devtools.restart.enabled=true
#监听目录
spring.devtools.restart.additional-paths=src/main/java #mybatis
#mybatis-config.xml配置文件的路径
#mybatis.configLocation=classpath:mybatis-config.xml
#SQL语句映射文件
#mybatis.mapper-locaitons= classpath*:com/example/mapper/*.xml
mybatis.mapper-locations=classpath*:org/lanqiao/mapper/*.xml
# 类的别名的包
mybatis.type-aliases-package=org.lanqiao.model
#驼峰命名法
mybatis.configuration.mapUnderscoreToCamelCase=true
#允许返回多个结果集
mybatis.configuration.multipleResultSetsEnabled=true
#使用jdbc的getGeneratedKeys获取数据库自增主键值
mybatis.configuration.useGeneratedKeys=true
#日志
#mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
#延迟加载总开关( 查询时，关闭关联对象即时加载以提高性能)
mybatis.configuration.lazyLoadingEnabled=false
#侵入懒加载，设置为false则按需加载，否则会全部加载
mybatis.configuration.aggressiveLazyLoading=falsespring.datasource.url=jdbc:mysql://localhost:3306/sys?useUnicode=true&characterEncoding=utf8&useSSL=false
spring.datasource.username=root
spring.datasource.password=123
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.max-idle=10
spring.datasource.max-wait=10000
spring.datasource.min-idle=5
spring.datasource.initial-size=5

<?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"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.1.3.RELEASE</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>org.lanqiao</groupId><artifactId>demo</artifactId><version>0.0.1-SNAPSHOT</version><name>demo</name><description>Demo project for Spring Boot</description><properties><java.version>1.8</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- mybatis --><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.0.0</version></dependency><!-- mysql --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.21</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!--热部署--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><optional>true</optional></dependency><!-- tomcat的支持.--><dependency><groupId>org.apache.tomcat.embed</groupId><artifactId>tomcat-embed-jasper</artifactId></dependency><!--自动生成bean--><dependency><groupId>org.mybatis.generator</groupId><artifactId>mybatis-generator-core</artifactId><version>1.3.6</version></dependency><dependency><groupId>org.junit.jupiter</groupId><artifactId>junit-jupiter-api</artifactId><version>RELEASE</version><scope>compile</scope></dependency><!-- 对象转换成json引入如下依赖 --><!-- 文档：https://www.yiibai.com/jackson/jackson_first_application.html#article-start --><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.7.4</version></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

package org.lanqiao.controller;import org.lanqiao.model.Hobbys;
import org.lanqiao.model.ResponseCode;
import org.lanqiao.model.Student;
import org.lanqiao.service.HobbysService;
import org.lanqiao.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.validation.Valid;
import java.util.List;/*** @ClassName MainController* @Description TODO* @Author lisonglin* @Date 2019/3/28 0:03* @Version 1.0*/
@Controller
public class MainController {@AutowiredStudentService studentService;@AutowiredHobbysService hobbysService;@ResponseBody@RequestMapping("/getAll")public List<Student> getStudent(){List<Student> students = studentService.getAll();System.out.println(students);return students;}@ResponseBody@RequestMapping(value ="/addStudent")public ResponseCode addStudent(@Valid Student student, String hobbys){System.out.println(student.toString());System.out.println("兴趣是："+hobbys);int insert = studentService.insert(student,hobbys);return new ResponseCode(insert);}@ResponseBody@RequestMapping(value ="/updateStudent")public ResponseCode updateStudent(@Valid Student student,String hobbys){System.out.println(student+"兴趣："+hobbys);int i = studentService.updateByPrimaryKey(student, hobbys);return new ResponseCode(i);}@ResponseBody@RequestMapping(value ="/deleteStudent")public ResponseCode deleteStudent(Integer studentId){int i = studentService.deleteByPrimaryKey(studentId);return new ResponseCode(i);}@ResponseBody@RequestMapping("/getHobbys")public List<Hobbys> getHobbys(){return hobbysService.getHobbys();}@RequestMapping("/hello")public String hello(){return "hello";}}

package org.lanqiao.dao;import org.lanqiao.mapper.StudentHobbysMapper;
import org.lanqiao.mapper.StudentMapper;
import org.lanqiao.model.Student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;import java.util.List;/*** @ClassName StudentDao* @Description TODO* @Author lisonglin* @Date 2019/3/27 23:51* @Version 1.0*/
@Repository
public class StudentDao {@AutowiredStudentMapper studentMapper;@AutowiredStudentHobbysMapper studentHobbysMapper;public int deleteByPrimaryKey(Integer id){studentMapper.deleteByPrimaryKey(id);studentHobbysMapper.deleteHobbyIdToStudent(id);return 1;};public int insertStudent(Student student, String hobbys){studentMapper.insert(student);String regex = ",";String[] arr = hobbys.split(regex);for(int i=0;i<arr.length;i++){studentHobbysMapper.insertStudentHobby(student.getId(),arr[i]);}return 1;};public int insertSelective(Student record){return studentMapper.insertSelective(record);};public Student selectByPrimaryKey(Integer id){return studentMapper.selectByPrimaryKey(id);};public int updateByPrimaryKeySelective(Student record){return studentMapper.updateByPrimaryKeySelective(record);};public int updateByPrimaryKey(Student student, String hobbys){studentMapper.updateByPrimaryKey(student);studentHobbysMapper.deleteHobbyIdToStudent(student.getId());String regex = ",";String[] arr = hobbys.split(regex);for(int i=0;i<arr.length;i++){studentHobbysMapper.insertStudentHobby(student.getId(),arr[i]);}return 1;};public List<Student> getAll() {return studentMapper.getAll();}}

package org.lanqiao.dao;import org.lanqiao.mapper.HobbysMapper;
import org.lanqiao.model.Hobbys;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Repository;import java.util.List;/*** @ClassName HobbysDao* @Description TODO* @Author lisonglin* @Date 2019/3/30 15:54* @Version 1.0*/
@Repository
public class HobbysDao {@AutowiredHobbysMapper hobbysMapper;public List<Hobbys> getHobbys() {return hobbysMapper.getHobbys();}
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.lanqiao.mapper.HobbysMapper"><select id="getHobbys" resultType="Hobbys">select * from hobbys</select></mapper>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.lanqiao.mapper.StudentHobbysMapper"><insert id="insertStudentHobby">insert into stu_hobby (id,hobby) values (#{studentId},#{hobbyId})</insert><delete id="deleteHobbyIdToStudent">delete from stu_hobby where id=#{studentId}</delete></mapper>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.lanqiao.mapper.StudentMapper"><resultMap id="BaseResultMap" type="org.lanqiao.model.Student"><id column="id"  property="id" /><result column="name" jdbcType="VARCHAR" property="name" /><result column="sex" jdbcType="VARCHAR" property="sex" /><result column="age"  property="age" /><result column="score" jdbcType="DOUBLE" property="score" /></resultMap><sql id="Base_Column_List">id, name, sex, age, score</sql><sql id="Base_All">select s.id sid,s.`name`,s.sex,s.age,s.score,h.id,h.hobbyfrom student sjoin stu_hobby shon s.id=sh.idjoin hobbys hon sh.hobby=h.id</sql><select id="getAll" resultMap="getStudentAll"><include refid="Base_All"></include></select><resultMap id="getStudentAll" type="Student"><id column="sid" property="id"></id><result column="name" property="name"></result><result column="sex" property="sex"></result><result column="age" property="age"></result><result column="score" property="score"></result><collection property="hobby" ofType="Hobbys"><id column="id" property="id"></id><result column="hobby" property="hobby"></result></collection></resultMap><select id="selectByPrimaryKey" parameterType="java.lang.Integer" resultMap="BaseResultMap">select<include refid="Base_Column_List" />from studentwhere id = #{id,jdbcType=INTEGER}</select><delete id="deleteByPrimaryKey" parameterType="java.lang.Integer">delete from studentwhere id = #{id,jdbcType=INTEGER}</delete><insert id="insert" parameterType="org.lanqiao.model.Student"><selectKey keyProperty="id" order="AFTER" resultType="java.lang.Integer">SELECT LAST_INSERT_ID()</selectKey>insert into student (name, sex, age,score)values (#{name,jdbcType=VARCHAR}, #{sex,jdbcType=VARCHAR}, #{age,jdbcType=INTEGER},#{score,jdbcType=DOUBLE})</insert><insert id="insertSelective" parameterType="org.lanqiao.model.Student"><selectKey keyProperty="id" order="AFTER" resultType="java.lang.Integer">SELECT LAST_INSERT_ID()</selectKey>insert into student<trim prefix="(" suffix=")" suffixOverrides=","><if test="name != null">name,</if><if test="sex != null">sex,</if><if test="age != null">age,</if><if test="score != null">score,</if></trim><trim prefix="values (" suffix=")" suffixOverrides=","><if test="name != null">#{name,jdbcType=VARCHAR},</if><if test="sex != null">#{sex,jdbcType=VARCHAR},</if><if test="age != null">#{age,jdbcType=INTEGER},</if><if test="score != null">#{score,jdbcType=DOUBLE},</if></trim></insert><update id="updateByPrimaryKeySelective" parameterType="org.lanqiao.model.Student">update student<set><if test="name != null">name = #{name,jdbcType=VARCHAR},</if><if test="sex != null">sex = #{sex,jdbcType=VARCHAR},</if><if test="age != null">age = #{age,jdbcType=INTEGER},</if><if test="score != null">score = #{score,jdbcType=DOUBLE},</if></set>where id = #{id,jdbcType=INTEGER}</update><update id="updateByPrimaryKey" parameterType="org.lanqiao.model.Student">update studentset name = #{name,jdbcType=VARCHAR},sex = #{sex,jdbcType=VARCHAR},age = #{age,jdbcType=INTEGER},score = #{score,jdbcType=DOUBLE}where id = #{id,jdbcType=INTEGER}</update>
</mapper>

package org.lanqiao.config;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;/*** 解决跨域请求配置* @ClassName AccessConfig* @Description TODO* @Author lisonglin* @Date 2019/3/30 22:27* @Version 1.0*/
@Configuration
public class AccessConfig extends WebMvcConfigurationSupport {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods("GET", "POST", "DELETE", "PUT").maxAge(3600);}}

package org.lanqiao.config;import org.mybatis.spring.mapper.MapperScannerConfigurer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;/*** @ClassName MapperScannerConfig* @Description TODO* @Author lisonglin* @Date 2019/3/27 22:43* @Version 1.0*/
@Configuration
public class MapperScannerConfig {@Beanpublic MapperScannerConfigurer mapperScannerConfigurer() {MapperScannerConfigurer mapperScannerConfigurer = new MapperScannerConfigurer();//指定xml配置文件的路径mapperScannerConfigurer.setBasePackage("org.lanqiao.mapper");return mapperScannerConfigurer;}}

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>vue增删改查</title>
</head>
<body><div id="app1"><table border="1" cellpadding="0" cellspacing="0"><tr><td colspan="2" align="center">学生基本信息</td></tr><tr><td>姓名</td><td><input v-model="name" style="width:150px" /></td></tr><tr><td>性别</td><td><input type="radio" id="boy" value="男" v-model="sex"><label for="boy">男</label><input type="radio" id="girl" value="女" v-model="sex"><label for="girl">女</label></td></tr><tr><td>年龄</td><td><select v-model="age"><option v-for="option in options" v-bind:value="option.value":disabled="option.value==0?true:false" :class="{statusbtn:option.value==0}">{{ option.text }}</option></select></td></tr><tr><td>成绩</td><td><input v-model.number="score" placeholder="请输入成绩"  style="width:150px"/></td></tr><tr><td>兴趣</td><td><span v-for="(studentHobby,index) in studentHobbys" ><input type="checkbox" name="interests" v-bind:value="index+1" v-model="checkData"><label>{{ studentHobby.hobby }}</label></span></td></tr><tr><td colspan="2" align="center"><input type="submit" :value="form" @click="submission" v-if="isAdd"/><input type="submit" :value="form" @click="update" v-else="!isAdd"/><input type="submit" id="reset" value="重置" v-on:click="resets"/></td></tr></table><br /><br /><br /><br /><table border="1" cellspacing="0" cellpadding="0" id="listTable"><tr><td>选中</td><td>姓名</td><td>性别</td><td>年龄</td><td>成绩</td><td>兴趣</td><td>操作</td></tr><tr><td><label>全选</label><input type="checkbox" name="item" v-model='checked' v-on:click='checkedAll'/></td><td  colspan="6" align="center"><input type="button" value="选中删除" @click="delRow"/></td></tr><tr v-for="(items,index) in student"><td><input type="checkbox" name="item" v-model="checkList" :value="items.id"/>{{1 + index}}</td><td>{{items.name}}</td><td>{{items.sex}}</td><td>{{items.age}}</td><td>{{ items.score }}</td><td><span v-for="item in items.hobby">{{item.hobby}} </span></td><td><input type="button" value="删除" @click="del(items.id)"/><input type="button" name="update" value="修改" @click="modify(items)" /></td></tr></table></div><style>.statusbtn {color: #d6caca;cursor: not-allowed; /*这个在button上面才管用,是一个禁用的小标识*/}</style><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script><script src="https://cdn.bootcss.com/qs/6.6.0/qs.min.js"></script><script>var app1=new Vue({el:'#app1',data:{options: [{ text: '请选择', value: '0' },{ text: '16', value: '16' },{ text: '17', value: '17' },{ text: '18', value: '18' },{ text: '19', value: '19' },{ text: '20', value: '20' },{ text: '21', value: '21' },{ text: '22', value: '22' },{ text: '23', value: '23' },],id:'',name:'',age:'0',sex:'男',score:'',studentHobbys:[],student:[],form:'提交',isAdd: true,checkData: [],//后台请求的数据checked:false,//全选框checkList: []},watch: { // 监视双向绑定的数据数组'checkList': {handler(val, oldVal){ // 数据数组有变化将触发此函数if (val.length === this.student.length) {this.checked = true;} else {this.checked = false;}},deep: true // 深度监视}},created: function (){this.getStudent();this.getHobbysAll();},methods: {getHobbysAll: function(){axios.get('http://localhost:8080/getHobbys').then(function (response) {var arr = response.data;app1.studentHobbys = arr;}).catch(function (error) {})},getStudent:function () {axios.post('http://localhost:8080/getAll').then(function (response){var arr=response.data;app1.student=arr;}) .catch(function (error) {})},submission:function () {// console.log("选中："+this.checkData);//获取兴趣var selectedValue=this.checkData;axios.get('http://localhost:8080/addStudent?name='+this.name+'&sex='+this.sex+'&age='+this.age+'&score='+this.score+'&hobbys='+selectedValue).then(function (response) {//更新app1.getStudent();//重置app1.resets();}).catch(function (error) {})},del:function (e) {// console.log(e);axios.get('http://localhost:8080/deleteStudent?studentId='+e).then(function (response) {app1.getStudent();}).catch(function (error) {})},//选中删除delRow:function(){for(var i=0;i<this.checkList.length;i++){axios.get('http://localhost:8080/deleteStudent?studentId='+this.checkList[i]).then(function (response) {app1.getStudent();}).catch(function (error) {})}},//修改回显modify:function (items) {//重置app1.resets();//更新按钮app1.form='更新';//回显this.id=items.id;this.name=items.name;this.sex=items.sex;this.age=items.age;this.score=items.score;var arr=[];for(var i=0;i<items.hobby.length;i++){arr.push(items.hobby[i].id);}this.checkData=arr;this.isAdd=false;},update:function(items){axios.get('http://localhost:8080/updateStudent?id='+this.id+'&name='+this.name+'&sex='+this.sex+'&age='+this.age+'&score='+this.score+'&hobbys='+this.checkData).then(function (response) {app1.getStudent();app1.resets();}).catch(function (error) {})},resets:function () {this.name='',this.sex='男',this.age='0',this.score=''this.checkData=[],this.form='提交',this.isAdd=true},checkedAll: function(){//全选和反选var _this = this;// .log(_this.checked+"---"+_this.checkList+"----"+_this.student)this.$nextTick(function() {if(!_this.checked){_this.checkList = _this.student.map(function(json,index){// console.log(json.id+","+index)return json.id;})}else {_this.checkList = []}});},}});</script>
</body>
</html>

以上基本重要代码都贴出来，详细看源码。