前后端分离mockjs以及webpack-dev-server代理
一: 在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~)
前后端分离mockjs以及webpack-dev-server代理的更多相关文章
- 基于 koajs 的前后端分离实践
一.什么是前后端分离? 前后端分离的概念和优势在这里不再赘述,有兴趣的同学可以看各个前辈们一系列总结和讨论: 系列文章:前后端分离的思考与实践(1-6) slider: 淘宝前后端分离实践 知乎提问: ...
- 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍
webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...
- vue+mockjs 模拟数据,实现前后端分离开发
在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二七║ Nuxt 基础:框架初探
缘起 哈喽大家好,又是周四了,俗话说周四来了,周末还远么哈哈,老张我也想下周请假,来个16天的大长假哟,不知道大家是怎么请假的,近来发现文章下边已经没有人评论了,赶脚比较凄凉了,大家看到的麻烦点个赞呀 ...
- .Net Core+Vue.js+ElementUI 实现前后端分离
.Net Core+Vue.js+ElementUI 实现前后端分离 Tags: Vue 架构 前端采用:Vue.js.Element-UI.axios 后端采用:.Net Core Mvc 本项目是 ...
- Springboot + Vue + shiro 实现前后端分离、权限控制
本文总结自实习中对项目对重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelA ...
- Flask & Vue 构建前后端分离的应用
Flask & Vue 构建前后端分离的应用 最近在使用 Flask 制作基于 HTML5 的桌面应用,前面写过<用 Python 构建 web 应用>,借助于完善的 Flask ...
- 前后端分离及Element的使用
1. 前后端分离 1.1 什么是前后端分离 在传统的web应用开发中,大多数的程序员会将浏览器作为前后端的分界线.将浏览器中为用户进行页面展示的部分称之为前端,而将运行在服务器,为前端提供业务逻辑和数 ...
- Spring Boot + Vue + Shiro 实现前后端分离、权限控制
本文总结自实习中对项目的重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelA ...
随机推荐
- 如何写Markdown格式文档
Markdown Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯.它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档.这种语言吸收了很多在电子邮件中 ...
- think php 公共目录common.php json封装
<?php function getJsonData($code,$massage,$data){ $result=[ 'code'=>$code, 'massage'=>$mass ...
- centos7下mysql安装
centos7只包含了mariadb的安装源 我们需要到官方下载社区版:https://dev.mysql.com/downloads/ 下载安装包并上传到服务器 安装出现错误 这个是系统自带的Mar ...
- Linux——vi命令详解
转载 Linux--vi命令详解 原文链接:https://blog.csdn.net/cyl101816/article/details/82026678 vi编辑器是所有Unix及Linux系 ...
- CF678F题解
首先题意中的有撤销操作,直接李超树肯定不行,题目允许离线,所以考虑线段树分治 所以问题就变成了求一次函数最大值 这不是李超树板子吗??? 然后可以对每个节点都建立动态开点李超树,查询的时候直接从叶子节 ...
- django的request对象方法初识
1:request.post 拿到的是post请求发送过来的数据,可以将其看作是一个个的键值对 使用get方法可以通过key拿到值,如果该值是一个列表的话,get方法只能拿到列表的最后一个值,使用ge ...
- Idea 连接MySQL数据库
Idea 连接MySQL数据库 注意: 需要导入jar包,mysql-connector-java-8.0.16.jar mysql8.0及以上 使用的驱动 drive=com.mysql.cj.jd ...
- CVE-2017-12635(Couchdb垂直权限绕过漏洞)
简介 Apache CouchDB是一个开源数据库,专注于易用性和成为"完全拥抱web的数据库".它是一个使用JSON作为存储格式,JavaScript作为查询语言,MapRedu ...
- Presidential-01
环境搭建 官网地址:https://www.vulnhub.com/entry/presidential-1,500/ 靶机下载地址: https://download.vulnhub.com/pre ...
- SQL获取当前时间(日期)
--获取当前日期(如:yyyymmdd)select CONVERT (nvarchar(12),GETDATE(),112) --获取当前日期(如:yyyymmdd hh:MM:ss)select ...