数据库更新没有反映在前端页面

Question

一开始的时候对数据库修改在前端时会有改变的现在则变了，在数据库新添的东西在前端没有显示出来了，请各位帮帮忙
​​

​
 <el-container>
        <el-header style="font-size: 12px; border-bottom: 2px solid grey;line-height: 100px;display: flex" >
          <el-radio-group v-model="isCollapse" style="margin: 28px auto;">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
          </el-radio-group>
          <div style= "flex: 1;font-size: 18px">
           <span :class="CollapseBtnClass" style="cursor: pointer" @click="collapse"></span>
         </div>
          <div style="display: flex; font-size: 2px;color: black;margin-left: 5px">
            <b>首页/管理</b>
          </div>
          <el-dropdown style="text-align: right; width: 200px; cursor: pointer">
            <span>王小虎</span><i class="el-icon-arrow-down" style="width: 20px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <el-main>

          <div style="margin-bottom: 25px;top: 5px;">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div style="padding: 10px 0; min-height: 10px;">
         <el-input style="width: 200px" suffix-icon="el-icon-search" placeholder="请输入名称"class="ml-5" v-model="username"></el-input>
         <el-input style="width: 200px" suffix-icon="el-icon-message" placeholder="请输入邮箱"class="ml-5" v-model="email"></el-input>
         <el-input style="width: 200px" suffix-icon="el-icon-s-promotion" placeholder="请输入地址"class="ml-5" v-model="address"></el-input>
         <el-button class="ml-5"type="primary" @click="load">搜索</el-button>
         <el-button class="ml-5 custom-warning"type="waring" @click="reset">重置</el-button>
          </div>

          <div style="margin: 10px 0">
            <el-button type="primary" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>
            <el-button type="primary" slot="reference">批量删除<i class="el-icon-delete"></i></el-button>
            <el-button type="primary" class="ml-5">导入<i class="el-icon-top"></i></el-button>
            <el-button type="primary" class="ml-5">导出<i class="el-icon-bottom"></i></el-button>
          </div>

          <el-table :data="tableData" border stripe header-cell-class-name="headerBg" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="username" label="用户名" width="140"></el-table-column>
            <el-table-column prop="nickname" label="昵称" width="120"></el-table-column>
            <el-table-column prop="email" label="郎箱"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column label="操作" width="200" align="center">
              <template slot-scope="scope">
                <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
                <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="padding: 10px 0">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[2, 5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
          </div>

          <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
            <el-form label-width="80px" size="small">

              <el-form-item label="用户名">
                <el-input v-model="form.username" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="昵称">
                <el-input v-model="form.nickname" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="form.email" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="电话">
                <el-input v-model="form.phone" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="地址">
                <el-input v-model="form.address" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false" >取 消</el-button>
              <el-button type="primary" @click="save">确 定</el-button>
            </div>
          </el-dialog>

        </el-main>

      </el-container>
    </el-container>
</div>
</template>

<script>
// @ is an alias to /src
import request from "@/utils/request";

export default {
  name: 'HomeView',
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 2,
      username: "",
      address: "",
      email: "",
      phone:"",
      nickname:"",
      multipleSelection: [],
      dialogFormVisible: false,
      form: {},
      msg: "hello zhang",
      isCollapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,
      headerBg: 'headerBg'
    }
  },
  created() {
    //请求分页查询
    this.load()
  },
  methods: {
    collapse() {//点击收缩按钮触发
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {//收缩
        this.sideWidth = 64
        this.isCollapseBtnClass = 'el-icon-s-unfold'
        this.logoTextShow = false
      } else {//展开
        this.sideWidth = 200
        this.isCollapseBtnClass = 'el-icon-s-fold'
        this.logoTextShow = true
      }
    },
    load() {
      request.get("/user/page",{
       params: {
         pageNum: this.pageNum,
         pageSize: this.pageSize,
         username: this.username,
         address: this.address,
         email: this.email,
       }
     }).then(res => {
       console.log(res); // 添加这一行来打印res的内容

       this.tableData= res.data;
       this.total = res.total;
      })
    },//这个是为了在前端页面中展示从后端获取到的数据，并更新相应的页面显示。

    save() {
      request.post("/user", this.form).then(res =>{
        if(res) {
          this.$message.success("保存成功")
          this.dialogFormVisible=false
          this.load()
        }else {
          this.$message.error("保存失败")
        }
      })
    },
    handleAdd() {
      this.dialogFormVisible =true
      this.form={}
    },
    // handleEdit(row) {
    //   this.form =row
    //   this.dialogFormVisible=true
    //   this.load()
    // },
    reset() {
      this.username=""
      this.address=""
      this.email=""
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    }
  }
}
</script>

