引言
本次项目用到的技术
后端:Spring Boot,Spring MVC,Spring AOP,MyBatis
数据库:MySQL
前端:HTML,CSS,JavaScript,JS-WebAPI,jQuery
测试:IDEA 单元测试,Chrome,Fiddler,Postman
协议:HTTP
本次项目的业务流程
1. 搭建项目环境
2. 设计数据库,并根据数据库设计实体类
3. 做好 Mapper 接口和 xml 文件之间操作数据库的配合
4. 定好前后端交互的思路
5. 实现后端的 Service 层,Contoller 层
6. 编辑前后端代码,实现页面
7. 优化项目
一、搭建项目环境
1. 创建一个 Spring MVC 项目
2. 创建好配置文件( 开发环境 / 运行环境)
连接数据库、开启 MyBatis SQL 打印、配置 " xml 文件 " 保存路径
3. 实现项目的分层
Controller 作为控制层,用来与前端交互;Service 作为服务层,用来调用接口并处理中间代码;Mapper 作为持久层,用来和数据库交互。
model 包用来放置实体类,common 包用来封装公共代码。
4. 将纯前端设计的代码放入【resource / static】目录下,并对【target】目录进行删除操作。
注意: 如果不删除【target】目录,可能会出现前端代码不会加载到 JVM 中,这样就会导致 JVM 找不到前端代码,说白了,就是因为文件缓存的问题。
5. 运行框架提供的 " DemoApplication " 启动类,查看是否无误。
二、设计数据库,并根据数据库设计实体类
通过自己写的 sql 语句,往 MySQL 数据库中,插入【blog 表】、【user 表】
【blog 表】 预期用来存储博客的信息 ( 标题、内容、发布时间 )
【user 表】预期用来存储用户的信息 ( 用户账号、用户密码 )
create database if not exists practice_blog; use practice_blog; -- 创建博客表 drop table if exists blog; create table blog( blogID int primary key auto_increment, title varchar(50), content mediumtext, postTime datetime default now(), userID int ); -- 创建用户表 drop table if exists user; create table user( userID int primary key auto_increment, username varchar(50) unique, password varchar(50) ); insert into blog values(null, 'Jack 的博客', '中秋快乐,合家团圆!', '2020-08-15 08:20:05', 1); insert into blog(blogID, title, content, userID) values(null, '莉莉 的博客', 'C++, Java, Python 基础语法', 3); insert into blog(blogID, title, content, userID) values(null, 'Rose 的博客', '好好学习,天天向上', 2); insert into blog(blogID, title, content, userID) values(null, '李明 的博客', '坚持锻炼,保持好身体!', 4); insert into user values(null, 'Jack', '123'); insert into user values(null, 'Rose', '321'); insert into user values(null, '莉莉', '456'); insert into user values(null, '李明', '789');
Blog 类:
@Data public class Blog { private int blogID; private String title; private String content; private String postTime; private int userID; private int isAuthor; // 数据库不存储,用于业务逻辑 }
User 类:
@Data public class User { private int userID; private String username; private String password; private int blogCount; // 数据库不存储,用于业务逻辑 }
三、实现 Mapper 接口和 xml 文件
实现 Mapper 接口和 xml 文件,明确增删改查数据库的要求。
BlogMapper 接口 和 " BlogMapper.xml " 文件
UserMapper 接口 和 " UserMapper.xml " 文件
四、 定好前后端交互的思路
实现每个页面的思想
五个页面:博客注册页、博客列表页、博客内容页、博客登录页、博客编辑页
博客列表页、博客内容页是通过 ajax 发送的 HTTP 请求,之后在服务器端计算响应的。而注册页、登录页、编辑页,是通过 form 表单的形式来构造 HTTP请求。
必须明确:
- 列表页和内容页是通过 浏览器输入 URL 路径这种形式来构造 HTTP 请求的。这种方式,绝大多数情况下,都是一个 GET 请求。
- 登录页和编辑页是通过 form 表单的形式构造 HTTP 请求的,一般和 input 标签相关的提交按钮,都是 POST 方法。
1. 博客注册页
2. 博客列表页
3. 博客内容页
4. 博客登录页
判定用户有没有登录
注销操作
显示用户/作者信息
5. 博客编辑页
删除博客功能