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

news2024/9/22 1:20:34

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

在这里插入图片描述

文章目录

  • 【JavaEE】前后端综合项目-博客系统（下）
    • 1. 博客登录页
      • 1.1 用户名密码校验
        • 1.1.1 约定前后端交互接口
        • 1.1.2 后端代码
        • 1.1.3 前端代码
      • 1.2 登录信息记忆功能
        • 1.2.1 约定前后端交互接口
        • 1.2.2 后端代码
        • 1.2.3 前端代码
      • 1.3 显示用户/作者信息功能
        • 1.3.1 约定前后端交互接口
        • 1.3.2 后端代码
        • 1.3.3 前端代码
      • 1.4 退出登录功能
        • 1.4.1 前后端交互接口
        • 1.4.2 后端代码
        • 1.4.3 前端代码
    • 2. 博客编辑页
        • 2.1 前后端交互接口
      • 2.2 后端代码
      • 2.3 前端代码

【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. 核对成功再重定向
    • 并且设置会话（Session）
    • 博客传送门：【JavaEE】Cookie与Session的前后端交互-表白墙登录设计_s:103的博客-CSDN博客
@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)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/733147.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Kerberos-KafkaTool】在大数据Kerberos认证下使用KafkaTool工具

【Kerberos-KafkaTool】在大数据Kerberos认证下使用KafkaTool工具

【Kerberos-KafkaTool】在大数据Kerberos认证下使用KafkaTool工具 1&#xff09;安装 Kafka Tool 工具2&#xff09;配置 Kafka Tool 属性3&#xff09;添加相关配置3.1.新建连接3.2.Properties3.3.Security3.4.Advanced3.5.JAAS Config 1&#xff09;安装 Kafka Tool 工具 下…
阅读更多...
驱动开发 作业2

驱动开发 作业2

使用 ioctl 替换 write/read 控制 LED、蜂鸣器、马达、风扇&#xff0c;并使用 udev 来自动创建设备文件 完整代码目录&#xff0c;请看这个仓库依然使用之前 ARM 课程中的 common 中的结构体代码都差不多&#xff0c;就贴个 led.c &#xff0c;用户空间测试代码 test.c 和头文…
阅读更多...
多元回归预测 | Matlab主成分分析PCA降维，PLS偏小二乘回归预测。PCA-PLS回归预测模型

多元回归预测 | Matlab主成分分析PCA降维，PLS偏小二乘回归预测。PCA-PLS回归预测模型

文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 多元回归预测 | Matlab主成分分析PCA降维，PLS偏小二乘回归预测。PCA-PLS回归预测模型 评价指标包括:MAE、RMSE和R2等，代码质量极高，方便学习和替换数据。要求2018版本及以上。 部分源码 %% 清空环境变量 warn…
阅读更多...
硬件性能 - 磁盘瓶颈分析

硬件性能 - 磁盘瓶颈分析

简介 本文章通过Linux命令输出指标项&#xff0c;简单的介绍硬件资源-磁盘的性能瓶颈分析。其他硬件性能分析如下&#xff1a; 1. 硬件性能 - CPU瓶颈分析 2. 硬件性能 - 掌握内存知识 3. 硬件性能 - 网络瓶颈分析 目录 1. 测试磁盘性能 1.1. 读性能 1.2. 写性能 1.3. 同时…
阅读更多...
MachineLearningWu_5_MultipleLinearRegression

MachineLearningWu_5_MultipleLinearRegression

在进行多元线性回归的时候&#xff0c;我们需要规定一些基本法则。例如我们使用 x j ( i ) x_j^{(i)} xj(i)​来表示第i个sample的第j个特征。 将单元的线性回归变为多元线性回归&#xff0c;公式将变换为如下&#xff0c; 为了实现更简单的数学表达式&#xff0c;我们将表达式…
阅读更多...
haproxy负载均衡

haproxy负载均衡

目录 一.常见的web集群调度器 二.haproxy的概念 三.特性 四 图解haproxy 五 haproxy的配置文件详解 一.常见的web集群调度器 1.目前常见的web集群调度器分为软件和硬件 2.软件通常使用开源的lvs/haproxy/nginx 3.硬件一般使用比较多的是f5 也有国内的产品 二.haproxy的…
阅读更多...
LeetCode:合并区间

LeetCode:合并区间

题目&#xff1a;56. 合并区间 - 力扣&#xff08;Leetcode&#xff09; 讲这道题之前&#xff0c;先介绍一下sort函数的骚操作。 sort函数可以用于二维数组的排序&#xff01;&#xff01;&#xff01; 解释&#xff1a; 这里sort函数也是从小到大进行排序&#xff0c;只…
阅读更多...
确保无缝、安全的云转型

确保无缝、安全的云转型

随着云计算继续主导数字化转型&#xff08;这是理所当然的&#xff09;&#xff0c;组织面临着双重挑战&#xff1a;将运营无缝转移到云并确保这种转型的安全。 虽然云的采用保证了可扩展性、成本效率和生产力的提高&#xff0c;但保持警惕对于组织防范网络安全威胁和安全漏洞…
阅读更多...
webpack5搭建与基本概念

webpack5搭建与基本概念

webpack基础构建 新建文件夹进入文件夹查看是否安装node&#xff0c;命令&#xff1a;node-v创建package.json文件&#xff0c;命令&#xff1a;npm init -y安装webpack和webpack-cli&#xff0c;&#xff08;命令自动创建出package-lock.json文件和node_modules文件夹&#x…
阅读更多...
【智慧交通项目实战】《 OCR车牌检测与识别》（一）项目介绍

