【JavaEE】前后端综合项目-博客系统（下）

最新推荐文章于 2024-07-17 14:06:40 发布
最新推荐文章于 2024-07-17 14:06:40 发布
阅读量700 收藏 29
点赞数 30
分类专栏： JavaEE 文章标签： java-ee java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Carefree_State/article/details/131618461
版权

【JavaEE】前后端综合项目-博客系统（下）

在这里插入图片描述

文章目录

【JavaEE】前后端综合项目-博客系统（下）

紧接上文：【JavaEE】前后端综合项目-博客系统（上）_s:103的博客-CSDN博客

1. 博客登录页

1.1 用户名密码校验

在这里插入图片描述

1.1.1 约定前后端交互接口

请求：POST

向谁请求：/login

响应：302（重定向）location:博客列表页

请求的正文格式：application/x-www-from-urlencoded

  • query string格式一样
  • ?username=xxx&password=xxx
  • 这里我们前端代码就是通过from表单提交的，所以就简单的用这个也可以~
1.1.2 后端代码

在这里插入图片描述

  1. 获得的是form格式的请求，那么后端要以utf8去理解
  2. 用getParameter方法去获取参数
  3. 在数据库中去查找核对
  4. 核对成功再重定向 
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    req.setCharacterEncoding("utf8");
    resp.setContentType("text/html;charset=utf8");
    String username = req.getParameter("username");
    String password = req.getParameter("password");
    if(username == null || username.replaceAll(" ", "").equals("") 
       || password == null || password.replaceAll(" ", "").equals("")) {
        String html = "<h3>登录失败</h3>";
        resp.getWriter().write(html);
        return;
    }
    UserDao userDao = new UserDao();
    User user = userDao.selectUserByName(username);
    if(user == null) {
        String html = "<h3>登录失败</h3>";
        resp.getWriter().write(html);
    }else {
        if(user.getPassword().equals(password)) {
            HttpSession httpSession = req.getSession(true);
            httpSession.setAttribute("user", user);
            resp.sendRedirect("博客列表页.html");
        }else {
            String html = "<h3>登录失败</h3>";
            resp.getWriter().write(html);
        }
    }
}
  • 没有重定向，from表单跳转到/login，也就是响应的内容

重定向中有中文会导致重定向失败：
在这里插入图片描述

将html文件的名字改文英文，并且其他关联代码都需要更改！

resp.sendRedirect("blog_list.html");
1.1.3 前端代码

在这里插入图片描述

在这里插入图片描述

1.2 登录信息记忆功能

要求：

  1. 登录页在有登录信息的时候，核对成功后自动登录
  2. 其他页面在没有登录信息的时候，强制退出登录
1.2.1 约定前后端交互接口

请求：GET

向谁请求：/login

响应：成功：200，失败：403

  • 前端可以通过success接受2开头的响应信息，error接受其他响应信息
1.2.2 后端代码
  • 由于无更改密码的操作，所以在会话中，只有登录成功才有记录，所以只需要判断有没有对应的映射就行了
ObjectMapper objectMapper = new ObjectMapper();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    HttpSession session = req.getSession(false);
    if(session == null) {
        resp.setStatus(403);
        return;
    }
    User user = (User) session.getAttribute("user");
    if(user == null) {
        resp.setStatus(403);
        return;
    }
    resp.setStatus(200);
    resp.setContentType("application/json; charset=utf8");
    String ret = objectMapper.writeValueAsString(user);
    resp.getWriter().write(ret);
}
1.2.3 前端代码
  • 只需要在访问对应html的时候发送请求即可

其他三个页面

jQuery.ajax({
    type:"get",
    url:"login",
    error: function(body) {
        location.href = "blog_login.html";
    }
});

登录页

jQuery.ajax({
    type: "get",
    url: "login",
    success: function(body) {
        location.href = "blog_list.html";
        alert("欢迎" + body.username + "!");
    }
});

在这里插入图片描述

1.3 显示用户/作者信息功能

要求：

  1. 列表页左侧栏显示的是登录的用户信息
  2. 详情页左侧栏显示的是博客作者的信息

