Web大作业实录Day2

开始第二天的工作!昨天回宿舍又思考了一下我的网站需要的界面,但愿今天能完成几个网站的功能。

开始学习

动态改变网页展示内容

Thymeleaf详细教程(SpringBoot版)_springboot thymeleaf-CSDN博客

  • 写一个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>

      @Data注解作用以及Eclipse中@Data注解报错的解决方法_eclipse @data-CSDN博客

                不过太麻烦了,我就没有引入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.csdn.net/answer/48erk3bw9b - list类型初始化问题

至此,已经可以将动态数据展示在前端。


springboot和数据库关联

我使用的是mysql数据库

主要的几个操作:

  • 插入信息 - 用户发表评论,用户添加信息,管理员添加信息etc.
  • 删除信息 - 用户删除评论,管理员删除信息etc.
  • 修改信息 - 用户修改评论,用户点赞评论,用户修改信息,管理员修改信息etc.

参考: SpringBoot框架之SpringBoot+MySQL使用案例入门_springboot mysql-CSDN博客

  • 查询mysql版本
    • cmd命令: mysql --help
    • 我的mysql版本 8.0.35
  • 添加依赖

我的mysql版本在maven官方找不到版本对应,我推测是版本太新了,maven还没有更新。所以添加依赖的时候尝试使用8.0.32版本的依赖。(实践证明可以使用mysql-connector-java与MySQL数据库的版本对应关系_idea中这个mysql-connector-java怎样定位选择对应的版本-CSDN博客

  • 配置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;
	}
}

但是没有把数据库的内容展现在网页,而是展现在了控制台。

  • 重写controller,将数据显示在html前端 

SpringBoot实现数据库信息网页输出(html+MySQL+Thymeleaf)_mysql网页管理springboot数据库管理-CSDN博客提到,@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怎么获取前端数据-CSDN博客

Spring Boot(七) 之前后端交互_spring 前后端交互-CSDN博客

springboot+thymeleaf 文件上传-CSDN博客


设计数据库

springboot+thymeleaf+mysql实现脚手架权限管理系统(超详细讲解)_thymeleaf好看的脚手架-CSDN博客

问题记录

thymeleaf是什么?


model模型是什么?有什么参数?


mysql如何存储数组?

A:答案是创建多个表。mysql中没有list数据结构,如果想存放列表,可以多开一个关系表。打个比方,user用户有一个特性是学过什么课程,肯定是学过多个课程,存储多个课程就再开一个关系表。user为一个表(记录用户基本),course为一个表(记录课程基本信息),user_learned为一个表(记录用户学过什么课程),所以在这个表中,一个用户可能会出现多次。还可以使用json数据格式,不过似乎比较复杂。所以在当前项目中我选择使用关系表。

如何在MySQL中存储数组(list)?_mysql数据如何存放数组对象-CSDN博客

Javabean是什么?

A: 一种符合某种规范的Java类。满足的规范:

  • JavaBean类是具体的和公共的
  • 必须有一个无参数的默认构造函数
  • 必须有get和set方法,类的字段通过get和set方法访问。

所以这就是一种有特殊规范的java实体类。entity、model和domain三者区别_model entity-CSDN博客

数据库内容不为null,但是控制台显示的数据却为null?

A:因为数据库数据命名和前端不一样。修改数据库数据为username后,即可显示user的name。

boolean类型不显示是因为mysql没有布尔类型。避免使用tinyint,所以可以用int来表示。

ajax是什么?

A: Ajax是什么?Ajax的作用和使用_ajax是干什么用-CSDN博客

  • 24
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

Ayu阿予

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

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

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

打赏作者

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

抵扣说明:

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

余额充值