J'Blog

springboot+ssm+thymeleaf+bootstrap 创建简易微博系统

springboot+ssm+thymeleaf+bootstrap 创建简易微博系统

项目源码

本项目源码已上传到github

前言

此项目从0开始，1天入门java，制作一个简易的微博系统。参考网上的资料基于springtool工具搭建springboot项目，仅供自己学习参考，同时希望能给您带来帮助，都是最基础的功能，不喜勿喷哦。

功能说明

前台
1、用户登录登出
2、增删改查心情文章
3、关注其他用户
4、查看关注用户的心情微博
后台
1、用户管理
2、心情微博管理

项目部分截图

环境搭建

首先下载一个专为Spring设计的eclipse版本——Spring Tool Suite

创建项目

下载完安装就行了，然后点击左上角，File —> new —> Spring Starter Project 下一步填入项目名称，自定义名称就行 在输入框中依次输入以下五个选项，并选中，会在右侧出现你选中的选项，这些都会在后面的开发过程中用到，如果忘记添加也没关系，后续可以在项目的pom.xml中添加即可，项目的pom.xml是个依赖管理的配置文件 点击finish即可，到目前为止创建项目成功，静静等待编译结束就可以开始开发啦，这个过程可能比较漫长，这个时候可以选择吃吃零食，看看剧，玩玩游戏...☺

项目目录

入口文件

首先来看一下项目的入口文件， 右击这个类，run as——Spring Boot App，就会启动该项目，看一眼就ok了，不用管它。

配置文件

项目最关键两个配置文件，一个是上面提到的依赖管理pom.xml文件，就在项目的根目录下，需要什么包在这里引入就好了;其次就是resources目录下的application.properties文件，可以用来设置连接mysql的配置信息。

# mysql
spring.datasource.url: jdbc:mysql://localhost:3306/springboot?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
spring.datasource.username: root
spring.datasource.password: root

以上代码是在application.properties文件中定义连接了本地springboot数据库，mysql连接用户名以及密码，在我的github项目的resouces目录下有个sql.java文件，在mysql中打开此文件运行就能在本地数据库中生成该数据库。

开发项目

好啦，数据库也建好了，对于web开发来说，我的理解是最基本的就是后台与数据库的交互获取数据，传给前端，前端通过thymeleaf模板引擎展示数据。首先就是需要建立模型，这样才能通过控制器获取到数据库中的数据。

建立模型

在model下新建bean目录，定义一个模型类，以user表为例，在bean目录下新建User.java文件

package com.example.demo.model.bean;
import java.io.Serializable;
public class User implements Serializable {
	private static final long serialVersionUID = -5611386225028407298L;
	private Integer id;
	private String account;
	private String name;
	private String password;
	private Integer agent;
	private String image;
	private String phone;
	private String address;
	private Integer permission;
	private Followuser followuser;