对于列表页，复用一下刚才的后端代码即可，因为成功的时候，会返回用户信息user的json字符串

  • 只需要前端对success的情况进行处理即可
    在这里插入图片描述

在这里插入图片描述

而对于详情页，则需要多一段逻辑：通过博客id，确定用户id

1.3.1 约定前后端交互接口

请求：GET

向谁请求：/user&blogId=xxx

响应：这篇博客作者的用户信息（json）

1.3.2 后端代码

在这里插入图片描述

ObjectMapper objectMapper = new ObjectMapper();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    req.setCharacterEncoding("utf8");
    String id = req.getParameter("blogId");
    if(id == null) {
        resp.setStatus(404);
        return;
    }
    BlogDao blogDao = new BlogDao();
    Blog blog = blogDao.selectOne(Integer.parseInt(id));
    if(blog == null) {
        resp.setStatus(404);
        return;
    }
    UserDao userDao = new UserDao();
    User user = userDao.selectUserById(blog.getUserId());
    if(user == null) {
        resp.setStatus(404);
        return;
    }
    user.setPassword("");//返回密码有点不安全~
    resp.setContentType("application/json; charset=utf8");
    String ret = objectMapper.writeValueAsString(user);
    resp.getWriter().write(ret);
}
  • 返回404代表不存在，跳转到列表页~
1.3.3 前端代码
jQuery.ajax({
    type:"get",
    url:"user" + location.search,
    success: function(body) {
        jQuery(".card h3").text(body.username);
        jQuery(".card img").attr("src", body.image);
        jQuery(".card a").attr("href", body.git);
    },
    error: function(body) {
        location.href = "blog_list.html";
        alert("error");
    }
});

为了有区分，我们在数据库里添加几个user

insert into user values(null, '小空多尼', '123456', '马铭胜帅照.png', 'https://gitee.com/bitpg/projects');
insert into user values(null, '小空你几哇', '123456', '微信图片_20230225230636.png', 'https://gitee.com/HGtz2222');
insert into user values(null, '小斯密码塞', '123456', 'JavaEE.png', 'https://gitee.com/gaobo1');

在这里插入图片描述

1.4 退出登录功能

要求：

  1. 退出登录（注销登录信息）后，返回到登录页
  2. 并且登录页不会强制登录，并且直接访问其他页面会强制退出登录
1.4.1 前后端交互接口

请求：GET

向谁请求：/logout

响应：重定向到博客登录页

  • 最主要是在期间让session失效
  • 即打断映射关系

而请求只需要让a标签发出即可

1.4.2 后端代码
@WebServlet("/logout")
public class logoutServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        HttpSession session = req.getSession(false);
        if(session != null) {
            session.removeAttribute("user");
            //session.invalidate();也可以，但是这个是把整个session失效
        }
        resp.sendRedirect("blog_login.html");
    }
}
1.4.3 前端代码
  • 前端代码及其简单
    在这里插入图片描述

在这里插入图片描述

2. 博客编辑页

无非就是将所编辑的博客打包成blog存进数据库呗，其他都好办，除了博客的内容，是在md编辑器里的一个元素的内容，所以要通过一些特殊方法（官方给出的方法）

  1. 构造隐型文本框
  2. 内容同步到文本框
2.1 前后端交互接口

请求：POST

向谁请求：/blog

请求正文：application/x-www-from-urlencoded

  • ?title=xxx&content=xxxxx
  • 用户id，博客id，时间都可以在后端自己获取

响应：非空校验后重定向到主页，否则显示提交失败

2.2 后端代码

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    req.setCharacterEncoding("utf8");
    HttpSession session = req.getSession(false);
    String content = req.getParameter("content");
    String title = req.getParameter("title");
    if(session == null ||
       title == null || title.replaceAll(" ", "").equals("") ||
       content == null || content.replaceAll(" ", "").equals("")
      ) {
        resp.setContentType("text/html;charset=utf8");
        resp.getWriter().write("<h3>提交失败！</h3>");
        return;
    }
    User user = (User) session.getAttribute("user");
    Blog blog = new Blog();
    blog.setTitle(title);
    blog.setPostTime(new Timestamp(System.currentTimeMillis()));
    blog.setContent(content);
    blog.setUserId(user.getUserId());
    BlogDao blogDao = new BlogDao();
    blogDao.insert(blog);
    resp.sendRedirect("blog_list.html");
}

