核心知识
1.引入qs npm install -save qs #or <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>qs官网地址
2.引入axios npm install -save axios #or <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>axios官网地址
3axios简单封装 //创建一个实例 const $http = axios.create({ baseURL: 'https://api.apiopen.top', timeout: 3000, }); //全屏loading加载动画 let loadingInstance; $http.interceptors.request.use( config => { //请求格式为form-data时需设置 config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; loadingInstance = vm.$loading({ lock: true, text: '加载中,请稍后...', spinner: 'el-icon-loading', background: 'rgba(255,255,255,0.7)' }); return config; }, err => { return Promise.reject(err); } ) $http.interceptors.response.use( response => { loadingInstance && loadingInstance.close(); return response.data; }, err => { loadingInstance && loadingInstance.close(); return Promise.reject(err); } ); 4.post请求代码 //对参数进行处理 const data = Qs.stringify({ page:this.page, count:this.count }) const { result,code,message } = await $http.post('/getWangYiNews',data) if(code !== 200 ){ this.$message({ type: 'info', message: message }); this.loading = false return; } this.tableData = result; this.loading = false; 5.结果 6.简单的完整代码(实现分页+请求loading+模拟删除+获取数据) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>axios封装</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script> </head> <body> <div id="app"> <el-button type="primary" round @click="handleGetWangYiNews">主要按钮</el-button> <div style="max-width: 1000px;margin:20px auto;"> <el-table border v-loading="loading" :data="tableData" > <el-table-column label="时间"> <template slot-scope="scope"> <i class="el-icon-time"></i> <span style="margin-left: 10px">{{ scope.row.passtime}}</span> </template> </el-table-column> <el-table-column label="图片"> <template slot-scope="scope"> <el-image style="width: 140px; height: 88px" :src="scope.row.image" fit="scale-down"></el-image> </template> </el-table-column> <el-table-column label="标题" prop="title"></el-table-column> <el-table-column label="外链"> <template slot-scope="scope"> <el-link type="primary" :href="scope.row.path" >外链</el-link> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除 </el-button> </template> </el-table-column> </el-table> <div class="block"> <el-pagination style="text-align: right;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[5, 10, 15, 20]" :page-size="5" layout="total,sizes, prev, pager, next, jumper" :total="20" > </el-pagination> </div> </div> </div> <script> //创建一个实例 const $http = axios.create({ baseURL: 'https://api.apiopen.top', timeout: 3000, }); let loadingInstance; $http.interceptors.request.use( config => { config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; loadingInstance = vm.$loading({ lock: true, text: '加载中,请稍后...', spinner: 'el-icon-loading', background: 'rgba(255,255,255,0.7)' }); return config; }, err => { return Promise.reject(err); } ) $http.interceptors.response.use( response => { loadingInstance && loadingInstance.close(); return response.data; }, err => { loadingInstance && loadingInstance.close(); return Promise.reject(err); } ); const vm = new Vue({ el: "#app", data: { tableData:[], loading:true, page: 1, count:5 }, mounted() { this.handleGetWangYiNews() }, methods: { async handleGetWangYiNews() { const data = Qs.stringify({ page:this.page, count:this.count }) const { result,code,message } = await $http.post('/getWangYiNews',data) if(code !== 200 ){ this.$message({ type: 'info', message: message }); this.loading = false return; } this.tableData = result; this.loading = false; }, handleDelete(index,row){ const _self = this; setTimeout(function(){ _self.$message({ type: 'success', message: '删除成功!' }); _self.handleGetWangYiNews() },2000) }, handleSizeChange(e){ this.count = e; this.handleGetWangYiNews() }, handleCurrentChange(e){ this.page = e; this.handleGetWangYiNews() } } }) </script> </body> </html> 代码效果