项目5-博客系统3+接口完

1.实现显示用户信息

⽬前⻚⾯的⽤⼾信息部分是写死的. 形如

我们期望这个信息可以随着用户登陆而发生改变.
如果当前⻚⾯是博客列表⻚, 则显⽰当前登陆⽤⼾的信息.
如果当前⻚⾯是博客详情⻚, 则显⽰该博客的作者⽤⼾信息.
注意: 当前我们只是实现了显⽰⽤⼾名, 没有实现显⽰⽤⼾的头像以及⽂章数量等信息.

1.1 约定前后端交互接⼝

在博客列表⻚, 获取当前登陆的⽤⼾的⽤⼾信息
[请求]
/user/getUserInfo
[响应]
{
        userId: 1,
        username:test
        ...
}

 在博客详情⻚, 获取当前⽂章作者的⽤⼾信息

[ 请求 ]
/user/getAuthorInfo?blogId=1
[ 响应 ]
{
userId: 1,
username: test
}

1.2 实现服务器代码

1.controller包

在 UserController添加代码

2.Service包 

1.3 实现客⼾端代码

1. 修改 blog_list.html

在响应回调函数中, 根据响应中的⽤⼾名, 更新界⾯的显⽰

2. 修改 blog_detail.html

部署程序, 验证效果.

点击进去,发现有的用户未显示!!!

通过查看发现问题

获得的id有问题!!!

修改后重新测试!!!

成功!11 

因为上述修改的blog_list.html和blog_detail代码重合(只有url不一致),

因此可以将代码整合: 提取common.js

引⼊common.js

<script src="js/common.js"></script>  

blog_list.html 代码修改

blog_detail.html 代码修改  

重新测试 

成功!!!

2.实现⽤⼾退出

前端直接清除掉token即可.
实现客⼾端代码
<<注销>> 链接已经提前添加了onclick事件
在common.js中完善logout⽅法

测试!!!前端的书写注意空格

成功!!! 

3.实现发布博客

3.1 约定前后端交互接口

[ 请求 ]
/blog/ add
title= 标题 &content= 正⽂ ...
[ 响应 ]
{
        "code": 200 ,
        "msg": "",
        "data": true
}
// true 成功
// false 失败

 3.2 实现服务器代码

