Sélectionnez la sélection de liaison à trois niveaux - basée sur Layui

Layui est une bibliothèque de composants d'interface utilisateur Web open source. layui adopte sa propre spécification modulaire minimaliste et suit le mode de développement HTML/CSS/JS natif, qui est très facile à utiliser et peut être utilisé immédiatement. C'est un artefact d'apprentissage indispensable pour les débutants front-end et back-end. (ps : pour les personnes comme l'auteur qui écrivent des pages d'accueil moches, c'est tout simplement une bonne nouvelle !)

Il existe deux manières principales de l'utiliser, l'une consiste à télécharger directement le code source de layui ; l'autre consiste à utiliser une référence en ligne (c'est-à-dire à l'utiliser sans téléchargement). L'auteur préfère l'utiliser en téléchargeant le code source.

Joindre le site de Layui : https://layui.org.cn/index.html

insérez la description de l'image ici

1. Demande

Les exigences sont comme ça.Lorsque j'écrivais un projet de centre commercial, j'impliquais le formulaire soumis par le fournisseur. Il y a une sélection d'adresse de fournisseur dans le formulaire qui est appliquée à la boîte de sélection. Lorsque j'ai appris le html pour la première fois, j'ai également écrit plusieurs fois une boîte de sélection. Mais les options de contenu dans la zone de sélection sont déjà fixées. Comme suit:

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>
<!--在select选择框中已经提前预写了option选项，可以直接选择。但是这种选择的方式有一个非常明显的弊端，如果待选项数目很多，挨个去写很浪费时间而且代码还很臃肿，不美观。-->

L'exigence de ce projet est que toutes les provinces, villes, comtés (districts) du pays doivent être reliés entre eux. S'il est écrit de la manière la plus primitive, ce sera sans aucun doute un désastre. J'ai donc essayé une autre méthode, qui consiste à lire le contenu de la boîte de sélection à partir de la base de données, et la sélection de plusieurs boîtes de sélection est liée (c'est-à-dire que si vous choisissez la province du Guangdong, vous ne pourrez pas sélectionner la ville de Hangzhou, vous ne pouvez sélectionner que parmi Sélectionner parmi toutes les villes de niveau préfectoral de la province du Guangdong).

2. Analyse et code frontal

Tout d'abord, il est nécessaire de rédiger le formulaire que l'ensemble du fournisseur doit soumettre pour former une ébauche.

Pour lire les données de la base de données d'arrière-plan, des interactions front-end et back-end sont nécessaires, de sorte que la réalisation de la liaison à trois niveaux dans ce projet repose principalement sur jQuery.

L'auteur a téléchargé le code source de jQuery et layui, puis l'a directement attaché au projet.

Cet article se concentre principalement sur la sélection de liaison des trois zones de sélection, de sorte que d'autres contenus sont simplifiés. code joint

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>供应商登记</title>
    <script type="text/javascript" src="../../../static/jquery-3.6.3.min.js"></script>
    <link rel="stylesheet" href="../../../static/layui/css/layui.css">
    <script type="text/javascript" src="../../../static/layui/layui.js"></script>
    <script type="text/javascript" src="../../../static/js/registerVendors.js"></script>
</head>
<body onload="load()">
        <div class="layui-fluid">
            <div class="layui-row">
                <h1 style="text-align: center">供应商</h1>
            </div>
          <form class="layui-form"  action="/registerVendors" method="get">
              <div class="layui-form-item">
                  <label class="layui-form-label">注册地址</label>
                  <div class="layui-input-block">
                      <select id="province" name="vendorsProvince" lay-filter="changeProvince"  >
                      </select>
                      <select id="city" name="vendorsCity" lay-filter="changeCity" >
                      </select>
                      <select id="region" name="vendorsRegion">
                      </select>
                  </div>
              </div>
          </form>
        </div>
</body>
</html>

