1、前后端分离式开发,约定好数据字段接口!

2、前端mock静态数据,开发完毕后,与后端进行数据联调!

3、vue.config.js 配置 devServer

 const appData = require('./data.json')
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings
module.exports = {
css: {
loaderOptions: {
stylus: {
'resolve url': true,
'import': [
'./src/theme'
]
}
}
},
pluginOptions: {
'cube-ui': {
postCompile: true,
theme: true
}
},
devServer: {
before(app) {
app.get('/api/seller',function(req, res) {
res.json({
errno:0,
success:200,
data:seller
})
})
app.get('/api/goods',function(req, res) {
res.json({
errno:0,
success:200,
data:goods
})
})
app.get('/api/ratings',function(req, res) {
res.json({
errno:0,
success:200,
data:ratings
})
})
},
}
}

4、npm run server 重启服务

5、拿到 seller、goods、ratings 数据

Vue项目【饿了么App】mock数据【data.json】的更多相关文章

  1. 关于vue-cli创建项目(小白)(2)mock数据

    mock数据,好处,前后端分离,不用等后端的真实接口,就可以用axios(ek sju s 好像这么读,原谅本人总是根据读音写单词)请求数据了. 一,安装所需插件 根据不同需求选择安装环境,mockj ...

  2. Vue框架(一)——Vue导读、Vue实例(挂载点el、数据data、过滤器filters)、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

    Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...

  3. [转]IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载),按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取

    兼容问题1: 页面的分享等插件加载不全,并无法点击. 兼容问题2: IE下页面选择器(#id..class.etc.)绑定click事件无法访问到,后台springmvc方法,也无法获取ajax的su ...

  4. vue项目内嵌入到app input type=file 坑(文件上传插件)

    w问题描述: 我用vue-cli完成的一个移动端项目,内嵌到app当中,用原生的input type=file 来完成文件上传.在安卓下没有问题但是在苹果手机 上传第二次手机就会发生白屏 并无缘无故跳 ...

  5. vue项目 使用Hbuilder打包app 设置沉浸式状态栏

    使用 Hbuilder新建好移动app项目后,mainfest.json这个文件里的 plus里设置 statusbar ..... "plus": { "statusb ...

  6. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

  7. vue-cli项目中怎么mock数据

    在vue项目中, mock数据可以使用 node 的 express模块搭建服务 1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data ...

  8. vue项目模拟后台数据

    这次我们来模拟一些后台数据,然后去请求它并且将其渲染到界面上.关于项目的搭建鄙人斗胆向大家推荐我的一篇随笔<Vue开发环境搭建及热更新> 一.数据建立 我这里为了演示这个过程所以自己编写了 ...

  9. Vue项目搭建完整剖析全过程

    Vue项目搭建完整剖析全过程 项目源码地址:https://github.com/ballyalex 有帮助的话就加个星星呗~!  项目技术栈:vue+webpack+bower+sass+axios ...

随机推荐

  1. oracle 表连接 - sort merge joins 排序合并连接

    https://blog.csdn.net/dataminer_2007/article/details/41907581一. sort merge joins连接(排序合并连接) 原理 指的是两个表 ...

  2. mysql转化时间戳毫秒到秒

    其实我感觉都不值得写一篇随笔的,但是呢,我就是想写 其实就是截取毫秒时间戳的前十位就是我们是秒时间戳啦 update 表 set 表字段 = substr(表字段,1,10) 好简单 嫌弃中

  3. 启动tomcat报错One or more listeners failed to start,却找不到任何错误日志的临时解决方案

    在整合spring和quartz时,启动tomcat,服务台报以上错误,却找不到任何错误日志…… 参考了https://www.cnblogs.com/sxdcgaq8080/p/8005886.ht ...

  4. Java ——方法

    本节重点思维导图  方法的定义 例题:1!+2!+3!+4!+…..+15!=? public class Demo { public static void main(String[] args) ...

  5. Python工具库(感谢backlion整理)

    漏洞及渗透练习平台: WebGoat漏洞练习平台: https://github.com/WebGoat/WebGoat webgoat-legacy漏洞练习平台: https://github.co ...

  6. 前端 CSS 优先级 样式设置important

    !important 的使用. !important方式来强制让样式生效,但并不推荐使用.因为如果过多的使用!important会使样式文件混乱不易维护. 万不得已可以使用!important 现在选 ...

  7. Redis集合的常用操作指令

    Redis集合的常用操作指令 Sets常用操作指令 SADD 将指定的元素添加到集合.如果集合中存在该元素,则忽略. 如果集合不存在,会先创建一个集合然后在添加元素. 127.0.0.1:6379&g ...

  8. synchronized的底层实现原理

    转自:http://www.cnblogs.com/paddix/p/5367116.html 如果对上面的执行结果还有疑问,也先不用急,我们先来了解Synchronized的原理,再回头上面的问题就 ...

  9. SpringBoot(七) -- 嵌入式Servlet容器

    一.嵌入式Servlet容器 在传统的开发中,我们在完成开发后需要将项目打成war包,在外部配置好TomCat容器,而这个TomCat就是Servlet容器.在使用SpringBoot开发时,我们无需 ...

  10. [Codeforces 1205B]Shortest Cycle(最小环)

    [Codeforces 1205B]Shortest Cycle(最小环) 题面 给出n个正整数\(a_i\),若\(a_i \& a_j \neq 0\),则连边\((i,j)\)(注意i- ...