<style>
.headerBg{
 background-color: #074815 !important;
}
</style>

​//后端
package com.zhang.springboot.controller;

import com.zhang.springboot.entity.User;
import com.zhang.springboot.mapper.UserMapper;
import com.zhang.springboot.service.UserService;
import jakarta.annotation.Resource;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/user")
public class UserController {

    @Resource
    private UserMapper userMapper;
    @Resource
    private UserService userService;

    //新增或者更新修改
    @PostMapping
    public boolean save(@RequestBody User user) {
        return userService.saveUser(user);
    }

    //查询所有数据
    @GetMapping("")
    public List<User> index() {
      List<User> all=userMapper.findAll();
       return all;
    }

    //删除
    @DeleteMapping("/{id}")
    public Integer delete(@PathVariable Integer id) {
        return userMapper.deleteById(id);
    }

    //分页查询
    // 接口路径:/user/page?pageNum=1&pageSize=10
    // @RequestParam接受
    // limit第一个参数=(pageNum -1)* pageSize
    // pagesize
    @GetMapping("/page")
    public Map<String, Object> findPage(@RequestParam Integer pageNum,
                                        @RequestParam Integer pageSize,
                                        @RequestParam(defaultValue = "") String username,
                                        @RequestParam(defaultValue = "") String email,
                                        @RequestParam(defaultValue = "") String address) {
        pageNum = (pageNum - 1) * pageSize;
        List<User> data = userMapper.selectPage(pageNum, pageSize, username, address, email);
        Integer total = userMapper.selectTotal(username, address, email);
        Map<String, Object> res = new HashMap<>();
        res.put("data", data);  //数据
        res.put("total", total);
        return res;
    }

}

​

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

问题：一开始的时候对数据库修改在前端时会有改变的现在则变了，在数据库新添的东西在前端没有显示出来了，请各位帮帮忙。 回答：这个问题出现的原因可能是前端没有及时更新或重新加载数据。以下是一些可能的解决办法： 1.检查前端代码是否正确处理了从数据库获取数据，如是否正确使用了异步请求。可以在浏览器控制台查看请求和响应信息。 2.检查前端页面是否正确显示了数据，如是否遗漏了某些数据元素或错误显示了数据。 3.检查数据库最近是否有新添加的数据或更新的数据。如果是新添加的数据，需要确保前端代码正确处理了添加操作，并且在获取数据时包含了新增的数据。如果是更新数据，需要确保前端代码可以及时更新对应的数据元素。 4.尝试重新加载页面或刷新浏览器缓存，以确保前端页面和数据库数据同步。可以尝试在代码中添加自动刷新或自动更新数据的功能，以实现实时更新数据。 例如，在Vue.js中可以使用computed属性或watcher函数来实现自动更新数据：

<template>
  <div>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: []
    }
  },
  computed: {
    getItems() {
      // 从数据库获取最新数据
      // ...
      return this.items;
    }
  },
  watch: {
    getItems() {
      // 数据更新时自动刷新页面
      this.$forceUpdate();
    }
  }
}
</script>

这样，每当从数据库获取数据时，computed属性会返回最新的数据数组，watcher函数检测到数据更新时，自动调用forceUpdate方法刷新页面。这样就可以实现实时更新数据。