2.3 前端代码

在这里插入图片描述

  • 隐型输入框

在这里插入图片描述

  • 同步到输入框

补充，导航栏的头像我不更改，那是系统的创作者的头像/logo，所以不更改
在这里插入图片描述

文章到此结束！谢谢观看
可以叫我 小马，我可能写的不好或者有错误，但是一起加油鸭🦆！

后续推出更多功能，敬请期待！

通过这个项目可以很好的提高我们对前后端交互的认知！

本文代码链接：BlogSystem · 游离态/马拉圈2023年7月 - 码云 - 开源中国 (gitee.com)

s:103
关注
  • 30
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 26
    评论
专栏目录
ssm+vue的校园拼车系统 Javaee项目，ssm vue前后端分离项目
04-21
该项目采用了经典的SSM（Spring、SpringMVC、MyBatis）后端架构，结合Vue.js的现代前端开发模式，实现了前后端分离的设计，提高了系统的可维护性和用户体验。 【描述】提到的资源详情链接指向了一篇CSDN博客文章，...
基于Springboot的校园博客管理系统 Javaee项目，springboot项目
04-14
标题中的“基于Springboot的校园博客管理系统”是一个JavaEE项目的实例，它利用Spring Boot框架来构建。Spring Boot是Spring框架的一个扩展，旨在简化Spring应用程序的初始设置和开发过程。它通过提供默认配置、自动...
【JavaEE】前后端综合项目-博客系统（上）
Carefree_State的博客
07-07 800
本文章将结合学过的前后端知识，完善博客系统，将其变成真正的网站，上篇：博客列表页与博客详情页！
【JavaEE初阶】前端篇：综合案例 _ 博客系统（页面设计）
哎呀是小张啊 的博客
10-07 2519
这篇博客主要是关于 博客系统的页面设计 的一个简单的实现，利用好前面所介绍的前端知识，做出来了四个小页面，同时 也顺便复习和巩固了一下知识 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
【JavaEE】Cookie与Session的前后端交互-表白墙登录设计
Carefree_State的博客
06-05 981
本文章重点讲解Cookie与Session的前后端交互，一些API的使用，以及其应用：表白墙登录页，讲解图文并茂！
宿舍管理系统--前后端分离式项目架构流程复盘（三万字详解）
罗铠威的博客
08-08 914
本篇博客主要以巩固前后端分离式项目架构流程，通过开发一个宿舍管理系统为例，系统地梳理所学知识以及提高业务逻辑能力，欢迎大家来交流经验🐒这个是创建完成后的样子执行npm run serve命令,按回车进入浏览器，生成此页面，说明项目创建完成·1.直接删掉components文件下的HelloWorld.vue组件2.清理APP.vue默认组件内容：【🧸在index.js配置】 2.在🧸APP.vue中添加路由视图 【🎀配置Element UI】 🦓安装 Element UI 🪂在 mai
ssm+vue的精准扶贫管理 Javaee项目，ssm vue前后端分离项目
04-21
【标题】"ssm+vue的精准扶贫管理 Javaee项目"是一个综合性的软件开发实例，它结合了Spring、SpringMVC和MyBatis（SSM）框架以及前端的Vue.js技术，用于构建一个精准扶贫管理系统。这样的系统通常用于政府或非营利...
Springboot+vue地方废品回收机构管理系统（有报告） Javaee项目，springboot vue前后端分离项目
04-20
"Springboot+vue地方废品回收机构管理系统（有报告） Javaee项目，springboot vue前后端分离项目" 这个标题表明这是一个基于Javaee技术栈的项目，特别提到了Spring Boot和Vue.js两个核心框架，用于构建一个地方废品...
Springboot+vue的毕业论文管理系统（有报告） Javaee项目，springboot vue前后端分离项目
04-21
【标题】"Springboot+Vue的毕业论文管理系统"是一个基于JavaEE技术栈的现代Web应用程序，采用Spring Boot作为后端框架，Vue.js作为前端框架，实现了前后端分离的设计模式。这个系统是为满足高等教育机构对毕业论文...
JavaEE初阶 - IO、存储、硬盘、文件系统相关常识 （二）
明志の博客
07-15 679
IO 即，输入和输出。数据输入到计算机内存的过程即输入，反之输出到外部存储（比如数据库，文件，远程主机）的过程即输出。IO 操作通常涉及读取和写入数据。在计算机系统中，IO 操作可能涉及内存与外部设备之间的数据交换，也可能涉及 CPU 与外部设备之间的数据交换。IO 可分为同步 IO 和异步 IO。同步 IO 在操作完成前会阻塞执行线程，而异步 IO 允许执行线程在操作完成前继续执行其他任务。
JavaEE：@RequestMapping注解详解
linsc_05的博客
07-12 483
RequestMapping 是Spring Web MVC 应用程序中最常被用到的注解之一，它是用来注册接口的路由映射的。当一个用户访问一个URL的时候，将用户的请求对应到程序中的过程就叫映射。这边就是将用户的请求对应到程序中的 user 方法。
【JavaEE进阶】——SpringBoot 统⼀功能处理
m0_74438843的博客
07-15 1064
⼀般来说，适配器模式可以看作⼀种"补偿模式"，⽤来补救设计上的缺陷. 应⽤这种模式算是"⽆奈之举", 如果在设计初期，我们就能协调规避接⼝不兼容的问题, 就不需要使⽤适配器模式了 ，所以适配器模式更多的应⽤场景主要是对正在运⾏的代码进⾏改造, 并且希望可以复⽤原有代码实现新的功能. ⽐如版本升级等.⽅法， 这个⽅法需要返回⼀个布尔类型的值. 如果返回true, 就表⽰放⾏本次操作, 继续访问controller中的 ⽅法. 如果返回false，则不会放⾏(controller中的⽅法也不会执⾏).
【JavaEE】-- 网络编程基础概念（详解）
最新发布
明志の博客
07-17 848
协议分层，也就是上述类似的效果，把很多协议，按照功能分成不同的层级，每个层级都有对应的主线任务（目标/要解决的问题）上层协议会调用下层协议的功能，下层协议会给上层协议提供服务(不能够“越级调用)
JavaEE初阶 - 文件操作和IO（一）
明志の博客
07-14 1004
先来看看 File 类中的常见属性、构造方法和方法。
《JavaSE》---6.＜基础语法（Java三大程序控制结构）＞
m0_73456341的博客
07-14 831
本篇博客主要讲解Java基础语法中的三大结构，一种顺序结构、两大分支结构i（if-else、swich-case）、四大循环结构（while、do while、fot、foreach）
Spring Security 授权
persistence_PSH的博客
07-14 902
在 loadUserByUsername 方法，在查询数据库用户信息的时候，同时查询出用户的权限，这里以角色名代指权限。在 loadUserByUsername 方法，在查询数据库用户信息的时候，同时查询出用户的权限，这里以角色名代指权限。在 loadUserByUsername 方法，在查询数据库用户信息的时候，同时查询出用户的权限，这里以角色名代指权限。通过 RBAC 获取到用户的具体权限后，再通过 Security 的 用户-权限-资源 来进行权限控制。HttpSecurity 权限配置。
【Go系列】 Sync并发控制
u013379032的博客
07-14 1023
在上一篇文章中，我们介绍了goroutine和channel，理论上，通过channel可以实现并发控制，但是其他语言的开发者可能更习惯一些原子操作的库。当然Go语言也会提供这样的库，所以我们今天了解一下sync库。
day04：Redis和店铺营业状态设置
m0_69266818的博客
07-15 834
介绍了Redis命令和用java操作redis还有营业额状态接口的书写
Javaee前后端交互
10-19
JavaEE前后端交互是指前端页面与后端服务器之间的数据交互。在JavaEE中，前端页面通常使用HTML、CSS和JavaScript编写，而后端服务器则使用Java编写。前端页面通过发送请求（GET或POST）来获取或上传数据，后端服务器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 26
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

s:103

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值