会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 133905个问题
JAVA 全系列/第一阶段:AI驱动的JAVA编程/JAVA入门和背景知识 19367楼
Python 全系列/第一阶段:AI驱动的Python编程/Python入门(动画版) 19369楼
JAVA 全系列/第十七阶段:前后端分离技术VUE/Vue框架 19371楼
微服务/第一阶段:SSM 框架和项目开发/(旧)Spring 19372楼
Python 全系列/第一阶段:AI驱动的Python编程/函数和内存分析 19373楼

<p>老师这是HelloWorld.vue</p>

<template>
  <div class="hello">
    <h3>Hello World</h3>
    <ul>
      <li v-for="(item, index) in banner" :key="index">
        <p>{{ item.title }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import api from "../api";

export default {
  name: "HelloWorld",
  data() {
    return {
      banner: [],
    };
  },
  created() {},
  mounted() {
    // axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php").then(res =>{
    //   this.banner = res.data.banner
    // })

    // /**
    //  * user_id=iwen@qq.com&password=iwen123
    //  */
    // axios.post("http://iwenwiki.com/api/blueberrypai/login.php",qs.stringify({
    //   user_id:"iwen@qq.com",
    //   password:"iwen123",
    //   verification_code:"crfvw"
    // })).then(res =>{
    //   console.log(res.data);
    // })
    api.getBanner().then((res) => {
      this.banner = res.data.banner;
    });

    api.getLogin({
      user_id: "iwen@qq.com",
      password: "iwen123",
      verification_code: "crfvw",
    }).then(res =>{
      console.log(res.data);
    }).catch(error =>{
      console.log(error);
    })
  },
  updated() {},
  destoryed() {},
};
</script>
/*request.js文件*/
import axios from "axios"
import qs from "querystring"


/*
*错误信息处理函数
*/
const errorsHandle = (status,info) =>{

    switch(status){
        case 400:
            console.log("语义有误,当前请求无法被服务器理解。除非进行修改,否则客户端不应该重复提交这个请求。")
            break;
        case 401:
            // token:令牌
            console.log("服务器认证失败")
            break;
        case 403:
            console.log("服务器已经理解请求,但是拒绝执行它");
            break;
        case 404:
            console.log("请检查网络请求地址")
            break;
        case 500:
            console.log("服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理。一般来说,这个问题都会在服务器的程序码出错时出现。")
            break;
        case 502:
            console.log("作为网关或者代理工作的服务器尝试执行请求时,从上游服务器接收到无效的响应。")
            break;
        default:
            console.log(info)
            break;


    }

}


/*
*创建Axios的实例对象
*/
var instance = axios.create({
  timeout: 5000,

});

/*
*拦截器
*/

instance.interceptors.request.use(

    config =>{

        if(config.method === "post"){

            config.date = qs.stringify(config.data)

        }
        return config;

   },
   error =>{

    return Promise.reject(error);

   }


)


/*
*响应拦截
*/
instance.interceptors.request.use(

    response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response) ,

    error =>{

        const { response } = error;
        if(response){

            errorsHandle(response.status,response.info);

        }else{

            console.log("请求被中断了");

        }

    }

)

export default instance;
/*base.js文件*/
/*
*存储网路请求路径
*/

const base = {
    baseUrl:"http://iwenwiki.com",                  // 公共地址
    banner:"/api/blueberrypai/getIndexBanner.php",  // 主页banner数据
    login:"/api/blueberrypai/login.php"            // 登陆地址
}

export default base;
/*index.js文件*/
/*
*提供网路请求方法
*/

import axios from "../utils/request"
import base from "./base"

const api = {

    getBanner(){

        return axios.get(base.baseUrl + base.banner)

    },

    getLogin(params){  //params是一个对象类型

        return axios.post(base.baseUrl + base.login,params)
    }

}

export default api;

vue-axios - 联想浏览器 2021_7_18 11_58_18.png

老师,帮我看一下是网络路径错了吗?

Python 全系列/第八阶段:Vue框架/vue框架 19374楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/异常机制 19376楼
JAVA 全系列/第一阶段:AI驱动的JAVA编程/变量、数据类型、运算符 19377楼
JAVA 全系列/第一阶段:AI驱动的JAVA编程/JAVA入门和背景知识 19379楼
Python 全系列/第二阶段:Python 深入与提高/异常机制 19380楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637