首页 生活小絮

前端进行本地测试

相信刚刚学完前端的小白肯定有为测试打包阶段没有服务器而烦恼，我推荐的方法是进行本地测试

步骤展示

（1）：在本地新建json文件，名字任意取（比如aa.json）

文件在项目中的目录如下：

image-20240416163258064

aa.json文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{
"data": [
{
"receiveAdd": "111111111111111111",
"sendAdd": "222222",
"distance": 9.463,
"goodsName": "生活用品",
"editname": "11",
"weight": "<=5kg",
"editnotename": "11",
"receiveName": "哈哈",
"receiveSex": "男",
"receiveTel": "13633633666",
"sendName": "嘿嘿",
"sendSex": "男",
"sendTel": "15655655666",
"price": "28元"
},
{
"receiveAdd": "11111",
"sendAdd": "222222",
"distance": 9.463,
"goodsName": "生活用品",
"editname": "11",
"weight": "<=5kg",
"editnotename": "11",
"receiveName": "哈哈",
"receiveSex": "男",
"receiveTel": "13633633666",
"sendName": "嘿嘿",
"sendSex": "男",
"sendTel": "15655655666",
"price": "28元"
}
]
}

（2）：json文件准备好了之后，前端本地开始测试访问新建的json文件

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
data () {
    return {
      anylist: []
    }
  },





$.ajax({
        type: 'GET',
        url: './../../../static/aa.json',
        data: {},
        dataType: 'json'
      }).then(res => {
        // console.log(res)
        console.log(res.data)
        this.anylist = res.data
      })
        .catch(error => {
          console.log(error)
        })

（3）：前端本地渲染页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="content clearfix" v-on:click="goorderingDetail()" v-for="v in anylist" v-bind:key="v.id">
      <div class="clearfix">
        <div class="fl dingnumber">订单号  <span>D123456789</span></div>
        <div class="fr state">进行中</div>
      </div>
      <div class="clearfix receive">
        <div class="fl">收</div>
        <div class="fr add">{{v.receiveAdd}}</div>
      </div>
      <div class="clearfix send">
        <div class="fl">发</div>
        <div class="fr add">{{v.sendAdd}}</div>
      </div>
      <div class="date fl">2018年9月28日    12:00</div>
      <div class="fr sure" v-on:click="gosureReceive()">确认取件</div>
    </div>