模拟数据动态循环加载到页面

「爱情、让人受尽委屈。」 2023-07-15 02:50 85阅读 0赞

**positionController.js**

// 导入html模板
    import positionCon from '../../views/position/position.html'
    import positionItem from '../../views/position/positionItem.html'
    // 导入ajax.js文件，里面是数据传送（算是后台服务的一些代码）
    import { get} from '../model/ajax.js' // 把get方法解构出来
    
    class PositionController { 
        async getList(){ 
            // 相对路径，需要配置代理
            let url='/api/jobslist';//这个是模拟数据的地址
            let result=await get(url);//使用get方法，传送数据，并接收返回的数据赋值给result
            let posiItem=template.render(positionItem,{ jobsData:result});//先传入数据到模板，再把内容放进相应容器，template.render()里第一个参数是模板的原始字符串，第二个参数指定 { 参数名: 参数值 }
            $(".position-list").html(posiItem);//再把/positionItem.html的内容加进position.html页面的相应容器里
            console.log(result);
        }
    
        //单一职责，一个方法，只做一件事
        render() { 
            $("#main").html(positionCon);//先把position.html页面内容加进主页面的内容部分
            this.getList();//拿到模拟数据
        }
    }
    export default new PositionController();

**positionItem.html**

// 循环加载jobsData里的数据，有几条就加载几次
    // art-template字符模板里的一种循环方法
    
    {
       {each jobsData}}
    <div class="item">
        <img src="//www.lgstatic.com/{ {$value['companyLogo']}}" alt="">
        <div class="item_des">
            <h2>{
       {$value['companyName']}}</h2>
            <p class="item_span">
                <span class="span_job">{
       {$value['positionName']}}</span>
                <span class="span_money">{
       {$value['salary']}}</span>
            </p>
            <p class="item_time">{
       {$value['createTime']}}</p>
        </div>
    </div>
    {
       {/each}}

**ajax.js**

const get=(url,data)=>{ 
        return new Promise((resolve, reject)=>{ 
            $.ajax({ 
                url,//if url=urf,so 写一个就行
                type:"GET",
                data:data,
                success:(result)=>{ 
                    resolve(result);
                },
                error:(err)=>{ 
                    reject(err);
                }
            })
        })
    }
    
    const post=()=>{ 
    
    }
    
    export { get,post}

**jobslist.json**

json-server做模拟数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]

**然后开启json-server服务，开启gulp服务**

数据就被动态加载进来了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: /images/20230529/c76ba37c972543e48e6a7d24163f2c94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]: /images/20230529/c41ec980f02f4555ad47258a5d8b5e9d.png