Celestial572 2022-08-02 23:23 采纳率: 100%
浏览 190
已结题

利用java Vue springboot开发的网页上表格部分数据前端无法显示

后端数据发送是对的

img


但是从表头in_media(内部介质)这一列开始数据就没有了 前端接收到的数据为null 但是后端发送了正确点数据 不知道哪里有问题😭

img

vue代码
<el-table
ref="refreshTable"
:data="tableData"
border
stripe
style="width: 100%; font-size: 10px"
@selection-change="handleSelectionChange">



有好几个表头列

data() {
return{
tableData: [],
total: 0,
pageNum: 1,
pageSize: 10,
username: "",
nickname: "",
nuclear_scu_level : "",
spec_level : "",
seis_level : "",
qua_level : "",
location : "",
parts : "",
material : "",
size : "",
quantity : "",
in_media : "",
in_temp : "",
in_press : "",
flow_state : "",
in_env_level : "",
out_media : "",
out_temp : "",
out_press : "",
cond_risk : "",
out_env_level : "",
in_pro : "",
out_pro : "",
cath_pro : "",
ins_layer : "",
A1 : "",
A2 : "",
A3_1 : "",
A3_2 : "",
A4_1 : "",
A4_2 : "",
cor_coefficient : "",
cor_level:"",
in_cor_risk : "",
out_cor_risk : "",
cor_outline : "",
remark : "",
dialogFormVisible: false,
multipleSelection: [],
dialogFormLookVisible: false,
form: {},
}
},
created() {
// 请求分页查询数据
this.load()
},
load() {
this.request.get("http://localhost:9090/user/page", {
params: {
pageNum: this.pageNum,
pageSize: this.pageSize,
username: this.username,
nickname: this.nickname,
nuclear_scu_level: this.nuclear_scu_level,
spec_level: this.spec_level,
seis_level: this.seis_level,
qua_level: this.qua_level,
location: this.location,
parts: this.parts,
material: this.material,
size: this.size,
quantity: this.quantity,
in_media: this.in_media,
in_temp: this.in_temp,
in_press: this.in_press,
flow_state: this.flow_state,
in_env_level: this.in_env_level,
out_media: this.out_media,
out_temp: this.out_temp,
out_press: this.out_press,
cond_risk: this.cond_risk,
out_env_level: this.out_env_level,
in_pro: this.in_pro,
out_pro: this.out_pro,
cath_pro: this.cath_pro,
ins_layer: this.ins_layer,
A1: this.A1,
A2: this.A2,
A3_1: this.A3_1,
A3_2: this.A3_2,
A4_1: this.A4_1,
A4_2: this.A4_2,
cor_coefficient: this.cor_coefficient,
in_cor_risk: this.in_cor_risk,
out_cor_risk: this.out_cor_risk,
cor_outline: this.cor_outline,
remark: this.remark,
}
}).then(res => {
console.log(res)
this.tableData = res.records
this.total = res.total

})
},
handleSelectionChange(val) {
console.log(val)
this.multipleSelection = val
},
下面是controller的

