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)
}

设置代理：
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];
}