项目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.rhkb.cn/news/308193.html

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

相关文章

MySQL-触发器:触发器概述、触发器的创建、查看删除触发器、 触发器的优缺点

触发器 触发器1. 触发器概述2. 触发器的创建2.1 创建触发器语法2.2 代码举例 3. 查看、删除触发器3.1 查看触发器3.2 删除触发器 4. 触发器的优缺点4.1 优点4.2 缺点4.3 注意点 注&#xff1a;此为笔者学习尚硅谷-宋红康MySQL的笔记&#xff0c;其中包含个人的笔记和理解&#…

Node Sass does not yet support your current environment

Node Sass does not yet support your current environment 报错是node-sass的版本出现问题了&#xff0c;node-sass的版本是由node版本决定。 查看node和node-sass的版本的版本&#xff0c;进行版本匹配

读所罗门的密码笔记19_治理模式

1. 解决方案 1.1. 全球人工智能的环境错综复杂&#xff0c;它严重依赖于价值观&#xff0c;且关系重大 1.2. 即使是与大家同仇敌忾的问题做斗争&#xff0c;也往往无法在国际社会中取得最佳效果 1.3. OPCW&#xff08;禁止化学武器组织&#xff09;已经帮助限制了化学武器的…

数字乡村发展新模式:科技创新引领农业现代化与乡村振兴协同发展

随着信息技术的飞速发展&#xff0c;数字乡村已成为新时代农业现代化与乡村振兴协同发展的新模式。科技创新作为推动这一模式的核心动力&#xff0c;正引领着乡村产业结构的优化升级&#xff0c;促进农村经济的全面振兴&#xff0c;让农民在现代化的进程中共享发展成果。 一、科…

浮点数的表示

王道考研ppt总结&#xff1a; 二、个人理解 浮点数解决的是定点数的位数局限&#xff0c;导致表示范围有限的问题 阶码&#xff1a;由阶符和数值部分组成&#xff0c;阶符为&#xff0c;小数点向左移动&#xff0c;否则向右移动&#xff1b;数值部分&#xff0c;是底数的几次幂…

机器人坐标系转换之从世界坐标系到局部坐标系

三角函数实现 下面是代码c和python实现&#xff1a; #include <iostream> #include <cmath>struct Point {double x;double y; };class RobotCoordinateTransform { private:Point origin; // 局部坐标系的原点在世界坐标系中的坐标public:RobotCoordinateTransfo…

开源项目one-api的k8s容器化部署(上)-- 制作镜像及部署准备

一、背景 最近需要对开源项目one-api进行k8s容器化部署&#xff0c;主要分以下几个步骤&#xff1a; 制作docker镜像申请mysql和redis数据库docker-compose部署方式k8s部署方式 整个的篇幅比较长&#xff0c;将会分成上下两篇来阐述。 二、制作docker镜像 开源项目one-api…

[目标检测] OCR: 文字检测、文字识别、text spotter

概述 OCR技术存在两个步骤&#xff1a;文字检测和文字识别&#xff0c;而end-to-end完成这两个步骤的方法就是text spotter。 文字检测数据集摘要 daaset语言体量特色MTWI中英文20k源于网络图像&#xff0c;主要由合成图像&#xff0c;产品描述&#xff0c;网络广告(淘宝)MS…

【C Hash Map from Redis】

将Redis源码中的哈希表底层逻辑提取&#xff0c;并进行最小demo级测试将对应文件抽出&#xff0c;通过宏替换等方式保证源码编译通过main.c编写测试demo &#xff0c;注册哈希函数和值比较函数&#xff08;必选项&#xff09; /* Hash Tables Implementation.** This file imp…

【spring】AOP切面注解学习(二)

文接上篇&#xff1a;【spring】AOP切面注解学习&#xff08;一&#xff09; AOP切面注解测试示例代码 示例代码 一 maven的pom文件导入 <dependency><groupId>org.springframework</groupId><artifactId>spring-aop</artifactId></depende…

某次众测的加解密对抗

