大佬教程收集整理的这篇文章主要介绍了基于 SpringBoot + MyBatis 的博客系统，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
前端使用 HTML+CSS+JavaScript+JQuery 后端使用 Spring MVC+Spring Boot+MyBatis
application.properties 配置内容
spring.profiles.active=dev
application-dev.properties 配置内容
spring.datasource.url=jdbc:mysql://localhost:3306/MyBlogSystem?characterEncoding=utf8&useSSL=true
spring.datasource.username=root
spring.datasource.password=0000
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
mybatis.mapper-LOCATIOns=classpath:mapper/**Mapper.xml
这里博客系统, 是一个用户表和博客表,
用户一般分为:
- 用户Id (每个人一个且互不相同)
- 用户名 (每个人的用户名不相同)
- 密码
- 用户头像(暂不实现)
- 用户马云地址(暂不实现)
博客一般分为:
- 博客Id (每篇博客一个且互不相同)
- 标题
- 正文
- 创建时间
- 修改时间 (这里没用到, 自己想加也可以)
- 用户Id (可以设置一个外键,这里没设置)
create database if not exists MyBlogSystem;
use MyBlogSystem;
drop table if exists blog;
-- 创建一个博客表
create table blog (
blogId int priMary key auto_increment,
title varchar(1024),
content MEDIUMTEXT,
postTime datetiR_315_11845@e,
userId int
);
drop table if exists user;
-- 创建一个用户信息表
create table user (
userId int priMary key auto_increment,
username varchar(128) unique,
password varchar(128)
);
在
resources下创建一个 @H_202_188@mapper 包. 包下创建UserMapper.xml和BlogMapper.xml
- BlogMapper.xml 里是对博客表的数据库操作
- UserMapper.xml 里是对用户表的数据库操作
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE @H_113_449@mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<@H_70_293@mapper namespace="com.example.demo.mapper.UserMapper">
<!-- 注册一个用户 -->
<insert id="addUser" keyProperty="userId" keycolumn="userId">
insert into user(username password) values (#{usernamE}, #{passworD})
</insert>
<!-- 通过用户名查找用户信息 -->
<SELEct id="SELEctByName" resultType="com.example.demo.model.User">
SELEct * from user where username = #{usernamE}
</SELEct>
<!-- 通过用户Id查找用户信息 -->
<SELEct id="SELEctById" resultType="com.example.demo.model.User">
SELEct * from user where userId = #{userID}
</SELEct>
</@H_70_293@mapper>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE @H_113_449@mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<@H_70_293@mapper namespace="com.example.demo.mapper.blogMapper">
<!-- 查找当前所有的文章 -->
<SELEct id="getAllBlog" resultType="com.example.demo.model.blog">
SELEct * from blog
</SELEct>
<!-- 通过博客id查找所有的文章 -->
<SELEct id="getBlogByBid" resultType="com.example.demo.model.blog">
SELEct * from blog where blogId = #{BlogID}
</SELEct>
<!-- 发布一篇博客 -->
<insert id="postBlog" keycolumn="userId" keyProperty="userId">
insert into blog(title,content,postTime,userId) values(#{titlE},#{Content},#{postTimE},#{userID})
</insert>
<!-- 删除一篇博客 -->
<delete id="deleteBlog">
delete from blog where blogId = #{BlogID}
</delete>
<!-- 更新一篇博客 -->
<update id="updateBlog">
update blog set content = #{Content},title = #{titlE} where blogId = #{BlogID}
</update>
<!-- 根据当前用户Id获取所有的博客 -->
<SELEct id="getAllBlogById" resultType="com.example.demo.model.blog">
SELEct * from blog where userId = #{userID}
</SELEct>
</@H_70_293@mapper>
在 model 包下 创建 User 类 和 Blog 类
User 类
@Data
public class User {
public int userId;
public String username;
public String password;
}
Blog 类
@Data
public class Blog {
public int blogId;
public String title;
public String content;
public timestamp postTime;
public int userId;
}
在 mapper 包下创建 UserMapper 和 BlogMapper 接口
UserMapper
@Mapper
public interface UserMapper {
void addUser(User user);
User SELEctByName(String username);
User SELEctById(Integer userId);
}
BlogMapper
@Mapper
public interface BlogMapper {
List<Blog> getAllBlog();
Blog getBlogByBid(Integer blogId);
void postBlog(Blog blog);
void deleteBlog(Integer blogId);
void updateBlog(Blog blog);
List<Blog> getAllBlogById();
}
service 包下创建 Userservice类 和 Blogservice类 Userservice
@service
public class Userservice {
@resource
private UserMapper userMapper;
public void addUser(User user){
userMapper.addUser(user);
}
public User SELEctByName(String username){
return userMapper.SELEctByName(username);
}
public User SELEctById(Integer userId){
return userMapper.SELEctById(userId);
}
}
Blogservice
@service
public class Blogservice {
@resource
private BlogMapper blogMapper;
public List<Blog> getAllBlog(){
return blogMapper.getAllBlog();
}
public Blog getBlogByBid(Integer blogId){
return blogMapper.getBlogByBid(blogId);
}
public void postBlog(Blog blog) {
blogMapper.postBlog(blog);
}
public void deleteBlog(Integer blogId){
blogMapper.deleteBlog(blogId);
}
public void updateBlog(Blog blog){
blogMapper.updateBlog(blog);
}
public List<Blog> getAllBlogById(){
return blogMapper.getAllBlogById();
}
}
交互3
交互4
交互5
交互6
交互7
交互8
交互9
交互10
交互11
导入前端代码到 resources 的 static下
@H_877_1555@
具体代码查看 文章 博客系统前端界面 https://wangzhi430.blog.csdn.net/article/details/124649884这里的交互接口是 交互6
@RestController
public class IndexController {
@Autowired
private Blogservice blogservice;
@requestMapping("/index")
public List<Blog> getAllBlog() {
return blogservice.getAllBlog();
}
}
$.ajax({
url: "index",
@H_638_1647@method: "GET",
success: function(data,status) {
buildBlogs(data);
}
})
function buildBlogs(blogs){
let rightDiv = document.querySELEctor('.right');
for(let blog of blogs){
let blogDiv = document.createElement('div');
blogDiv.className = 'article';
// 创建 title
let h2 = document.createElement('h2');
h2.className = 'title';
h2.innerHTML = blog.title;
blogDiv.appendChild(h2);
// 创建 postTime
let postTime = document.createElement('span');
postTime.className = 'date';
postTime.innerHTML = DateFormat(blog.postTime);
blogDiv.appendChild(postTime);
// 创建 content
let content = document.createElement('div');
content.className = 'desc';
content.innerHTML = blog.content;
blogDiv.appendChild(content);
// 创建 详情页的超链接
let detailA = document.createElement('a');
detailA.className = 'more';
detailA.href = 'art.html?blogId=' + blog.blogId;
detailA.innerHTML = '查看全文>>';
blogDiv.appendChild(detailA);
// 加入到 right 中
rightDiv.appendChild(blogDiv);
}
}
// 把毫秒级时间戳转化成格式化日期
function DateFormat(timestampMS) {
var date = new Date(timestampMS);
var year = date.getFullYear(),
month = date.getMonth()+1,//月份是从0开始的
day = date.getDate(),
hour = date.getHours(),
min = date.getminutes(),
sec = date.getSeconds();
var newTime = year + '-' +
(@H_70_293@month < 10? '0' + month : month) + '-' +
(day < 10? '0' + day : day) + ' ' +
(hour < 10? '0' + hour : hour) + ':' +
(@H_70_293@min < 10? '0' + min : min) + ':' +
(sec < 10? '0' + sec : sec);
return newTime;
}
在BlogMapper.xml中修改当前sql语句.
这里的交互是 交互5
根据当前blogId来获取文章, 要判断blogId是否合法, 是否存在当前blogId的文章 这里使用, message来判断, 返回的message不为空就表示异常.
@RestController
public class DetailsController {
@Autowired
private Blogservice blogservice;
@requestMapping("/details")
public Object ShowBlog(Integer blogId) {
HashMap<String,Object> map = new HashMap<>();
if (blogId == null || blogId < 1) {
map.put("message","blogId异常!");
return map;
}
Blog blog = blogservice.getBlogByBid(blogId);
if (blog == null) {
map.put("message","不存在当前blogId的文章");
return map;
}
return blog;
}
}
$.ajax({
url: "details"+LOCATIOn.search,
@H_638_1647@method: "GET",
success: function(data,status) {
if(data.message == null) {
buildBlog(data);
} else {
alert(data.message);
LOCATIOn.assign("home.html");
}
}
})
function buildBlog(blog){
// 1. 更新 title
let titleDiv = document.querySELEctor('.title');
titleDiv.innerHTML = blog.title;
// 2. 更新 postTime
let postTime = document.querySELEctor('.date');
postTime.innerHTML = DateFormat(blog.postTime);
editormd.@H_218_991@markdownToHTML('content', {@H_638_1647@markdown: blog.content});
}
// 把毫秒级时间戳转化成格式化日期
function DateFormat(timestampMS) {
var date = new Date(timestampMS);
var year = date.getFullYear(),
month = date.getMonth()+1,//月份是从0开始的
day = date.getDate(),
hour = date.getHours(),
min = date.getminutes(),
sec = date.getSeconds();
var newTime = year + '-' +
(@H_70_293@month < 10? '0' + month : month) + '-' +
(day < 10? '0' + day : day) + ' ' +
(hour < 10? '0' + hour : hour) + ':' +
(@H_70_293@min < 10? '0' + min : min) + ':' +
(sec < 10? '0' + sec : sec);
return newTime;
}
展示为 markdown 语法的正文. 注意这里的几段代码
这里的交互是 交互8
这里要根据前端穿过来的 json 格式数据进行判断 判断当前是否存在用户, 以及当前用户密码是否正确 登录成功之后, 要创建一个session
@RestController
public class LoginController {
@Autowired
private Userservice userservice;
@requestMapping("/login")
public Object userLogin(@requestBody User user, httpServletrequest request) {
HashMap<String,Object> map = new HashMap<>();
if (user == null) {
map.put("message","当前还没有输入用户名和密码,登录失败!");
return map;
}
User user1 = userservice.SELEctByName(user.getUsername());
if (user1 == null) {
map.put("message","当前用户名不存在!");
return map;
}
if (!user.getpassword().equals(user1.getpassword())) {
map.put("message","当前用户名密码错误!");
return map;
}
user.setUserId(user1.getUserId());
httpSession session = request.getSession(true);
if (session != null) {
session.setAttribute("user",user);
}
return map;
}
}
这里前端去除了前后空格,以及为空的情况
let submit = document.querySELEctor('.button');
submit.onclick = function() {
let username = document.querySELEctor('.user');
let password = document.querySELEctor('.password');
if (username.value.trim() == ""){
alert('请先输入用户名!');
username.focus();
return;
}
if (password.value.trim() == ""){
alert('请先输入密码!');
password.focus();
return;
}
$.ajax({
url: "login",
method: "POST",
data: JSON.Stringify({username: username.value.trim(), password: password.value.trim()}),
contentType: "application/json;charset=utf-8",
success: function(data, status) {
if(data.message == null) {
LOCATIOn.assign("home.html");
}else{
alert(data.message);
username.value="";
password.value="";
username.focus();
}
}
})
}
public class LoginInterceptor implements HandlerInterceptor {
@Override
public Boolean preHandle(httpServletrequest request, httpServletResponse response, Object handler) throws Exception {
httpSession session = request.getSession(false);
if (session != null && session.getAttribute("user") != null) {
return true;
}
response.setStatus(401);
response.sendRedirect("/login.html");
return false;
}
}
@Configuration
public class AppConfig implements WebMvcConfigurer {
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new LoginInterceptor())
.addPathPatterns("/**")
.excludePathPatterns("/**/*.js")
.excludePathPatterns("/**/*.jpg")
.excludePathPatterns("/**/*.css")
.excludePathPatterns("/**/*.png")
.excludePathPatterns("/**/login.html")
.excludePathPatterns("/**/register.html")
.excludePathPatterns("/**/login")
.excludePathPatterns("/**/register");
}
}
这里的交互是 交互9
实现一个 类 Register 来接收前端返回来的数据
class Register {
public String username;
public String password1;
public String password2;
}
这里后端需要判断当前用户名是否已经被使用.
@RestController
public class RegisterController {
@Autowired
private Userservice userservice;
@requestMapping("/register")
public Object userRegister(@requestBody Register register) {
HashMap<String,Object> map = new HashMap<>();
User user = userservice.SELEctByName(register.username);
if (user != null) {
map.put("message","当前用户名已经存在了, 请更换!");
return map;
}
User user1 = new User();
user1.setUsername(register.username);
user1.setpassword(register.password1);
userservice.addUser(user1);
return map;
}
}
要对输入内容去除前后空格,并且判空
let submit = document.querySELEctor('.button');
submit.onclick = function() {
let username = document.querySELEctor('.user');
let password1 = document.querySELEctor('.password1');
let password2 = document.querySELEctor('.password2');
if(username.value.trim() == ""){
alert("请先输入用户名!");
username.focus();
return;
}
if(password1.value.trim() == ""){
alert('请先输入密码!');
password1.focus();
return;
}
if(password2.value.trim() == ""){
alert('请再次输入密码!');
password2.focus();
return;
}
if(password1.value.trim() != password2.value.trim()) {
alert('两次输入的密码不同!');
passwrod1.value="";
password2.value="";
return;
}
$.ajax({
url: "register",
@H_638_1647@method: "POST",
data: JSON.Stringify({username: username.value.trim(), password1: password1.value.trim(),password2: password2.value.trim()}),
contentType: "application/json;charset=utf-8",
success: function(data,status){
if(data.message != null){
alert(data.message);
username.value="";
password1.value="";
password2.value="";
username.focus();
}else{
LOCATIOn.assign('login.html');
}
}
})
}
这里的交互是 交互10
因为 注销功能是点击注销的时候, 触发一个logout的url, 然后发送一个请求. 这里只需要实现后端代码既可
@Controller
public class LogoutController {
@requestMapping("/logout")
public void userLogout(httpServletrequest request, httpServletResponse response) throws IOException {
httpSession session = request.getSession(false);
// 拦截器的拦截, 所以不可能出现session为空的情况
session.removeAttribute("user");
response.sendRedirect("login.html");
}
}
这里的交互是 交互1
@RestController
public class EditController {
@Autowired
private Blogservice blogservice;
@requestMapping("/edit")
public void postBlog(@requestBody Blog blog, @SessionAttribute(value = "user",required = false)User user){
blog.setPostTime(new timestamp(System.currentTimeMillis()));
blog.setUserId(user.getUserId());
blogservice.postBlog(blog);
}
}
let submit = document.querySELEctor('.publish');
submit.onclick = function() {
let title = document.querySELEctor('.title');
let content = document.querySELEctor('.content');
if(title.value.trim() == ""){
alert('当前文章标题为空,请输入!');
title.focus();
return;
}
if(content.value.trim() == ""){
alert('当前文章内容为空,请输入!');
content.focus();
return;
}
$.ajax({
url: "edit",
method: "POST",
data: JSON.Stringify({title: title.value.trim(), content: content.value.trim()}),
contentType: "application/json;charset=utf-8",
success: function(data,status) {
LOCATIOn.assign('home.html');
}
})
}
这里的交互是 交互7 这里的前端页面主要就是主页页面的改进
@RestController
public class PersonController {
@Autowired
private Blogservice blogservice;
@requestMapping("/person")
public List<Blog> getMyBlog(@SessionAttribute(value = "user",required = false)User user) {
List<Blog> blogs = blogservice.getAllBlogById(user.getUserId());
for (Blog blog : blogs) {
if (blog.getContent().length() > 80) {
blog.setContent(blog.getContent().subString(0,80) + " ...");
}
}
return blogs;
}
}
$.ajax({
url: "person",
@H_638_1647@method: "GET",
success: function(data,status) {
buildBlogs(data);
}
})
function buildBlogs(blogs){
let rightDiv = document.querySELEctor('.right');
for(let blog of blogs){
let blogDiv = document.createElement('div');
blogDiv.className = 'article';
// 创建 title
let h2 = document.createElement('h2');
h2.className = 'title';
h2.innerHTML = blog.title;
blogDiv.appendChild(h2);
// 创建 postTime
let postTime = document.createElement('span');
postTime.className = 'date';
postTime.innerHTML = DateFormat(blog.postTime);
blogDiv.appendChild(postTime);
// 创建 content
let content = document.createElement('div');
content.className = 'desc';
content.innerHTML = blog.content;
blogDiv.appendChild(content);
// 创建 详情页的超链接
let detailA = document.createElement('a');
detailA.className = 'more';
detailA.href = 'art.html?blogId=' + blog.blogId;
detailA.innerHTML = '查看全文>>';
blogDiv.appendChild(detailA);
// 加入到 right 中
rightDiv.appendChild(blogDiv);
}
}
// 把毫秒级时间戳转化成格式化日期
function DateFormat(timestampMS) {
var date = new Date(timestampMS);
var year = date.getFullYear(),
month = date.getMonth()+1,//月份是从0开始的
day = date.getDate(),
hour = date.getHours(),
min = date.getminutes(),
sec = date.getSeconds();
var newTime = year + '-' +
(@H_70_293@month < 10? '0' + month : month) + '-' +
(day < 10? '0' + day : day) + ' ' +
(hour < 10? '0' + hour : hour) + ':' +
(@H_70_293@min < 10? '0' + min : min) + ':' +
(sec < 10? '0' + sec : sec);
return newTime;
}
这里的交互是 交互11
这里需要分情况考虑, 展示个人信息主要是 主页页面, 详情页面, 个人主页页面. 以带不带blogId来区分
这里判断了 blogId丢失的情况以及,文章作者丢失情况(数据库表数据被删除的时候会出现这种错误)
@RestController
public class UserController {
@Autowired
private Userservice userservice;
@Autowired
private Blogservice blogservice;
@requestMapping("/user")
public Object getUser(Integer blogId, @SessionAttribute(value = "user",required = false)User user){
if(blogId == null) {
return user;
}else {
HashMap<String,Object> map = new HashMap<>();
Blog blog = blogservice.getBlogByBid(blogId);
if(blog == null) {
map.put("message","不存在当前blogId的文章");
return map;
}
User author = userservice.SELEctById(blog.getUserId());
if(author == null){
map.put("message","当前文章作者出错");
return map;
}
return author;
}
}
}
详情页的情况:
$.ajax({
url: "user"+LOCATIOn.search,
@H_638_1647@method: "GET",
success: function(data,status) {
if(data.message == null){
let username = document.querySELEctor('.name');
username.innerHTML = data.username;
}else{
alert(data.message);
LOCATIOn.assign('home.html');
}
}
})
个人主页和主页的情况
$.ajax({
url: "user",
@H_638_1647@method: "GET",
success: function(data,status){
let username = document.querySELEctor('.name');
username.innerHTML = data.username;
}
})
这里需要用到 交互2 这里在详情页的时候进行构建, 在Blog实体类中加一项 isAuthor, 为1的时候就是当前文章就是作者. 前端接收到这个的时候, 进行判断, 如果为1就显示删除的按钮.
@Controller
public class deleteController {
@Autowired
private Blogservice blogservice;
@requestMapping("/delete")
public Object deleteBlog(Integer blogId) {
blogservice.deleteBlog(blogId);
return "/home.html";
}
}
这里的交互是 交互3 和 交互4 交互3是在新的页面进行加载
@RestController
public class updateController {
@Autowired
private Blogservice blogservice;
@requestMapping("/updateLoad")
public Object updateLoad(Integer blogId){
HashMap<String, Object> map = new HashMap<>();
if(blogId == null) {
map.put("message","blogId丢失!");
return map;
}
Blog blog = blogservice.getBlogByBid(blogId);
if(blog == null) {
map.put("blog","不存在当前blog的文章!");
return map;
}
return blog;
}
@requestMapping("/update")
public Object update(Integer blogId, @requestBody Blog blog, @SessionAttribute(value = "user",required = false)User user) {
HashMap<String, Object> map = new HashMap<>();
if(blogId == null) {
map.put("message","blogId丢失!");
return map;
}
blog.setBlogId(blogId);
blog.setUserId(user.getUserId());
blogservice.updateBlog(blog);
return map;
}
}
$.ajax({
url: "updateLoad"+LOCATIOn.search,
@H_638_1647@method: "GET",
success: function(data,status) {
if(data.message == null) {
let title = document.querySELEctor('.title');
title.value=data.title;
let content = document.querySELEctor('.content');
content.value=data.content;
}else{
alert(data.message);
LOCATIOn.assign('home.html');
}
}%大佬总结
以上是大佬教程为你收集整理的基于 SpringBoot + MyBatis 的博客系统全部内容，希望文章能够帮你解决基于 SpringBoot + MyBatis 的博客系统所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。