@RequestMapping("/add")public Result addNewBlog(String content,String title, HttpServletRequest httpServletRequest){//获取当前token,获取当前用户登录idString jwtToken=httpServletRequest.getHeader(Constant.USER_TOKEN);Integer loginUserId= JwtUtils.getUserIdFromToken(jwtToken);if(loginUserId==null||loginUserId<1){log.error("用户未登录");return Result.fail(Constant.RESULT_CODE_UNLOGIN,"用户未登录");}BlogInfo blogInfo=new BlogInfo();blogInfo.setUserId(loginUserId);blogInfo.setContent(content);blogInfo.setTitle(title);blogInfoService.insertBlog(blogInfo);Integer factorNum=blogInfoService.insertBlog(blogInfo);return Result.success(true);}
    public Integer insertBlog(BlogInfo blogInfo){return blogInfoMapper.insertNewBlog(blogInfo);}

3.3 editor.md 简单介绍

editor.md 是⼀个开源的⻚⾯ markdown 编辑器组件.
官⽹参⻅: http://editor.md.ipandao.com/
代码: https://pandao.github.io/editor.md/

3.3.1 使⽤⽰例

<link rel="stylesheet" href="editormd/css/editormd.css" />
<div id="test-editor"><textarea style="display:none;">### 关于 Editor.md
**Editor.md** 是⼀款开源的、可嵌⼊的 Markdown 在线编辑器(组件),基于 CodeMirror、
jQuery 和 Marked 构建。</textarea>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="editormd/editormd.min.js"></script>
<script type="text/javascript">$(function() {var editor = editormd("test-editor", {// width : "100%",// height : "100%",path : "editormd/lib/"});});
</script>
使⽤时引⼊对应依赖就可以了
"test-editor" 为 markdown编辑器所在的div的id名称
path为 editor.md依赖所在的路径

3.4 实现客⼾端代码

修改 blog_edit.html
完善submit⽅法
function submit() {$.ajax({type: "get",url: "/blog/add",data: {"title": $("#title").val(),"content": $("#content").val()},success: function(result){console.log(result);if(result.code==200 && result.data==true){alert("发表博客成功");location.href="blog_list.html";}else{alert(result.msg);return;}},error: function(error){if(error!=null && error.status==401){alert("⽤⼾未登录, 登录后再进⾏对应操作")location.href="blog_login.html";}}});}
部署程序, 验证效果.

 

3.5 修改详情⻚⻚⾯显⽰ 

此时会发现详情⻚会显⽰markdown的格式符号, 我们对⻚⾯进⾏也下处理

1. 修改 html 部分

把博客正⽂的 div 标签, 改成 <div id="detail"> 并且加上 style="background-color: transparent;"

2.修改博客正⽂内容的显⽰

$.ajax({type: "get",url: "/blog/getBlogDetail" + location.search,success: function (result) {//...代码省略editormd.markdownToHTML("detail", {markdown: result.data.content,});//...代码省略
});

 成功了!!!!!

4.实现删除/编辑博客 

进⼊⽤⼾详情⻚时, 如果当前登陆⽤⼾正是⽂章作者, 则在导航栏中显⽰ [编辑] [删除] 按钮, ⽤⼾点击时则进⾏相应处理.
需要实现两件事:
判定当前博客详情⻚中是否要显⽰[编辑] [删除] 按钮
实现编辑/删除逻辑.
删除采⽤逻辑删除, 所以和编辑其实为同⼀个接⼝.

4.1 约定前后端交互接⼝

1. 判定是否要显⽰[编辑] [删除] 按钮
修改之前的 获取博客 信息的接⼝, 在响应中加上⼀个字段.
loginUser 为 1 表⽰当前博客就是登陆⽤⼾⾃⼰写的.
[ 请求 ]
/blog/getBlogDetail?blogId=1
[ 响应 ]
{
"code": 200,
"msg": "",
"data": {
"id": 1,
"title": " 第⼀篇博客 ",
"content": "111 我是博客正⽂我是博客正⽂我是博客正⽂ ",
"userId": 1,
"loginUser": 1
"deleteFlag": 0,
"createTime": "2023-10-21 16:56:57",
"updateTime": "2023-10-21T08:56:57.000+00:00"
}
}

2. 修改博客

[ 请求 ]
/blog/ update
[ 参数 ]
Content-Type: application/json
{
"title": " 测试修改⽂章 ",
"content": " 在这⾥写下⼀篇博客 ",
"blogId": "4"
}
[ 响应 ]
{
"code": 200 ,
"msg": "",
"data": true
}

3.删除博客

[ 请求 ]
/blog/ delete ?blogId= 1
[ 响应 ]
{
        "code": 200 ,
        "msg": "",
        "data": true
}

4.2 实现服务器代码  

1.给 User 类新增⼀个字段

private Integer loginUser;

2.修改 BlogController  

2.1 只处理 "getBlogDeatail" 中的逻辑
2.2 增加 update/delete ⽅法, 处理修改/删除逻辑.  

接收JSON对象, 需要使⽤ @RequestBody 注解

4.3 实现客⼾端代码 

1. 判断是否显⽰[编辑] [删除]按钮

编辑博客逻辑:
修改blog_update.html
⻚⾯加载时, 请求博客详情

测试!!!

详情页总是出不来,经检查是拼接字符串漏了东西

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构9:栈和队列的相互实现

文章目录 队列实现栈头文件Queue.hMyStack.h 实现文件Queue.cMyStack.c 栈实现队列头文件Stack.hMyQueue.h 实现文件Stack.cMyQueue.c 队列实现栈 头文件 Queue.h #pragma once#include<stdio.h> #include<stdlib.h> #include<assert.h> #include<stdb…

工厂设备数据采集

在信息化浪潮席卷全球的时代背景下&#xff0c;工厂设备数据采集成为推动企业数字化转型和智能化升级的关键环节。HiWoo Box网关以其卓越的性能和便捷的操作&#xff0c;为工厂设备数据采集提供了强有力的支持。本文将深入探讨工厂设备数据采集的概念&#xff0c;阐述如何利用H…

企业用户管理passwd/sudo工作原理/chage/用户组/切换用户及提权管理/chown知识详谈-6000字

passwd 用户自己给自己设置密码&#xff1a;直接passwd root用户给普通用户设置密码&#xff1a;passwd用户名 stdin 从标准输入获取信息 批量创建用户&#xff1a; bash脚本&#xff1a; for n in {01…10} do useradd wulin$n done n先取01然后循环&#xff0c;再取再执行…

Java中的函数式编程1

Functional Programming In OOP 引言 函数式编程是一种编程泛型&#xff0c;将所有的运算都视为函数&#xff0c;只要输入相同的数据&#xff0c;就能得到稳定的输出。然而由于它的抽象程度高&#xff0c;离计算机硬件远&#xff0c;因此并没有被工业界广泛使用。然而在许多面…

掌握App用户注册情况,Xinstall来帮忙

在移动互联网时代&#xff0c;App已经成为企业与用户之间的重要桥梁。然而&#xff0c;对于许多App开发者来说&#xff0c;如何精准地获取和分析用户注册数据&#xff0c;一直是一个令人头疼的问题。幸运的是&#xff0c;有了Xinstall这样的一站式App全渠道统计服务商&#xff…

java八股文知识点讲解(个人认为讲的比较好的)

1、解决哈希冲突——链地址法&#xff1a;【第7章查找】19哈希表的查找_链地址法解决哈希冲突_哔哩哔哩_bilibili 2、解决哈希冲突——开放地址法 &#xff1a; 【第7章查找】18哈希表的查找_开放定址法解决哈希冲突_哔哩哔哩_bilibili 3、小根堆大根堆的创建&#xff1a;选择…

Ubuntu 忘记系统密码 如何修改密码

如果你忘记了Ubuntu系统的密码&#xff0c;你可以通过以下方法来修改密码&#xff1a; 通过GRUB引导菜单进入恢复模式 重启系统并进入GRUB引导菜单&#xff1a; 重启Ubuntu系统&#xff0c;并在启动时连续按Shift键&#xff08;或根据系统提示的其他按键&#xff09;&#xf…

Smart - Luogu —— 智能的洛谷

文章目录 安装 Stylus谷歌Edge 安装 Smart - Luogu使用尾声 安装 Stylus link 点击推荐下载&#xff0c;获取 crx 文件 谷歌 先点击右上角三个点&#xff0c;再点击扩展程序&#xff0c;然后点击管理扩展程序&#xff0c;进入管理扩展界面&#xff0c;把开发者模式选上&…

NL2SQL进阶系列(5):论文解读业界前沿方案(DIN-SQL、C3-SQL、DAIL-SQL、SQL-PaLM)、新一代数据集BIRD-SQL解读

NL2SQL进阶系列(5)&#xff1a;论文解读业界前沿方案&#xff08;DIN-SQL、C3-SQL、DAIL-SQL&#xff09;、新一代数据集BIRD-SQL解读 NL2SQL基础系列(1)&#xff1a;业界顶尖排行榜、权威测评数据集及LLM大模型&#xff08;Spider vs BIRD&#xff09;全面对比优劣分析[Text2…

【C++进阶】详解C++类型转换IO流

C类型转换及IO流 一&#xff0c;C语言的类型转换方式二&#xff0c;C的四种强制类型转换方式2.1 static_cast2.2 reinterpret_cast2.3 const_cast2.4 dynamic_cast 三&#xff0c;C语言的输入和输出四&#xff0c;C的标准IO流五&#xff0c;C文件IO流总结 这一节我们来讲解 C的…

数据结构OJ:设计循环队列

题目介绍 本题为LeetCode上的经典题目&#xff0c;题目要求我们设计一种循环队列&#xff0c;满足FIFO原则且队尾被连接在队首之后。 思路讲解 题目中介绍循环队列的好处是可以重复利用空间&#xff0c;所以我们很容易想到在初始化时即开辟指定大小的空间&#xff0c;之后便不…

策略模式:灵活调整算法的设计精髓

在软件开发中&#xff0c;策略模式是一种行为型设计模式&#xff0c;它允许在运行时选择算法的行为。通过定义一系列算法&#xff0c;并将每个算法封装起来&#xff0c;策略模式使得算法可以互换使用&#xff0c;这使得算法可以独立于使用它们的客户。本文将详细介绍策略模式的…

【小贪】大数据处理常用:Pyspark, Pandas

近期致力于总结科研或者工作中用到的主要技术栈&#xff0c;从技术原理到常用语法&#xff0c;这次查缺补漏当作我的小百科。主要技术包括&#xff1a; ✅数据库常用&#xff1a;MySQL, Hive SQL, Spark SQL✅大数据处理常用&#xff1a;Pyspark, Pandas⚪ 图像处理常用&#…

【每日刷题】Day16

【每日刷题】Day16 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 24. 两两交换链表中的节点 - 力扣&#xff08;LeetCode&#xff09; 2. 160. 相交链表 - 力扣&…

基于小程序实现的4s店管理系统

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】&#xff1a;Java 【框架】&#xff1a;ssm 【…

【C++11】智能指针

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;理解在C11中智能指针&#xff0c;自己能模拟实现 4 种智能指针 > 毒鸡汤&#xff1a;白日莫闲过&#xff0c;青春不再来。 > 专栏选自&#xff1…

【halcon】C# halcon 内存暴增 续,找到一个解决方案

这里写自定义目录标题 背景释放临时缓存具体的使用感受背景 在之前的文章《【halcon】C# halcon 内存暴增 》中我们提到了一些会导致内存暴增的原因。 其中一个就是使用了计算复杂的算子,且图片很大时,此时内存就会暴增,而且内存无法被释放。 这次,我在做一个项目时,用到…

深入理解负载均衡:原理及常用算法

摘要&#xff1a; 负载均衡在现代网络架构中扮演着至关重要的角色&#xff0c;它通过分配请求到多个服务器来提高系统的性能、可用性和可伸缩性。本文将介绍负载均衡的基本原理以及常用的负载均衡算法&#xff0c;帮助读者更好地理解和应用负载均衡技术。 引言 随着互联网的迅…

TP5使用group报错:1055 Expression #1 of SELECT list is not in GROUP

使用group报错 Mysql环境是5.7的, 使用了View进行了表连接, 进行了表连接 搬迁到本地后, 查询报错 Syntax error or access violation: 1055 Expression 解决方法1 配置 my.cnf(linux)文件 win下面是 mysql.ini文件 在 mysqld 里加上 sql_modeNO_ENGINE_SUBSTITUTION,STR…

L2-3 完全二叉树的层序遍历

完全二叉树的层序遍历 一个二叉树&#xff0c;如果每一个层的结点数都达到最大值&#xff0c;则这个二叉树就是完美二叉树。对于深度为 D 的&#xff0c;有 N 个结点的二叉树&#xff0c;若其结点对应于相同深度完美二叉树的层序遍历的前 N 个结点&#xff0c;这样的树就是完全…