qq_43297081 2022-10-12 12:37 采纳率: 100%
浏览 53
已结题

axios error 500

点击确定按钮报的错

img

Request failed with status code 500
500是什么问题?
控制台截图

img

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>


展开全部

  • 写回答

2条回答 默认 最新

  • 音药 2022-10-13 00:42
    关注

    你找后端看一下你传参有没有问题,如果没问题那就是后端的问题

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 10月13日
  • 已采纳回答 10月13日
  • 修改了问题 10月12日
  • 创建了问题 10月12日

悬赏问题

  • ¥15 没输出运行不了什么问题
  • ¥20 输入import torch显示Intel MKL FATAL ERROR,系统驱动1%,: Cannot load mkl_intel_thread.dll.
  • ¥15 点云密度大则包围盒小
  • ¥15 nginx使用nfs进行服务器的数据共享
  • ¥15 C#i编程中so-ir-192编码的字符集转码UTF8问题
  • ¥15 51嵌入式入门按键小项目
  • ¥30 海外项目,如何降低Google Map接口费用?
  • ¥15 fluentmeshing
  • ¥15 手机/平板的浏览器里如何实现类似荧光笔的效果
  • ¥15 盘古气象大模型调用(python)
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部