vue三种mock数据进行开发

Posted 2022-12-11 勇敢*牛牛

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)

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

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

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":""
        
                                                              
    
  

)

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

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];