【项目】教你手把手完成博客系统（三）显示用户信息 | 实现退出登录 | 实现发布博客

news2024/9/20 17:35:29

文章目录

  • 教你手把手完成博客系统（三）
        • 7.实现显示用户信息
            • 1.约定前后端交互接口
            • 2.前端通过ajax发起请求
            • 3.服务器处理请求
        • 8.实现退出登录
            • 1.约定前后端的接口
            • 2.前端发起请求
            • 3.服务器处理请求
        • 9.实现发布博客
            • 1.约定前后端的交互接口
            • 2.前端构造请求
            • 3.服务器处理请求

教你手把手完成博客系统（三）

源码在文末~
在这里插入图片描述

7.实现显示用户信息

  • 在博客列表页获取到是那个用户登录的

  • 在博客详情页获取到是哪个用户书写的

1.约定前后端交互接口
//博客列表页
//请求
GET /userInfo
//响应
HTTP/1.1 200 OK
application/json
{
	userId:1
	username:"zhangsan"
}

//博客详情页
//请求
GET /authorInfo?blogId=1
//响应
HTTP/1.1 200 OK
application/json
{
    userId:1
	username:"zhangsan"
}
2.前端通过ajax发起请求
    //定义一个函数，获取当前登录的用户信息
    function getUserInfo(){
        $.ajax({
            type:'get',
            url:'userInfo',
            success:function(body){
                //把拿到的相应数据,显示在页面上
                let h3 = document.querySelector('.card h3');
                h3.innerHTML=user.username;
            }
        })
    }
    getUserInfo();

  function getAuthorInfo() {
    $.ajax({
      type: 'get',
      url: 'getAuthorInfo' + location.search,
      success: function (user) {
        let h3 = document.querySelector('.card h3');
        h3.innerHTML=user.username;
      }
    });
  }
  getAuthorInfo()
3.服务器处理请求
package servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import model.*;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: Lenovo
 * Author: Weng-Jiaming
 * Date: 2024-05-22
 * Time: 21:02
 */
@WebServlet("/html/authorInfo")
public class AuthorInfoServlet extends HttpServlet {
    private ObjectMapper objectMapper = new ObjectMapper();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.先拿到请求中的blogId
        String blogId = req.getParameter("blogId");
        if (blogId == null) {
            resp.setContentType("text/html;charset=utf8");
            resp.getWriter().write("请求中缺少blogId");
            return;
        }
        //2.在blog表中，查询到对应的blog对象
        BlogDao blogDao = new BlogDao();
        Blog blog = blogDao.getBlog(Integer.parseInt(blogId));
        if (blog == null) {
            resp.setContentType("text/html;charset=utf8");
            resp.getWriter().write("blogId没有找到");
            return;
        }
        //3.根据blog对象中的userId,从user表中查到对应的作者
        UserDao userDao = new UserDao();
        User user = userDao.getUserById(blog.getUserId());
        if (user == null) {
            resp.setContentType("text/html;charset=utf8");
            resp.getWriter().write("userId没有找到");
            return;
        }
        //4.把user对象返回到浏览器
        user.setPassword("");
        String respJson = objectMapper.writeValueAsString(user);
        resp.setContentType("application/json;charset=utf8");
        resp.getWriter().write(respJson);

    }
}


package servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import model.User;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: Lenovo
 * Author: Weng-Jiaming
 * Date: 2024-05-22
 * Time: 20:13
 */
@WebServlet("/html/userInfo")
public class UserInfoServlet extends HttpServlet {
    private ObjectMapper objectMapper = new ObjectMapper();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //从会话中，拿到用户信息进行返回
        HttpSession session = req.getSession(false);
        if (session == null) {
            //未登录
            resp.setContentType("text/html;charset=utf8");
            resp.getWriter().write("当前用户未登录");
            return;
        }
        User user = (User) session.getAttribute("user");
        if (user==null){
            //未登录
            resp.setContentType("text/html;charset=utf8");
            resp.getWriter().write("当前用户未登录");
            return;
        }
        //避免返回密码等安全信息
        user.setPassword("");
        //两个都有，把user对象转成json,返回给浏览器
        String respJson = objectMapper.writeValueAsString(user);
        resp.setContentType("application/json;charset=utf8");
        resp.getWriter().write(respJson);
    }
}
8.实现退出登录

在这几个页面的导航栏中，都有“注销”按钮

