弄懂art-template前后端混合使用之后，使用mongodb数据库，Node.js，AJAX,art-template实现省市区三级联动

最新推荐文章于 2022-03-29 11:48:42 发布

qq_39305143

最新推荐文章于 2022-03-29 11:48:42 发布

阅读量402

点赞数 1

分类专栏： art-template mongodb node.js 文章标签： node.js 前端 jquery html

本文链接：https://blog.csdn.net/qq_39305143/article/details/104890288

版权

本文介绍了如何在理解art-template前后端混合使用的基础上，利用Node.js、AJAX和艺术模板（art-template）实现省市区三级联动。详细讲解了服务器端渲染、客户端交互、数据模块的组织，并分享了在实现过程中遇到的问题及解决方案，如选择项的正确清除、动态渲染的优化等。

摘要由CSDN通过智能技术生成

弄懂art-template前后端混合使用之后，完成的这个案例

首先，页面用服务器端渲染，拿到省份信息，渲染到页面
其次，客户端省份信息选择之后调用城市接口，获取数据，渲染到页面，注意，（1）在客户端没有选中时让城市的下拉框清空，避免省份还在提示请选择省份时，城市诓就有信息（2）省份框选中时，让县城框清空，同样，避免还未选城市呢，县城信息就出来
然后，选择了城市之后，调接口用数据渲染县城框

服务器端渲染主页面代码

//导入省份，城市，area数据模块
const {
   Province} = require('../model/addrSelectPro');
const {
   City} = require('../model/addrSelectCity');
const {
   Area} = require('../model/addrSelectArea');
 一开始就请求省份，渲染到页面
app.get('/addrSelectPro',async (req,res)=>{
   
    // 获取所有省份的信息
    var provinceArry = await Province.find();
    //渲染index.art模板
    res.render('index',{
   provinceArry});
});
//请求城市信息
app.get('/addrSelectCity/:province',async (req,res)=>{
   
    // 获取请求参数省份名称
    var {
   province} = req.params;
    // 查询省份具体的信息
    var  proInfo = await Province.findOne({
   province:province});    
    // 根据省份id查城市信息
    var cityArry = await City.find({
   province:proInfo._id});
    //将城市数据传回，注意我传的时对象
    res.send({
   cityArry}); 
}
// 请求县城信息
app.get('/addrSelectArea/:city', async (req,res)=>{
   
    // 获取参数城市名
    var {
   city} = req.params;
    // 查询城市对应的信息以便获取城市id
    var  cityInfo = await City.findOne({
   city:city});
    // 根据城市id查县城信息
    var areaArry = await Area.findOne({
   city:cityInfo._id});
    <