vue 项目中使用mock假数据实现前后端分离
也是查了很多的资料,整理出来。实现了前后端的分离,用到的技术vue-cli,webpack,node,json-server。首先全局安装json-server
cnpm i json-server -g
安装好之后,修改配置文件,config-->index.js-->proxyTable
proxyTable: {
'/api/': {
target: 'http://localhost:3000',
changeOrigin: true,
secure: false,
pathRewrite: {
'^/api/': ''
}
}
},
在目录下建立一个mock文件夹 “项目名”-->根目录-->mock
目录的结构如图:

data里面的数据格式如下
{
"data":{
"data":"world",
"status":0,
"msg":"success"
}
}
我们的请求地址和所需要的json数据不只是一个所以要分开书写,便于维护, 要建立一个server.js 详细的可见 https://github.com/thierryxing/Falcon/tree/master/mock
const jsonServer = require('json-server');
const server = jsonServer.create();
// Support middleware
const middleware = jsonServer.defaults();
server.use(middleware);
// 支持加载多个db文件
const _ = require('underscore');
const path = require('path');
const fs = require('fs');
const mockDir = path.join(__dirname, 'data');
const base = {};
const files = fs.readdirSync(mockDir);
files.forEach((file) => {
_.extend(base, require(path.resolve(mockDir, file)))
});
const router = jsonServer.router(base);
// 处理登录逻辑
server.post('/account/login', (req, res) => {
let db = router.db // lowdb instance
let data = db.get('login').value()
res.jsonp({
data: data,
status: {
code:0,
msg:'success'
},
message: ''
})
})
// 处理登出逻辑
server.post('/account/logout', (req, res) => {
let db = router.db
let data = db.get('logout').value()
res.jsonp({
data: data,
status: 0,
message: ''
})
})
server.use(router)
// 返回自定义格式数据
router.render = (req, res) => {
res.jsonp({
data: res.locals.data,
status: 0,
message: ''
})
}
server.listen(3000, () => {
console.log('JSON Server is running')
})
最后修改package.json文件package.json-->scripts
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"mock": "node mock/server.js",
"mockdev": "npm run mock & npm run dev"
},
启动项目
npm run mockdev
最后在页面中发出请求 ,我这里使用的axios 在vue 中配置下
import axios from 'axios';
Vue.prototype.$http = axios;
页面的请求函数
this.$http.get('/api/data').then((res)=>{
console.log(res)
})
vue 项目中使用mock假数据实现前后端分离的更多相关文章
- 使用RAP2模拟假数据实现前后端分离
一.为什么使用RAP2 在一个项目的开发中,在页面需要使用大量数据进行渲染生成前,后端开发人员的接口可能还没有写完, 当前端没有后端数据支持的情况下,我们使用mock.js(mock.js用于生成随机 ...
- Mock模拟数据,前后端分离
安装 使用npm安装: npm install mockjs; 或直接<script src="http://mockjs.com/dist/mock.js">< ...
- Vue项目中v-for无法渲染数据
在Vue项目中,我们想要实现下面的布局效果 后端返回的数据格式如下,可以看出产品列表五张图的数据位于同一个数组中 而我的html结构如下: 我希望直接渲染左边一张大图,然后右边的四张小图通过v-for ...
- Spring Boot +Vue 项目实战笔记(二):前后端结合测试(登录页面开发)
前言:关于开发环境 每位 Coder 都有自己偏好的开发工具,从大的方面划分主要有文本编辑器流和 IDE 流两种,我有一段时间也喜欢用编辑器(Sublime Text.Vim),但对我来说开发效率确实 ...
- Vue项目中jsonp抓取数据实现方式
因为最近在做vue的项目,在前端做数据的时候遇到了数据抓取的难题,查了一些资料,自己也研究了一下,总体来说是搞出来了(基于黄奕老师的项目找出来的经验),废话不多说,直接上代码 ------------ ...
- Vue学习笔记-基于CDN引入方式简单前后端分离项目学习(Vue+Element+Axios)
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- vue项目中返回之前页面数据不刷新的问题
利用vue做项目的时候会有让用户选择当前页面的某些数据,然后再跳到下一页,而下一页是根据上一页的数据来的,有时候选择了上一页的不同选项,下一页的数据可能还是之前的 这个就属于vue的数据获取问题 解决 ...
- axios + mock.js模拟数据实现前后端分离开发的实例代码
首先就是必须安装axios和mock.js npm install axios npm install mockjs 1. 然后在文档src中新建一个mock.js文件,如图 2. 在main.js中 ...
- Docker中Spring boot+VueJS+MongoDB的前后端分离哲学摔跤
此文献给对数据有热情,想长期从事此行业的年轻人,希望对你们有所启发,并快速调整思路和方向,让自己的职业生涯有更好的发展. 根据数据应用的不同阶段,本文将从数据底层到最后应用,来谈谈那些数据人的必备技能 ...
随机推荐
- 019 Remove Nth Node From End of List 删除链表的倒数第N个节点
给定一个链表,删除链表的倒数第 n 个节点并返回头结点.例如,给定一个链表: 1->2->3->4->5, 并且 n = 2.当删除了倒数第二个节点后链表变成了 1->2 ...
- D - 稳住GCD DP
http://acm.uestc.edu.cn/#/problem/show/923 给定一堆数字,求其所有数字的gcd. 现在要删除最多的数字,使得剩下的数字的gcd和原来的一样. 设dp[i][v ...
- 牛客网Java刷题知识点之四种不同的方式创建线程
不多说,直接上干货! 有4种方式可以用来创建线程: 第一种:继承Thread类,重写run方法 第二种:实现Runnable接口,并实现该接口的run方法(一般我们在编程的时候推荐用这种) 第三种:实 ...
- 行高:line-height图文解析
行高——line-height 初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那 ...
- 如何让nginx支持ThinkPHP框架(重点参考)
公司有一款即将上线的应用服务端是基于ThinkPHP写的,本地测试无异常,上传到外网服务器后无法连接.这可把我和我的小伙伴们吓死了,怎么回事儿,本地测试都是对的呀! 我和我的小伙伴们开始找原因,换了一 ...
- 2009年3月新浪PHP面试题及答案(二)
1.请写出PHP5权限控制修饰符. 答案:private protected public. 2.对于大流量的网站,您采用什么样的方法来解决访问量问题? 答案:首先,确认服务器硬件是否足够支持当前的流 ...
- maven安装,使用说明,及maven Repository如何使用.
maven的使用方法总结一下 1.首先去apache官网下载maven, http://maven.apache.org/download.cgi2.如果是windows系统,选择 apache-ma ...
- Check Point R80 Security Management
平台: CentOS 类型: 虚拟机镜像 软件包: Security Management basic software security 服务优惠价: 按服务商许可协议 云服务器费用:查看费用 立即 ...
- jq实现剪裁图片设置为头像
有时候我们需要设置为这样,就是将某些图片设置为剪裁成设置的尺寸:就是这样的 插件的地址: http://www.htmleaf.com/jQuery/Image-Effects/20150421171 ...
- pta 编程题20 旅游规划
其它pta数据结构编程题请参见:pta 题目 这个最短路径问题只需要求两点之间的最短路径,因而在Dijikstra算法中当求出目标点的最短路径之后跳出循环即可. #include <iostre ...