三级联动 (springboot+vue.js/ajax+mysql+SpringDataJpa/Mybatis)

三级联动

写三级联动可能是一张表也可能是三张
下面我就分两种情况,做出个人不同的思路操作

情况一:联动表为三张

假如是三张表,那么它们一定是通过某一个列名所关联的。
那么我们可以采用spring data jpa。了解学习SpringDataJpa
(下面是我做的一个省市县的三级联动demo)

mysql数据库设计:

一共三张表,province,city,town ,通过code进行联动

后端:

重点在于dao层,所以其他层就没有贴出来了,service,controller注入调用即可。
当然联动可以在实体类用@OneToMany来一次性返回一个json数据给前端,个人喜欢把jpa用于简单的crud

dao层:
在dao层创建三个接口 ProvinceRepository,CityRepository,TownRepository 继承JpaRepository<(对应的实体),String> 因为code,provincecode,citycode字段都是String类型,所以后面放String

public interface ProvinceRepository extends JpaRepository {
}

public interface CityRepository extends JpaRepository {
    //自定义需要的方法,根据省级code来得到所关联的市集合
	List findByProvincecode(String provinceCode);
}

public interface TownRepository extends JpaRepository {
  //自定义需要的方法,根据市级code来得到所关联的城县集合
	List findByCitycode(String cityCode);
}

前端:

ajax:
本人不专研前端,所以代码不是很精湛,但是亲测可用

    
    
    


三级联动  

    --请选择--


    --请选择--


    --请选择--

vue.js:
这里我使用的是vuejs框架。搭建vue-cli脚手架
可以用指令生成脚手架文件后拖入vscode,也可以用webstorm生成脚手架。
需要有node.js,webpack,vue.js否则无法创建脚手架。

注意:实现前后端分离的时候需要解决跨域问题,在config包下找到index.js 设置proxyTable

页面展示:

vue代码:

情况二:联动表为一张

如果是一张表来三级联动的话,那么个人建议使用mybatis来操作复杂的sql语句,在此就不是很适用jpa了(主要难点在sql的编写和mapper.xml,所以我只列出dao层和实体类的特殊处理)

数据库表设计:

那么sql需要这样写来实现三级联动

SELECT
  a.id one_id,
  a.pname one_pname,
  b.id two_id,
  b.pname two_pname,
  c.id three_id,
  c.pname three_pname
FROM
  teachplan a
  LEFT JOIN teachplan b
    ON b.parentid = a.id
  LEFT JOIN teachplan c
    ON c.parentid = b.id

mapper:

        
        
        
            
            
            
                
                
            
        
    
        
  SELECT
  a.id one_id,
  a.pname one_pname,
  b.id two_id,
  b.pname two_pname,
  c.id three_id,
  c.pname three_pname
FROM
  teachplan a
  LEFT JOIN teachplan b
    ON b.parentid = a.id
  LEFT JOIN teachplan c
    ON c.parentid = b.id
    

但是要注意,因为只要一张表,那么实体类也只有一个,但是需要得到的json是层级嵌套的
所以需要创建一个新的类

@Data
@ToString
public class TeachplanNode extends Teachplan {
    List children;
}

其他service,controller和前端调用都是和情况一一样的了

小结:

实现后台的三级联动主要在于找到表字段之间的对应关系,sql语句的编写是个突破可,其次,得到的json必须要前端的格式一致,否则会导致有数据但是页面渲染不上。