vue三种mock数据进行开发

vue三种mock数据进行开发

使用axios进行网络请求：
http.js文件。
一个简单axios的api配置；

import axios, { Axios, AxiosHeaders } from "axios"
axios.interceptors.request.use(config=>{
  if (!(config as any).headers['Content-Type']) {
    (config as any).headers['Content-Type'] = 'application/x-www-form-urlencoded;'
  }
  return config
})
export const get = (url:string)=>{
  return axios.get(url)
}
export const post = (url:string,data={},config={})=>{
  return axios.post(url,data,config)
}
1
2
3
4
5
6
7
8
9
10
11
12
13

设置代理：
vue.config的配置：
这里就包括自己配置的mock数据。设置跨域代理。

下载：npm i -D http-proxy-middleware
1

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    // mock数据
      setupMiddlewares:(mids,{app})=>{
        app.post("/liyioamsg/:id",(req,res)=>{
          res.send({code:0,msg:"ok",data:"医疗信息"});
        })
        return mids;
      },
    // 跨域代理
    proxy:{
      '/api':{
        target:"https://api.iynn.cn/film",
        changeOrigin:true,
        PathRewrite:{
          "^/api":""
        }
      }                                                        
    }
  }

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

还有一种就是直接使用项目中的静态资源。

async mounted(){
 // 直接访问静态资源
 let data = await get("/data.json");
 // 设置跨域代理
 let flim = await get("api/v1/getNowPlayingFilmList?cityId=110100&pageNum=1&pageSize=10");
 // 设置访问mock数据
 let msg = await post("http://localhost:8080/liyioamsg/1",{name:"niupeng",id:{age:30}});
 console.log(msg);
 
 this.data = [...this.data,...data.data];
}
1
2
3
4
5
6
7
8
9
10
11