通过点击，触发GET请求，服务器会把会话里的user这个Attribute进行删除

        HttpSession session = req.getSession(false);
        if (session == null) {
            //未登录
            resp.setContentType("text/html;charset=utf8");
            resp.getWriter().write("当前用户未登录");
            return;
        }
        User user = (User) session.getAttribute("user");
        if (user == null) {
            //未登录
            resp.setContentType("text/html;charset=utf8");
            resp.getWriter().write("当前用户未登录");
            return;
        }

​ 在判定用户是否登录的逻辑中，要同时验证 会话存在 和 user这个Attributey也存在。只要破坏一个，就可以使登录状态发生改变。通过removeAttribute这样的方法，可以将user这个Attributey删除

1.约定前后端的接口
//请求
GET /logout
//响应
直接重定向到博客登录页
HTTP/1.1 302
Location:login.html
2.前端发起请求

直接给这个a标签设置href属性

    <a href="logout">注销</a>
3.服务器处理请求
package servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: Lenovo
 * Author: Weng-Jiaming
 * Date: 2024-05-22
 * Time: 21:46
 */
@WebServlet("/html/logout")
public class LogoutServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.拿到session对象
        HttpSession session = req.getSession(false);
        if (session==null){
            //如果不存在
            resp.setContentType("text/html;charset=utf8");
            resp.getWriter().write("当前您尚未登录");
            return;
        }
        //2.把会话中的user的属性删除
        session.removeAttribute("user");
        //3.跳转到登录页
        resp.sendRedirect("login.html");
    }
}
9.实现发布博客

点击提交的时候，构造请求，把标题和正文都传输到服务器。服务器把这些数据都存入数据库

这里采用form构造

1.约定前后端的交互接口
//请求
POST /blog
Content-Type:x-www-form-urlencoded
title=这是标题&content=这是正文
    
//响应
HTTP/1.1 302
Location:blog_list.html
2.前端构造请求
        <form action="blog" method="post">
            <div class="title">
                <input type="text" name="title">
                <button>发布文章</button>
            </div>
            <div id="editor">
                <!-- 这正文这里,用隐藏的textarea标签 -->
                <!-- 多行编辑框 把name属性加到textarea上 -->
                <textarea name="content" style="display: none;"></textarea>
            </div>
        </form>



    let edit = editormd('editor', {
        width: "90%",
        height: "calc(100% - 60px)",
        path: "./editor.md/lib/",
        markdown: "###开始编写博客",
        saveHTMLToTextarea:true
        // 会把在编辑器中输入的内容，在textarea里也保存一份
    })
3.服务器处理请求
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.读取请求的参数
        req.setCharacterEncoding("utf8");
        String title = req.getParameter("title");
        String content = req.getParameter("content");
        if (title == null || title.length() == 0 || content == null || content.length() == 0) {
            resp.setContentType("text/html;charset=utf8");
            resp.getWriter().write("当前标题或内容为空，无法发布");
            return;
        }
        //2.构造blog对象
        Blog blog = new Blog();
        blog.setTitle(title);
        blog.setContent(content);
        //从会话中获取
        HttpSession session = req.getSession(false);
        if (session==null){
            resp.setContentType("text/html;charset=utf8");
            resp.getWriter().write("当前用户未登录");
            return;
        }
        User user = (User) session.getAttribute("user");
        if (user==null){
            resp.setContentType("text/html;charset=utf8");
            resp.getWriter().write("当前用户未登录");
            return;
        }
        blog.setUserId(user.getUserId());
        //3.插入到数据库中
        BlogDao blogDao = new BlogDao();
        blogDao.insert(blog);
        //4.返回一个302重定向报文
        resp.sendRedirect("blog_list.html");
    }

查看源代码，请点击：博客系统完整代码

点击移步博客主页，欢迎光临~

偷cyk的图

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

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

相关文章

.NET调用阿里云人脸核身服务端 (ExecuteServerSideVerification)简易流程保姆级教学

.NET调用阿里云人脸核身服务端 (ExecuteServerSideVerification)简易流程保姆级教学

需要注意的是&#xff0c;以下内容仅限基础调用 功能说明 该功能是输入核验人的姓名和身份证以及人脸照片&#xff0c;去阿里库里面匹配&#xff0c;3个信息是否一致&#xff0c;一致则验证通过&#xff0c;需要注意的是&#xff0c;人脸有遮挡&#xff0c;或者刘海&#xff0…
阅读更多...
三分钟“手撕”顺序表与ArrayList

三分钟“手撕”顺序表与ArrayList

