最新的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.mzph.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;中断…