vu2搭建框架-封装axios-router_vue2搭建框架-优快云博客

1.查看node-npm-vue环境

node -v
npm -v
vue -v

2.如果未安装则进行安装，否则跳过该步骤

注；正常来讲，安装完node后，npm则会安装到本机

https://nodejs.org/en/

3.再次查看环境，没有问题则进行创建项目

vue create test_vue

4.自动安装，完成后cd到刚刚创建的vue项目中

5.安装npm / cnpm依赖，建议使用npm

npm i
npm install

6. 安装依赖

npm install element-plus --save
npm i vant@next -S
npm install vue-router@4
npm install axios

7.在src目录下新建api文件夹,在api文件夹创建api.js和http.js

结构如下

api
    app.js
    http.js

8.api.js文件中代码

//引入刚才的http.js文件
import https from './http.js';

//设置个对象，就不用一个个暴露了，直接暴露对象
let apiFun = {};

/* 获取列表 */
//查询列表，详情就是get
/* /api/getlist是请求接口地址，有http.js里面的Ip加上，如：api:192.168.0.1:9090//api/getlist  */
apiFun.getlist = function(params) {
    return https.get('getlist', params)
}

/* 新增保存检查计划 */
//保存都是post
apiFun.saveJcInfo = function(params) {
    return https.post('saveJcInfo', params)
}

//暴露出这个对象
export default apiFun;

http.js代码

import axios from 'axios'     //引入
import { Toast } from 'vant';

// 请求url
let baseURL = 'http://127.0.0.1:8000/api/v1/'

//这一步的目的是判断出当前是开发环境还是生成环境，方法不止一种，达到目的就行
// if(process.env.NODE_ENV=="development"){
//   baseURL=''
// }else{
//   baseURL=''
// }

let config = {
    baseURL: baseURL,
    timeout: 30000       //设置最大请求时间
}
const _axios = axios.create(config)

/* 请求拦截器（请求之前的操作） */
_axios.interceptors.request.use(
    config => {
        //如果有需要在这里开启请求时的loading动画效果
        config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');  //添加token,需要结合自己的实际情况添加，
        return config;
    },
    err => Promise.reject(err)
);

/* 请求之后的操作 */
_axios.interceptors.response.use(
    res => {
        //在这里关闭请求时的loading动画效果
        //这里用于处理返回的结果，比如如果是返回401无权限，可能会是跳回到登录页的操作，结合自己的业务逻辑写
        if (res.data.code === 401 ) {
            Toast("无权限操作")
        }
        if (res.data.code === 400 ) {
            Toast("请求网络失败")
        }
        if (res.data.code === 404 ) {
            Toast("请求网络失败")
        }
        return res;
    },
    err => {
        if (err) {
            //在这里关闭请求时的loading动画效果
            Toast("请求网络失败")
        }
        return Promise.reject(err);
    }
);

//封装post,get方法
const http = {
    get(url='',params={}){
        return new Promise((resolve, reject) => {
            _axios({
                url,
                params,
                headers:{'Content-Type': 'application/json;charset=UTF-8'},
                method: 'GET'
            }).then(res => {
                resolve(res.data)
                return res
            }).catch(error => {
                reject(error)
            })
        })
    },
    post(url='',params={}){
        return new Promise((resolve, reject) => {
            _axios({
                url,
                data:params,
                headers:{'Content-Type': 'application/json;charset=UTF-8'},
                method: 'POST'
            }).then(res => {
                resolve(res.data)
                return res
            }).catch(error => {
                reject(error)
            })
        })
    }
}


export default http

mai.js导入

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false



import apiFun from "@/api/api.js";
Vue.prototype.$apiFun = apiFun;//请求接口api

//全局引入vant
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

//全局引入element ui
// import 'element-plus/dist/index.css'
// import ElementPlus from 'element-plus'
// Vue.use(ElementPlus)

new Vue({
  render: h => h(App),
}).$mount('#app')

9.vue组件中使用语法

<template>
  <div>
    <button @click="aaa">
      点击我
    </button>
  </div>
</template>


<script>
export default {
  name: 'HelloWorld',
  methods:{
    bbb(){
      this.$apiFun.getlist({'itemCode':'SXZA'}).then((res) => {
        console.log(res)
      })
    },

    aaa(){
      let info = {
        'name':'张三',
        'tel':'1938483484',
        'id':'1'
      }
      this.$apiFun.saveJcInfo(info).then((res) => {
        console.log(res)
      })
    }

  },
}