点击确定按钮报的错
Request failed with status code 500
500是什么问题？
控制台截图
request.js
import axios from 'axios'
import router from "@/router";
const request = axios.create({
baseURL: "/api",
timeout: 5000
})
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
let userJson = sessionStorage.getItem("user")
if (!userJson) {
router.push("/login")
}else {
let user = JSON.parse(userJson);
config.headers['token'] = user.token;
}
// let userJson = sessionStorage.getItem("user")
// if (!userJson) {
// router.push("/login")
// }
return config
}, error => {
return Promise.reject(error)
});
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
response => {
let res = response.data;
// 如果是返回的文件
if (response.config.responseType === 'blob') {
return res
}
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
res = res ? JSON.parse(res) : res
}
//自新粘
if (res.code === '401') {
console.error("token过期，重新登录")
router.push("/login")
}
return res;
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default request
Book.vue
<template>
<div style="padding: 10px;">
<!--label写表头 prop接受data-->
<!-- 功能区域 -->
<div style="margin: 10px 0;">
<el-button type="primary" @click="add">新增</el-button>
<el-button type="primary">导入</el-button>
<el-button type="primary">导出</el-button>
</div>
<!-- 搜索区域-->
<div style="margin: 10px 0">
<el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable/>
<el-button type="primary" style="margin-left: 5px;" @click="load">查询</el-button>
</div>
<!-- 搜索区域END-->
<!-- 表格区域-->
<el-table :data="tableData" border stripe style="width: calc(178vh + 0px)">
<el-table-column prop="id" label="ID"
sortable min-width="28%"
/>
<el-table-column prop="name" label="名称"/>
<el-table-column prop="price" label="单价"/>
<el-table-column prop="author" label="作者"/>
<el-table-column prop="createTime" label="出版时间"/>
<el-table-column label="操作" >
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.row)"
>编辑</el-button>
<el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
<template #reference>
<el-button size="small" type="danger">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!-- 表格区域END-->
<!-- :page-size="10"这行抄写的-->
<!-- el-pagination分页-->
<div style="padding-top: 10px">
<el-pagination
v-model:currentPage="currentPage"
:page-sizes="[5, 10, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<!-- 点击编辑后的提示框 -->
<el-dialog title="提示" v-model="dialogVisible" width="30%">
<el-form :model="form" label-width="120px">
<el-form-item label="名称">
<el-input v-model="form.name" style="width: 75%"/>
</el-form-item>
<el-form-item label="价格">
<el-input v-model="form.price" style="width: 75%"/>
</el-form-item>
<el-form-item label="作者">
<el-input v-model="form.author" style="width: 75%"/>
</el-form-item>
<el-form-item label="出版时间">
<el-date-picker v-model="form.createTime" value-format="YYYY-MM-DD" type="datetime" style="width: 75%" clearable></el-date-picker>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="save">确定</el-button>
</span>
</template>
</el-dialog>
</div>
</div>
</template>
<script>
import request from "@/utils/request";
export default {
name: 'Book',
components: {},
data() {
return {
form: {},
dialogVisible:false,
search:'',
currentPage:1,
pageSize:10,
total: 0,
tableData: []
}
},
created() {
this.load()
},
methods: {
load(){
request.get("/book", {
params: {
pageNum: this.currentPage,
pageSize: this.pageSize,
search: this.search
}
}).then(res => {
console.log(res)
this.tableData = res.data.records
this.total = res.data.total
})
},
add(){
//设为true就能打开弹窗
this.dialogVisible = true;
//让form 等于一个空对象 那个form就清空了
this.form = {}
},
save(){
if (this.form.id) { //更新
request.put("/book",this.form).then(res => {
console.log(res)
if(res.code === '0') {
this.$message({
type: "success",
message: "更新成功"
})
} else {
this.$message({
type: "error",
message: res.msg
})
}
this.load() //刷新表格的数据
this.dialogVisible = false //关闭弹窗
})
} else { //新增
request.post("/book",this.form).then(res => {
console.log(res)
if(res.code === '0') {
this.$message({
type: "success",
message: "新增成功"
})
} else {
this.$message({
type: "error",
message: res.msg
})
}
this.load() //刷新表格的数据
this.dialogVisible = false //关闭弹窗
})
}
},
handleEdit(row){
this.form = JSON.parse(JSON.stringify(row))
this.dialogVisible = true
},
handleDelete(id){
console.log(id)
request.delete("/book/" + id).then(res => {
if(res.code === '0') {
this.$message({
type: "success",
message: "删除成功"
})
} else {
this.$message({
type: "error",
message: res.msg
})
}
this.load() //删除后重新加载表格数据
})
},
handleSizeChange(pageSize){ //改变当前每页的个数触发
this.pageSize = pageSize
this.load()
},
handleCurrentChange(pageNum){ //改变当前页码触发
this.currentPage = pageNum
this.load()
},
}
}
</script>
