金山老师的笔记23.Axios 网络请求
23.1 安装
npm install axios
23.2 在组件中引入axios
js
import axios from 'axios'- 在create函数中使用
js
axios.get('stu.json')
.then((res)=>{
this.tableData = res.data
})
.catch(function (error) {
console.log(error);
});- 完整的使用代码
html
<template>
<div>
<el-table :data="tableData" style="width: 100%" size="mini">
<el-table-column
prop="name"
label="直接显示名字"
width="180">
</el-table-column>
<el-table-column label="日期" width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column label="姓名" width="180">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>姓名: {{ scope.row.name }}</p>
<p>住址: {{ scope.row.address }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.name }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Table',
components: {
},
data() {
return {
tableData: []
}
},
methods: {
},
created() {
axios.get('stu.json')
.then((res)=>{
this.tableData = res.data
})
.catch(function (error) {
console.log(error);
});
}
}
</script>
<style>
</style>23.3 全局配置
配置通用路径
js
axios.defaults.baseURL = 'http://127.0.0.1:8090/web';23.2 练习
vuejs+Javaweb练习完成CURD
sql
CREATE TABLE `disease` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
`disease_code` varchar(100) NOT NULL COMMENT '疾病助记编码',
`disease_name` varchar(100) DEFAULT NULL COMMENT '疾病名称',
`disease_icd` varchar(100) NOT NULL COMMENT '国际ICD编码',
`cate_id` int(11) DEFAULT NULL COMMENT '主键',
`createtime` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
`valid` varchar(5) DEFAULT '1' COMMENT '是否有效，默认1 有效，0无效',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=48 DEFAULT CHARSET=utf8 COMMENT='疾病信息';
/*Data for the table `disease` */
insert into `disease`(`id`,`disease_code`,`disease_name`,`disease_icd`,`cate_id`,`createtime`,`valid`) values (2,'GDXHL0','古典型霍乱0','A00.0510',1,'2020-12-16 08:41:28','1'),(3,'GDXHL1','古典型霍乱1','A00.0511',1,'2020-12-16 08:41:28','1'),(4,'GDXHL2','古典型霍乱2','A00.0512',1,'2020-12-16 08:41:28','1'),(5,'GDXHL3','古典型霍乱3','A00.0513',1,'2020-12-16 08:41:28','1'),(6,'GDXHL4','古典型霍乱4','A00.0514',1,'2020-12-16 08:41:28','1'),(7,'GDXHL5','古典型霍乱5','A00.0515',1,'2020-12-16 08:41:28','1'),(8,'GDXHL6','古典型霍乱6','A00.0516',1,'2020-12-16 08:41:28','1'),(9,'GDXHL7','古典型霍乱7','A00.0517',1,'2020-12-16 08:41:28','1'),(10,'GDXHL8','古典型霍乱8','A00.0518',1,'2020-12-16 08:41:28','1'),(14,'GDXHL2','古典型霍乱2','A00.0512',1,'2020-12-16 09:06:13','1'),(15,'GDXHL3','古典型霍乱3','A00.0513',1,'2020-12-16 09:06:13','1'),(23,'GDXHL1','xx疾病','A510.11',1,'2020-12-16 13:41:58','1'),(24,'GDXHL0_q','荨麻疹霍乱0','A00.0510',1,'2021-12-17 14:02:24','1'),(25,'GDXHL1_q','荨麻疹霍乱1','A00.0511',1,'2021-12-17 14:02:24','1'),(26,'GDXHL2_q','荨麻疹霍乱2','A00.0512',1,'2021-12-17 14:02:24','1'),(27,'GDXHL3_q','荨麻疹霍乱3','A00.0513',1,'2021-12-17 14:02:24','1'),(28,'GDXHL4_q','荨麻疹霍乱4','A00.0514',1,'2021-12-17 14:02:24','1'),(29,'GDXHL5_q','荨麻疹霍乱5','A00.0515',1,'2021-12-17 14:02:24','1'),(30,'GDXHL6_q','荨麻疹霍乱6','A00.0516',1,'2021-12-17 14:02:24','1'),(31,'GDXHL7_q','荨麻疹霍乱7','A00.0517',1,'2021-12-17 14:02:24','1'),(32,'GDXHL0_q','退行性脊髓灰质炎0','A00.0510',1,'2021-12-17 14:03:09','1'),(33,'GDXHL1_q','退行性脊髓灰质炎1','A00.0511',1,'2021-12-17 14:03:09','1'),(34,'GDXHL2_q','退行性脊髓灰质炎2','A00.0512',1,'2021-12-17 14:03:09','1'),(35,'GDXHL3_q','退行性脊髓灰质炎3','A00.0513',1,'2021-12-17 14:03:09','1'),(36,'GDXHL4_q','退行性脊髓灰质炎4','A00.0514',1,'2021-12-17 14:03:09','1'),(37,'GDXHL5_q','退行性脊髓灰质炎5','A00.0515',1,'2021-12-17 14:03:09','1'),(38,'GDXHL6_q','退行性脊髓灰质炎6','A00.0516',1,'2021-12-17 14:03:09','1'),(39,'GDXHL7_q','退行性脊髓灰质炎7','A00.0517',1,'2021-12-17 14:03:09','1'),(40,'GDXHL0_q','白细胞异常0','A00.0510',1,'2021-12-17 14:04:10','1'),(41,'GDXHL1_q','白细胞异常1','A00.0511',1,'2021-12-17 14:04:10','1'),(42,'GDXHL2_q','白细胞异常2','A00.0512',1,'2021-12-17 14:04:10','1'),(43,'GDXHL3_q','白细胞异常3','A00.0513',1,'2021-12-17 14:04:10','1'),(44,'GDXHL4_q','白细胞异常4','A00.0514',1,'2021-12-17 14:04:10','1'),(45,'GDXHL5_q','白细胞异常5','A00.0515',1,'2021-12-17 14:04:10','1'),(46,'GDXHL6_q','白细胞异常6','A00.0516',1,'2021-12-17 14:04:10','1'),(47,'GDXHL7_q','白细胞异常7','A00.0517',1,'2021-12-17 14:04:10','1');后端
涉及到MVC
Controller
- Service
- 事务的业务逻辑
- Dao
- JDBC的封装
- 实体类
前端：
index.vue 列表页组件
edut.vue 编辑页面组件
配置路由
带条件查询
分页组件
axios网络请求的时候使用loading组件
给axios添加遮罩层
js
import axios from 'axios'
import { Loading } from 'element-ui';
let loadingInstance = null;
// 添加请求拦截器
axios.interceptors.request.use( (config)=>{
// 在发送请求之前做些什么
loadingInstance = Loading.service({ fullscreen: true,background:'rgba(0,0,0,0.7)', text: '加载中请稍等', });
// console.log("计划打开loading....")
return config;
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use( (response)=> {
loadingInstance.close()
// console.log("关闭loading....")
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
const http = {
get(url, callback, params = {}) {
axios.get(url, {
params: params
}).then((response) => {
callback(response.data)
}).catch(function(error) {
// 处理错误情况
console.log(error);
});
},
post(url, callback, params = {}){
const urlParams = new URLSearchParams();
console.log(params);
for(let key in params){
console.log("key",key)
urlParams.append(key, params[key]);
}
console.log(urlParams)
axios.post(url, urlParams)
.then((ret)=> {
let data = ret.data;
callback(data)
})
.catch(function(error) {
console.log(error);
});
}
}
export default http