前后端分离mockjs以及webpack-dev-server代理
2024-09-02 18:32:12
一： 在webpack中使用mockjs mockjs 也就是模拟数据（mock.js模拟的数据可以不跨域）
安装mock新建mock.js
var Mock = require('mockjs')
var Random = Mock.Random
const produceData = function() {
let articles = []
for (let i = 0; i < 10; i++) {
let newArticleObject = {
title: Random.csentence(5),
content: Random.cparagraph(5, 7),
time: Random.date() + ' ' + Random.time(),
location: Random.city()
}
articles.push(newArticleObject)
}
return {
articles: articles
}
}
// 第三个参数可以是对象也可以是返回对象的函数
Mock.mock('/article', 'get', produceData)
在代码中发送http请求
/*这里使用axios发送请求的
*在src /index.js 中引入
*import Axios from 'axios'
*import './mock.js'
*Vue.prototype.$http = Axios;
*/
methods（）{
this.$http.get('/article').then(
response => {
console.log(response.data)
}
}
mockjs模拟的数据就完成了 其他的比如boolean images .....去看官网吧 http://mockjs.com/
二：webpack-dev-server代理
在配置文件webapck.dev.config.js中
devServer: {
contentBase: '/',
port: 8080,
host: '0.0.0.0',//这可以通过ip访问
hot: true,
proxy: {
'/api': {
target: 'http://localhost:3030',
changeOrigin: true,
pathRewrite: {
//重写路径这样访问的时候就不会一直访问api了 不然只能访问localhost:3030 但是访问不了localhost：3030/data/data.json
"^/api": "/"
}
}
}
},
现在就可以访问http://localhost:3030中的数据了
methods: {
onClickLeft(){
this.$http.get('/api/data/data1.json').then(
response => {
console.log(response.data)
}
)
}
}
小白阶段 还望多多指教 （给自己找个记笔记的地方O(∩_∩)O~）
最新文章
- Android基于mAppWidget实现手绘地图（八）–获取用户地理位置
- css选择器(E[att^=”val”]序号选择器)
- Java socket 多线程编程 示例
- 【python cookbook】【数据结构与算法】20.将多个映射合并为单个映射
- C#分屏控件用法实例
- Selenium 使用方法小结
- Android develop tricks——整理自国外的一些Blog
- 洛谷 P1336 最佳课题选择
- 1352 - Colored Cubes (枚举方法)
- Android开源项目库汇总
- springmvc返回枚举属性值
- ES6中数组的新方法
- OpenFlow交换机的实现总结
- RX 和 TX
- Windows Docker Toolbox 安装Redis等开发环境
- python开发 *进程数据隔离.守护进程,进程同步工具 * 180725
- 【Jenkins学习】安装配置和使用（一）
- spring 框架整合mybatis的源码分析
- 解决Navicat Premium终端操作mysql ONLY_FULL_GROUP_BY错误
- 恶意代码技术第一二部分——P201421410029