最新的vue webpack模板沒有dev-server.js文件,進行后臺數據模擬筆記

最新的vue里dev-server.js被替換成了webpack-dev-conf.js

在模擬后臺數據的時候直接在webpack-dev-conf.js文件中修改

第一步,在const portfinder = require(‘portfinder’)后添加

//第一步
const express = require('express')
const app = express()//請求server
var appData = require('../data.json')//加載本地數據文件
var seller = appData.seller//獲取對應的本地數據
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
app.use('/api', apiRoutes)//通過路由請求數據

第二步:找到devServer,在里面加上before()方法

devServer: {clientLogLevel: 'warning',
    historyApiFallback: true,
    hot: true,
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }: false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {poll: config.dev.poll,
    },
    //第二步找到devServer,在里面添加
before(app) {app.get('/api/seller', (req, res) => {res.json({errno: 0,
      data: seller})//接口返回json數據,上面配置的數據seller就賦值給data請求后調用
  }),
  app.get('/api/goods', (req, res) => {res.json({errno: 0,
      data: goods})}),
  app.get('/api/ratings', (req, res) => {res.json({errno: 0,
      data: ratings})})
}}

提供一個json.data數據

{"seller": {"name": "粥品香坊(回龍觀)",
    "description": "蜂鳥專送",
    "deliveryTime": 38,
    "score": 4.2,
    "serviceScore": 4.1,
    "foodScore": 4.3,
    "rankRate": 69.2,
    "minPrice": 20,
    "deliveryPrice": 4,
    "ratingCount": 24,
    "sellCount": 90,
    "bulletin": "粥品香坊其烹飪粥料的秘方源于中國千年古法,在融和現代制作工藝,由世界烹飪大師屈浩先生領銜研發。堅守純天然、0添加的良心品質深得消費者青睞,發展至今成為粥類的引領品牌。是2008年奧運會和2013年園博會指定餐飲服務商。",
    "supports": [{"type": 0,
        "description": "在線支付滿28減5"
      },
      {"type": 1,
        "description": "VC無限橙果汁全場8折"
      },
      {"type": 2,
        "description": "單人精彩套餐"
      },
      {"type": 3,
        "description": "該商家支持發票,請下單寫好發票抬頭"
      },
      {"type": 4,
        "description": "已加入“外賣保”計劃,食品安全保障"
      }],
    "avatar": "http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg",
    "pics": ["http://fuss10.elemecdn.com/8/71/c5cf5715740998d5040dda6e66abfjpeg.jpeg?imageView2/1/w/180/h/180",
      "http://fuss10.elemecdn.com/b/6c/75bd250e5ba69868f3b1178afbda3jpeg.jpeg?imageView2/1/w/180/h/180",
      "http://fuss10.elemecdn.com/f/96/3d608c5811bc2d902fc9ab9a5baa7jpeg.jpeg?imageView2/1/w/180/h/180",
      "http://fuss10.elemecdn.com/6/ad/779f8620ff49f701cd4c58f6448b6jpeg.jpeg?imageView2/1/w/180/h/180"
    ],
    "infos": ["該商家支持發票,請下單寫好發票抬頭",
      "品類:其他菜系,包子粥店",
      "北京市昌平區回龍觀西大街龍觀置業大廈底商B座102單元1340",
      "營業時間:10:00-20:30"
    ]}}

PS:

所有的修改配置都需要重新啟動運行命令的:npm run dev才能生效(很重要,否則無法請求到數據)

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247562.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247562.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247562.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

20080331 - What is a PID, How is it useful when troubleshooting a system

PID Process Identifier, 是一個全局唯一的用來標識進程的整數。在多任務系統中,可用來診斷系統中發生錯誤的進程。 轉載于:https://www.cnblogs.com/likun/archive/2008/03/31/1130458.html

記一次el-input使用的坑

記一次el-input使用的坑 el-input使用不同與原生input&#xff0c;所以在vue中改變綁定的數據時需注意 <el-input v-model"form.schedule" input"validateNumber($event)" />要想在input時改變form.schedule的值來改變輸入框顯示的值&#xff0c;以…

使用pm2啟動Node和Vue項目教程

安裝pm2 $ npm install -g pm2 命令行全局安裝pm2 將pm2加入到命令中去?1234ln -s /usr/local/src/node-v8.9.1-linux-x64/bin/pm2 /usr/local/bin/pm2ln -s /usr/local/src/node-v8.9.1-linux-x64/bin/pm2-dev /usr/local/bin/pm2-devln -s /usr/local/src/node-v8.9.1-lin…

對正則的研究

視頻鏈接地址&#xff08;視頻格式可按需增刪&#xff09; /^https?:\/\/.*?(swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4)$/i 圖片鏈接地址&#xff08;圖片格式可按需增刪&#xff09; /^https?:\/\/.*?(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif)$/i 24小時制時間&a…

MVVM原理還你

眾所周知當下是MVVM盛行的時代&#xff0c;從早期的Angular到現在的React和Vue&#xff0c;再從最初的三分天下到現在的兩虎相爭。 無疑不給我們的開發帶來了一種前所未有的新體驗&#xff0c;告別了操作DOM的思維&#xff0c;換上了數據驅動頁面的思想&#xff0c;果然時代的進…

poj1316

