❣博主主页: 33的博客❣
▶️文章专栏分类:项目日记◀️
🚚我的代码仓库: 33的代码仓库🚚
🫵🫵🫵关注我带你了解更多项目内容
目录
- 1.前言,
- 2.登录界面
- 3.注册界面
- 4.博客列表界面
- 5.博客编辑页
- 6.博客详情页
- 7.博客更新界面
- 8.效果展示
- 9.总结
1.前言,
在前面的文章中，我们已经完成了后端的业务逻辑，接下来我们将对前端进行实现。前端中，我们用到的技术主要包含HTML，CSS，JavaScript，JQuery等…
2.登录界面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客登陆页</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/login.css">
</head>
<body><div class="nav"><img src="pic/logo2.jpg" alt=""><span class="blog-title">梦幻笔耕</span><div class="space"></div><a class="nav-span" href="blog_list.html">主页</a><a class="nav-span" href="blog_edit.html">写博客</a></div><div class="container-login"><div class="login-dialog"><h3>登陆</h3><div class="row"><span>用户名</span><input type="text" name="username" id="username"></div><div class="row"><span>密码</span><input type="password" name="password" id="password"></div><div class="row"><button id="submit" onclick="login()">提交</button></div><div class="row"><button id="enroll">注册</button></div></div></div><script src="js/jquery.min.js"></script><script>document.getElementById("enroll").addEventListener("click", function() {window.location.href = "blog_register.html";});</script><script>function login() {$.ajax({type:"post",url: "/user/login",data:{username:$("#username").val(),password: $("#password").val()},success:function(result){if(result.code=="SUCCESS" && result.data !=null){//后端处理成功localStorage.setItem("user_token", result.data);//页面跳转location.href = "blog_list.html";}else{alert(result.errMsg);}}});}</script>
</body>
</html>
以登录界面美化为例，其他界面可以根据自己的需求进行调整：
.container-login{width: 100%;height: calc(100% - 50px);display: flex;align-items: center;justify-content: center;
}
.login-dialog{width: 350px;height: 300px;background-color:rgba(255,255,255,0.8);padding-top: 20px;border-radius: 10px;}
.login-dialog h3{text-align: center;
}
.login-dialog .row{width: 280px;height: 40px;margin: 10px auto;display: flex;justify-content: space-between;align-items: center;
}
.login-dialog .row>input{width: 220px;height: 35px;border-radius: 5px;border: none;outline: none;padding-left: 10px;
}
.login-dialog #submit{width: 280px;height: 40px;background-color: green;color: white;border: none;
}
.login-dialog #enroll{width: 280px;height: 40px;background-color: green;color: white;border: none;
}
3.注册界面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客注册页</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/register.css">
</head>
<body>
<div class="nav"><img src="pic/logo2.jpg" alt=""><span class="blog-title">梦幻笔耕</span><div class="space"></div><a class="nav-span" href="blog_list.html">主页</a><a class="nav-span" href="blog_edit.html">写博客</a>
</div>
<div class="container-register"><div class="register-dialog"><h3>注册</h3><div class="row"><span>用户名</span><input type="text" name="new-username" id="new-username"></div><div class="row"><span>密 码</span><input type="password" name="password" id="password"></div><div class="row"><span>码 云</span><input type="gitHub" name="gitHub" id="gitHub"></div><div class="row"><button id="register" onclick="register()">确认</button> <!-- 这里添加注册按钮 --></div></div>
</div>
<script src="js/jquery.min.js"></script>
<script>function register() {$.ajax({type:"post",url: "/user/register",data:{username:$("#new-username").val(),password: $("#password").val(),githubUrl:$("#gitHub").val(),},success:function(result){if(result.code=="SUCCESS" && result.data !=null){//页面跳转location.href = "blog_login.html";}else{alert(result.errMsg);}}});}
</script>
</body>
</html>
4.博客列表界面
关于博客界面的操作，我们需要再用户登录的情况下进行，后端已经通过JWT令牌的形式把用户信息存储在token中，那么前端每次都要携带这个信息去请求后端。
$(document).ajaxSend(function(e, xhr, opt){var token = localStorage.getItem("user_token");xhr.setRequestHeader("user_token_header", token);});
因为在博客也面的每一个请求都需要携带这个信息，那么我们就可以把这一段代码写在js中。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客列表页</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/list.css">
</head>
<body><div class="nav"><img src="pic/logo2.jpg" alt=""><span class="blog-title">梦幻笔耕</span><div class="space"></div><a class="nav-span" href="blog_list.html">主页</a><a class="nav-span" href="blog_edit.html">写博客</a><a class="nav-span" href="#" onclick="logout()">注销</a></div><div class="container"><div class="left"><div class="card"><img src="pic/doge.jpg" alt=""><h3> </h3><a href="#">GitHub 地址</a><div class="row"><span>文章</span><span>分类</span></div><div class="row"><span>2</span><span>1</span></div></div></div><div class="right"></div></div><script src="js/jquery.min.js"></script><script src="js/common.js"></script><script> $.ajax({type: "get",url: "/blog/getList",success: function(result){if(result.code=="SUCCESS"){var blogs = result.data;var finalHtml = "";for(var blog of blogs){finalHtml +='<div class="blog">';finalHtml +='<div class="title">'+blog.title+'</div>';finalHtml +='<div class="date">'+blog.createTime+'</div>';finalHtml +='<div class="desc">'+blog.content+'</div>';finalHtml +='<a class="detail" href="blog_detail.html?blogId='+blog.id+'">查看全文>></a>';finalHtml +='</div>';}$(".container .right").html(finalHtml);}},error:function(error){if(error!=null && error.status==401){location.href = "blog_login.html";}}});getUserInfo("/user/getUserInfo");</script>
</body>
</html>
5.博客编辑页
如果我们直接以普通文字的方式写博客是不合理的，我们希望像csdn一样有样式，那么我们就可以使用开源的Markdown编译器——editor.md 。使用时，我们直接引入对应依赖即可。
<div id="editor"><textarea style="display:none;" id="content" name="content">##在这里写下一篇博客</textarea></div></div><script src="js/jquery.min.js"></script><script src="blog-editormd/editormd.min.js"></script><script src="js/common.js"></script><script type="text/javascript">$(function () {var editor = editormd("editor", {width: "100%",height: "550px",path: "blog-editormd/lib/"});});</script>
写博客：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客编辑页</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/edit.css"><link rel="stylesheet" href="blog-editormd/css/editormd.css" /></head><body><div class="nav"><img src="pic/logo2.jpg" alt=""><span class="blog-title">梦幻笔耕</span><div class="space"></div><a class="nav-span" href="blog_list.html">主页</a><a class="nav-span" href="blog_edit.html">写博客</a><a class="nav-span" href="#" onclick="logout()">注销</a></div><div class="content-edit"><div class="push"><input type="text" name="" id="title"><input type="button" value="发布文章" id="submit" onclick="submit()"></div><!-- markdown 插件 html代码 --><div id="editor"><textarea style="display:none;" id="content" name="content">##在这里写下一篇博客</textarea></div></div><script src="js/jquery.min.js"></script><script src="blog-editormd/editormd.min.js"></script><script src="js/common.js"></script><script type="text/javascript">$(function () {var editor = editormd("editor", {width: "100%",height: "550px",path: "blog-editormd/lib/"});});function submit() {$.ajax({type: "post",url: "/blog/add",data: {title: $("#title").val(),content: $("#content").val()},success: function (result) {if (result.code == "SUCCESS" && result.data == true) {//发表成功location.href = "blog_list.html";} else {console.log($("#title").val());console.log($("#content").val())console.log(result.code);console.log(result.data)//后端未对错误情况进行分析, 统一返回了false, 需要自己完善, 参考userController.loginalert(result.errMsg);}},error: function (error) {if (error != null && error.status == 401) {location.href = "blog_login.html";}}});}</script>
</body>
</html>
6.博客详情页
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客详情页</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/detail.css">
</head>
<body><div class="nav"><img src="pic/logo2.jpg" alt=""><span class="blog-title">梦幻笔耕</span><div class="space"></div><a class="nav-span" href="blog_list.html">主页</a><a class="nav-span" href="blog_edit.html">写博客</a><a class="nav-span" href="#" onclick="logout()">注销</a></div><div class="container"><div class="left"><div class="card"><img src="pic/doge.jpg" alt=""><h3> </h3><a href="#">GitHub 地址</a><div class="row"><span>文章</span><span>分类</span></div><div class="row"><span>2</span><span>1</span></div></div></div><div class="right"><div class="content"><div class="title"></div><div class="date"></div><div class="detail" id="detail" style="background-color: transparent;"></div><div class="operating">
<!-- <button οnclick="window.location.href='blog_update.html'">编辑</button>-->
<!-- <button οnclick="deleteBlog()">删除</button> --></div></div></div></div><!-- 引入 editor.md 的依赖 --><link rel="stylesheet" href="blog-editormd/css/editormd.css" /><script src="js/jquery.min.js"></script><script src="blog-editormd/lib/marked.min.js"></script><script src="blog-editormd/lib/prettify.min.js"></script><script src="blog-editormd/editormd.js"></script><script src="js/common.js"></script><script>//显示博客作者信息var userUrl = "/user/getAuthorInfo" + location.search;// getUserInfo(userUrl);function deleteBlog(blogId) {if (confirm("确定删除?")) {$.ajax({type: "post",url: "/blog/delete" + location.search,success: function (result) {if (result.code == "SUCCESS" && result.data) {//删除成功location.href = "blog_list.html";} else {//后端未对错误情况进行分析, 统一返回了false, 需要自己完善, 参考userController.loginalert(result.errMsg);}},error: function (error) {if (error != null && error.status == 401) {location.href = "blog_login.html";}}});}}$.ajax({type: "get",url: "/blog/getBlogDetail" + location.search,success: function (result) {if (result.code == "SUCCESS") {//填充页面var blog = result.data;$(".content .title").text(blog.title);$(".content .date").text(blog.createTime);// $(".content .detail").text(blog.content);editormd.markdownToHTML("detail", {markdown: blog.content});//判断是否显示编辑/删除按钮if (blog.loginUser) {var html = "";html += '<button οnclick="window.location.href=\'blog_update.html?blogId=' + blog.id + '\'">编辑</button>';html += '<button οnclick="deleteBlog(' + blog.id + ')">删除</button>';$(".content .operating").html(html);}}},error: function (error) {if (error != null && error.status == 401) {location.href = "blog_login.html";}}});var url = "/user/getAuthorInfo" + location.search;getUserInfo(url);</script>
</body>
</html>
7.博客更新界面
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客编辑页</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/edit.css"><link rel="stylesheet" href="blog-editormd/css/editormd.css" /></head><body><div class="nav"><img src="pic/logo2.jpg" alt=""><span class="blog-title">梦幻笔耕</span><div class="space"></div><a class="nav-span" href="blog_list.html">主页</a><a class="nav-span" href="blog_edit.html">写博客</a><a class="nav-span" href="#" onclick="logout()">注销</a></div><div class="content-edit"><div class="push"><input type="hidden" id="blogId"><input type="text" name="" id="title"><input type="button" value="更新文章" id="submit" onclick="submit()"></div><!-- markdown 插件 html代码 --><div id="editor"><textarea style="display:none;" id="content">##在这里写下一篇博客</textarea></div></div><script src="js/jquery.min.js"></script><script src="blog-editormd/editormd.min.js"></script><script src="js/common.js"></script><script type="text/javascript">function submit() {$.ajax({type: "post",url: "/blog/update",data: {id: $("#blogId").val(),title: $("#title").val(),content: $("#content").val()},success: function (result) {if (result.code == "SUCCESS" && result.data) {//删除成功location.href = "blog_list.html";} else {//后端未对错误情况进行分析, 统一返回了false, 需要自己完善, 参考userController.loginalert(result.errMsg);}},error: function (error) {if (error != null && error.status == 401) {location.href = "blog_login.html";}}});}function getBlogInfo() {$.ajax({type: "get",url: "/blog/getBlogDetail" + location.search,success: function (result) {if (result.code == "SUCCESS" && result.data != null) {var blog = result.data;$("#blogId").val(blog.id);$("#title").val(blog.title);// $("#content").val(blog.content);editormd("editor", {width: "100%",height: "550px",path: "blog-editormd/lib/",onload: function () {this.watch();this.setMarkdown(blog.content);}});} else {alert(result.errMsg)}},error: function (error) {if (error != null && error.status == 401) {location.href = "blog_login.html";}}});}getBlogInfo();</script>
</body>
</html>
8.效果展示
9.总结
我们已经简单完成了博客系统的所有内容，在下一篇文章中，我将对博客系统进行自动化测试。
