前端mock数据,跨域处理

原创 2018年04月16日 19:55:51

前端模拟数据,我时自己引入一个后端koa插件,自己让后端设置数据,发送一个api给前端

用的是 react+webpack框架

首先后端创建数据 

npm i koa koa-router -D


创建一个server服务

server.js

var app = require('koa')();
var router = require('koa-router')();

router.get('/', function *(next) {
	this.body = 'hello koa!'
});

router.get('/api', function *(next) {
	this.body = 'test data'
});

router.get('/api/1', function *(next) {
	this.body = 'test data 1'
});

router.get('/api/2', function *(next) {
	this.body = {
		a: 1,
		b: '123'
	}
});


app.use(router.routes())
	.use(router.allowedMethods());

app.listen(3000);

然后用node 路径/server.js 开始koa后端



后端服务开启成功

所以现在后端提供了几个api,拿/api/1 和/api/2来测试

这里我们需要用到webpack-dev-server这个插件,它可以为后端提供一个代理服务

npm i webpack webpack-dev-server -D

创建webpack.config.js配置文件

module.exports = {
    
    devServer: {
        proxy: {
          '/api': {
            target: 'http://localhost:3000',
            secure: false
          }
        }
    }
}

这样可以让前端如果访问到 /api这个路径时,能直接转到

http://localhost:3000

这个服务器

现在可以来让前端接收数据了

首先我们需要安装两个插件 npm i fetch es6-promise -S

接着我们创建一个get方法

get.js

import 'whatwg-fetch'
import 'es6-promise'

export function get(url) {
	var result = fetch(url, {
		credentials: 'include',
		headers: {
			'Accept': 'application/json, text/plain, */*'
		}
	});

	return result;
}

接着在data.js中将数据进行获取

import { get } from './get.js'

export function getData() {
	var result1 = get('/api/1')

	result1.then(res => {
		return res.text()
	}).then(text => {
		console.log(text)
	})

	var result2 = get('/api/2')

	result2.then(res => {
		return res.json()
	}).then(json => {
		console.log(json)
	})
}

然后再调用index.js中调用这个getData()就行了

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import configureStore from './store/configureStore'


// import Hello from './containers/Hello';

import Tdd from './containers/Tdd'

const store = configureStore()

// 测试fetch的功能

import { getData } from './fetch/data.js'
getData();

render(
	// <Hello />,
	<Provider store={store}>
		<Tdd />
	</Provider>,
	document.getElementById('root')
)


看端口号 8080 调用,证明成功

vue2学习计划1-3 浏览器跨域问题(mock-api)

首先推荐一款免搭建,前端,移动端静态服务器mock-api,用npm安装(需要node环境) npm install mock-api -g –registry=https://registry.n...
  • zzk220106
  • zzk220106
  • 2017年05月18日 14:56
  • 436

前端mock数据

作为前端经常需要模拟后台数据,我们称之为mock。通常的方式为自己搭建一个服务器,返回我们想要的数据。 项目中遇到的请求链接是类似这样子的:www.abc.com/user/login,而不是请求某个...
  • sysuzjz
  • sysuzjz
  • 2015年12月15日 18:42
  • 12926

Mock,前端mock数据的神器

相信有很多小伙伴在开发的时候遇到过这样的问题:静态页面写好了,就等后端给数据了!WTF?我刚写好代码你告诉我后端的接口又变了!什么破网啊根本访问不到服务器啊…这个时候就需要前端神器Mock.js了(妈...
  • StayHungry_
  • StayHungry_
  • 2016年08月10日 18:20
  • 8474

前端仿真实现之Mock

项目地址 前端demo前言我们大前端怎么能够被后端掣肘?不可能。有了数据仿真,我们再也不用等待后端实现了,可以自己开心的测试。这里我推荐下Mock.js正文可能有小伙伴问,官网这么清楚,你还写篇博客...
  • weixin_36485956
  • weixin_36485956
  • 2017年10月22日 22:40
  • 235

前端mock数据使用简单demo

1、安装 npm i mockjs --save var Mock = require(‘mockjs’) 2、模拟数据的两种方式 1.数据模板 2.数据占位符 详见 https://g...
  • XYTang1007
  • XYTang1007
  • 2018年01月18日 09:27
  • 77

前端虚拟接口---mock的用法

这几天在写自己的博客。。。然后后台接口什么的没来得及写。。。然后就想了下用mock去虚拟一个接口。json-serverJSON Server 是一个创建伪RESTful服务器的工具,具体使用方法可以...
  • zula1994
  • zula1994
  • 2017年08月08日 11:14
  • 329

mock数据

Web应用前后端(台)分离: 后台向前台提供API接口,只负责数据的提供和计算,而完全不处理展现 前台通过Http(Ajax)请求获取数据, 在浏览器端动态构建界面显示数据 设计JSON数据结构...
  • qq_38894899
  • qq_38894899
  • 2017年08月11日 10:48
  • 1764

使用Mock.js生成前端测试数据

Mock.js是一个模拟数据生成器,可以让前端独立于后端进行开发。如果你正在开发一个前端页面,可是后台还没有完成供你调用的Api,并且数据格式已经确定,那么你就可以使用Mock.js模拟相关的接口,生...
  • ZKH_101
  • ZKH_101
  • 2017年03月25日 14:49
  • 597

mock.js 生成假数据 前端独立于后台开发

mock.js的作用是产生假数据,使得前端的开发独立于后台开发,而后台发开者$(document).ready(function() { var template = { 'results|1-...
  • rbb317
  • rbb317
  • 2015年06月12日 18:17
  • 3815

实现前后端分离的mock!!!mock的使用

今天,我们打算花几分钟时间创建一个自己用来测试的 MockUp 服务器。 因为我是前端开发,所以这里使用 Node.js 创建一个简单的迷你工程来完成! 目标 用 curl 访问 m...
  • qq_24122593
  • qq_24122593
  • 2016年11月11日 15:31
  • 4535
收藏助手
不良信息举报
您举报文章:前端mock数据,跨域处理
举报原因:
原因补充:

(最多只允许输入30个字)