也是查了很多的资料,整理出来。实现了前后端的分离,用到的技术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. 切换本地凭据(Windows上登录的GitHub账号)

    切换本地用户,可以向微软小娜搜索Windows凭据,这个步骤可以参考这篇博客 的说明.

  2. (转)diff 命令

    每天一个linux命令(36):diff 命令  原文:http://www.cnblogs.com/peida/archive/2012/12/12/2814048.html diff 命令是 li ...

  3. Axure7.0注册码 Axure7.0序列号 Axure7.0License key

    很多同学安装了Axure7.0,但找不到注册码(license key).以前网上流传的Axure6.5的注册码不能用了.下面整理几个可用的Axure7.0注册码分享给大家,祝大家使用愉快,做出更多牛 ...

  4. Java基础重点指南

    Java基础重点指南 每个人都有自己的学习方法,下面是我学完Java后总结的一些要点: 一:(了解)Java诞生于1995年,由Sun公司开发.它把源代码编译成“中间码”,然后通过“Java虚拟机”把 ...

  5. flask SQLAlchemy query.filter_by 常用操作符

    常用的filter操作符 下面的这些操作符可以应用在filter函数中 equals: query.filter(User.name == 'ed') not equals: query.filter ...

  6. ssm(Spring、Springmvc、Mybatis)实战之淘淘商城-第十一天(非原创)

    文章大纲 一.课程介绍二.订单系统介绍三.项目源码与资料下载四.参考文章 一.课程介绍 一共14天课程(1)第一天:电商行业的背景.淘淘商城的介绍.搭建项目工程.Svn的使用.(2)第二天:框架的整合 ...

  7. Vue.js(2.x)之计算属性

    昨天看完大神的文章后,深感惭愧,硬着头皮继续看官网文档,然而这真的没是没办法,介绍的实在有些敷衍: 1).计算属性:也不说下computed是计算属性关键词,vm实例是可以像代理data一样代理com ...

  8. Java栈,PC寄存器,本地方法栈,堆,方法区(静态区)和运行常量池

    详情参考:https://my.oschina.net/wangsifangyuan/blog/711329 前言:当要判断一个变量存在什么空间上哪儿时,先分析它是哪一种(是实例变量还是局部变量),实 ...

  9. docker使用centos7系统构建oraclejdk镜像

    FROM centos:7.4.1708 MAINTAINER huqiang:2018/10/12 ENV JAVA_VERSION=8 \ JAVA_UPDATE=191 \ JAVA_BUILD ...

  10. nginx搭建流媒体服务器

    1.安装PCRE库 到www.pcre.org 下载pcre-8.37.tar.gz tar -zxvf pcre-8.37.tar.gz cd pcre-8.37 ./configure make ...