数据库先创立对应的省级表和市级表（如下图所示） 省级表 市级表 主表 Entity实体中 省
package f.demo.Entity; import javax.persistence.*; @Table @Entity(name = "grade") public class Grade { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private int ggid; private String gname; public int getGgid() { return ggid; } public void setGgid(int ggid) { this.ggid = ggid; } public String getGname() { return gname; } public void setGname(String gname) { this.gname = gname; } }市
package f.demo.Entity; import javax.persistence.*; @Table @Entity(name = "classes") public class Classes { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private int ccid; private String cname; private int gid; public int getCcid() { return ccid; } public void setCcid(int ccid) { this.ccid = ccid; } public String getCname() { return cname; } public void setCname(String cname) { this.cname = cname; } public int getGid() { return gid; } public void setGid(int gid) { this.gid = gid; } }主表
package f.demo.Entity; import com.fasterxml.jackson.annotation.JsonIgnoreProperties; import javax.persistence.*; import java.io.Serializable; import java.util.Set; @Table @Entity(name = "student") @JsonIgnoreProperties(value = { "hibernateLazyInitializer" }) public class Student implements Serializable { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private int sid; private String sname; private int sex; private int cid; // @DateTimeFormat(pattern = "yyyy-MM-dd") // @JsonFormat(pattern="yyyy-MM-dd",timezone="GMT+8") // private String brith; //表连接 @OneToMany @JoinColumn(name = "sid",referencedColumnName = "sid",insertable = false,updatable = false) private Set<Score> score; @OneToOne @JoinColumn(name = "cid",referencedColumnName = "ccid",insertable = false,updatable = false) //实现主表 与市级 的表连接 private Classes classes; public Classes getClasses() { return classes; } public void setClasses(Classes classes) { this.classes = classes; } public Set<Score> getScore() { return score; } public void setScore(Set<Score> score) { this.score = score; } // public void setSid(int sid){ this.sid=sid; } public int getSid(){ return this.sid; } public void setSname(String sname) { this.sname=sname; } public String getSname(){ return this.sname; } public void setSex(int sex){ this.sex=sex; } public int getSex(){ return this.sex; } public int getCid() { return cid; } public void setCid(int cid) { this.cid = cid; } }Dao中 省的Dao（继承一下Jpa基类就好了） 市的Dao
package f.demo.IStudentDao; import f.demo.Entity.Classes; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.Query; import java.util.List; public interface ClassesDao extends JpaRepository<Classes,Integer> { @Query(value="select * from classes where gid=?1",nativeQuery=true) //市表对应的gid(外键) List<Classes> findByCid(int gid); }Service层 省级的service
package f.demo.StudentService; import f.demo.Entity.Grade; import f.demo.IStudentDao.IGrade; import org.springframework.stereotype.Service; import javax.annotation.Resource; import java.util.List; @Service public class GradeService { @Resource IGrade iGrade; public List<Grade> findAll11() { return iGrade.findAll(); } }市级的service
package f.demo.StudentService; import f.demo.Entity.Classes; import f.demo.IStudentDao.ClassesDao; import org.springframework.stereotype.Service; import javax.annotation.Resource; import java.util.List; @Service public class ClassesService { @Resource ClassesDao classesDao; public List<Classes> findByCid(int gid) { return classesDao.findByCid(gid); } }Conntroller层
//联动内容 @Autowired ClassesService classesService; @Autowired GradeService gradeService; /** * 查询省的表 * @return 年级表查询的结果集 */ @RequestMapping("findAllGrade") @ResponseBody public Iterable<Grade> findAllGrade(){ //返回省表查询的结果集 return gradeService.findAll11(); } /** * 查询市表 * @param request 获取gid用来做班级表的查询 * @return 返回班级表查询的结果集 */ @RequestMapping("doCheckCname") @ResponseBody public Iterable<Classes> doCheckCname(HttpServletRequest request){ //获取gid用来做市表的查询 Integer gid = Integer.parseInt(request.getParameter("gid")); //返回班级表查询的结果集 return classesService.findByCid(gid); }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://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script></head> <body> <div id="app"> <form> 姓名:<input type="text" v-model="TT.sname"><br> 性别:<input type="text" name="sex" v-model="TT.sex"><br> <!--二级联动--> 省份： <select v-model="TT.gid" v-on:change="doCheckCname()"> <!-- gid是 市级 的外键-- 要取得下一级的数据 从而实现二级联动--> <option value="0">--省份选择--</option> <option v-for="fqd in gg" :value="fqd.ggid"> {{fqd.gname}} </option> <!-- ggid是省的编号（主键）,gname是省的名称--> </select> <br> 市： <select v-model="TT.cid"> <!-- cid(studetn表中的)是表连接的外键，不论联动是多少级最后一个就是这个--> <option value="0">--市县选择--</option> <option v-for="cla in cla" :value="cla.ccid">{{cla.cname}}</option> <!-- ccid是市级的主键-- cname是市级的名称--> </select> <br> <input type="button" name="submit" value="保存" v-on:click="doAdd()"> </form> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ TT:{gid:0,cid:0}, //数组统计传入控制器 gg:[], // 省级做一个空数组 cla:[], // 市级数组 }, mounted(){ //先调用一下选择年级的代码 同样是链接数据库 this.doCheckGrade(); }, methods:{ doAdd:function () { $.ajax({ url: "http://localhost:8080/student1/doAdd1",//跳转到添加方法 data: vm.TT, dataType: 'json', success: function (data) { alert(JSON.stringify(data)); vm.TT={}; }, }) }, //doAdd结束 /** * 这部分是用来查询省级的方法 */ doCheckGrade:function () { $.post("http://localhost:8080/student1/findAllGrade",{},function (data) { var len = data.length; for (var i=0;i<len;i++){ vm.gg.push(data[i]); } }); },//doCheckGrade结束 /** * 这部分是用来查询市级的方法 * */ doCheckCname:function () { $.post("http://localhost:8080/student1/doCheckCname",{gid:vm.TT.gid},function (data) { // gid是 市级 的外键-- 要取得下一级的数据 从而实现二级联动 vm.cla=[]; var len = data.length; for (var i=0;i<len;i++) { vm.cla.push(data[i]); } }); },//doCheckCname结束 },//methods结束 }); </script> </body> </html>