头条博文 (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)(下)
126 0
头条博文 (SSM)(下)
|
2天前
|
前端开发 Java 关系型数据库
基于ssm的社区物业管理系统,附源码+数据库+论文+任务书
社区物业管理系统采用B/S架构,基于Java语言开发,使用MySQL数据库。系统涵盖个人中心、用户管理、楼盘管理、收费管理、停车登记、报修与投诉管理等功能模块,方便管理员及用户操作。前端采用Vue、HTML、JavaScript等技术,后端使用SSM框架。系统支持远程安装调试,确保顺利运行。提供演示视频和详细文档截图,帮助用户快速上手。
31 17
|
3天前
|
前端开发 Java 关系型数据库
基于ssm的台球厅管理系统,附源码+数据库+论文
本项目为新锐台球厅管理系统,支持管理员和会员两种角色。管理员可进行会员管理、台球桌管理、订单管理等;会员可查看台球桌、预约、购买商品等。技术框架基于Java,采用B/S架构,前端使用Vue+HTML+JavaScript+CSS+LayUI,后端使用SSM框架,数据库为MySQL。运行环境为Windows,JDK8+MySQL5.7+Tomcat8.5。提供演示视频及详细文档截图。
|
4天前
|
前端开发 Java 关系型数据库
基于ssm的网络直播带货管理系统,附源码+数据库+论文
该项目为网络直播带货网站,包含管理员和用户两个角色。管理员可进行主页、个人中心、用户管理、商品分类与信息管理、系统及订单管理;用户可浏览主页、管理个人中心、收藏和订单。系统基于Java开发,采用B/S架构,前端使用Vue、JSP等技术,后端为SSM框架,数据库为MySQL。项目运行环境为Windows,支持JDK8、Tomcat8.5。提供演示视频和详细文档截图。
42 10
|
5天前
|
前端开发 Java 关系型数据库
基于ssm的超市会员(积分)管理系统,附源码+数据库+论文,包安装调试
本项目为简单内容浏览和信息处理系统,具备管理员和员工权限。管理员可管理会员、员工、商品及积分记录,员工则负责积分、商品信息和兑换管理。技术框架采用Java编程语言,B/S架构,前端使用Vue+JSP+JavaScript+Css+LayUI,后端为SSM框架,数据库为MySQL。运行环境为Windows,JDK8+Tomcat8.5,非前后端分离的Maven项目。提供演示视频和详细文档,购买后支持免费远程安装调试。
55 19
|
6天前
|
前端开发 JavaScript Java
[Java计算机毕设]基于ssm的OA办公管理系统的设计与实现,附源码+数据库+论文+开题,包安装调试
OA办公管理系统是一款基于Java和SSM框架开发的B/S架构应用,适用于Windows系统。项目包含管理员、项目管理人员和普通用户三种角色,分别负责系统管理、请假审批、图书借阅等日常办公事务。系统使用Vue、HTML、JavaScript、CSS和LayUI构建前端,后端采用SSM框架,数据库为MySQL,共24张表。提供完整演示视频和详细文档截图,支持远程安装调试,确保顺利运行。
48 17
|
23天前
|
存储 Java 关系型数据库
ssm064农产品仓库管理系统系统(文档+源码)_kaic
农产品仓库管理系统基于现代经济快速发展和信息化技术的升级,采用SSM框架、Java语言及Mysql数据库开发。系统旨在帮助管理者高效处理大量数据信息,提升事务处理效率,实现数据管理的科学化与规范化。该系统涵盖物资基础数据管理、出入库订单管理等功能,界面简洁美观,符合用户操作习惯,并提供数据安全解决方案,确保信息的安全性和可靠性。通过自动化和集中处理,系统显著提高了仓库管理的效率和准确性。
|
1月前
|
存储 Java 关系型数据库
ssm026校园美食交流系统(文档+源码)_kaic
本文介绍了基于Java语言和MySQL数据库的校园美食交流系统的设计与实现。该系统采用B/S架构和SSM框架,旨在提高校园美食信息管理的效率与便捷性。主要内容包括:系统的开发背景、目的及内容;对Java技术、MySQL数据库、B/S结构和SSM框架的介绍;系统分析部分涵盖可行性分析、性能分析和功能需求分析;最后详细描述了系统各功能模块的具体实现,如登录、管理员功能(美食分类管理、用户管理等)和前台首页功能。通过此系统,管理员可以高效管理美食信息,用户也能方便地获取和分享美食资讯,从而提升校园美食交流的管理水平和用户体验。
|
6月前
|
XML Java 数据库连接
如何搭建SSM框架、图书商城系统
这是一份详尽的《Spring + SpringMVC + Mybatis 整合指南》,作者耗时良久整理出约五万字的内容,现已经全部笔记公开。此文档详细地介绍了如何搭建与整合SSM框架,具体步骤包括创建Maven项目、添加web骨架、配置pom文件以及整合Spring、SpringMVC和Mybatis等。无论是对初学者还是有一定基础的开发者来说,都是很好的学习资源。此外,作者还提供了项目源码的GitHub链接,方便读者实践。虽然当前主流推荐学习SpringBoot,但了解SSM框架仍然是不可或缺的基础。
96 0
|
6月前
|
Java 应用服务中间件 数据库连接
ssm项目整合,简单的用户管理系统
文章介绍了一个使用SSM框架(Spring、SpringMVC、MyBatis)构建的简单用户管理系统的整合过程,包括项目搭建、数据库配置、各层代码实现以及视图展示。
ssm项目整合,简单的用户管理系统