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

文章目录

  • 教你手把手完成博客系统（三）
        • 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的图

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

前端面试问题:子组件的某一个方法调用执行逻辑由父组件的属性状态变化来决定

前端面试问题:子组件的某一个方法调用执行逻辑由父组件的属性状态变化来决定

面试官&#xff1a;请你讲讲你在该项目中遇到的问题是什么&#xff1f;你怎么解决这个问题&#xff1f; 答&#xff1a;我的回答&#xff1a;该项目的实现过程中我确实遇到了问题&#xff1a;【我会给大家整理回答思路和角度&#xff0c;那那么遇到这样的问题也可借鉴这种思路…
阅读更多...
RAG架构的数据准备流程

RAG架构的数据准备流程

虽然现成的大型语言模型 (LLM) 功能强大&#xff0c;但企业发现&#xff0c;根据其专有数据定制 LLM 可以释放更大的潜力。检索增强生成 (RAG) 已成为这种定制的主要方法之一。RAG 模型将大型语言模型强大的语言理解能力与检索组件相结合&#xff0c;使其能够从外部数据源收集相…
阅读更多...
[Redis]String类型

[Redis]String类型

基本命令 set命令 将 string 类型的 value 设置到 key 中。如果 key 之前存在&#xff0c;则覆盖&#xff0c;无论原来的数据类型是什么。之前关于此 key 的 TTL 也全部失效。 set key value [expiration EX seconds|PX milliseconds] [NX|XX] 选项[EX|PX] EX seconds⸺使用…
阅读更多...
官宣！马斯克的xAI获60亿美元融资，估值240亿美元

官宣！马斯克的xAI获60亿美元融资，估值240亿美元

5月27日晚&#xff0c;马斯克旗下的大模型平台xAI在官网宣布获得60亿美元B轮融资&#xff0c;估值240亿美元。本次主要投资者包括Valor Equity Partners、红杉资本、国王控股、沙特王子-Bin Talal、Vy Capital等。 这也是大模型赛道史上最高单笔融资之一&#xff0c;超过Anthr…
阅读更多...
安全基础二

安全基础二

一、插件漏洞 统计使用了哪些插件这些插件有版本更新嘛检测这些插件是否存在已知漏洞 二、权限提升和持久化 SSRF&#xff08;Server-Side Request Forgery&#xff0c;服务器端请求伪造&#xff09; 想象一下&#xff0c;你是一个公司的内部员工&#xff08;服务器&#x…
阅读更多...
主副坐标轴作图（即双坐标轴）

主副坐标轴作图（即双坐标轴）

主副坐标轴显示&#xff1a; import numpy as np from matplotlib import pyplot as plt plt.rcParams[font.sans-serif][SimHei] plt.rcParams[axes.unicode_minus] False xnp.arange(0.1,10,0.01) data1np.exp(x) data2np.log(x) fig,ax1plt.subplots() #subplots一定要带s…
阅读更多...
linux安装mysql后，配置mysql，并连接navicate软件

linux安装mysql后，配置mysql，并连接navicate软件

Xshell连接登陆服务器 输入全局命令 mysql -u root -p 回车后&#xff0c;输入密码&#xff0c;不显示输入的密码 注意mysql服务状态&#xff0c;是否运行等 修改配置文件my.cnf&#xff0c;这里没找到就找my.ini&#xff0c;指定有一个是对的 find / -name my.cnf 接下…
阅读更多...
6岁开始学习打字，10岁学懂文字编程

6岁开始学习打字，10岁学懂文字编程

​你们有没有想过打字速度会影响Coding 编程能力&#xff1f; 疫情期间&#xff0c;全国中小学均不定期停止面授课程&#xff0c;改为网上教学。顷刻之间&#xff0c;电脑、智能手机等即时通讯软件成为每日学习的「良师益友」&#xff0c;常伴左右。 同时&#xff0c;学生也由…
阅读更多...
【管理咨询宝藏116】某大型国有集团公司战略落地保障方案

【管理咨询宝藏116】某大型国有集团公司战略落地保障方案

本报告首发于公号“管理咨询宝藏”&#xff0c;如需阅读完整版报告内容&#xff0c;请查阅公号“管理咨询宝藏”。 【管理咨询宝藏116】某大型国有集团公司战略落地保障方案 【格式】PDF版本 【关键词】战略落地、大型国企、战略报告 【核心观点】 - 资产规模以提高资产质量、…
阅读更多...
C++入门 ros自定义msg话题通信

C++入门 ros自定义msg话题通信

一、 开发环境 ubuntu20.04 ros版本noetic 参考视频 https://www.bilibili.com/video/BV1Ci4y1L7ZZ/?p52&spm_id_from333.1007.top_right_bar_window_history.content.click&vd_source4cd1b6f268e2a29a11bea5d2568836ee 二、 编写msg文件 在功能包下面创建msg文件夹…
阅读更多...
UI卡片设计入门：一步步教你成功逆袭

UI卡片设计入门：一步步教你成功逆袭

