本人，初学java，可能有很多地方不是很合适，但也请见谅，欢迎各位大神提出意见，可以学习，后台直接采用sql代码展示解析所需数据，不建议使用， 纯属练习sql语句，后台还是需要提交数据就可以。
题目需求：（很简单）
只是个样子，我们使用vue做前台样式会出现不同，但不影响正常功能。
拿到题目，首先设计数据库：
-- 学生表
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for student
-- ----------------------------
DROP TABLE IF EXISTS `student`;
CREATE TABLE `student`
(
`id` int(11) NOT NULL auto_increment,
`name` varchar(255) NOT NULL,
`date` varchar(255) ,
PRIMARY KEY (`id`)
) ENGINE = InnoDB
DEFAULT CHARSET = utf8
auto_increment = 1;
-- 中间表
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for s_c
-- ----------------------------
DROP TABLE IF EXISTS `s_c`;
CREATE TABLE `s_c`
(
`id` int(11) NOT NULL auto_increment,
`sid` int(11) NOT NULL,
`cid` int(11) NOT NULL,
PRIMARY KEY (`id`)
index `sid`(`sid`),
index `cid`(`cid`)
) ENGINE = InnoDB
DEFAULT CHARSET = utf8
auto_increment = 1;
-- 课程表
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for classes
-- ----------------------------
DROP TABLE IF EXISTS `classes`;
CREATE TABLE `classes`
(
`id` int(11) NOT NULL auto_increment,
`name` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE = InnoDB
DEFAULT CHARSET = utf8
auto_increment = 1;
总共合计三张表，一张学生表，存储学生姓名、日期；一张课程表，存储课程信息；一张中间表，存储学生、课程表直接关系，为多对多。
一、分析思路：
1、列表思路
两种思路：①后台使用sql直接处理连接好所选课程，使用group_concat()和group by来处理数据（采用这种思路）
②后台把数据封装起来，只提交数据到前台，由前台处理（最好使用这样的思路来做，但由于我是想练习sql语句，所以我采用第一种思路来处理）
2、新增思路
新增时，只需要新增学生表和中间表即可，由于学生表主键自增，先新增学生表返回主键值，根据对应主键值和课程表的所选id进行新增中间表。
3、修改思路
修改时，首先根据学生表查询学生信息进行回显，在根据学生表主键id查询中间表课程id，然后对课程进行回显处理。然后修改学生表信息，同时删除中间表关于当前学生id的所有课程信息数据，然后根据新选择课程id，学生id进行添加中间表。
4、删除思路
删除根据学生id删除学生表，再根据学生id删除中间表数据。
二、实现后台功能：
1、列表功能
①我采用直接用sql的方案来写后台代码，所以我首先需要测试sql怎么去写。
首先我直接用group_concat()和group by来处理数据，直接显示
1、 采用where根据条件直接连接三表（后面用这种连接方式）
SELECT
s.*, GROUP_CONCAT(c. NAME) AS concat
FROM
student s,
classes c,
s_c z
WHERE
z.cid = c.id
AND z.sid = s.id
GROUP BY
z.sid
2、 采用left join连接三表，也可以达到效果。
SELECT
s.*, GROUP_CONCAT(c. NAME) AS concat
FROM
s_c z
LEFT JOIN student s ON z.sid = s.id
LEFT JOIN classes c ON z.cid = c.id
GROUP BY
z.sid基本所需要的数据已经展示出来。
GROUP_CONCAT 函数返回一个字符串结果，该结果由分组中的值连接组合而成，常和 GROUP BY 连用。
1、功能：将group by产生的同一个分组中的值连接起来，返回一个字符串结果。
2、语法：group_concat( [distinct] 要连接的字段 [order by 排序字段 asc/desc ] [separator '分隔符'] )
说明：通过使用distinct可以排除重复值；如果希望对结果中的值进行排序，可以使用order by子句；separator是一个字符串值，缺省为一个逗号。
注意示例：
别乱用 GROUP_CONCAT，说不定你现在使用的 GROUP_CONCAT 得到的结果就是隐藏着BUG的。
GROUP_CONCAT 的结果会受到 group_concat_max_len 变量的限制。
默认 group_concat_max_len = 1024，即字符串的长度字节超过1024 则会被截断。
题目要求：根据姓名模糊查询，根据课程进行查询，现在来实现这些功能。
先来模糊查询
SELECT
s.*, GROUP_CONCAT(c. NAME) AS concat
FROM
student s,
classes c,
s_c z
WHERE
z.cid = c.id
AND z.sid = s.id
AND INSTR(s. NAME, '干')
GROUP BY
z.sid
INSTR(s. NAME, '干') 模糊查询带有“干”的数据，用LIKE也可以实现模糊查询功能。
根据课程查询
我先试着写一下，把数据放到where条件地方，看看是什么效果，我现在想查1的课程都有哪些符合的学生，1为数据结构，2为计算机原理
SELECT
s.*, GROUP_CONCAT(c. NAME) AS concat
FROM
student s,
classes c,
s_c z
WHERE
z.cid = c.id
AND z.sid = s.id
AND INSTR(s. NAME, '')
AND z.cid in(1)
GROUP BY
z.sid
写完发现数据不全，整个关于2的课程信息都没了，这很明显的sql出错，我们写的时候不能直接把条件写where里面，这样的话，直接会匹配条件，所以数据显示不会完全。 所以我们应该怎么条件查询呢，要根据group分组结果后来进行条件查询，使用HAVING来进行条件查询。
SELECT
s.*, GROUP_CONCAT(c. NAME) AS concat
FROM
student s,
classes c,
s_c z
WHERE
z.cid = c.id
AND z.sid = s.id
AND INSTR(s. NAME, '')
GROUP BY
z.sid
HAVING
z.cid IN (1)作为小白，忘了怎么写了，先尝试一下，发现报错。[Err] 1054 - Unknown column 'z.cid' in 'having clause'，很明显不可以这样写，那么应该是根据z.sid来进行条件匹配的，那这样我就得查关于选中课程的id对应的sid都有哪些数据。
符合课程为1的学生都有id为：根据最初的界面可以看到为“5,10,12”，那么sql就这样写。
SELECT
s.*, GROUP_CONCAT(c. NAME) AS concat
FROM
student s,
classes c,
s_c z
WHERE
z.cid = c.id
AND z.sid = s.id
AND INSTR(s. NAME, '')
GROUP BY
z.sid
HAVING
z.sid IN (5, 10, 12)
思路是对的，这样做是没错的，我现在需要怎么把5,10,12查询出来，现在开始写这个sql，这还是用到了GROUP_CONCAT。
SELECT
GROUP_CONCAT(DISTINCT sid)
FROM
s_c
WHERE
cid IN (1)
DISTINCT 去除重复的数据。相关的sid数据也拿到了，我是不是可以直接用子查询就可以解决问题了嘛，但是并没有。
SELECT
s.*, GROUP_CONCAT(c. NAME) AS concat
FROM
student s,
classes c,
s_c z
WHERE
z.cid = c.id
AND z.sid = s.id
AND INSTR(s. NAME, '')
GROUP BY
z.sid
HAVING
z.sid IN (
SELECT
GROUP_CONCAT(DISTINCT sid)
FROM
s_c
WHERE
cid IN (1)
)
你会发现数据不对呀，怎么子查询查询出来的数据不全呢，是什么原因呢，看一下，只显示出来了sid为10的一条，说明查询没有出错，原来是GROUP_CONCAT查询出来的结果为"10,12,5"，这样写到in里面会只显示出来一条，要么是in（"10","12","5"）或者in（10,12,5）原来是这样的原因，那么我需要这样进行处理。最终的sql语句。
SELECT
s.*, GROUP_CONCAT(c. NAME) AS concat
FROM
student s,
classes c,
s_c z
WHERE
z.cid = c.id
AND z.sid = s.id
AND INSTR(s. NAME, '')
GROUP BY
z.sid
HAVING
FIND_IN_SET(
z.sid,
(
SELECT
GROUP_CONCAT(DISTINCT sid)
FROM
s_c
WHERE
cid IN (1)
)
)
这样就可以达到最终的效果了。我们借用
FIND_IN_SET(str,strlist)函数
str 要查询的字符串
strlist 字段名 参数以”,”分隔 如 (1,2,6,8)
查询字段(strlist)中包含(str)的结果，返回结果为null或记录
后台SQL语句写完，开始写controller层。
//列表
@GetMapping("/list")
public PageInfo<StudentListDto> getList(@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(required = false,defaultValue = "") String name,
@RequestParam(required = false) String cname){
PageHelper.startPage(pageNum,3);
Page<StudentListDto> page = studentMapper.selectAll(name,cname);
PageInfo<StudentListDto> pageInfo = page.toPageInfo();
return pageInfo;
}用到了PageHelper分页插件，以及在定义一个数据传输层的自定义StudentListDto来接受数据来给前台使用。mapperXML如下：
<?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="com.example.demo.mapper.StudentMapper">
<select id="selectAll" resultType="com.example.demo.dto.StudentListDto">
select s.*,GROUP_CONCAT(c.name) as concat
from student s,classes c,s_c z where z.cid=c.id and z.sid=s.id and INSTR(s.name,#{name})
GROUP BY z.sid
<if test="cname != null and cname != ''">
HAVING FIND_IN_SET(z.sid,( select GROUP_CONCAT(DISTINCT sid) from s_c where cid in (${cname})))
</if>
</select>
</mapper>package com.example.demo.dto;
import com.example.demo.po.Student;
public class StudentListDto extends Student {
private String concat;
public String getConcat() {
return concat;
}
public void setConcat(String concat) {
this.concat = concat;
}
}
动态获取课程复选框
@GetMapping("/getClasses")
public List<Classes> getClasses(){
List<Classes> clist =classesMapper.selectAll();
return clist;
}
<?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="com.example.demo.mapper.ClassesMapper">
<resultMap id="BaseResultMap" type="com.example.demo.po.Classes">
<id column="id" jdbcType="INTEGER" property="id" />
<result column="name" jdbcType="VARCHAR" property="name" />
</resultMap>
<select id="selectAll" resultMap="BaseResultMap">
select
<include refid="Base_Column_List" />
from classes
</select>
</mapper>2、新增功能
从前台接受过来的数据，用自己设定的dto接收，然后给po的实体类，遍历前台的课程id集合，从而添加中间表。
@PostMapping("/add")
@Transient
public Integer add(@RequestBody StudentCreateDto studentCreateDto) {
Student student = new Student();
student.setDate(studentCreateDto.getDate());
student.setName(studentCreateDto.getName());
studentMapper.insert(student);
List<Integer> cids = studentCreateDto.getCids();
for (Integer cid : cids) {
S_C s_c = new S_C();
s_c.setSid(student.getId());
s_c.setCid(cid);
s_cMapper.insert(s_c);
}
return student.getId();
}package com.example.demo.dto;
import com.example.demo.po.Student;
import java.util.List;
public class StudentCreateDto extends Student{
private List<Integer> cids;
public List<Integer> getCids() {
return cids;
}
public void setCids(List<Integer> cids) {
this.cids = cids;
}
}
<?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="com.example.demo.mapper.StudentMapper">
<insert id="insert" parameterType="com.example.demo.po.Student" keyProperty="id" useGeneratedKeys="true">
insert into student (name, date)
values (#{name,jdbcType=VARCHAR}, #{date,jdbcType=VARCHAR})
</insert>
</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="com.example.demo.mapper.S_CMapper">
<insert id="insert" parameterType="com.example.demo.po.S_C" useGeneratedKeys="true" keyProperty="id">
insert into s_c ( sid, cid)
values ( #{sid,jdbcType=INTEGER}, #{cid,jdbcType=INTEGER})
</insert>
</mapper>3、查看功能
根据学生表的id查询学生信息，以及根据学生id查询课程进行回显。
@GetMapping("/getById")
public GetStudentDto getById(@RequestParam Integer id) {
GetStudentDto getStudentDto = studentMapper.selectByPrimaryKey2(id);
List<Integer> cids = s_cMapper.selectByPrimaryKey2(id);
getStudentDto.setCids(cids);
return getStudentDto;
}
package com.example.demo.dto;
import com.example.demo.po.Student;
import java.util.List;
public class GetStudentDto extends Student{
private List<Integer> cids;
public List<Integer> getCids() {
return cids;
}
public void setCids(List<Integer> cids) {
this.cids = cids;
}
}
<?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="com.example.demo.mapper.StudentMapper">
<select id="selectByPrimaryKey2" parameterType="java.lang.Integer" resultType="com.example.demo.dto.GetStudentDto">
select s.*,GROUP_CONCAT(c.name) as concat from student s,classes c,s_c z
where z.cid=c.id and z.sid=s.id and s.id = #{id,jdbcType=INTEGER}
GROUP BY s.id
</select>
</mapper>4、编辑功能
根据学生表的id查询学生信息，以及根据学生id查询课程进行回显，回显之后根据学生id修改学生表，在根据学生id删除中间表关于学生id的数据，然后新增最新的对应关系。
@PostMapping("/update")
@Transient
public void update(@RequestBody StudentUpdateDto studentUpdateDto) {
Student student = new Student();
student.setId(studentUpdateDto.getId());
student.setName(studentUpdateDto.getName());
student.setDate(studentUpdateDto.getDate());
studentMapper.updateByPrimaryKey(student);
s_cMapper.deleteByStudentId(studentUpdateDto.getId());
List<Integer> cids = studentUpdateDto.getCids();
for (Integer cid : cids) {
S_C s_c = new S_C();
s_c.setCid(cid);
s_c.setSid(student.getId());
s_cMapper.insert(s_c);
}
}package com.example.demo.dto;
import com.example.demo.po.Student;
import java.util.List;
public class StudentUpdateDto extends Student{
private List<Integer> cids;
public List<Integer> getCids() {
return cids;
}
public void setCids(List<Integer> cids) {
this.cids = cids;
}
}
<?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="com.example.demo.mapper.StudentMapper">
<update id="updateByPrimaryKey" parameterType="com.example.demo.po.Student">
update student
set name = #{name,jdbcType=VARCHAR},
date = #{date,jdbcType=VARCHAR}
where id = #{id,jdbcType=INTEGER}
</update>
</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="com.example.demo.mapper.S_CMapper">
<delete id="deleteByStudentId" parameterType="java.lang.Integer">
delete from s_c
where sid = #{id,jdbcType=INTEGER}
</delete>
</mapper>4、批量删除功能
批量删除通过数组接收删除学生id，进行遍历，删除学生表以及中间表
@PostMapping("/plsc")
@Transient
public void plsc(@RequestBody List<Integer> selectId) {
for (Integer id : selectId) {
studentMapper.deleteByPrimaryKey(id);
s_cMapper.deleteByStudentId(id);
}
}<?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="com.example.demo.mapper.StudentMapper">
<delete id="deleteByPrimaryKey" parameterType="java.lang.Integer">
delete from student
where id = #{id,jdbcType=INTEGER}
</delete>
</mapper>三、实现前台页面：（直接码代码了）
1、列表页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/css/elementui.css">
<title>Demo</title>
</head>
<body>
<div id="app">
选修课：<el-checkbox-group v-model="cids">
<el-checkbox v-for="classe in classes" :label="classe.id" :key="classe.id">{{classe.name}}</el-checkbox>
</el-checkbox-group>
<el-input v-model="name" placeholder="请输入姓名查询" style="width: 20%"></el-input>
<el-button type="primary" @click="handleSearch">搜索</el-button>
<el-button type="primary" @click="handleCreate">添加</el-button>
<el-button type="primary" @click="handleBatchDelete">批量删除</el-button>
<el-table :data="pageInfo.list" border style="width: 60%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column prop="id" label="编号">
</el-table-column>
<el-table-column prop="name" label="姓名">
</el-table-column>
<el-table-column prop="concat" label="选修课">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleTotalClick(scope.row)" type="text" size="small">查看</el-button>
<el-button @click="handleEditClick(scope.row)" type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination background layout="prev, pager, next" :total="pageInfo.total" :page-size="pageInfo.pageSize"
@current-change="pageChange">
</el-pagination>
</div>
<script src="assets/js/axios.min.js"></script>
<script src="assets/js/common.js"></script>
<script src="assets/js/vue.js"></script>
<script src="assets/js/elementui.js"></script>
<script src="viewmodels/studentList.js"></script>
</body>
</html>var app = new Vue({
el: '#app',
data: {
pageInfo: '',
pageNum: 1,
classes: [],
cids: [],
name: '',
selectId: []
},
mounted() {
this.getList();
this.getClasses();
},
methods: {
getList() {
axios.get('/stu/list', {
params: {
pageNum: this.pageNum,
cname: this.cids.join(),
name: this.name
}
})
.then(function (response) {
app.pageInfo = response.data;
})
},
pageChange(val) {
console.log(val);
this.pageNum = val;
this.getList();
},
getClasses() {
axios.get('/cla/getClasses')
.then(function (response) {
app.classes = response.data;
})
},
handleSearch() {
this.pageNum = 1;
console.log(this.cids.join());
this.getList();
},
plsc() {
if (this.selectId.length == 0) {
alert("请选择要删除的项")
} else {
axios.post('/stu/plsc',
this.selectId
)
.then(function (response) {
alert('批删成功');
location.reload();
})
.catch(function (error) {
console.log(error);
alert('批删失败');
});
}
},
handleCreate() {
location.href = "StudentCreate.html";
},
handleBatchDelete() {
this.plsc();
},
handleSelectionChange(val) {
console.log(val)
this.selectId = val.map(x => x.id);
console.log(this.selectId)
},
handleTotalClick(row) {
location.href = "studentTotal.html?id=" + row.id;
console.log(row.id)
},
handleEditClick(row) {
location.href = "studentUpdate.html?id=" + row.id;
console.log(row.id)
}
}
})2、新增页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/css/elementui.css">
<title>Demo</title>
</head>
<body>
<div id="app">
姓名：<el-input placeholder="请输入姓名" v-model="name" clearable style="width: 20%"></el-input></br>
日期：<el-date-picker v-model="date" type="date" placeholder="选择日期" style="width: 20%">
</el-date-picker></br>
选修课：<el-checkbox-group v-model="cids">
<el-checkbox v-for="classe in classes" :label="classe.id" :key="classe.id">{{classe.name}}</el-checkbox>
</el-checkbox-group>
<el-button type="primary" @click="handleCreate">添加</el-button>
<el-button type="primary" @click="handleGoback">返回</el-button>
</div>
<script src="assets/js/axios.min.js"></script>
<script src="assets/js/common.js"></script>
<script src="assets/js/vue.js"></script>
<script src="assets/js/elementui.js"></script>
<script src="viewmodels/studentCreate.js"></script>
</body>
</html>var app = new Vue({
el: '#app',
data: {
classes: [],
name: '',
date: '',
cids: []
},
mounted() {
this.getClasses();
},
methods: {
getClasses() {
axios.get('/cla/getClasses')
.then(function (response) {
app.classes = response.data;
})
},
create() {
axios.post('/stu/add', {
name: this.name,
date: this.date,
cids: this.cids
})
.then(function (response) {
alert('添加成功');
location.href = "studentList.html"
})
.catch(function (error) {
console.log(error);
alert('添加失败');
});
},
handleGoback() {
location.href = "studentList.html"
// console.log(this.cids)
},
handleCreate() {
this.create();
}
}
})3、查看页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/css/elementui.css">
<title>Demo</title>
</head>
<body>
<div id="app">
姓名：<el-input placeholder="请输入姓名" v-model="name" clearable style="width: 20%"></el-input></br>
日期：<el-date-picker v-model="date" type="date" placeholder="选择日期" style="width: 20%">
</el-date-picker></br>
选修课：<el-checkbox-group v-model="cids">
<el-checkbox v-for="classe in classes" :label="classe.id" :key="classe.id">{{classe.name}}</el-checkbox>
</el-checkbox-group>
<el-button type="primary" @click="handleGoback">返回</el-button>
</div>
<script src="assets/js/axios.min.js"></script>
<script src="assets/js/common.js"></script>
<script src="assets/js/vue.js"></script>
<script src="assets/js/elementui.js"></script>
<script src="viewmodels/studentTotal.js"></script>
</body>
</html>var app = new Vue({
el: '#app',
data: {
classes: [],
name: '',
date: '',
cids: []
},
mounted() {
this.getClasses();
var url = new URL(location.href);
var id = url.searchParams.get("id")
this.getStudentById(id);
},
methods: {
getClasses() {
axios.get('/cla/getClasses')
.then(function (response) {
app.classes = response.data;
})
},
getStudentById(id) {
axios.get('/stu/getById', {
params: {
id: id,
}
})
.then(function (response) {
var student = response.data;
app.name = student.name;
app.date = student.date;
app.cids = student.cids;
})
},
handleGoback() {
location.href = "studentList.html"
}
}
})4、编辑页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/css/elementui.css">
<title>Demo</title>
</head>
<body>
<div id="app">
<el-input type="hidden" v-model="id"></el-input>
姓名：<el-input placeholder="请输入姓名" v-model="name" clearable style="width: 20%"></el-input></br>
日期：<el-date-picker v-model="date" type="date" placeholder="选择日期" style="width: 20%">
</el-date-picker></br>
选修课：<el-checkbox-group v-model="cids">
<el-checkbox v-for="classe in classes" :label="classe.id" :key="classe.id">{{classe.name}}</el-checkbox>
</el-checkbox-group>
<el-button type="primary" @click="handleEdit">修改</el-button>
<el-button type="primary" @click="handleGoback">返回</el-button>
</div>
<script src="assets/js/axios.min.js"></script>
<script src="assets/js/common.js"></script>
<script src="assets/js/vue.js"></script>
<script src="assets/js/elementui.js"></script>
<script src="viewmodels/StudentUpdate.js"></script>
</body>
</html>var app = new Vue({
el: '#app',
data: {
classes: [],
name: '',
date: '',
cids: [],
id: ''
},
mounted() {
this.getClasses();
var url = new URL(location.href);
var id = url.searchParams.get("id")
this.getStudentById(id);
},
methods: {
getClasses() {
axios.get('/cla/getClasses')
.then(function (response) {
app.classes = response.data;
})
},
getStudentById(id) {
axios.get('/stu/getById', {
params: {
id: id,
}
})
.then(function (response) {
var student = response.data;
app.name = student.name;
app.date = student.date;
app.cids = student.cids;
app.id = student.id;
})
},
studentUpdate() {
axios.post('/stu/update', {
name: this.name,
date: this.date,
cids: this.cids,
id: this.id
})
.then(function (response) {
alert('修改成功');
location.href = "studentList.html"
})
.catch(function (error) {
console.log(error);
alert('修改失败');
});
},
handleGoback() {
location.href = "studentList.html"
},
handleEdit() {
this.studentUpdate();
}
}
})基本上就完事了，最后附上配置文件，但是列表不介意直接sql语句转，应该传递所有数据给前台进行转码。
<?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.4.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>demo</name>
<description>Demo project for Spring Boot</description>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<!-- web依赖也需要，因为我们采用MVC模式 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.2</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</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-starter-freemarker</artifactId>
</dependency>
<!-- rabbitmq -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-amqp</artifactId>
</dependency>
<!-- pagehelper -->
<!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper-spring-boot-starter -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.10</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
<plugin>
<groupId>org.mybatis.generator</groupId>
<artifactId>mybatis-generator-maven-plugin</artifactId>
<version>1.3.7</version>
</plugin>
</plugins>
</build>
</project>
1025
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
