Idea做spring boot项目所遇到的一些问题(Vue+element-ui前端框架)

spring boot 项目前后端不分离(单页版)

适用简单小型项目,程序作业等

1.引入element前端插件
去官网保存index.css和index.js文件到本地

vue.js(菜鸟教程下载)
index.css
index.js

spring boot 中引入即可
注意:vue.js一定要放在element的两个插件之前,不然会报错

在这里插入图片描述
1.后端传值前端获取不到

后端将登录用户名传到视图中

@RequestMapping("/index")
    public @ResponseBody
    ModelAndView index1(HttpSession session, HttpServletRequest request) throws ParseException {
        String s_name= (String) session.getAttribute("username");
        System.out.println("主页运行了"+s_name);
        ModelAndView view=new ModelAndView("/index.html");
        view.addObject("username",s_name);
        return view;
    }

前端js获取:
之前用layui框架时直接用
var user='${username}' 获取
但再vue中不行
vue中用

<script>
const user = '[[${username}]]'
</script>

后能获取到值

参考博客:https://blog.csdn.net/qq_34645090/article/details/84879400?spm=1001.2101.3001.6650.4&depth_1-utm_relevant_index=8

2.后端传json类型时前端获取失败

后端代码

List<enterprise_user> enterprise_user;

enterprise_user=loginMapper.index_select();
  
System.out.println(JSON.toJSON(enterprise_user));

ModelAndView view=new ModelAndView("/index.html");
view.addObject("company_data",JSON.toJSON(enterprise_user));

后端打印出来正常json

[{"company_name":"东方雨虹","id":2,"is_admin":0},{"company_name":"景嘉","id":3,"is_admin":0}]

前端获取后双引号变成异常字符&quot;
在这里插入图片描述
只好将其替换成双引号再用JSON.parse转换一下就正常格式了
在这里插入图片描述

注意:JSON.parse必须时严格的json格式不然前端会报错

created(){
            this.item.name='[[${username}]]';
            const obj = '[[${company_data}]]';
            console.log(obj);
            const obj2=obj.replace(/&quot;/g,'"');
            //const res = '[{"id":1,"name":"liming"},{"id":2,"name":"xiaobai"}]';
            console.log(JSON.parse(obj2));
            this.menus=JSON.parse(obj2);
        },

3.实体类构造json类型报错
com.test_kafka.demo.entity.OmDay.dataJson type: object 报错
在这里插入图片描述
类OmDay如下
在这里插入图片描述
将Object改成JSON 即可
再将下面的get和set方法也改成JSON
然后@Basic会报错再将其改成@Transient 就能正常运行了
在这里插入图片描述
4.实体类时报错Parameter 0 of constructor in xxxx required a bean of type

自己新加了一个构造函数 后报错
因为在创建实体类时创建了一个多参的构造函数,但是spring boot 自动注入的时候使用的是无参构造函数
解决办法:在实体类中添加无参构造函数

package com.test_kafka.demo.entity;

import lombok.Data;
import org.springframework.stereotype.Repository;

@Repository
@Data
public class fields {
    private String type;
    private String optional;
    private String field;

    public fields(){

    }
    public fields(String type, String optional, String field) {
        this.type = type;
        this.optional = optional;
        this.field = field;
    }
}

5.当数据库列名与实体类属性名不一致时
修改mapper文件如下
添加 @Results({
@Result(column = “name”,property = “yqmc”)
})
即可

import org.apache.ibatis.annotations.Results;
import org.springframework.stereotype.Repository;
import org.apache.ibatis.annotations.Select;
import java.util.List;

@Repository
public interface Sfes_yueyangMapper {

    @Select("select * from base_company")
    @Results({
            @Result(column = "name",property = "yqmc")
    })
    List<BaseCompany> company_select();


}

6.当数据库字段类型为json时
在这里插入图片描述
7.后台返回Json格式
用fastjson可以将map转成json字符串对象。
用maven引入fastjson jar包

<dependency>
   <groupId>com.alibaba</groupId>
   <artifactId>fastjson</artifactId>
   <version>1.2.24</version>
</dependency>
Map map=new HashMap();
map.put("page_size","10");
map.put("page_index","1");
String  param= JSON.toJSONString(map);

8.获取json字符串的某个属性
json字符串如下,想要获取cod的最大值

String a={"cod": {"max": 445.665, "min": 445.5674, "val": 445.6325}, "nh_n": {"max": 6.0536, "min": 6.0488, "val": 6.0512}}

先转换成JOSN对象,再获取重复操作一次

JSONObject obj=JSONObject.parseObject(a); //json字符串转化为json对象
 if(obj.get("cod")!=null){     //先判断防止空指针异常
 JSONObject obj2=JSONObject.parseObject(obj.get("cod").toString());
 //重复操作一次获取max
 System.out.println(obj2.get("max"));
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

事情判断忘记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值