vue cli3 登陸請求接口(接上一篇)

項目結構：需要平級src建一個vue.config.js，然后src建一個setaxios.js，

 

 setaxios.js

import axios from "axios";
// import store from './store' //vuex
// import router from './router' //路由

export default function setAxios() {
    //攔截request請求
    axios.interceptors.request.use(config => {
        // eslint-disable-next-line no-console
        console.log(config.data);
        return config;
    });

    //攔截response回調
    axios.interceptors.response.use(response => {
        if (response.status === 200) {
            const data = response.data;
            // if (data.code === 400){
            //     //登錄過期,權限不足
            //     console.warn("登陸過期");
            //     //清除token
            //     store.commit('setToken','')
            //     window.localStorage.removeItem('token')
            //     //跳轉登錄
            //     router.replace({
            //         path:"/login"
            //     })
            // }
            return data;
        }
        return response;
    });
}

 

 

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

import axios from "axios";
Vue.config.productionTip = false;

//Vue全局掛載axios
Vue.prototype.$http = axios;
//設置baseUrl
axios.defaults.baseURL = "/api";
new Vue({
    router,
    render: h => h(App)
}).$mount("#app");
 

 

 

login.vue插入js代碼

<script >
export default {
  name: "login",
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    get: function() {
      this.$http({
        method: "POST",
        url: "接口路徑",
        data: {
          mobile: this.username,
          password: this.password
        }
      }).then(function(res) {
        if (res.statusText == "OK") {
        alert("登陸成功");
        }
      });
    }
  }
};
</script>

 

 

 

vue.config.js

module.exports = {
    publicPath: "./",
    outputDir: "dist",
    assetsDir: "static",
    configureWebpack: {
        devServer: {
            contentBase: "./build", //項目基本訪問目錄
            host: "localhost", //服務器ip地址
            port: 8088, //端口
            open: true, //自動打開頁面
            hot: true, //模塊熱替換
            hotOnly: true, //只有熱更新不會刷新頁面
            //mock數據接口部分 關鍵部分
            before(app) {
                const bodyParser = require("body-parser");
                app.use(bodyParser.json()); //通過bodyParser獲取req.body）

                /**
                 *   testGet
                 */
                app.get("/api/test/get", (req, resp) => {
                    // console.log(req.query);

                    resp.json({
                        code: 111,
                        msg: "get測試成功"
                    });
                });

                /**
                 * testPost
                 */
                app.post("/api/test/post", (req, resp) => {
                    // console.log(req.body);

                    resp.json({
                        code: 123,
                        msg: "post測試成功"
                    });
                });

                /**
                 * testPut
                 */
                app.put("/api/test/put", (req, resp) => {
                    // console.log(req.body);
                    resp.json({
                        code: 123,
                        msg: "put測試成功"
                    });
                });

                /**
                 * testDelete
                 */
                app.delete("/api/test/delete", (req, resp) => {
                    // eslint-disable-next-line no-console
                    console.log(req.body);

                    resp.json({
                        code: 666,
                        msg: "delete測試成功"
                    });
                });
            }
        }
    }
};