借鉴:
json-server:来完全模拟请求以及请求回来的过程
安装json-server
在根目录下全局安装
npm install -g json-server
之后会自动生成一个db.json文件。注意是自动生成后的文件所在位置,可以自定义修改里面的内容
存放全部数据
打开终端:设置端口:
该端口作为脚手架的端口号
json-server db.json --port 8080
在package.json文件中,scripts中配置一个mock,该端口号作为访问虚拟数据的端口号
vue页面发请求
安装axios
发送请求
运行
这里需要使用多线程,也就是需要再开一个终端
此时可以成功访问
备注![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a4f26834a8c73dfae45ac82e57e5bf34.png)
200 成功 服务器已经成功处理了请求
201 创建 表示服务器执行成功并且创建了新的资源
配置proxyTable跨域
安装vue-resource
npm install vue-resource
引入
//main.js
import Vue from 'vue'
import App from './App.vue'
import Resource from 'vue-resource';
Vue.use(Resource); //使用resource
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
配置proxyTable请求数据
//vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
port: 8080,
host: "localhost",
https: false,
// 自动启动浏览器
open: false,
proxy: {
'/api/': {
target: 'http://localhost:3003', //将http://localhost:3003映射到/api
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '', // 因为在 ajax 的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/'
}
}
},
}
})
网络请求修改
created() {
axios({
method: 'get',
// url: 'http://httpbin.org',
url:" /api/posts"
}).then(res => { console.log(res); })
axios({
method: 'post',
url: 'http://localhost:3003/posts',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then(res=>{console.log(res);})
},
}