    // 省略get和set方法，大家自己设置即可
	public Followuser getFollowuser() {
		return followuser;
	}
	public void setFollowuser(Followuser followuser) {
		this.followuser = followuser;
	}
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getAccount() {
		return account;
	}
	public void setAccount(String account) {
		this.account = account;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public Integer getAgent() {
		return agent;
	}
	public void setAgent(Integer agent) {
		this.agent = agent;
	}
	public String getImage() {
		return image;
	}
	public void setImage(String image) {
		this.image = image;
	}
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	public Integer getPermission() {
		return permission;
	}
	public void setPermission(Integer permission) {
		this.permission = permission;
	}
}

有了这个就可以和数据库表有个映射关系，现在还需要一个接口，定义项目中所有关于user表的查询方法，在model目录下新建dao目录，在dao目录下新建UserDAO.java，

package com.example.demo.model.dao;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import com.example.demo.model.bean.User;
import java.util.List;
@Mapper
public interface UserDAO {
	public User find(@Param("account")String account, @Param("password")String password);
	public User findByAccount(@Param("account")String account);
	public User findByID(@Param("userID")String userID);
	public Integer create(@Param("account")String account, @Param("password")String password, @Param("name")String name, @Param("agent")Integer agent, @Param("phone")String phone, @Param("address")String address, @Param("image")String image);
	public List<User> findMyFollow(@Param("userID")String userID);
	public List<User> findAll();
	public Integer remove(@Param("userID")Integer userID);
	public Integer updatePassword(@Param("password")String password, @Param("userID")String userID);
	public List<User> findSearch(@Param("keyword")String keyword);
	// 注： CRTL+Shift+O，快捷导入所有import
}
以上需要注意的是，如果需要查询user表中一条数据多个字段，用上面定义的User类接收，如果查询一条数据的单个字段，可以根据数据表中定义的字段类型去接收，比如create方法返回的是创建此条记录的id值是Integer类型的，如果返回多条数据就用list接收。

有了上面的方法接口后，还需要mybatis映射接口到SQL语句的文件，根据application.properties中的配置mybatis.mapper-locations: classpath:mapper/*.xml,在resources文件夹下新建mapper文件夹，下面放入UserDAO.xml文件，都是sql语句就不多说了。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.example.demo.model.dao.UserDAO">
  <select id="find" resultType="com.example.demo.model.bean.User">
    SELECT id, account, name, password, address, image, phone, agent, permission from user where account = #{account} and password = #{password}
  </select>
  
  <select id="findAll" resultType="com.example.demo.model.bean.User">
    SELECT id, account, name, password, address, image, phone, agent, permission from user where permission = 0
  </select>
  
  <select id="findByAccount" resultType="com.example.demo.model.bean.User">
    SELECT id, account, name, password, address, image, phone, agent, permission from user where account = #{account}
  </select>
  
  <select id="findByID" resultType="com.example.demo.model.bean.User">
    SELECT id, account, name, password, address, image, phone, agent, permission from user where id = #{userID}
  </select>
  
  <select id="findMyFollow" resultMap="userFollowMap">
    SELECT u.name, u.id from user u left join followuser fu on u.id = fu.followTo where fu.followFrom = #{userID}
  </select>
  
  <select id="findSearch" resultType="com.example.demo.model.bean.User">
    SELECT id, account, name, password, address, image, phone, agent, permission from user where account like '%${keyword}%' or name like '%${keyword}%'
  </select>
  
  <resultMap id="userFollowMap" type="com.example.demo.model.bean.User">
		<id property="id" column="id"></id>
		<result property="account" column="account"></result>
		<result property="name" column="name"></result>
		<result property="password" column="password"></result>
		<result property="image" column="image"></result>
		<result property="agent" column="agent"></result>
		<result property="phone" column="phone"></result>
		<result property="address" column="address"></result>
		<association property="followuser" column="id" javaType="com.example.demo.model.bean.Followuser">
			<id property="id" column="id"></id>
			<result property="followFrom" column="followFrom"></result>
			<result property="followTo" column="followTo"></result>
		</association>
	</resultMap>
  
  <insert id="create" parameterType="com.example.demo.model.bean.User">
    INSERT into user(account, password, name, agent, phone, address, image) VALUES(#{account}, #{password}, #{name}, #{agent}, #{phone}, #{address}, #{image})
  </insert>
  
  <delete id="remove" parameterType="com.example.demo.model.bean.User">
    DELETE FROM user where id = #{userID}
  </delete>
  
  <update id="updatePassword" parameterType="com.example.demo.model.bean.User">
    UPDATE user set password = #{password} where id = #{userID}
  </update>
</mapper>

控制器

有了数据之后就可以通过控制器去接收数据了，比较常用的请求方式是get请求和post请求，我就以两个请求方式为例

get请求

以后台用户管理为例

@GetMapping(value = "admin/userManager")  //vaule代表路由
	public Object userManager(Map<String, Object> map, HttpSession session) {
		if(!StringUtils.isEmpty(session.getAttribute("userID"))) {
			User user = userDAO.findByID(session.getAttribute("userID").toString());
			if(user.getPermission()==1) {
				map.put("userID", session.getAttribute("userID"));
				map.put("username", session.getAttribute("username"));
				List<User> allUser = userDAO.findAll();  //这里就是调用dao里面的方法
				if(allUser != null) {
					map.put("allUser", allUser);  //map.put就是向前端传输数据
				}
			}else {
				return new ModelAndView("redirect:/");  //如果验证成功那就
			}
		}else {
			return new ModelAndView("redirect:/");
		}
		return new ModelAndView("admin/userManager");
	}

前端通过thymeleaf展示数据

<table class="table">
	  <thead class="thead-dark">
	    <tr>
	      <th scope="col">用户账号</th>
	      <th scope="col">用户密码</th>
	      <th scope="col">用户名称</th>
	      <th scope="col">性别</th>
	      <th scope="col">用户手机</th>
	      <th scope="col">用户地址</th>
	      <th scope="col">操作</th>
	    </tr>
	  </thead>
	  <tbody>
	    <tr th:each="item,stat:${allUser}" >
	    <form method="post">
	      	<th th:text="${item.account}"></th>
	      	<th th:text="${item.password}"  th:id="'password_'+${item.id}"></th>
	      	<th th:id="'passwordInput_'+${item.id}"  style="display:none">
	      		<input type="password" name="password" class="form-control">
	      		<input type="text" name="userID" class="form-control" th:value="${item.id}" style="display:none">
	      	</th>
	      	<th th:text="${item.name}"></th>
	      	<th th:text="${item.agent==1?'女':'男'}"></th>
	      	<th th:text="${item.phone}"></th>
	      	<th th:text="${item.address}"></th>
	      	<th>
	      		<a class="btn btn-primary editPassoword" th:id="'editPassword_'+${item.id}" th:onclick="'editPassword('+${item.id}+')'">编辑</a>
	      		<input class="btn btn-primary savePassword" th:id="'savePassword_'+${item.id}" type="submit" value="保存" style="display:none">
	      		<a class="btn btn-danger" th:href="@{'removeUser?userID=' + ${item.id}}">删除</a>
	      	</th>
	      	</form>
	    </tr>
	  </tbody>
</table>

post请求

@RequestMapping(value = "admin/login", method = RequestMethod.POST)
	public Object login1(Map<String, Object> map,@RequestParam(value = "account", required = false) String account,
			@RequestParam(value = "password", required = false) String password, HttpSession session) {
		session.removeAttribute("userID");
		session.removeAttribute("username");
		if(StringUtils.isEmpty(account)) {
			map.put("errors", "账号不能为空！");
		}else if(StringUtils.isEmpty(password)){
			map.put("errors", "密码不能为空!");
		}else {
			User user = userDAO.find(account, password);
			System.out.println(user);
			if (user != null && user.getPermission()==1) {
				session.setAttribute("userID", user.getId());
				session.setAttribute("username", user.getName());
				return new ModelAndView("redirect:/admin/userManager");
			} else {
				map.put("errors", "账户或者密码错误！");
			}
		}
			
		return new ModelAndView("admin/login");
	}
	
	//通过@RequestParam接收前端post过来的数据

同样根据github上的项目进行修改开发另一套选课系统。后台管理系统使用vue前端框架搭建页面，应用ElementUI组件，vuex数据管理；微信小程序使用uni跨平台技术，可以打包运行在微信开发平台进行调试；后端用的springboot框架搭建的服务端，包含各种接口。springboot项目目录介绍：关键目录是在system目录，controller目录是控制器，控制页面请求的接口地址映射，entity目录实现和数据库表字段之间的映射，vo目录实现的是在entity基础上表关联关系的数据库表字段之间的映射，控制器中访问的服务接口在service中统一管理，对应service.impl目录下的相关文件，具体实现在service.impl中体现，数据库表查询对应dao文件的接口，对应resource目录下mapper目录，实现sql表查询操作。

放上部分截图

微信图片_20220207212348.png