1&#xff0e;鏈接地址 https://vjudge.net/problem/POJ-1316 2&#xff0e;問題描述 In 1949 the Indian mathematician D.R. Kaprekar discovered a class of numbers called self-numbers. For any positive integer n, define d(n) to be n plus the sum of the digits of …

CSS頁面布局解決方案大全

前端布局非常重要的一環就是頁面框架的搭建&#xff0c;也是最基礎的一環。在頁面框架的搭建之中&#xff0c;又有居中布局、多列布局以及全局布局&#xff0c;今天我們就來總結總結前端干貨中的CSS布局。 居中布局 水平居中 1&#xff09;使用inline-blocktext-align&#xff…

AES加密算法的學習筆記

AES簡介高級加密標準(AES,Advanced Encryption Standard)為最常見的對稱加密算法(微信小程序加密傳輸就是用這個加密算法的)。 對稱加密算法也就是加密和解密用相同的密鑰&#xff0c;具體的加密流程如下圖&#xff1a; 下面簡單介紹下各個部分的作用與意義&#xff1a; 明文P沒…

為什么要用setTimeout模擬setInterval ?

setInterval有兩個缺點&#xff1a; 使用setInterval時&#xff0c;某些間隔會被跳過&#xff1b;可能多個定時器會連續執行&#xff1b;在前一個定時器執行完前&#xff0c;不會向隊列插入新的定時器&#xff08;解決缺點一&#xff09;保證定時器間隔&#xff08;解決缺點二&…

前端 crypto-js aes 加解密

背景 前段時間公司做項目&#xff0c;該項目涉及到的敏感數據比較多&#xff0c;經過的一波討論之后&#xff0c;決定前后端進行接口加密處理&#xff0c;采用的是 AES BASE64 算法加密~ 網上關于 AES 對稱加密的算法介紹看上一篇&#xff01; 具體實現 其實搞懂了是怎么一回事…

對排序算法的研究

算法是什么&#xff1f;、 算法&#xff08;Algorithm&#xff09; 代表著用系統的方法描述解決問題的策略機制&#xff0c;可以通過一定規范的 輸入&#xff0c;在有限時間內獲得所需要的 輸出。 一個算法的好壞是通過 時間復雜度 與 空間復雜度 來衡量的。 簡單來說&#xff…

js實用算法

判斷文本是否為回文 定義&#xff1a;如果將一個文本翻轉過來&#xff0c;能和原文本完全相等&#xff0c;那么就可以稱之為“回文”。 方法一&#xff08;字符串、數組內置方法&#xff09;123456789101112131415/** 判斷文字是否為回文* param {string|number} val 需要判斷的…

stylus

stylus格式 指將css中{} &#xff1b;去掉即可

隨筆記錄(2019.7.10)

1、ISO/OSI 網絡七層參考模型 物理層 數據鏈路層 網絡層 傳輸層 會話層 表示層 應用層 2、 TCP/IP 網絡四層模型和五層模型 四層模型&#xff1a; 網絡接口層 網絡層 傳輸層 應用層 五層模型&#xff1a; 物理層 數據鏈路層 網絡層 傳輸層 應用層 3、 協議簇 &#xff08;1&a…

轉發:Ajax動態畫EChart圖表

本人由于項目需要&#xff0c;在狀態變化的時候需要動態繪制對應數據的EChart圖表&#xff0c;并且不刷新整個網頁。 所以就用Ajax動態畫EChart圖表&#xff0c;下面是開發過程中遇到的一些坑的總結。 流程&#xff1a;頁面首次加載時展示一幅原始的圖形&#xff0c;若后臺數據…

如果硬盤不顯示可以這么處理

http://www.zhuangjiba.com/soft/9574.html轉載于:https://www.cnblogs.com/braveheart007/p/11167311.html

Highcharts的餅圖大小的控制

在Highcharts中&#xff0c;餅圖的大小是Highcharts自動計算并進行繪制。餅圖的大小受數據標簽大小、數據標簽到切片的距離影響。當數據標簽內容較多&#xff0c;并且距離切片較遠時&#xff0c;餅圖就會被壓縮的很小。解決這個問題&#xff0c;有以下幾種方法&#xff1a;&…

轉:谷歌離線地圖基礎

一.需要文件 gapi3文件夾&#xff1a;存放接口等tilemap文件夾&#xff1a;存放圖片gapi.js文件maptool.js文件 二.html配置 <script type"text/javascript" src"gapi.js"></script> <script type"text/javascript" src"map…

HTTP Header 詳解

搜集資料 HTTP&#xff08;HyperTextTransferProtocol&#xff09;即超文本傳輸協議&#xff0c;目前網頁傳輸的的通用協議。HTTP協議采用了請求/響應模型&#xff0c;瀏覽器或其他客戶端發出請求&#xff0c;服務器給與響應。就整個網絡資源傳輸而言&#xff0c;包括message-h…

Windows CE 6.0中斷處理過程(轉載)

這里我們主要討論的是CE的中斷建立和中斷相應的大概流程以及所涉及的代碼位置。這里所講述的&#xff0c;是針對ARM平臺的。在CE的中斷處理里面&#xff0c;有一部分工作是CE Kernel完成的&#xff0c;有一部分工作是要由OEM完成的。 Kernel代碼工作 ExVector.s&#xff1a;中斷…