Project structure: the need to build a flat level src vue.config.js, then src build a setaxios.js,
setaxios.js
import axios from "axios";
// import store from './store' //vuex
// import router from './router' // Routing
export default function setAxios() {
// intercept request request
axios.interceptors.request.use(config => {
// eslint-disable-next-line no-console
console.log(config.data);
return config;
});
// callback interception response
axios.interceptors.response.use(response => {
if (response.status === 200) {
const data = response.data;
// if (data.code === 400){
// // login expires, insufficient permissions
// console.warn ( "login date");
// // clear token
// store.commit('setToken','')
// window.localStorage.removeItem('token')
// // Login Jump
// 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 global mount axios
Vue.prototype.$http = axios;
// set baseUrl
axios.defaults.baseURL = "/ fire";
new view ({
router,
render: h => h(App)
}).$mount("#app");
js code inserted login.vue
<script >
export default {
name: "login",
data() {
return {
username: "",
password: ""
};
},
methods: {
get: function() {
this.$http({
method: "POST",
url: "Interface paths"
data: {
mobile: this.username,
password: this.password
}
}).then(function(res) {
if (res.statusText == "OK") {
alert ( "login success");
}
});
}
}
};
</script>
vue.config.js
module.exports = {
publicPath: "./",
outputDir: "dist",
assetsDir: "static",
configureWebpack: {
devServer: {
contentBase: "./build", // basic access directory project
host: "localhost", // server ip address
port: 8088, // port
open: true, // automatically open page
hot: true, // hot replacement module
hotOnly: true, // hot update will not only refresh the page
// mock key part of data interface section
before(app) {
const bodyParser = require("body-parser");
app.use (bodyParser.json ()); // Get req.body by bodyParser)
/**
* testGet
*/
app.get("/api/test/get", (req, resp) => {
// console.log(req.query);
resp.json({
code: 111,
msg: "get tested successfully."
});
});
/**
* testPost
*/
app.post("/api/test/post", (req, resp) => {
// console.log(req.body);
resp.json({
code: 123,
msg: "post test was successful."
});
});
/**
* testPut
*/
app.put("/api/test/put", (req, resp) => {
// console.log(req.body);
resp.json({
code: 123,
msg: "put the test was successful."
});
});
/**
* testDelete
*/
app.delete("/api/test/delete", (req, resp) => {
// eslint-disable-next-line no-console
console.log(req.body);
resp.json({
code: 666,
msg: "delete the test was successful."
});
});
}
}
}
};