Dans ce code, l'adresse enregistrée est représentée par trois cases de sélection. lay-filterAgit comme un sélecteur.

L'effet obtenu est le suivant : lorsque l'utilisateur sélectionne la province, le système charge la ville au niveau de la préfecture, et seule la ville au niveau de la préfecture charge le district. Si quelqu'un saute intentionnellement la sélection en premier, alors rien ne sera sélectionnable. Cela garantit l'exactitude et la simplicité de la sélection.

Une telle implémentation doit être associée à js pour obtenir l'effet d'un chargement réactif

layui.use('form',function () {
    
    
    form = layui.form;
    loadCities();
    loadRegions();

})
layui.use('layer',function () {
    
    
     layer=layui.layer;
})

//页面开始就加载省份
function load() {
    
    
    $().ready(function () {
    
    
        $.ajax({
    
    
            type: 'post',
            url: '/getProvince',
            cache: false,
            async: true,
            dataType: 'json',
            success(data) {
    
    
                console.log(data)
               let selectProvince= document.getElementById("province");
                selectProvince.add(new Option("请选择对应的省份","0"))
                let option=null;
                for (let i = 0; i < data.length; i++) {
    
    
                  option = new Option(data[i].provinceName,data[i].provinceId);

                    selectProvince.add(option)
                }
                console.log("添加完毕！")
                form.render('select')
                form.render();
                // $("#province").html(options);
            },
            error() {
    
    
                console.log("进入了error")
                layer.confirm('省份加载暂时出现了点问题！', {
    
    icon: 2, btn: ['好的，回主页吧', '去登陆页'], title: '错误信息'}, function () {
    
    
                        window.location.href = '/main'
                    },
                    function () {
    
    
                        window.location.href = '/login'
                    })
            }
        })

    })
}

//选择城市
function loadCities() {
    
    
    form.on('select(changeProvince)', function () {
    
    
        $("#city").html('')
        //alert("改变方法执行了！")
        let provinceId = $("#province option:selected").val();
        //let provinceId = data.val();
        $.ajax({
    
    
            type: 'post',
            url: '/getCities',
            cache: false,
            async: true,
            data: {
    
    "provinceId": provinceId},
            //  contentType:"application/json",
            dataType: 'json',
            success(data) {
    
    
                console.log(data)
                let selectCities = document.getElementById("city");
                selectCities.add(new Option("请选择对应的城市", "0"));
                let option = null;
                for (let i = 0; i < data.length; i++) {
    
    
                    option = new Option(data[i].cityName, data[i].cityId);
                    selectCities.add(option)
                }
                form.render('select')
                form.render();
            },
            error() {
    
    
                console.log("进入了error")
                layer.confirm('市加载暂时出现了点问题！', {
    
    icon: 2, btn: ['好的，回主页吧', '去登陆页'], title: '错误信息'}, function () {
    
    
                        window.location.href = '/main'
                    },
                    function () {
    
    
                        window.location.href = '/login'
                    })
            }
        })
    })
}

//选择地区
function loadRegions () {
    
    
    form.on('select(changeCity)',function () {
    
    
        $("#region").html('');
        let cityId=$("#city option:selected").val();
        $.ajax({
    
    
            type:'post',
            url:'/getRegions',
            cache:false,
            async:true,
            data: {
    
    "cityId":cityId},
            dataType:'json',
            success(data){
    
    
                let selectRegions = document.getElementById("region");
                selectRegions.add(new Option("请选择对应的区",0))
                let option=null
                for (let i=0;i<data.length;i++){
    
    
                    option=new Option(data[i].regionName,data[i].regionId);
                    selectRegions.add(option);
                }
                form.render('select')
                form.render();

            },
            error() {
    
    
                console.log("进入了error")
                layer.confirm('区加载暂时出现了点问题！', {
    
    icon: 2, btn: ['好的，回主页吧', '去登陆页'], title: '错误信息'}, function () {
    
    
                        window.location.href = '/main'
                    },
                    function () {
    
    
                        window.location.href = '/login'
                    })
            }

        })
    })
}

