Bootstrap

day15--2023-08-09

今日内容

完善业务信息模块

解决多选框存数据库问题

1)在表单初始化添加新的数组类型

purposeCK: [],			//临时记录多选框结果,不是为传递到数据库的
purpose: null,			//这个保持和entity实体对象属性一致

2)在表单提交按钮处添加数据类型转换代码

form.data.purpose = form.data.purposeCK.join(',')

3)在修改方法中添加数据回显代码

form.data.purposeCK = form.data.purpose.split(",");	//回显多选框

解决数据库冗余问题

在vuex状态管理中设置companyId,nm企业的信息,后续跳转到业务模块时能够直接调用,以此来防止业务模块对应外键出错

	//获取vuex
	import { useStore } from 'vuex'
	const store = useStore()	//获取实例
	
	//获取router路由
	import { useRouter } from 'vue-router'
	const router = useRouter()
	
	//设置Vuex共享值,传递id和nm,转向fac.vue
	const handleToFac = (row)=>{
		//1、设置值到vuex
		store.state.companyId = row.companyId
		store.state.companyNm = row.nm
		
		//2、转向fac.vue页面
		router.push("/credit/fac")	//和路由表中的值一致
	}

完成历史信息申请

1、在企业信息添加新的跳转按钮:
a、在vuex中存储对应的企业标识companyId、企业名称companyNm
b、跳转到业务信息模块,并把vuex存储的值反馈到页面

2、在增加页面添加历史业务信息
a、通过companyId从数据库中查询改企业所有的业务
b、把获取值赋给历史业务表格

初步实现freemarker

1、在template下创建一个ftl模板文件

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div>${name}</div>
</body>
</html>

2、在配置文件yml中配置

Spring已经集成了template,所以只要配置好就能使用
enabled: true //要默认开启
cache: false //开启缓存
template_update_delay: 0 //模板刷新间隔
suffix: .ftl //设置文件类型
charset: UTF-8 //设置语言
template-loader-path: classpath:/templates/ //设置文件路径

spring:
  freemarker:
    enabled: true						
    cache: false
    settings:
      template_update_delay: 0
    suffix: .ftl
    charset: UTF-8
    template-loader-path: classpath:/templates/

3、编写一个controller类实现

@Controller //不能使用RestController,它必须返回html页面
public class UserController {
    @GetMapping("/user")
    public String user(Map model){
        //1、只需要准备数据model(SpringMVC)
        //2、准备数据
        model.put("name", "HelloWorld");
        //3、返回页面
        return "user";
    }
}

freeMarker的部分指令

1、单值
model.put(“name”, “陈晨”);

${name!"chen"}	//!表示数值可以为空,!后面加数据表示name为空时用此替代

2、对象,利用构造方法初始化
User user = new User(1, “陈文”, 18, new Date(), 10000.0);
model.put(“user”, user);
其中日期需要在后面添加转换格式

<tr><td>生日</td><td>${user.birthday?date}</td></tr>	

3、List集合
User u1 = new User(1, “陈1”, 18, new Date(), 10000.0);
User u2 = new User(1, “陈2”, 28, new Date(), 20000.0);
User u3 = new User(1, “陈3”, 38, new Date(), 30000.0);
List userList = new ArrayList<>();
userList.add(u1);
userList.add(u2);
userList.add(u3);
model.put(“userList”, userList);
用#list表示list集合遍历

 <#list userList as u>
 	<tr>
		<td>${u_index+1}</td>	//集合自增索引
        <td>${u.username}</td>
        <td>${u.age}</td>
        <td>${u.birthday?date}</td>
   </tr>
</#list>

4、 Map集合
Map userMap = new HashMap();
userMap.put(“u1”, u1);
userMap.put(“u2”, u2);
userMap.put(“u3”, u3);
model.put(“userMap”, userMap);
用#list表示map,但在后面加上keys

<table border="1">
	<#list userMap?keys as k>
    	<tr>
            <td>${k_index+1}</td>
            <td>${userMap[k].username}</td>
            <td>${userMap[k].age}</td>
            <td>${userMap[k].birthday?datetime}</td>
            <td>${userMap[k].salary}</td>
        </tr>
	</#list>
</table>
;