前後端項目的開發,需要前端和後端同時進行開發,有時後端開發人員還未完成API介面可以提供給前端調用,因此就需要模擬前端請求後端介面,後端返回數據。一般開發中都是返回json數據格式來完成前後端的交互。 1. 首先下載一個vue-cli的項目模板 vue init webpack myProject ...
前後端項目的開發,需要前端和後端同時進行開發,有時後端開發人員還未完成API介面可以提供給前端調用,因此就需要模擬前端請求後端介面,後端返回數據。一般開發中都是返回json數據格式來完成前後端的交互。
1. 首先下載一個vue-cli的項目模板
vue init webpack myProject
2. 在項目根目錄下創建一個data.json的模擬後臺返回數據,名字可以隨便寫不一定非得是data.json哈,但是格式必須是json格式哈
1 { 2 "seller": { 3 "name": "粥品香坊(回龍觀)", 4 "description": "蜂鳥專送", 5 "deliveryTime": 38, 6 "score": 4.2, 7 "serviceScore": 4.1, 8 "foodScore": 4.3, 9 "rankRate": 69.2, 10 "minPrice": 20, 11 "deliveryPrice": 4, 12 "ratingCount": 24, 13 "sellCount": 90, 14 "bulletin": "粥品香坊其烹飪粥料的秘方源於中國千年古法,在融和現代製作工藝,由世界烹飪大師屈浩先生領銜研發。堅守純天然、0添加的良心品質深得消費者青睞,發展至今成為粥類的引領品牌。是2008年奧運會和2013年園博會指定餐飲服務商。", 15 "supports": [ 16 { 17 "type": 0, 18 "description": "線上支付滿28減5" 19 }, 20 { 21 "type": 1, 22 "description": "VC無限橙果汁全場8折" 23 }, 24 { 25 "type": 2, 26 "description": "單人精彩套餐" 27 }, 28 { 29 "type": 3, 30 "description": "該商家支持發票,請下單寫好發票抬頭" 31 }, 32 { 33 "type": 4, 34 "description": "已加入“外賣保”計劃,食品安全保障" 35 } 36 ], 37 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg", 38 "pics": [ 39 "http://fuss10.elemecdn.com/8/71/c5cf5715740998d5040dda6e66abfjpeg.jpeg?imageView2/1/w/180/h/180", 40 "http://fuss10.elemecdn.com/b/6c/75bd250e5ba69868f3b1178afbda3jpeg.jpeg?imageView2/1/w/180/h/180", 41 "http://fuss10.elemecdn.com/f/96/3d608c5811bc2d902fc9ab9a5baa7jpeg.jpeg?imageView2/1/w/180/h/180", 42 "http://fuss10.elemecdn.com/6/ad/779f8620ff49f701cd4c58f6448b6jpeg.jpeg?imageView2/1/w/180/h/180" 43 ], 44 "infos": [ 45 "該商家支持發票,請下單寫好發票抬頭", 46 "品類:其他菜系,包子粥店", 47 "北京市昌平區回龍觀西大街龍觀置業大廈底商B座102單元1340", 48 "營業時間:10:00-20:30" 49 ] 50 }, 51 "goods": [ 52 { 53 "name": "熱銷榜", 54 "type": -1, 55 "foods": [ 56 { 57 "name": "皮蛋瘦肉粥", 58 "price": 10, 59 "oldPrice": "", 60 "description": "咸粥", 61 "sellCount": 229, 62 "rating": 100, 63 "info": "一碗皮蛋瘦肉粥,總是我到粥店時的不二之選。香濃軟滑,飽腹暖心,皮蛋的Q彈與瘦肉的滑嫩伴著粥香溢於滿口,讓人喝這樣的一碗粥也覺得心滿意足", 64 "ratings": [ 65 { 66 "username": "3******c", 67 "rateTime": 1469281964000, 68 "rateType": 0, 69 "text": "很喜歡的粥", 70 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 71 }, 72 { 73 "username": "2******3", 74 "rateTime": 1469271264000, 75 "rateType": 0, 76 "text": "", 77 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 78 }, 79 { 80 "username": "3******b", 81 "rateTime": 1469261964000, 82 "rateType": 1, 83 "text": "", 84 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 85 } 86 ], 87 "icon": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114", 88 "image": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750" 89 }, 90 { 91 "name": "扁豆燜面", 92 "price": 14, 93 "oldPrice": "", 94 "description": "", 95 "sellCount": 188, 96 "rating": 96, 97 "ratings": [ 98 { 99 "username": "3******c", 100 "rateTime": 1469281964000, 101 "rateType": 0, 102 "text": "", 103 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 104 }, 105 { 106 "username": "2******3", 107 "rateTime": 1469271264000, 108 "rateType": 0, 109 "text": "", 110 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 111 }, 112 { 113 "username": "3******b", 114 "rateTime": 1469261964000, 115 "rateType": 1, 116 "text": "", 117 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 118 } 119 ], 120 "info": "", 121 "icon": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114", 122 "image": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750" 123 }, 124 { 125 "name": "蔥花餅", 126 "price": 10, 127 "oldPrice": "", 128 "description": "", 129 "sellCount": 124, 130 "rating": 85, 131 "info": "", 132 "ratings": [ 133 { 134 "username": "3******c", 135 "rateTime": 1469281964000, 136 "rateType": 1, 137 "text": "沒啥味道", 138 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 139 }, 140 { 141 "username": "2******3", 142 "rateTime": 1469271264000, 143 "rateType": 1, 144 "text": "很一般啊", 145 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 146 }, 147 { 148 "username": "3******b", 149 "rateTime": 1469261964000, 150 "rateType": 0, 151 "text": "", 152 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 153 } 154 ], 155 "icon": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114", 156 "image": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750" 157 }, 158 { 159 "name": "牛肉餡餅", 160 "price": 14, 161 "oldPrice": "", 162 "description": "", 163 "sellCount": 114, 164 "rating": 91, 165 "info": "", 166 "ratings": [ 167 { 168 "username": "3******c", 169 "rateTime": 1469281964000, 170 "rateType": 1, 171 "text": "難吃不推薦", 172 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 173 }, 174 { 175 "username": "2******3", 176 "rateTime": 1469271264000, 177 "rateType": 0, 178 "text": "", 179 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 180 }, 181 { 182 "username": "3******b", 183 "rateTime": 1469261964000, 184 "rateType": 0, 185 "text": "", 186 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 187 } 188 ], 189 "icon": "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114", 190 "image": "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750" 191 }, 192 { 193 "name": "招牌豬肉白菜鍋貼/10個", 194 "price": 17, 195 "oldPrice": "", 196 "description": "", 197 "sellCount": 101, 198 "rating": 78, 199 "info": "", 200 "ratings": [ 201 { 202 "username": "3******c", 203 "rateTime": 1469281964000, 204 "rateType": 1, 205 "text": "不脆,不好吃", 206 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 207 }, 208 { 209 "username": "2******3", 210 "rateTime": 1469271264000, 211 "rateType": 0, 212 "text": "", 213 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 214 }, 215 { 216 "username": "3******b", 217 "rateTime": 1469261964000, 218 "rateType": 0, 219 "text": "", 220 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 221 } 222 ], 223 "icon": "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114", 224 "image": "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750" 225 }, 226 { 227 "name": "南瓜粥", 228 "price": 9, 229 "oldPrice": "", 230 "description": "甜粥", 231 "sellCount": 91, 232 "rating": 100, 233 "ratings": [ 234 { 235 "username": "3******c", 236 "rateTime": 1469281964000, 237 "rateType": 0, 238 "text": "", 239 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 240 }, 241 { 242 "username": "2******3", 243 "rateTime": 1469271264000, 244 "rateType": 0, 245 "text": "", 246 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 247 }, 248 { 249 "username": "3******b", 250 "rateTime": 1469261964000, 251 "rateType": 0, 252 "text": "", 253 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 254 } 255 ], 256 "icon": "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114", 257 "image": "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750" 258 }, 259 { 260 "name": "紅豆薏米美膚粥", 261 "price": 12, 262 "oldPrice": "", 263 "description": "甜粥", 264 "sellCount": 86, 265 "rating": 100, 266 "info": "", 267 "ratings": [ 268 { 269 "username": "3******c", 270 "rateTime": 1469281964000, 271 "rateType": 0, 272 "text": "", 273 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 274 }, 275 { 276 "username": "2******3", 277 "rateTime": 1469271264000, 278 "rateType": 0, 279 "text": "", 280 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 281 }, 282 { 283 "username": "3******b", 284 "rateTime": 1469261964000, 285 "rateType": 0, 286 "text": "", 287 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 288 } 289 ], 290 "icon": "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114", 291 "image": "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750" 292 }, 293 { 294 "name": "八寶醬菜", 295 "price": 4, 296 "oldPrice": "", 297 "description": "", 298 "sellCount": 84, 299 "rating": 100, 300 "info": "", 301 "ratings": [ 302 { 303 "username": "3******c", 304 "rateTime": 1469281964000, 305 "rateType": 0, 306 "text": "", 307 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 308 }, 309 { 310 "username": "2******3", 311 "rateTime": 1469271264000, 312 "rateType": 0, 313 "text": "", 314 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 315 }, 316 { 317 "username": "3******b", 318 "rateTime": 1469261964000, 319 "rateType": 0, 320 "text": "", 321 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 322 } 323 ], 324 "icon": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114", 325 "image": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750" 326 }, 327 { 328 "name": "紅棗山藥糙米粥", 329 "price": 10, 330 "oldPrice": "", 331 "description": "", 332 "sellCount": 81, 333 "rating": 91, 334 "info": "", 335 "ratings": [ 336 { 337 "username": "3******c", 338 "rateTime": 1469281964000, 339 "rateType": 0, 340 "text": "", 341 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 342 }, 343 { 344 "username": "2******3", 345 "rateTime": 1469271264000, 346 "rateType": 0, 347 "text": "", 348 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 349 }, 350 { 351 "username": "3******b", 352 "rateTime": 1469261964000, 353 "rateType": 0, 354 "text": "", 355 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 356 } 357 ], 358 "icon": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114", 359 "image": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750" 360 }, 361 { 362 "name": "糊塌子", 363 "price": 10, 364 "oldPrice": "", 365 "description": "", 366 "sellCount": 80, 367 "rating": 93, 368 "info": "", 369 "ratings": [ 370 { 371 "username": "3******c", 372 "rateTime": 1469281964000, 373 "rateType": 0, 374 "text": "", 375 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 376 }, 377 { 378 "username": "2******3", 379 "rateTime": 1469271264000, 380 "rateType": 0, 381 "text": "", 382 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 383 }, 384 { 385 "username": "3******b", 386 "rateTime": 1469261964000, 387 "rateType": 0, 388 "text": "", 389 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 390 } 391 ], 392 "icon": "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114", 393 "image": "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750" 394 } 395 ] 396 }, 397 { 398 "name": "單人精彩套餐", 399 "type": 2, 400 "foods": [ 401 { 402 "name": "紅棗山藥粥套餐", 403 "price": 29, 404 "oldPrice": 36, 405 "description": "紅棗山藥糙米粥,素材包,爽口萵筍絲,四川泡菜或八寶醬菜,配菜可備註", 406 "sellCount": 17, 407 "rating": 100, 408 "info": "", 409 "ratings": [ 410 { 411 "username": "2******3", 412 "rateTime": 1469271264000, 413 "rateType": 0, 414 "text": "", 415 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 416 } 417 ], 418 "icon": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114", 419 "image": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/750/h/750" 420 } 421 ] 422 }, 423 { 424 "name": "冰爽飲品限時特惠", 425 "type": 1, 426 "foods": [ 427 { 428 "name": "VC無限橙果汁", 429 "price": 8, 430 "oldPrice": 10, 431 "description": "", 432 "sellCount": 15, 433 "rating": 100, 434 "info": "", 435 "ratings": [ 436 { 437 "username": "3******c", 438 "rateTime": 1469281964000, 439 "rateType": 0, 440 "text": "還可以", 441 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 442 }, 443 { 444 "username": "2******3", 445 "rateTime": 1469271264000, 446 "rateType": 0, 447 "text": "", 448 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 449 } 450 ], 451 "icon": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114", 452 "image": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750" 453 } 454 ] 455 }, 456 { 457 "name": "精選熱菜", 458 "type": -1, 459 "foods": [ 460 { 461 "name": "娃娃菜燉豆腐", 462 "price": 17, 463 "oldPrice": "", 464 "description": "", 465 "sellCount": 43, 466 "rating": 92, 467 "info": "", 468 "ratings": [ 469 { 470 "username": "3******c", 471 "rateTime": 1469281964000, 472 "rateType": 0, 473 "text": "菜量還可以,味道還可以", 474 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 475 }, 476 { 477 "username": "2******3", 478 "rateTime": 1469271264000, 479 "rateType": 0, 480 "text": "", 481 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 482 } 483 ], 484 "icon": "http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/114/h/114", 485 "image": "http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/750/h/750" 486 }, 487 { 488 "name": "手撕包菜", 489 "price": 16, 490 "oldPrice": "", 491 "description": "", 492 "sellCount": 29, 493 "rating": 100, 494 "info": "", 495 "ratings": [ 496 { 497 "username": "3******c", 498 "rateTime": 1469281964000, 499 "rateType": 0, 500 "text": "", 501 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 502 }, 503 { 504 "username": "2******3", 505 "rateTime": 1469271264000, 506 "rateType": 0, 507 "text": "", 508 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 509 } 510 ], 511 "icon": "http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/114/h/114", 512 "image": "http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/750/h/750" 513 }, 514 { 515 "name": "香酥黃金魚/3條", 516 "price": 11, 517 "oldPrice": "", 518 "description": "", 519 "sellCount": 15, 520 "rating": 100, 521 "info": "", 522 "ratings": [ 523 { 524 "username": "3******c", 525 "rateTime": 1469281964000, 526 "rateType": 0, 527 "text": "", 528 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 529 }, 530 { 531 "username": "2******3", 532 "rateTime": 1469271264000, 533 "rateType": 0, 534 "text": "", 535 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 536 } 537 ], 538 "icon": "http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/114/h/114", 539 "image": "http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/750/h/750" 540 } 541 ] 542 }, 543 { 544 "name": "爽口冷盤", 545 "type": -1, 546 "foods": [ 547 { 548 "name": "八寶醬菜", 549 "price": 4, 550 "oldPrice": "", 551 "description": "", 552 "sellCount": 84, 553 "rating": 100, 554 "info": "", 555 "ratings": [ 556 { 557 "username": "3******c", 558 "rateTime": 1469281964000, 559 "rateType": 0, 560 "text": "", 561 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 562 }, 563 { 564 "username": "2******3", 565 "rateTime": 1469271264000, 566 "rateType": 0, 567 "text": "", 568 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 569 }, 570 { 571 "username": "3******b", 572 "rateTime": 1469261964000, 573 "rateType": 0, 574 "text": "", 575 "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png" 576