前言 起源于某次众测中&#xff0c;遇到请求包响应包全密文的情况&#xff0c;最终实现burp中加解密。 用到的工具有 sekiro&#xff08;rpc转发&#xff09;flask&#xff08;autodecoder自定义接口&#xff09;autodecoder&#xff08;burp插件转发&#xff09; debug部分…

说说我理解的数据库中的Schema吧

一、SQL标准对schema如何定义&#xff1f; ISO/IEC 9075-1 SQL标准中将schema定义为描述符的持久命名集合&#xff08;a persistent, named collection of descriptors&#xff09;。 大部分的网上资料定义Schema如下&#xff1a; schema是用来组织和管理数据的一种方式。它…

【LAMMPS学习】八、基础知识(2.7)NEMD 模拟

8. 基础知识 此部分描述了如何使用 LAMMPS 为用户和开发人员执行各种任务。术语表页面还列出了 MD 术语&#xff0c;以及相应 LAMMPS 手册页的链接。 LAMMPS 源代码分发的 examples 目录中包含的示例输入脚本以及示例脚本页面上突出显示的示例输入脚本还展示了如何设置和运行各…

Linux的学习之路:9、冯诺依曼与进程(1)

摘要 本章主要是说一下冯诺依曼体系结构和进程的一部分东西。 目录 摘要 一、冯诺依曼体系结构 二、操作系统的概念 三、设计OS的目的 四、管理 五、进程的基本概念 六、PCB 七、在Linux环境下查看进程 八、使用代码创建进程 九、思维导图 一、冯诺依曼体系结构 如…

【每日一算】冒泡算法

冒泡算法就是给数据排序的意思。比如说升序&#xff0c;17&#xff0c;8&#xff0c;9&#xff0c;28&#xff0c;5.升序之后的结果就是5&#xff0c;8&#xff0c;9&#xff0c;17&#xff0c;28. 从我们的大脑思维来看&#xff0c;结果一眼就有了&#xff0c;可是机器要怎么才…

排序1——C语言

排序 1. 复杂度2. 插入排序2.1 直接插入排序2.2 希尔排序 3. 选择排序3.1 直接选择排序3.2 堆排序 排序在生活中很常见&#xff0c;比如在网购时&#xff0c;按价格排序&#xff0c;按好评数排序&#xff0c;点餐时&#xff0c;按评分排序等等。而排序有快和慢&#xff0c;快的…

【排序 贪心】3107. 使数组中位数等于 K 的最少操作数

算法可以发掘本质&#xff0c;如&#xff1a; 一&#xff0c;若干师傅和徒弟互有好感&#xff0c;有好感的师徒可以结对学习。师傅和徒弟都只能参加一个对子。如何让对子最多。 二&#xff0c;有无限多1X2和2X1的骨牌&#xff0c;某个棋盘若干格子坏了&#xff0c;如何在没有坏…

C语言中抽象的编译和链接原理

今天04.12&#xff0c;身体小有不适&#xff0c;但是睡不着觉&#xff0c;秉着不能浪费时间的原则&#xff0c;现在就简单写一下有关我们C语言中编译和链接的大体过程吧&#xff0c;因为编译和链接是比较抽象的&#xff0c;而且内容是比较底层&#xff0c;我们这里就简单了解它…

Chatgpt掘金之旅—有爱AI商业实战篇|SEO 咨询业务|(十七)

演示站点&#xff1a; https://ai.uaai.cn 对话模块 官方论坛&#xff1a; www.jingyuai.com 京娱AI 一、AI技术创业在SEO 咨询业务有哪些机会&#xff1f; 人工智能&#xff08;AI&#xff09;技术作为当今科技创新的前沿领域&#xff0c;为创业者提供了广阔的机会和挑战。随…

策略模式(知识点)——设计模式学习笔记

文章目录 0 概念1 使用场景2 优缺点2.1 优点2.2 缺点 3 实现方式4 和其他模式的区别5 具体例子实现5.1 实现代码 0 概念 定义&#xff1a;定义一个算法族&#xff0c;并分别封装起来。策略让算法的变化独立于它的客户&#xff08;这样就可在不修改上下文代码或其他策略的情况下…