开始第二天的工作！昨天回宿舍又思考了一下我的网站需要的界面，但愿今天能完成几个网站的功能。
开始学习
动态改变网页展示内容
Thymeleaf详细教程（SpringBoot版）_springboot thymeleaf-优快云博客
- 写一个html网页
- 写一个控制器
- 浏览器访问http://localhost:8080/test
thymeleaf基础
语法：
- 引用名称空间（必须写的）
<html xmlns:th="http://www.thymeleaf.org"> - 动态传值语法 - th:指定指令
- 引用web静态资源 - “@{}”（静态资源包括写好的css，写好的js等）
<link rel="stylesheet" type="text/css" th:href="@{/CSS/index.css"} - 访问model模型中的数据 - “${}”
<span th:text="${user.name}"></span> //引用其他博主的代码 - 数据遍历 - th:each + "${对象.属性}"
<tr th:each="user:${userlist}"> <td th:text="${user.name}">默认</td> <td th:text="${user.age}">默认</td> </tr> //引用其他博主代码 - 条件判断 - th:if + "${对象.属性}"
<tr th:if="${messages.empty}"> <td>默认</td> </tr>
- 引用web静态资源 - “@{}”（静态资源包括写好的css，写好的js等）
不过太麻烦了，我就没有引入lombok jar包。
- 实际应用-先写个实体类
package com.example.demo.domain;
import java.util.ArrayList;
import java.util.List;
import javax.persistence.Entity;
@Entity
public class User {
private String username;
private Integer gender;
private Integer age;
private Boolean isAdmin;
private List<String> learned;
private List<String> wantLearn;
public User() {}
public User(String username, Integer gender, Integer age) {
this.username = username;
this.gender = gender;
this.age = age;
this.isAdmin = false;
this.learned = new ArrayList<String>();
this.wantLearn = new ArrayList<String>();
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public Integer getGender() {
return gender;
}
public void setGender(Integer gender) {
this.gender = gender;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public Boolean getIsAdmin() {
return isAdmin;
}
public void setIsAdmin() {
if(this.isAdmin == null) this.isAdmin = false;
else if(this.isAdmin == false) this.isAdmin = true;
}
public List<String> getLearned(){
return learned;
}
public void setLearned(List<String> learned) {
if(this.learned == null) this.learned = new ArrayList<String>();
for(int i = 0; i < learned.size(); i ++) {
this.learned.add(learned.get(i));
}
}
public List<String> getWantLearn(){
return wantLearn;
}
public void setWantLearn(List<String> want) {
if(this.wantLearn == null) this.wantLearn = new ArrayList<String>();
for(int i = 0; i < want.size(); i ++) {
this.wantLearn.add(want.get(i));
}
}
}
- 写html页面
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<base th:href="@{/}">
<title>默认的title</title>
<link rel="stylesheet" type="text/css" href="../../static/CSS/index.css" th:href="@{/CSS/index.css}"/>
</head>
<body>
<div th:text="${user.getUsername}" class="firstCss"></div>
年龄：<p th:text="${user.getAge}">momo</p><hr/>
<p th:if="${user.getIsAdmin}">是管理员<hr/></p>
性别：<div th:switch="${user.getGender}">
<p th:case = "0">保密</p>
<p th:case = "1">女</p>
<p th:case = "2">男</p>
</div><hr/>
学过：<ul><!--下面第一个learned代表的是将user的learned列表给learned，相当于第一个learned是html里面的变量-->
<li th:each="learned:${user.learned}" th:text="${learned}"></li>
</ul><hr/>
想学：<ul>
<li th:each = "want:${user.wantLearn}" th:text="${want}"></li>
</ul><hr/>
</body>
</html>- 写controller
package com.example.demo;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import com.example.demo.domain.User;
@Controller
public class TestController {
@GetMapping("/test")
public String index(Model model) {
User user = new User();
user.setUsername("Ayu");
user.setAge(20);
user.setGender(0);
user.setIsAdmin();
user.setIsAdmin();
List<String> learned = new ArrayList(Arrays.asList("数据库","大学英语1","高等数学","计算机网络"));
user.setLearned(learned);
List<String> want = new ArrayList(Arrays.asList("跆拳道","概率论","机器学习"));
user.setWantLearn(want);
model.addAttribute("user", user); //前面一个是传给test.html的参数，后面一个是当前页面的参数名称
return "HTML/test";
}
}
- 浏览器访问-效果
- 还有就是list数据类型的展示
https://wenku.youkuaiyun.com/answer/48erk3bw9b - list类型初始化问题
至此，已经可以将动态数据展示在前端。
springboot和数据库关联
我使用的是mysql数据库
主要的几个操作：
- 插入信息 - 用户发表评论，用户添加信息，管理员添加信息etc.
- 删除信息 - 用户删除评论，管理员删除信息etc.
- 修改信息 - 用户修改评论，用户点赞评论，用户修改信息，管理员修改信息etc.
参考: SpringBoot框架之SpringBoot+MySQL使用案例入门_springboot mysql-优快云博客
- 查询mysql版本
- cmd命令： mysql --help
- 我的mysql版本 8.0.35
- 添加依赖
我的mysql版本在maven官方找不到版本对应，我推测是版本太新了，maven还没有更新。所以添加依赖的时候尝试使用8.0.32版本的依赖。（实践证明可以使用）mysql-connector-java与MySQL数据库的版本对应关系_idea中这个mysql-connector-java怎样定位选择对应的版本-优快云博客
- 配置properties
#数据库的配置（mysql）
spring.datasource.driverClassName=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/mydb
spring.datasource.username=root
spring.datasource.password=*******- 写dao层接口
package com.example.demo.DAO;
import java.util.List;
import com.example.demo.domain.User;
public interface UserDao {
List<User> findAll();
// User findByName(String name);
boolean addUser(User user);
boolean updateByName(String name, Integer age);
boolean deleteByName(String name);
}
- 写dao层实现类impl
package com.example.demo.DAO.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Service;
import com.example.demo.DAO.UserDao;
import com.example.demo.domain.User;
@Service("userDaoImpl")
public class UserDaoImpl implements UserDao{
@Autowired
private JdbcTemplate jdbcTemplate;
@Override
public List<User> findAll(){
String sql = "select * from users";
return jdbcTemplate.query(sql, new BeanPropertyRowMapper<User>(User.class));
}
// @Override
// public User findByName(String name) {
// String sql = "select * from users where name = ?";
// Object[] params = new Object[] {name};
// return jdbcTemplate.queryForObject(sql, params,
// new BeanPropertyRowMapper<>(User.class));
// }
@Override
public boolean addUser(User user) {
String sql = "insert into users(id, name, gender, age) values(?,?,?,?)";
Object[] params = {5, user.getUsername(), user.getGender(), user.getAge()};
return jdbcTemplate.update(sql, params) > 0;
}
@Override
public boolean updateByName(String name, Integer age) {
String sql = "update users set age = ? where name = ?";
Object[] params = {name, age};
return jdbcTemplate.update(sql, params) > 0;
}
@Override
public boolean deleteByName(String name) {
String sql = "delete from users where name = ?";
Object[] params = {name};
return jdbcTemplate.update(sql, params) > 0;
}
}
- 将sql和controller相关联SpringBoot框架之SpringBoot+MySQL使用案例入门_springboot mysql-优快云博客
但是没有把数据库的内容展现在网页，而是展现在了控制台。
- 重写controller，将数据显示在html前端
SpringBoot实现数据库信息网页输出（html+MySQL+Thymeleaf）_mysql网页管理springboot数据库管理-优快云博客提到，@RestController == @Controller+@ResponseBody
在这里，不可以可以把Controller换成@RestController ，如果换的话，返回的就不是一个html，而是一个简单的字符串,如果与增删改查等方法同时使用时，就不能换了，同时应该在增删改查这些方法上加上@ResponseBody
package com.example.demo;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import com.example.demo.DAO.impl.UserDaoImpl;
import com.example.demo.domain.User;
@Controller
public class TestController {
@Autowired
private UserDaoImpl userDaoImpl;
//@RequestMapping(value = "/test", method = RequestMethod.GET);
@GetMapping("/test")
public String index(Model model) {
List<User> userList = userDaoImpl.findAll();
for(User user: userList) {
System.out.println(user.getUsername() + " " + user.getAge());
if(user.getAge() == 21)
model.addAttribute("user", user);
}
System.out.println(userList);
//model.addAttribute("userList", userList);
return "HTML/test";
}
}
- 写html页面
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<base th:href="@{/}">
<title>默认的title</title>
<link rel="stylesheet" type="text/css" href="../../static/CSS/index.css" th:href="@{/CSS/index.css}"/>
</head>
<body>
<div th:text="${user?.username}" class="firstCss"></div>
年龄：<p th:text="${user?.age}">momo</p><hr/>
<p th:if="${user.isAdmin}">是管理员<hr/></p>
性别：<div th:switch="${user?.gender}">
<p th:case = "0">保密</p>
<p th:case = "1">女</p>
<p th:case = "2">男</p>
</div><hr/>
</body>
</html>- 浏览器访问
至此，完成数据库内容显示在网页。
从前端插入信息至数据库
前面已经完成了从后端到前端的连通，现在要实现的内容是从前端到后端的连通。即从前端插入、修改、删除等一系列操作。估计今天可以完成这个就相当牛了。
Spring Boot接收从前端传过来的数据常用方式以及处理的技巧_springboot怎么获取前端数据-优快云博客
Spring Boot(七) 之前后端交互_spring 前后端交互-优快云博客
springboot+thymeleaf 文件上传-优快云博客
设计数据库
springboot+thymeleaf+mysql实现脚手架权限管理系统（超详细讲解）_thymeleaf好看的脚手架-优快云博客
问题记录
thymeleaf是什么？
model模型是什么？有什么参数？
mysql如何存储数组？
A:答案是创建多个表。mysql中没有list数据结构，如果想存放列表，可以多开一个关系表。打个比方，user用户有一个特性是学过什么课程，肯定是学过多个课程，存储多个课程就再开一个关系表。user为一个表（记录用户基本），course为一个表（记录课程基本信息），user_learned为一个表（记录用户学过什么课程），所以在这个表中，一个用户可能会出现多次。还可以使用json数据格式，不过似乎比较复杂。所以在当前项目中我选择使用关系表。
如何在MySQL中存储数组（list）？_mysql数据如何存放数组对象-优快云博客
Javabean是什么？
A: 一种符合某种规范的Java类。满足的规范：
- JavaBean类是具体的和公共的
- 必须有一个无参数的默认构造函数
- 必须有get和set方法，类的字段通过get和set方法访问。
所以这就是一种有特殊规范的java实体类。entity、model和domain三者区别_model entity-优快云博客
数据库内容不为null，但是控制台显示的数据却为null？
A:因为数据库数据命名和前端不一样。修改数据库数据为username后，即可显示user的name。
boolean类型不显示是因为mysql没有布尔类型。避免使用tinyint，所以可以用int来表示。
2006
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