Le moyen d'y parvenir :

Chargement des provinces

Premièrement, dès que la page est chargée, onload=load（）le nom spécifique de chaque province est chargé par chargement. C'est-à-dire que le chargement de la province est effectué en même temps que le chargement de la page. Le contenu de la province spécifique chargée est obtenu à partir de la base de données principale via la méthode ajax de jQuery. Le résultat retourné par le backend est au format json (dataType : json).

Lorsque l'arrière-plan renvoie des données avec succès, il entre dans la fonction de réussite et les données sont le résultat réel renvoyé par le backend. Ensuite, analysez en détail le résultat json renvoyé par le backend. Le format renvoyé par l'auteur est {xxxId : xxxName}.

Enfin, via l' objet option, ajoutez-le à la zone de sélection de sélection.La dernière chose à laquelle il faut prêter attention est form.render('select'), qui doit être actualisé après le chargement. C'est un énorme gouffre.

chargement de la ville au niveau de la préfecture

Une fois les provinces chargées, le chargement des villes au niveau de la préfecture est différent du chargement des provinces. Nous devons obtenir l'identifiant spécifique de la province sélectionnée par l'utilisateur après le chargement de la province et le transmettre au backend. Le backend sélectionne l'identifiant correspondant en fonction de l'identifiant de la province Toutes les villes de niveau préfectoral.

Cette fonction nécessite l'utilisation d' form.on()une fonction. Le premier paramètre de la fonction est similaire à un sélecteur. Une fois la province sélectionnée, le deuxième paramètre sera exécuté immédiatement, c'est-à-dire que la fonction correspondante chargera la ville de niveau préfecture. Toujours Il s'agit d'une requête asynchrone via la méthode ajax de jQuery. Le format renvoyé est toujours au format json.

Enfin, la boîte de sélection de sélection est réalisée en définissant l'objet d'option .

Notez que $("#city").html(''). Cet élément est utilisé pour l'initialisation. Si la mauvaise province est sélectionnée et doit être corrigée, le contenu précédemment sélectionné sera complètement effacé, ce qui est très important.

Chargement du district (comté)

Le chargement des districts (comtés) est similaire au chargement des villes de niveau préfecture, mais il utilise l'identifiant de la ville de niveau préfecture correspondante pour obtenir tous les noms des districts (comtés) sous la ville de niveau préfecture correspondante. L'opération est similaire au chargement de la ville au niveau de la préfecture.

3. Implémentation back-end

Dans ce projet, le backend de l'auteur utilise le framework SpringBoot. Le chargement du contenu spécifique de la boîte de sélection est réalisé via le mode mvc.

Conception de classe d'entité

@Entity
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Province {
    
    
    @Column(name = "province_id")
    private String provinceId;

    @Column(name = "province_name")
    private String provinceName;
}

@Entity
@Data
@AllArgsConstructor
@NoArgsConstructor
public class City {
    
    

    @Column(name = "city_id")
    private String cityId;
    @Column(name = "city_name")
    private String cityName;

}

@Data
@Entity
@AllArgsConstructor
@NoArgsConstructor
public class Region {
    
    
    @Column(name = "region_id")
    private String regionId;
    @Column(name = "region_name")
    private String regionName;
}

Tous les trois utilisent lombok pour charger les méthodes setter et getter et les méthodes de construction. @ColumnLe rôle de consiste à faire correspondre à l'avance les champs de la classe d'entités avec les champs de la table de base de données pour éviter les incohérences et les rapports d'erreurs ultérieurs.

Conception de base de données

La conception de la base de données est relativement simple cette fois, une seule table est conçue et certaines données sont remplies au hasard pour les tests.

