头条博文 (SSM)(上)

简介: 头条博文 (SSM)(上)

引言



本次项目用到的技术


后端: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 文件 " 保存路径


24e050f426bd45ed848b03887a486c42.png


3. 实现项目的分层


Controller 作为控制层,用来与前端交互;Service 作为服务层,用来调用接口并处理中间代码;Mapper 作为持久层,用来和数据库交互。


model 包用来放置实体类,common 包用来封装公共代码。


b6b41822ef7345c4b46f381546aa10c9.png


4. 将纯前端设计的代码放入【resource / static】目录下,并对【target】目录进行删除操作。


注意: 如果不删除【target】目录,可能会出现前端代码不会加载到 JVM 中,这样就会导致 JVM 找不到前端代码,说白了,就是因为文件缓存的问题。


c39581ab17244581b89dcb17ede8d8e9.png


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');

e15bcaefdc074f8386fd70c0349badf7.png


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 " 文件


f964427a105948a3be54856dd16137b1.png


UserMapper 接口 和 " UserMapper.xml " 文件


88f5122ce2b54457893bf920f871d1c7.png


四、 定好前后端交互的思路



实现每个页面的思想


五个页面:博客注册页、博客列表页、博客内容页、博客登录页、博客编辑页


博客列表页、博客内容页是通过 ajax 发送的 HTTP 请求,之后在服务器端计算响应的。而注册页、登录页、编辑页,是通过 form 表单的形式来构造 HTTP请求。


必须明确:


  • 列表页和内容页是通过 浏览器输入 URL 路径这种形式来构造 HTTP 请求的。这种方式,绝大多数情况下,都是一个 GET 请求。
  • 登录页和编辑页是通过 form 表单的形式构造 HTTP 请求的,一般和 input 标签相关的提交按钮,都是 POST 方法。


1. 博客注册页


7ac32b82fd5541a4a52540d99488792c.png


2. 博客列表页


f8dbfbf82a3949afbdcb80c475ff9f92.png


3. 博客内容页


0bf633005f904c898899875c4947a827.png


4. 博客登录页


33d31b76f4ee49889400005dc516f670.png


判定用户有没有登录


568db735fd334228ac28bad29280c53f.png

注销操作


b60fcc4dcc9542c8a65747ea12c5a6a3.png


显示用户/作者信息


bc64e3f08ee14b6d8e4fc243d3657977.png


5. 博客编辑页


85fd0c214f3c492f9972bc9e28d16a89.png


删除博客功能


a8361ff080f448c8bf2701f410d57427.png


目录
相关文章
|
XML JSON 前端开发
头条博文 (SSM)(下)
头条博文 (SSM)(下)
114 0
头条博文 (SSM)(下)
|
23天前
|
Java 数据库连接 Maven
手把手教你如何搭建SSM框架、图书商城系统案例
这篇文章是关于如何搭建SSM框架以及实现一个图书商城系统的详细教程,包括了项目的配置文件整合、依赖管理、项目结构和运行效果展示,并提供了GitHub源码链接。
手把手教你如何搭建SSM框架、图书商城系统案例
|
3月前
|
搜索推荐 JavaScript Java
计算机Java项目|基于SSM的个性化商铺系统
计算机Java项目|基于SSM的个性化商铺系统
|
3月前
|
前端开发 JavaScript Java
计算机Java项目|SSM智能仓储系统
计算机Java项目|SSM智能仓储系统
|
29天前
|
SQL Java 应用服务中间件
使用SSM搭建图书商城管理系统(完整过程介绍、售后服务哈哈哈)
这篇文章是关于如何使用SSM框架搭建图书商城管理系统的教程,包括完整过程介绍、常见问题解答和售后服务,提供了项目地址、运行环境配置、效果图展示以及运行代码的步骤。
使用SSM搭建图书商城管理系统(完整过程介绍、售后服务哈哈哈)
|
3月前
|
Java 物联网 Maven
基于SSM+layui【爱车汽车租赁管理系统】附源码+论文
基于SSM+layui【爱车汽车租赁管理系统】附源码+论文
51 1
基于SSM+layui【爱车汽车租赁管理系统】附源码+论文
|
2月前
|
存储 关系型数据库 测试技术
基于ssm+vue的校园驿站管理系统+(源码+部署说明+演示视频+源码介绍)(2)
基于ssm+vue的校园驿站管理系统+(源码+部署说明+演示视频+源码介绍)
30 1
|
3月前
|
前端开发
杨校老师之基于SSM开发的校园点餐配送系统
杨校老师之基于SSM开发的校园点餐配送系统
43 0
杨校老师之基于SSM开发的校园点餐配送系统
|
3月前
|
前端开发 Java 数据库连接
基于SSM【爱校图书馆管理系统】附源码+论文
基于SSM【爱校图书馆管理系统】附源码+论文
55 2
|
3月前
|
小程序 前端开发 测试技术
微信小程序|ssm基于微信小程序的高校课堂教学管理系统
微信小程序|ssm基于微信小程序的高校课堂教学管理系统