UI卡片设计是目前流行的UI设计风格。UI卡片设计是对网页中的卡进行分析和重构的设计&#xff0c;那么在设计UI卡片时应该注意什么呢&#xff1f;目前流行哪种UI卡片设计&#xff1f;收集这个UI卡片设计避坑指南&#xff0c;菜鸟也可以反击成UI设计老板~ UI卡片是什么&#xff…
阅读更多...
Unity射击游戏开发教程：（28）敌人被摧毁时掉落的能量提升

Unity射击游戏开发教程：（28）敌人被摧毁时掉落的能量提升

在这篇文章中，我将介绍如何在敌人被摧毁时产生能量提升。 首先，有一个生成管理器，负责生成敌人和能量提升。我正在对其进行转换，以便当敌人被摧毁时，有可能会掉落能量。本文将仅介绍当敌人被摧毁时掉落的能量道具。我将介绍为电源添加一个平衡的生成系统。 Spawn Manager…
阅读更多...
降压芯片SL3036耐压100V 电机驱动板应用48-85V降压12V 1A以内

降压芯片SL3036耐压100V 电机驱动板应用48-85V降压12V 1A以内

降压芯片SL3036以其卓越的耐压特性&#xff0c;能够在高达100V的电压环境下稳定运行&#xff0c;为电机驱动板等应用提供了强大的电源支持。这款芯片在电机驱动板中发挥着至关重要的作用&#xff0c;特别是在那些需要48-85V宽范围输入电压并降压至稳定12V输出的场景中&#xff…
阅读更多...
【MySQL数据库】：MySQL内置函数

【MySQL数据库】：MySQL内置函数

目录 日期函数 current_date 函数 current_time 函数 current_timestamp 函数 now 函数 date 函数 date_add 函数 date_sub 函数 datediff 函数 字符串函数 charset 函数 concat 函数 instr 函数 ucase 函数 lcase 函数 left 函数 length 函数 replace…
阅读更多...
作为一名前端工程师，该如何控制高并发请求呢？「如果有更好的方案，欢迎讨论」

作为一名前端工程师，该如何控制高并发请求呢？「如果有更好的方案，欢迎讨论」

假如现在有几十、上百个请求&#xff0c;我们该如何去控制这么高的并发呢&#xff1f; 给你一分钟时间&#xff0c;稍作思考 &#xff5e; &#x1f914; 此场景有很多&#xff0c;比如 图片或文件批量下载、RSSHub高速抓取内容。。。 第一想法是不是请求池&#xff01;&…
阅读更多...
代码随想录-算法训练营day46【动态规划08：单词拆分、多重背包！背包问题总结篇！】

代码随想录-算法训练营day46【动态规划08：单词拆分、多重背包！背包问题总结篇！】

代码随想录-035期-算法训练营【博客笔记汇总表】-CSDN博客 第九章 动态规划part08● 139.单词拆分 ● 关于多重背包&#xff0c;你该了解这些&#xff01; ● 背包问题总结篇&#xff01; 详细布置 关于 多重背包&#xff0c;力扣上没有相关的题目&#xff0c;所以今天大家的…
阅读更多...
unity回到低版本报错解决

unity回到低版本报错解决

用高版本2022打开过后的再回到2020就报了一个错。 报错如下&#xff1a; Library\PackageCache\com.unity.ai.navigation1.1.5\Runtime\NavMeshSurface.cs 看了一下是Library&#xff0c;然后我删除了整个Library文件夹&#xff0c;重启启动生成Library&#xff0c;然后还是…
阅读更多...
调试面对面翻译小程序

调试面对面翻译小程序

调试面对面翻译小程序 文章目录 调试面对面翻译小程序预览1.拉取项目2.在微信开发者工具打开使用 微信版本要求微信同声传译插件支持功能 此demo用于学习 预览 1.拉取项目 git clone https://github.com/Tencent/Face2FaceTranslator或者&#xff08;加速镜像&#xff09; git …
阅读更多...
环境土壤物理模型HYDRUS1D/2D/3D建模方法与案例教程

环境土壤物理模型HYDRUS1D/2D/3D建模方法与案例教程

原文链接&#xff1a;环境土壤物理模型HYDRUS1D/2D/3D建模方法与案例教程https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247605540&idx6&sn22a128de401e146d21c9f2487d589a3b&chksmfa821cc3cdf595d54e46be8247a67eda290349039c85b8e8542aaf34509dae0bb…
阅读更多...
2024年zoom会议受主持人账户限制影响，无法加入会议。(错误代码13215)

2024年zoom会议受主持人账户限制影响，无法加入会议。(错误代码13215)

问题一、老师&#xff0c;你好!我的zoom账户&#xff0c;刚开始注册后可以登录&#xff0c;但是现在登录不了了。代码1044。其次&#xff0c;我如果通过网页版设置会议号&#xff0c;别人也加入不了。代码13215。 这两个问题一般会同时出现。登录失败。(错误代码:1044)一般是创…
阅读更多...
最新文章

Copyright @ 2022~2023