前言&#xff1a; 实现顺序表的代码放开头&#xff0c;供大家更好的查阅&#xff0c;每个方法都有代码的实现。 其次我会讲解Java自带的ArrayList的实例&#xff0c;扩容机制ArrayList使用方法&#xff0c;遍历以及它的优缺点。 目录 一、自己实现的顺序表 二、Java的ArrayLi…
阅读更多...
Flutter中如何让Android的手势导航栏完全透明？

Flutter中如何让Android的手势导航栏完全透明？

Flutter 开发中 安卓机器都有 像ios 的手势操作栏&#xff0c; 也就是屏幕底下的 那条线。 但这条线默认是有颜色的 &#xff08;像下面这样&#xff09; 一、全屏幕方式 void main() {// 全屏沉浸式SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []…
阅读更多...
解决Error: error:0308010C:digital envelope routines::unsupported的四种解决方案

解决Error: error:0308010C:digital envelope routines::unsupported的四种解决方案

问题描述&#xff1a; 报错&#xff1a;Error: error:0308010C:digital envelope routines::unsupported 报错原因&#xff1a; 主要是因为 nodeJs V17 版本发布了 OpenSSL3.0 对算法和秘钥大小增加了更为严格的限制&#xff0c;nodeJs v17 之前版本没影响&am…
阅读更多...
ROS学习笔记（16）：夹缝循迹

ROS学习笔记（16）：夹缝循迹

0.前言 在笔记的第15期对巡墙驾驶的原理进行了简单讲解&#xff0c;而这期我们来讲一下夹缝循迹&#xff0c;也常被叫follow the gap&#xff0c;也更新一些概念。 1.探索式路径规划与避障 1.概念 无预先建图的路径规划叫探索式路径规划&#xff0c;例如巡墙循迹和夹缝循迹&…
阅读更多...
解决 Spring Boot 应用启动失败的问题：Unexpected end of file from server

解决 Spring Boot 应用启动失败的问题：Unexpected end of file from server

解决 Spring Boot 应用启动失败的问题&#xff1a;Unexpected end of file from server 博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的…
阅读更多...
启动docker报错：Failed to listen on Docker Socket for the API.

启动docker报错：Failed to listen on Docker Socket for the API.

说明&#xff1a; 1、安装部署docker完成后&#xff0c;启动docker报错&#xff1a;Failed to listen on Docker Socket for the API&#xff0c;如下图所示&#xff1a; 2、将SocketGroupdocker更改成&#xff1a;SocketGrouproot即可 一、解决方法&#xff1a; 1、执行命令…
阅读更多...
nodejs安装配置

nodejs安装配置