package com.jm.springboot.controller;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.jm.springboot.entity.User;
import com.jm.springboot.mapper.UserMapper;
import com.jm.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/user")//90端口无法直接访问user
public class UserController {
@Autowired
private UserService userService;
//新建、修改
@PostMapping
public boolean save(@RequestBody User user){
return userService.saveUser(user);
}
//查询所有数据
@GetMapping
public List findAll() {

    return userService.list();
}
@DeleteMapping("/{id}")
public boolean delete(@PathVariable Integer id) {
    return userService.removeById(id);
}
@PostMapping("/handleDelete/batch")
public boolean deleteBatch(@RequestBody List<Integer> ids) { // [1,2,3]
    return userService.removeByIds(ids);
}
// 分页查询 - mybatis-plus的方式
@GetMapping("/page")
public IPage<User> findPage(@RequestParam Integer pageNum,
                            @RequestParam Integer pageSize,
                            @RequestParam(defaultValue = "") String username) {
    IPage<User> page = new Page(pageNum, pageSize);
    QueryWrapper<User> queryWrapper = new QueryWrapper<>();
    if (username.equals("")) {
    } else {
        queryWrapper.like("username", username).or().like("nickname", username)
                .or().like("nuclear_scu_level", username).or().like("spec_level",username)
                .or().like("seis_level",username).or().like("qua_level",username).or().like("part",username);

不知道什么原因请问有人来解答一下吗😭

  • 写回答

16条回答 默认 最新

  • 天天上天庭 2022-08-03 11:38
    关注

    解决思路:
    1.vue debugger 一下,看你返回的对象中是否有数据
    (没有则后端查询出现了问题, 定位sql是否正常。)
    (后端返回数据正常,则就是vue中的table数据映射出现了问题 , 查看对应字段是否正确。)
    (
    vue对应字段如果是正确的, 则查看vue中映射关键字是否有 :例 映射关键字property:
    el-table-column width="200" property="name" label="软件名称"
    )
    对了, 字段带有_下划线,你需要看一下,后端查询出来是否转义成了字母大写了 ,如果自动转义了out_media / outMedia ,这样的话, 前后端字段也会对应不上导致无法渲染值上去

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
  • 快乐江小鱼 2022-08-02 23:48
    关注

    示例代码有点糊,使用postman模拟请求一下看看数据是否正确。返回类型如果是json,还需要注意接收变量名是否规范

    评论
  • 快乐的小小鸟 2022-08-03 00:28
    关注

    你在 网页上看一下返回的数据是不是和 前端的 变量名对应,大概率是变量名对不上

    评论
  • bug_keng 2022-08-03 06:30
    关注

    这个后端接口就没查出来东西吧?

    评论
  • weixin_45153560 2022-08-03 08:21
    关注

    看一下返回的数据是不是和 前端的 变量名对应,或者后台输出一下查询处理的数据

    评论
  • 反派的大佬 2022-08-03 08:51
    关注

    你输入路径查一下数据是否正确,如果正确说明前端的数据显示方式有问题

    评论
  • zcl_1991 2022-08-03 09:05
    关注

    先后端debug看数据是否正常;
    再网页上看后端返回数据是否正常;
    再看前端变量名是否对应

    评论
  • 关注

    那可以在postman测试下后台接口,看能不能正常反回数据

    评论
  • sinJack 2022-08-03 09:25
    关注

    表中也没多少数据,很多为空的。看下接口返回的,如果返回了,那就是前端渲染问题了。

    评论
  • 与猿共舞 2022-08-03 09:27
    关注

    没有配置好相适合的板本

    评论
  • Beq 2022-08-03 10:25
    关注

    首先从截图中可以看出接口请求是正常的,我们排除网络层原因;
    这个问题从经验上来看是前后端 key 值没对应上,我看像是用的el-table,不知道你的 columns 和 后端返回的recordData 能匹配上key值不

    评论
  • 瘦死的黑骆驼 2022-08-03 11:07
    关注

    不是已经打印了response吗,看数据结构是否符合你的要求啊,还有你的get方法怎么会传递那么多参数
    把response的结构发出来看一下,还有el-table-column的结构也发出来,否则看不出来

    评论
  • Juwell16 2022-08-03 12:37
    关注

    接口返回数据是对的的话,那就是你前端渲染的时候数据解析没对

    评论
  • Mr.Guoguo 2022-08-03 16:43
    关注

    controller的代码再往下粘点,应该是执行查询的时候没有查询null那些字段

    评论
  • IT技术分享社区 数据库领域优质创作者 2022-08-03 18:12
    关注

    table 中的列绑定的列名要和返回的数据保持一致,应该是这个问题

    评论
  • 卡布奇诺-海晨 Java领域优质创作者 2022-08-03 23:34
    关注

    定位下前端还是后端问题

    评论
查看更多回答(15条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 8月4日
  • 已采纳回答 8月4日
  • 赞助了问题酬金17元 8月2日
  • 赞助了问题酬金20元 8月2日
  • 展开全部

悬赏问题

  • ¥15 OpenFOAM多孔介质传热模型建模
  • ¥15 QT 实现 RSTP 语音对讲功能
  • ¥50 AES魔改之后的安全性关于PRF(相关搜索:密码学)
  • ¥15 用C语言写的一个程序遇到了两个问题第一是偏移正确但读取不到坐标,第二个问题是自己定义的函数实现不了获取指定进程模块。
  • ¥15 在安装Anaconda时总是闪退怎么办?
  • ¥15 对图中电路进行以下几个方面的分析
  • ¥15 对图中电路进行以下几个方面的分析
  • ¥15 对图中电路进行以下几个方面的分析
  • ¥15 对图中电路进行以下几个方面的分析
  • ¥500 抖音主页视频预存加载卡bug