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>
后能获取到值
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}]
前端获取后双引号变成异常字符"
只好将其替换成双引号再用JSON.parse转换一下就正常格式了
注意:JSON.parse必须时严格的json格式不然前端会报错
created(){
this.item.name='[[${username}]]';
const obj = '[[${company_data}]]';
console.log(obj);
const obj2=obj.replace(/"/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"));
}