一、axios的作用
axios是独立于vue的一个项目,可以用于浏览器和node.js中发送ajax请求
二、axios实例
创建axios_pro文件夹
1、复制js资源
vue.min.jsaxios.min.js
2、创建 axios.html
3、引入js
<script src=\"vue.min.js\"></script><script src=\"axios.min.js\"></script>
4、启动课程中心微服务
5、编写js
<script>new Vue({el: \'#app\',data: {teacherList: []},methods: {getTeacherList(){axios.get(\'http://localhost:8110/admin/edu/teacher/list\').then(response => {console.log(response)this.teacherList = response.data.data.items}).catch(error=>{//失败console.log(error)})}}})</script>
6、html渲染数据
<div id=\"app\"><button @click=\"getTeacherList()\">访问</button><table><tr v-for=\"item in teacherList\"><td>{{item.id}}</td><td>{{item.name}}</td></tr></table></div>
7、跨域
为什么会出现跨域问题?
出于浏览器的同源策略限制:
所谓同源(即指在同一个域)就是两个地址具有相同的协议(protocol),主机(host)和端口号(port)
同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。
同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能。
解决跨域问题:
@CrossOrigin //解决跨域问题
8、使用生命周期函数
和methods一个级别
created () {this.getTeacherList()},
9、业务分层的简单实现
// 初始化axios设置,返回一个函数引用initRequest () {return axios.create({baseURL: \'http://localhost:8110\', // api 的 base_urltimeout: 5000 // 请求超时时间})},//api访问模块teacherListApi (){let request = this.initRequest()return request({url: \'/admin/edu/teacher/list\',method: \'get\'})},//获取讲师列表getTeacherList2() {console.log(\'发送ajax请求2......\')this.teacherListApi().then(response => {console.log(response)var result = response.data //r对象this.teacherList = result.data.items})}