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的前后端分离哲学摔跤
此文献给对数据有热情,想长期从事此行业的年轻人,希望对你们有所启发,并快速调整思路和方向,让自己的职业生涯有更好的发展. 根据数据应用的不同阶段,本文将从数据底层到最后应用,来谈谈那些数据人的必备技能 ...
随机推荐
- 跨域和jsonp的了解和学习
一.为什么会有跨域问题呢 因为有浏览器的同源策略. 同源:如果两个页面的协议,端口(如果有指定)和主机都相同,则两个页面具有相同的源.我们也可以把它称为“协议/主机/端口 tuple”,或简单地叫做“ ...
- map 常用方法
map遍历: Map map = new HashMap(); Iterator it = map.entrySet().iterator(); while(it.hasNext()) { Map.E ...
- 【图解】我使用过的 Dubbo 和 Spring Cloud
自从2015年毕业开始从事 Java 开发工作,已经过去3年多了, 在各种不知名的小公司待过,经历过生产力从低到高,技术从落后到先进的过程, Dubbo 和 Spring Cloud 就是我曾经所经历 ...
- 记ubuntu下安装Anaconda
晚上尝试在ubuntu 16.04版本下安装python的Anaconda3发行版. 从清华源下载的Anaconda3-Linux 64位版本安装包,然后顺利的下一步,下一步.....一切顺利!结果到 ...
- cout格式化输出 详解
//在使用setf等库函数时使用 //在使用流操纵算子时使用 //using namespace std; //以下所有的setf()都有对应的unsetf()用于取消设置 //所有的setiosfl ...
- Android-->RxJava2更新体验
截止日前最新版2017-3-15: RxJava compile ‘io.reactivex:rxjava:’ compile ‘io.reactivex:rxandroid:’ RxJava2 co ...
- ArcGIS API for JavaScript开发初探——基础知识
1.前言 在ArcGIS Web API开发体系中一共有四大类,分别为: ArcGIS API for Flex ArcGIS API for JavaScript ArcGIS API for RE ...
- npm install appium
先安装node.js npm config set registry http://registry.npm.taobao.org/ // 设置淘宝镜像 npm install chromedri ...
- 【MFC】可以换行的编辑框
在mfc中编辑框允许输入多行时,换行符被表示为<归位><换行>即“\r\n”,用ascii码表示为13 10 如果为编辑框中想要输入换行,就请将编辑框的属性: Auto HSc ...
- jmeter之吞吐量、吞吐率、TPS、带宽及压力测试和负载测试及其区别
一般使用单位时间内服务器处理的请求数来描述其并发处理能力.称之为吞吐率(Throughput),单位是 “req/s”.吞吐率特指Web服务器单位时间内处理的请求数另一种描述,吞吐率是,单位时间内网络 ...