nodejs安装 打开nodejs官网(https://nodejs.org/en/download/package-manager)&#xff0c;参考安装步骤操作。 更新镜像源 输入以下命令&#xff0c;将npm的镜像源设置为淘宝镜像。网上资料中&#xff0c;淘宝镜像地址多为https://registry.npm.taobao.org&#xff0c;这个…
阅读更多...
OpenBayes 一周速览｜TripoSR 开源：1 秒即 2D 变 3D、经典 GTZAN 音乐数据集上线

OpenBayes 一周速览｜TripoSR 开源：1 秒即 2D 变 3D、经典 GTZAN 音乐数据集上线

公共资源速递 This Weekly Snapshots &#xff01;5 个数据集&#xff1a; FER2013 面部表情识别数据集 GTZAN 音乐流派分类数据集 MVTec-AD 工业异常检测数据集 UCAS-AOD 遥感目标检测数据集 Oxford 102 Flowers 花卉图片数据集 3 个教程&#xff1a; Latte 全球首个开…
阅读更多...
C++青少年简明教程：switch语句

C++青少年简明教程：switch语句

C青少年简明教程&#xff1a;switch语句 在C中&#xff0c;switch语句用于基于一个表达式的值来执行不同的代码块。这个表达式通常是一个整数类型&#xff08;如int&#xff0c;char&#xff0c;或枚举类型&#xff09;&#xff0c;并且case标签必须是整数常量表达式。 语法格…
阅读更多...
VBA高级应用30例：实现在列表框内及列表框间实现数据拖动

VBA高级应用30例：实现在列表框内及列表框间实现数据拖动

《VBA高级应用30例》&#xff08;版权10178985&#xff09;&#xff0c;是我推出的第十套教程&#xff0c;教程是专门针对高级学员在学习VBA过程中提高路途上的案例展开&#xff0c;这套教程案例与理论结合&#xff0c;紧贴“实战”&#xff0c;并做“战术总结”&#xff0c;以…
阅读更多...
【学习记录】服务器转发使用tensorboard

【学习记录】服务器转发使用tensorboard

场景 代码在服务器上运行&#xff0c;想使用tensorboard查看训练的过程。 但是服务器上不能直接访问地址&#xff0c;所以要转发端口到本地&#xff0c;从而在本地网页中能够打开tensorboard。 参考&#xff1a;https://zhuanlan.zhihu.com/p/680596384 这时我们需要建立本地…
阅读更多...
cad角度如何精确到0.1

cad角度如何精确到0.1

可以通过更改角度精度的方式把角度的标注精确到小数点后几位&#xff0c;具体方法如下&#xff1a; 1、打开一个CAD文档&#xff0c;在文档中画一个角&#xff0c;如下图&#xff1a; 文章源自设计学徒自学网-https://www.sx1c.com/47920.html 2、给此角进行角度的标注&#…
阅读更多...
网络工程师---第四十二天

网络工程师---第四十二天

1、基于子网的vlan划分配置步骤是什么&#xff1f; 2、基于端口的vlan划分配置步骤是什么&#xff1f; 3、基于MAC地址的vlan划分配置步骤是什么&#xff1f; 4、请简述无线局域网的组网方式有哪几种&#xff0c;区别是什么&#xff1f; 5、请简述堆叠、级联和集群作用和区别是…
阅读更多...
多重继承引起的二义性问题和虚基类

多重继承引起的二义性问题和虚基类

多重继承容易引起的问题就是因为继承的成员同名而产生的二义性问题。 例&#xff1a;类A和类B中都有成员函数display和数据成员a,类C是类A和类B的直接派生类 情况一&#xff1a; class A {public:int a;void display(); }; class B {public:int a;void display; }; class C:…
阅读更多...
基于STM32实现智能园艺系统

基于STM32实现智能园艺系统

目录 引言环境准备智能园艺系统基础代码示例&#xff1a;实现智能园艺系统 土壤湿度传感器数据读取水泵控制温湿度传感器数据读取显示系统用户输入和设置应用场景&#xff1a;智能农业与家庭园艺问题解决方案与优化收尾与总结 1. 引言 本教程将详细介绍如何在STM32嵌入式系统…
阅读更多...
服务器软件架构演进

服务器软件架构演进

服务器软件架构演进 背景介绍阶段一&#xff1a;单机部署阶段二&#xff1a;应用与数据分离部署阶段三&#xff1a;启用缓存优化阶段四&#xff1a;启用应用服务器集群阶段五&#xff1a;数据库读写分离阶段六&#xff1a;启用反向代理及CDN加速阶段七&#xff1a;启用分布式文…
阅读更多...
AIGC 007-E4T基于编码器的域调优用于文本到图像模型的快速个性化！

AIGC 007-E4T基于编码器的域调优用于文本到图像模型的快速个性化！

AIGC 007-E4T基于编码器的域调优用于文本到图像模型的快速个性化&#xff01; 文章目录 0 论文工作1 论文方法2 效果 0 论文工作 这篇论文提出了一种使用领域特定编码器来快速将文本到图像模型适配到新领域的方案。这种被称为基于编码器的领域微调 (E4T) 的方法&#xff0c;专…
阅读更多...
SAP HCM 标准程序如何定位内表赋值 ABAP DEBUG SCRIPT

SAP HCM 标准程序如何定位内表赋值 ABAP DEBUG SCRIPT

Complacency is the enemy of study 学习的敌人是自己的满足。 标准内表定位代码位置!!! 不知道大家有没有尝试体会过debug标准程序，debug过程中发现SAP标准的内表不知道什么时候赋值，或者类的静态属性什么时候改变的，本文通过ABAP DEBUG SCRIPT的方式快速定位内表赋值或者类…
阅读更多...
音视频开发—FFmpeg打开麦克风，采集音频数据

音视频开发—FFmpeg打开麦克风，采集音频数据

文章目录 1.使用命令行实现采集PCM数据2.使用代码实现3.播放PCM4.PCM转换为WAV 1.使用命令行实现采集PCM数据 确保你的系统有FFmpeg安装。你可以通过在终端运行ffmpeg -version来检查是否已安装。 找出你的麦克风设备名。在Linux中&#xff0c;你可以使用arecord -l命令列出所…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023