项目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,获取当前用户登录id
        String 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"
}
}

  1. 修改博客

[ 请求 ]
/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
⻚⾯加载时, 请求博客详情

测试!!!

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

相关推荐
dr李四维5 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~26 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ29 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z35 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序1 小时前
vue3 封装request请求
java·前端·typescript·vue
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript