网站推广和精准seo深圳网站设计兴田德润i简介

1、Axios依赖下载

$ npm install axios

 2、以下链接为Axios 的api

Axios 实例 | Axios中文文档 | Axios中文网

3、  项目新建request.js，文件名称按照驼峰命名法就可以

4、封装request.js代码如下

import axios from "axios"//创建axios实例，设置配置得默认值const instance = axios.create({baseURL: 'http://localhost:8081',//请求服务端的ip和端口timeout: 5000 })instance.interceptors.request.use(config => {return config}, error => {return Promise.reject(error)})// 向外暴露axios实例
export default instance

 测试代码如下，'@../../../config/request'引用的封装好的request.js文件

<template><el-form ref="loginForm" :model="loginForm" label-width="80px"><el-form-item label="用户名"><el-input v-model="loginForm.username" autocomplete="off"></el-input></el-form-item><el-form-item label="密码"><el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">登录</el-button></el-form-item></el-form>
</template>
<script>
import newrequest from '@../../../config/request'
export default {data () {return {loginForm: {username: '111111',password: '111111'}}},methods: {submitForm () {// 这里应该是登录逻辑，比如发送请求到后端验证用户名和密码// axios({//   method: 'post',//   url: 'http://localhost:8081/getstudent',//   params: { }}).then((res) => { console.log(res.data) })console.log('登录表单提交:', this.loginForm)//  console.log('res:', res)// const instance = axios.create({//   baseURL: 'http://localhost:8081',//   timeout: 5000 })// instance.interceptors.request.use(config => {//   // const token = localStorage.getItem('token')//   // if (token) {//   //   config.headers.Authorization = `Bearer ${token}`//   // }//   return config// }, error => {//   return Promise.reject(error)// })newrequest.request({method: 'post',url: '/getstudent'}).then(data => {console.log('getstudent:' + data)}).catch(error => {console.error(error)})}// getHomeInfo (params) {//   return request({url: '/login', method: 'post', params})// }}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {font-weight: normal;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
.el-form {width: 240px;margin: 200px auto;
}
</style>

原生的Axios写法

<template><el-form ref="loginForm" :model="loginForm" label-width="80px"><el-form-item label="用户名"><el-input v-model="loginForm.username" autocomplete="off"></el-input></el-form-item><el-form-item label="密码"><el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">登录</el-button></el-form-item></el-form>
</template>
<script>
import axios from 'axios'
export default {data () {return {loginForm: {username: '111111',password: '111111'}}},methods: {submitForm () {axios({method: 'post',url: 'http://localhost:8081/getstudent',params: {}}).then((res) => { console.log(res.data) })}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {font-weight: normal;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
.el-form {width: 240px;margin: 200px auto;
}
</style>