CREATE TABLE IF NOT EXISTS address(
        province_id  VARCHAR(20)  NOT NULL  ,
        province_name VARCHAR(20) NOT NULL ,
        city_id VARCHAR(20) NOT NULL ,
        city_name VARCHAR(20) NOT NULL ,
        region_id VARCHAR(20) NOT NULL  PRIMARY KEY ,
        region_name VARCHAR(20) NOT NULL

    );
    
-- 手动添加一些数据
INSERT INTO address VALUES ('p1','北京','c1','北京','r1','房山区');
INSERT INTO address VALUES ('p1','北京','c1','北京','r2','通州区');
INSERT INTO address VALUES ('p1','北京','c1','北京','r3','丰台区');
INSERT INTO address VALUES ('p1','北京','c1','北京','r4','东城区');
INSERT INTO address VALUES ('p1','北京','c1','北京','r5','西城区');
INSERT INTO address VALUES ('p1','北京','c1','北京','r6','崇文区');
INSERT INTO address VALUES ('p1','北京','c1','北京','r7','朝阳区');
INSERT INTO address VALUES ('p1','北京','c1','北京','r8','海淀区');
INSERT INTO address VALUES ('p2','上海','c1','上海','p2r1','嘉定区');

INSERT INTO address VALUES ('p2','上海','p2c1','上海','p2r3','徐汇区');
INSERT INTO address VALUES ('p2','上海','p2c1','上海','p2r4','长宁区');
INSERT INTO address VALUES ('p2','上海','p2c1','上海','p2r5','静安区');
INSERT INTO address VALUES ('p2','上海','p2c1','上海','p2r6','普陀区');
INSERT INTO address VALUES ('p2','上海','p2c1','上海','p2r7','宝山区');
INSERT INTO address VALUES ('p2','上海','p2c1','上海','p2r8','青浦区');
INSERT INTO address VALUES ('p2','上海','p2c1','上海','p2r9','奉贤区');
INSERT INTO address VALUES ('p2','上海','p2c1','上海','p2r10','金山区');

INSERT INTO address VALUES ('P3','天津','p3c1','天津','p3r1','滨海新区');
INSERT INTO address VALUES ('P3','天津','p3c1','天津','p3r2','宁河区');
INSERT INTO address VALUES ('P3','天津','p3c1','天津','p3r3','和平区');
INSERT INTO address VALUES ('P3','天津','p3c1','天津','p3r4','河北区');
INSERT INTO address VALUES ('P3','天津','p3c1','天津','p3r5','河东区');
INSERT INTO address VALUES ('P3','天津','p3c1','天津','p3r6','河西区');
INSERT INTO address VALUES ('P3','天津','p3c1','天津','p3r7','南开区');
INSERT INTO address VALUES ('P3','天津','p3c1','天津','p3r8','武清区');
INSERT INTO address VALUES ('P3','天津','p3c1','天津','p3r9','静海区');
INSERT INTO address VALUES ('P3','天津','p3c1','天津','p3r10','蓟州区');

Le region_id est défini comme clé primaire dans la base de données car lors du chargement des données, les provinces et les villes peuvent être répétées, et seul le nom du district est unique dans cette table.

Couche de persistance

Implémentation de code Java


@Mapper
@Repository
public interface LoadAddressData {
    
    
    /**
     * @return
     */

   List<Province> getProvince();


    /**
     *
     * @param provinceId 省份的id值
     * @return 返回对应省份id所对应的所有城市
     */
   List<City> getCities(@Param("provinceId") String provinceId);

    /**
     *
     * @param cityId 对应城市的id
     * @return 返回对应id城市的所有区
     */
   List<Region>getRegions(@Param("cityId")String cityId);


}

Les résultats renvoyés par les trois méthodes sont tous sous la forme d'une liste, et le contenu de la liste sont tous des objets

Réalisé grâce au fichier de cartographie de mybatis

