Mysql数据库
cname(班级表)
grade(级部表)
person
vue页面
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="app">
<form>
<table border="1" align="center">
<tr>
<td>手机号:</td>
<td><input type="number" v-model="persons.phone" id="phone"><span id="error"></span></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text" v-model="persons.name"></td>
</tr>
<tr>
<td>级部:</td>
<td>
<select v-model="persons.gid" v-on:change="doCheckCname()">
<option value="0">--请选择级部--</option>
<option v-for="gname in grade" :value="gname.ggid">{
{
gname.gname}}</option>
</select>
</td>
</tr>
<tr>
<td>班级:</td>
<td>
<select v-model="persons.cid">
<option value="0">--请选择班级--</option>
<option v-for="cla in cla" :value="cla.ccid">{
{
cla.cname}}</option>
</select>
</td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" value="男" v-model="persons.sex">男
<input type="radio" value="女" v-model="persons.sex">女</td>
</tr>
<tr>
<td>爱好:</td>
<td>篮球<input type="checkbox" value="篮球" v-model="hobbys"> 足球<input type="checkbox" value="足球" v-model="hobbys"> 排球<input type="checkbox" value="排球" v-model="hobbys"></td>
</tr>
<tr>
<td>简介:</td>
<td><textarea rows="10" cols="20" v-model="persons.code"></textarea></td>
</tr>
<tr>
<td><input type="button" name="submit" value="保存" v-on:click="doAdd()"></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
//在里面定义了cid,gid,sex分别是班级联动和单选框的默认值的设置
persons:{
cid:0,gid:0,sex:'男'},//数组统计传入控制器
//picked:"男",//设置默认值为男
hobbys:[],//给爱好设置一个空数组
sheng:"",//获取省
shi:"",//获取市
grade:[],//给级部做一个空数组
//gid:0,//级部id 用来做判断
cla:[],//班级数组
//cid:0,//班级id
},
mounted(){
//先调用一下选择年级的代码 同样是链接数据库
this.doCheckGrade();
// this.doCheckCname();
},
methods:{
doAdd:function () {
vm.persons.address = vm.sheng+'-'+vm.shi;
vm.persons.hobby = JSON.stringify(vm.hobbys);
//alert(JSON.stringify(vm.persons));
$.post("/person/save",{
personData:JSON.stringify(vm.persons)},function (data) {
if (data.status == 1){
alert(data.success);
window.location.href="/person/demo4";
}
});
},//doAdd结束
/**
* 这部分是用来查询年级表的一个方法
*/
doCheckGrade:function () {
$.post("/person/findAllGrade",{
},function (data) {
//alert(JSON.stringify(data));
var len = data.length;
for (var i=0;i<len;i++){
vm.grade.push(data[i]);
}
});
},//doCheckGrade结束
/**
* 查询完年级,关联班级表
* 这个方法用来查询班级
* */
doCheckCname:function () {
//alert(this.gid);
vm.persons.cid=0;
$.post("/person/doCheckCname",{
gid:vm.persons.gid},function (data) {
//alert(JSON.stringify(data));
vm.cla=[];
var len = data.length;
for (var i=0;i<len;i++) {
vm.cla.push(data[i]);
}
});
},//doCheckCname结束
},//methods结束
});
</script>
</body>
</html>
控制器层
**PersonController.java **
package com.sdbairui.demo.Controller;
import com.sdbairui.demo.Entity.Cname;
import com.sdbairui.demo.Entity.Grade;
import com.sdbairui.demo.Service.CnameService;
import com.sdbairui.demo.Service.GradeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.stereotype.Repository;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
//控制器
@Controller //解析为路径
@RequestMapping("/person")
public class PersonController {
@Autowired(required = false) //自动注解功能 不写(required = false )就会报错
GradeService gradeService;
@Autowired(required = false) //自动注解功能
CnameService cnameService;
@RequestMapping("/demo")
public String demo(Model model) {
return "demo4";
}
/**
* 查询年级的表
* @return 年级表查询的结果集
*/
@RequestMapping("/findAllGrade")
@ResponseBody
public Iterable<Grade> findAllGrade(){
//返回年级表查询的结果集
return gradeService.findAll();
}
/**
* 查询班级表
* @param request 获取gid用来做班级表的查询
* @return 返回班级表查询的结果集
*/
@RequestMapping("/doCheckCname")
@ResponseBody
public Iterable<Cname> doCheckCname(HttpServletRequest request){
//获取gid用来做班级表的查询
Integer gid = Integer.parseInt(request.getParameter("gid"));
//返回班级表查询的结果集
return cnameService.findByGid(gid);
}
}
业务层
CnameService.java
package com.sdbairui.demo.Service;
import com.sdbairui.demo.Dao.CnameDao;
import com.sdbairui.demo.Entity.Cname;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
@Service
public class CnameService {
/**
* 传入级部id按级部id来查数据
* @param gid
* @return 返回查询的结果集
*/
@Resource
private CnameDao cnameDao;
public Iterable<Cname> findByGid(Integer gid){
return cnameDao.findByGid(gid);
}
}
GradeService.java
package com.sdbairui.demo.Service;
import com.sdbairui.demo.Dao.GradeDao;
import com.sdbairui.demo.Entity.Grade;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
@Service
public class GradeService {
/**
* 查询grade表的全部数据
* @return 这个表的数据集合
*/
@Resource
private GradeDao gradeDao;
public Iterable<Grade> findAll(){
return gradeDao.findAll();
}
}
数据访问层
CnameDao.java
package com.sdbairui.demo.Dao;
import com.sdbairui.demo.Entity.Cname;
import org.springframework.data.jpa.repository.JpaSpecificationExecutor;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.PagingAndSortingRepository;
public interface CnameDao extends PagingAndSortingRepository<Cname, Integer>, JpaSpecificationExecutor<Cname>{
@Query("from cname")
Iterable<Cname> findAll();
@Query(value = "select * from cname where ccid=?1",nativeQuery=true)
Cname findByCid(Integer ccid);
Iterable<Cname> findByGid(Integer gid);
}
GradeDao.java
package com.sdbairui.demo.Dao;
import com.sdbairui.demo.Entity.Grade;
import com.sdbairui.demo.Entity.Student;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import java.util.List;
public interface GradeDao extends JpaRepository<Grade,Integer> {
}
(省略了实体类)