也是查了很多的资料,整理出来。实现了前后端的分离,用到的技术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假数据实现前后端分离的更多相关文章

  1. 使用RAP2模拟假数据实现前后端分离

    一.为什么使用RAP2 在一个项目的开发中,在页面需要使用大量数据进行渲染生成前,后端开发人员的接口可能还没有写完, 当前端没有后端数据支持的情况下,我们使用mock.js(mock.js用于生成随机 ...

  2. Mock模拟数据,前后端分离

    安装 使用npm安装: npm install mockjs; 或直接<script src="http://mockjs.com/dist/mock.js">< ...

  3. Vue项目中v-for无法渲染数据

    在Vue项目中,我们想要实现下面的布局效果 后端返回的数据格式如下,可以看出产品列表五张图的数据位于同一个数组中 而我的html结构如下: 我希望直接渲染左边一张大图,然后右边的四张小图通过v-for ...

  4. Spring Boot +Vue 项目实战笔记(二):前后端结合测试(登录页面开发)

    前言:关于开发环境 每位 Coder 都有自己偏好的开发工具,从大的方面划分主要有文本编辑器流和 IDE 流两种,我有一段时间也喜欢用编辑器(Sublime Text.Vim),但对我来说开发效率确实 ...

  5. Vue项目中jsonp抓取数据实现方式

    因为最近在做vue的项目,在前端做数据的时候遇到了数据抓取的难题,查了一些资料,自己也研究了一下,总体来说是搞出来了(基于黄奕老师的项目找出来的经验),废话不多说,直接上代码 ------------ ...

  6. Vue学习笔记-基于CDN引入方式简单前后端分离项目学习(Vue+Element+Axios)

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  7. vue项目中返回之前页面数据不刷新的问题

    利用vue做项目的时候会有让用户选择当前页面的某些数据,然后再跳到下一页,而下一页是根据上一页的数据来的,有时候选择了上一页的不同选项,下一页的数据可能还是之前的 这个就属于vue的数据获取问题 解决 ...

  8. axios + mock.js模拟数据实现前后端分离开发的实例代码

    首先就是必须安装axios和mock.js npm install axios npm install mockjs 1. 然后在文档src中新建一个mock.js文件,如图 2. 在main.js中 ...

  9. Docker中Spring boot+VueJS+MongoDB的前后端分离哲学摔跤

    此文献给对数据有热情,想长期从事此行业的年轻人,希望对你们有所启发,并快速调整思路和方向,让自己的职业生涯有更好的发展. 根据数据应用的不同阶段,本文将从数据底层到最后应用,来谈谈那些数据人的必备技能 ...

随机推荐

  1. 019 Remove Nth Node From End of List 删除链表的倒数第N个节点

    给定一个链表,删除链表的倒数第 n 个节点并返回头结点.例如,给定一个链表: 1->2->3->4->5, 并且 n = 2.当删除了倒数第二个节点后链表变成了 1->2 ...

  2. D - 稳住GCD DP

    http://acm.uestc.edu.cn/#/problem/show/923 给定一堆数字,求其所有数字的gcd. 现在要删除最多的数字,使得剩下的数字的gcd和原来的一样. 设dp[i][v ...

  3. 牛客网Java刷题知识点之四种不同的方式创建线程

    不多说,直接上干货! 有4种方式可以用来创建线程: 第一种:继承Thread类,重写run方法 第二种:实现Runnable接口,并实现该接口的run方法(一般我们在编程的时候推荐用这种) 第三种:实 ...

  4. 行高:line-height图文解析

    行高——line-height 初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那 ...

  5. 如何让nginx支持ThinkPHP框架(重点参考)

    公司有一款即将上线的应用服务端是基于ThinkPHP写的,本地测试无异常,上传到外网服务器后无法连接.这可把我和我的小伙伴们吓死了,怎么回事儿,本地测试都是对的呀! 我和我的小伙伴们开始找原因,换了一 ...

  6. 2009年3月新浪PHP面试题及答案(二)

    1.请写出PHP5权限控制修饰符. 答案:private protected public. 2.对于大流量的网站,您采用什么样的方法来解决访问量问题? 答案:首先,确认服务器硬件是否足够支持当前的流 ...

  7. maven安装,使用说明,及maven Repository如何使用.

    maven的使用方法总结一下 1.首先去apache官网下载maven, http://maven.apache.org/download.cgi2.如果是windows系统,选择 apache-ma ...

  8. Check Point R80 Security Management

    平台: CentOS 类型: 虚拟机镜像 软件包: Security Management basic software security 服务优惠价: 按服务商许可协议 云服务器费用:查看费用 立即 ...

  9. jq实现剪裁图片设置为头像

    有时候我们需要设置为这样,就是将某些图片设置为剪裁成设置的尺寸:就是这样的 插件的地址: http://www.htmleaf.com/jQuery/Image-Effects/20150421171 ...

  10. pta 编程题20 旅游规划

    其它pta数据结构编程题请参见:pta 题目 这个最短路径问题只需要求两点之间的最短路径,因而在Dijikstra算法中当求出目标点的最短路径之后跳出循环即可. #include <iostre ...