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> { }(省略了实体类)