【智慧交通项目实战】《 OCR车牌检测与识别》（一）项目介绍

👨‍💻作者简介： CSDN、阿里云人工智能领域博客专家，新星计划计算机视觉导师，百度飞桨PPDE，专注大数据与AI知识分享。✨公众号：GoAI的学习小屋 ，免费分享书籍、简历、导图等，更有交流群分享宝藏资料，关注公众号回复“加群”或➡️点击链接 加群。 🎉专栏推荐： 点…
阅读更多...
指针进阶（1）（字符指针，指针数组，数组指针，函数指针）

指针进阶（1）（字符指针，指针数组，数组指针，函数指针）

目录 前言&#xff1a; 字符指针 TIP&#xff1a; 指针数组 数组指针 概念辨析 形式辨析 数组名的理解&#xff1a; 数组指针如何使用&#xff1f; 二维数组的传参 函数指针 函数的地址&#xff1a; 函数指针的形式 函数指针的作用 关于函数指针一些奇特的点 前言&…
阅读更多...
Java基础知识 之 java Applet 小训练

Java基础知识 之 java Applet 小训练

import java.applet.Applet; import java.awt.*; import java.util.Random;import static java.lang.Math.cos; import static java.lang.Math.sin;public class HelloWorldApplet extends Applet {public void paint(Graphics g) {// 将Graphics对象转换为Graphics2D类型java.…
阅读更多...
Linux 系统编辑 --文件IO

Linux 系统编辑 --文件IO

目录 1.文件 IO 1.1系统调用 1.2 C 标准库文件 IO 函数 1.3 open/close 函数 1.4 文件描述符表 1.7 read/write 函数 1.8 缓冲区 1.9 错误处理函数 2.0 阻塞、非阻塞 2.1 lseek 函数 辅助学习资料 参考书 1 &#xff1a;《 Unix 环境高级编程》 W.Richard St…
阅读更多...
MFC学习日记（二）——VS2012应用程序工程中文件的组成结构

MFC学习日记（二）——VS2012应用程序工程中文件的组成结构

上一篇我们用应用程序向导生成框架程序后&#xff0c;我们可以打开工程所在的文件夹看到以下以解决方案命名的文件夹&#xff0c;此文件夹中包含了几个文件和一个以工程名命名的子文件夹&#xff0c;这个子文件夹中又包含了若干个文件和一个res文件夹&#xff0c;创建工程时的选…
阅读更多...
Vue2:axios解决跨域的问题（vue2没有config情况下）

Vue2:axios解决跨域的问题（vue2没有config情况下）

在vue2上用axios发起Post模拟注册的时候&#xff0c;调用接口&#xff0c;提示报错&#xff1a; axios({method: post,url: http://1.12.254.80:8080/api/user/register,// url: /user/api/user/register,data: { // 请求体数据userAccount: userName,userPassword: pwd1,check…
阅读更多...
离线环境下安装微软Visual Studio 2022 生成工具

离线环境下安装微软Visual Studio 2022 生成工具

1. 前言 最近&#xff0c;在学习cython的时候&#xff0c;需要安装windows下的C/C编译、链接工具。开始觉得传统的msvc太大了&#xff0c;想要尝试Mingw&#xff0c;但是都是编译错误。无奈之下&#xff0c;还是要安装msvc。 微软提供了Visual Studio 2022 Build Tools &…
阅读更多...
MySQl数据库第五课 --------在SQl的简单命令--------学习学习

MySQl数据库第五课 --------在SQl的简单命令--------学习学习

作者前言 欢迎小可爱们前来借鉴我的gtiee秦老大大 (qin-laoda) - Gitee.com ———————————————————————————— 目录 数据库的简单介绍 1.数据储存 2.数据库类型 &#xff08;1&#xff09;.关系型数据库 &#xff08;2&#xff09;.非关系型数据库…
阅读更多...
大学英语六级相当于雅思考试多少分

大学英语六级相当于雅思考试多少分

雅思考试的难度&#xff0c;可以和大学英语六级进行对应&#xff0c;大家可以通过分数来基本确认雅思考试的难度系数。跟着小编来一起看看大学英语六级相当于雅思考试多少分&#xff1f; 英语六级相当于雅思多少分 大学英语六级和雅思没有直接的分数对应关系&#xff0c;一般大…
阅读更多...
部署LVS+Keepalived高可用集群

部署LVS+Keepalived高可用集群

目录 一、keepalived概述 1.1管理LVS负载均衡软件 1.2VRRP(Virtual Router Redundancy Protocol) 原理 二、keepalived服务的重要功能 2.1自动切换&#xff08;failover&#xff09; 2.2健康检查&#xff08;health checking&#xff09; 2.3高可用&#xff08;HA&#x…
阅读更多...
深度神经网络剪枝算法基础理论

深度神经网络剪枝算法基础理论

非结构化剪枝可获得更高的剪枝率与精度&#xff0c;但是其非结构化特征带来的随机连接使得往往需要专门的软、硬件设计来支持其推理加速&#xff0c;而在现有的边缘硬件上难以满足其应用条件。鉴于此&#xff0c;目前在剪枝领域的研究多集中在结构化剪枝上&#xff0c;如图1.11…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023