1. vue-cli中使用路由
- 把路由相关页面创建好
- 到src->router->index.js文件下,来进行配置路由
2.1 先引用
2.2再使用
2. 使用 axios 请求数据
1. axios 请求环境配置
- npm install --save axios下载axios
- 在src文件加下的main.js中添加
import axios from 'axios'
Vue.prototype.axios = axios
- 实现网络请求
2. Axios–综合交互post get请求
- this.axios(utl:‘请求地址’,method:‘请求方式’,data/params:{k:v}).then((ok)=>{})
- 使用get发送数据的时候 使用params:{key:val}发送数据
- 使用post发送数据需要使用 var param=new URLSearchParams();修改传参方法
- 使用param.append(“uname”,“xixi”)添加数据并且使用data发送数据
get方式:
this.axios({
method:"get",
url:"http://localhost:3000/get",
params:{
name:"mgd"
}
}).then((data)=>{
console.log(data)
})
post方式
var param=new URLSearchParams();
param.append("uname","mgd");
this.axios({
method:"post",
url:"http://localhost:3000/post",
}).then((data)=>{
console.log(data);
})
3. mock模拟数据
1. mock数据
- 在前端开发过程中,有后台配合是很必要的。但是如果自己测试开发,或者后台很忙,没时间,那么我们需要自己提供或修改接口。
- npm install --save mockjs
- 在src下创建相关文件与文件夹
设置请求文件index.js
const Mock=require("mockjs");
// 格式:Mock.mock(设置请求地址,post/get,返回的数据)
Mock.mock("/mgd","get",require("./json/haha.json"));
Mock.mock("/lpb","post",require("./json/heihei.json"));
引用mock在main.js
require("./mock");//引用mock
请求
this.axios({
method:"get",
url:"/mgd"
}).then((data)=>{
console.log(data);
})