<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mail.dao.vendorsDao.LoadAddressData">
    <!--命名空间-->
    
    <resultMap id="resultMapProvince" type="com.example.mail.entity.Province">
        <result column="province_id" property="provinceId"/>
        <result column="province_name" property="provinceName"/>
    </resultMap>
    <!--resultMap的主要作用是将结果集映射到具体的数据库字段名称上去-->
    
    <select id="getProvince" resultMap="resultMapProvince" resultType="list">
        SELECT DISTINCT province_id,province_name FROM address;
    </select>
    <!--执行查询所有省份的方法-->
    
    <!--根据省份id查询所有的城市-->
    <resultMap id="resultMapCities" type="com.example.mail.entity.City">
        <result column="city_id" property="cityId"/>
        <result column="city_name" property="cityName"/>
        <result column="province_id" property="provinceId"/>
    </resultMap>
    <select id="getCities" parameterType="java.lang.String" resultType="list" resultMap="resultMapCities">
           SELECT DISTINCT city_id,city_name FROM address WHERE province_id=#{provinceId};
    </select>
    
    
    <!--根据城市的id查询所有区（县）-->
    <resultMap id="resultMapRegions" type="com.example.mail.entity.Region">
        <result column="city_id" property="cityId"/>
        <result column="region_id" property="regionId"/>
        <result column="region_name" property="regionName"/>
    </resultMap>
    <select id="getRegions" parameterType="java.lang.String" resultType="list" resultMap="resultMapRegions">
        SELECT DISTINCT region_id,region_name FROM address WHERE city_id=#{cityId};
    </select>
</mapper>

Implémentation du code de la couche de service

public interface LoadAddressDataService {
    
    

    /**
    *获取所有的省份
    */
   List<Province> getProvince();

   /**
    *
    * @param provinceId 省份的id值
    * @return 返回对应省份id所对应的所有城市
    */
   List<City> getCities(@Param("provinceId") String provinceId);

   /**
    *
    * @param cityId 对应城市的id
    * @return 返回对应id城市的所有区
    */
   List<Region>getRegions(@Param("cityId")String cityId);
}


@Service
public class LoadAddressDataServiceImpl implements LoadAddressDataService {
    
    

    @Autowired
    private LoadAddressData loadAddressData;
    
    /**
    *获取所有的省份
    */
    @Override
    public List<Province> getProvince() {
    
    
        return loadAddressData.getProvince();
    }

    /**
     * @param provinceId 省份的id值
     * @return 返回对应省份id所对应的所有城市
     */
    @Override
    public List<City> getCities(String provinceId) {
    
    
        return loadAddressData.getCities(provinceId);
    }

    /**
     * @param cityId 对应城市的id
     * @return 返回对应id城市的所有区
     */
    @Override
    public List<Region> getRegions(String cityId) {
    
    
        return loadAddressData.getRegions(cityId);
    }
}

Implémentation de la couche de contrôle

@Controller
public class LoadAddressDataController {
    
    
    @Autowired
    private LoadAddressDataService loadAddressDataService;

    @RequestMapping("/getProvince")
    @ResponseBody
    public String getProvince(){
    
    
        List<Province> provinces = loadAddressDataService.getProvince();
        return JSON.toJSONString(provinces);
    }


    @RequestMapping("/getCities")
    @ResponseBody
    public String getCities( String provinceId){
    
    
        System.out.println("获取到的省份id为"+provinceId);
        List<City> cities = loadAddressDataService.getCities(provinceId);
        return JSON.toJSONString(cities);
    }


    @RequestMapping("/getRegions")
    @ResponseBody
    public String getRegions(String cityId){
    
    
        System.out.println("获取到城市id为"+cityId);
        List<Region> regions = loadAddressDataService.getRegions(cityId);
        return JSON.toJSONString(regions);
    }

}

On peut voir que les dernières chaînes renvoyées dans le code de la couche de contrôle sont toutes des chaînes au format json, car les trois requêtes ajax dans le fichier js frontal sont toutes définies dans dataTypejson