一篇博客带你实现一个真正的项目！

 先来看看它是什么样式的：

目录：

1
  
  
  
  
  
 、大体步骤🦖：

        1 
  
  
  
  
  、创建Maven项目🦕

        2 


 


 


 


 


 

、引入依赖🦕

        3
 
 
 
 
 
、创建必要的目录🦕

        4  
   
   
   
   
   、编写代码🦕

        5 

 

 

 

 

 
、打包部署（基于SmartTomcat）🦕

        6

 

 

 

 

 

、在浏览器验证🦕

 2           、具体代码实现🦖：

        1 
 

 
 

 
 

 
 

 
 

 
 、V——用户界面           ，前端部分🦕：

        HTML 部分🤯：

        CSS 部分🤯：

        JS 部分🤯： 

1











、大体步骤：

        要想自己实现一个Web项目  
 
  
 
  
 
  
 
  
 
  
，具体步骤如下：

        1                、创建Maven项目

        打开 Idea










，创建 new project
  
  
  
  
  
 ，在新弹窗的左侧选项中  
  
  
  
  
 ，选择 Maven
 


 


 


 


 


 
，点击 next； 

        在新弹窗里写好项目的名称和路径
 
 
 
 
 
，然后点击 finish   
   
   
   
   
  ，就完成项目创建了
  
  
  
  
  
 。

        2 
 
 
 
 
 
 
 
 
 
 
 、引入依赖

        现在我们进入了代码编辑界面
 

 

 

 

 

 
，开始项目的第二步：引入必需的依赖

 

 

 

 

 
，包括 servlet
















、mysql           、jackson 
  
  
  
  
  。 

        先找到自动跳转出来的 pom.xml 文件            ，文件位置如下：

        在这里填上一段 <dependencies> </dependencies> 标签
 
 

 
 

 
 

 
 

 
 

 
，之后我们引入的依赖代码就会放在这个标签内部 


 


 


 


 


 

。

        打开Maven中央仓库网站：https://mvnrepository.com/  

        在最上方搜索 servlet 










，点击第一个搜索结果 Java Servlet API                 ，再在下方的版本号里选择 3.1.0 版本 
 
 
 
 
 
 
 
 
 
 
，最后复制下面那串代码到之前的 pom.xml 文件的 dependencies 标签中：

​

​

        mysql 和 jackson 也是一样
















，先在搜索框搜索 mysql            ，点击第一个搜索结果  
 
  
 
  
 
  
 
  
 
  
，再找到 5.1.47 版本的










，点击之后还是复制那串代码到 dependencies 标签下：

​

​

        在搜索框搜索 jackson 
  
  
  
  
  
 ，点击第一个搜索结果  
  
  
  
  
 ，再点击 2.12.6.1 版本
 


 


 


 


 


 
，最后复制代码：

​

 ​

         最后引入成功后
 
 
 
 
 
，就会开始下载依赖   
   
   
   
   
  ，如果你的idea没有显示下载
 

 

 

 

 

 
，那么可以自己手动点击刷新下载
 
 
 
 
 
。

​

        3 
 
  
 
  
 
  
 
  
 
  
 、创建必要的目录

        当我们成功引入依赖后

 

 

 

 

 
，就可以开始创建必需的目录：

        1）在 main 目录下创建一个 webapp 目录

        2）在 webapp 目录下创建一个 WEB-INF 目录；注意字母为全大写！

         3）在 WEB-INF 目录下创建一个文件            ，命名为 web.xml ：

         4）最后把下面这串代码复制到 web.xml 文件里：

<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd" > <web-app> <display-name>Archetype Created Web Application</display-name> </web-app>

        4










、编写代码

        这里的内容是之后我们需要花大时间编写的代码
 
 

 
 

 
 

 
 

 
 

 
，这里只是先演示一下看看我们之前的步骤有没有成功










，例如我们先写一个 servlet ：

        1）在 main 目录的 java 目录里创建一个类                 ，命名为 HelloServlet：

        2）在 HelloServlet 里填入以下代码：

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 java.io.IOException; @WebServlet("/hello") public class HelloServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.getWriter().write("hello servlet"); } }

        5
  
  
  
  
  
 、打包部署（基于SmartTomcat）

        这里的打包部署我们使用 smart Tomcat 来合并完成；smart Tomcat 是一个 idea 的插件 
 
 
 
 
 
 
 
 
 
 
，所以如果你是第一次使用
















，需要先下载下来  
   
   
   
   
   。

        1）点击左上角的 File > Settings···

         2）点击左侧选项的 Plugins > Markplace > 在搜索框搜索 smart tomcat > 点击 Installed 

> apply > OK 结束！

        3）安装好了以后就可以导入这个插件了！先点击 idea 右侧的 Add Configuration···

        4） 在新弹出的弹窗里点击左上角的 + 号           ，再找到我们下载好的 smart Tomcat  
 
  
 
  
 
  
 
  
 
  
，点击OK：

         5）在这个smart tomcat 设置界面










，需要设置的有三个
  
  
  
  
  
 ，name 可以随意设置  
  
  
  
  
 ，自己顺眼就行；Tomcat Server 刚开始是没有的
 


 


 


 


 


 
，需要选择自己安装 tomcat 的路径的文件夹；第三个 Context Path 很重要
 
 
 
 
 
，设置后一定得记住   
   
   
   
   
  ，当然记不住也没关系
 

 

 

 

 

 
，之后可以再打开这个界面看看 

 

 

 

 

 
。

         6）设置完之后

 

 

 

 

 
，界面右上角就会变为下面这样            ，点击右边的那个绿的小三角就可以启动 tomcat 服务器了
 
 

 
 

 
 

 
 

 
 

 
，点击后会出现一大堆红色代码










，不懂担心                 ，就这样的：

        6 
  
  
  
  
  、在浏览器验证

        当我们成功启动服务器后 
 
 
 
 
 
 
 
 
 
 
，就可以在浏览器里验证以下
















，看看我们之前所做的准备有没有错误或Bug：

        1）在浏览器输入这串地址：127.0.0.1:8080/blog_system/hello            ，注意  
 
  
 
  
 
  
 
  
 
  
，第一个斜杠和第二个斜杠之间的是我们之前在smart tomcat 里设置的 context path 










，第二个斜杠后面的是 HelloServlet上面设置的 servlet path 
  
  
  
  
  
 ，当页面出现 “hello servlet           ” 时  
  
  
  
  
 ，就说明前置准备已经完毕了：

 2 


 


 


 


 


 

、具体代码实现：

        这个项目我们使用前后端分离的方式
 


 


 


 


 


 
，使用MVC模式
 
 
 
 
 
，所以我们在代码实现时也分为M
 
 
 
 
 
、V  
   
   
   
   
   、C这三部分

 

 

 

 

 

。

        1 

 

 

 

 

 
、V——用户界面   
   
   
   
   
  ，前端部分：

        前端部分主要分为三个板块：html

 

 

 

 

 

、css 和 javascript            。

        HTML 部分：

        在真正写代码之前呢
 

 

 

 

 

 
，我们需要在 webapp 目录下创建一个 image 文件夹

 

 

 

 

 
，里面存放三张图片            ，可以是 jpg 格式
 
 

 
 

 
 

 
 

 
 

 
，也可以是png 格式










， 第一张图片命名为“系统头像  
 
  
 
  
 
  
 
  
 
  
”                 ，这个是在系统导航栏最左侧显示的一个小头像；第二张命名为“用户头像










” 
 
 
 
 
 
 
 
 
 
 
，这个是登录进页面显示的当前用户头像；第三张命名为“背景
  
  
  
  
  
 ”
















，这个图片是你的博客系统的整个背景图片 
 

 
 

 
 

 
 

 
 

 
 。上面三张你都可以选择你喜欢的           ，就像我下面那张图片一样











。

        1）博客列表页：

        在 webapp 下创建一个新的文件  
 
  
 
  
 
  
 
  
 
  
，命名为 blog_list.html 










，并输入以下代码：

<!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/blog_list.css"> </head> <body> <!-- 这里是导航栏 --> <div class="nav"> <img src="image/小猪头像.png" alt=""> <span>我的博客系统</span> <!-- 空白元素
  
  
  
  
  
 ，用来占位置！ --> <div class="spacer"></div> <a href="blog_list.html">主页</a> <a href="blog_edit.html">写博客</a> <a href="logout">退出</a> </div> <!-- 这里的contaier作为页面的版心： --> <div class="container"> <!-- 左侧个人信息： --> <div class="left"> <div class="card"> <img src="image/张卫健.png" alt=""> <h3></h3> <a href="#">github 地址</a> <div class="counter"> <span>文章</span> <span>分类</span> </div> <div class="counter"> <span>2</span> <span>1</span> </div> </div> </div> <!-- 右侧内容信息： --> <div class="right"> <!-- 每一个 .blog都对应着一个博客： --> <!-- <div class="blog"> <div class="title"> 我的第一篇博客： </div> <div class="date"> 2022.05.06 </div> <div class="desc"> 从今天起  
  
  
  
  
 ，我要认真敲代码！Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel provident delectus odit exercitationem quis pariatur quia sapiente soluta assumenda consequuntur laboriosam officia repudiandae, placeat quasi, dolores harum eaque nemo officiis. </div> <a href="./blog_detail.html"> 点击查看全文 &gt;&gt; </a> </div> --> </div> </div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> // 在页面加载的时候
 


 


 


 


 


 
，通过ajax给服务器发送数据
 
 
 
 
 
，获取到博客列表信息   
   
   
   
   
  ，并显示在界面上 function getBloglist(){ $.ajax({ type:get, url:blog, success:function(body){ // 获取到的body内容就是一个js对象数组
 

 

 

 

 

 
，每个元素就是一个js对象 // 1           、先把 .right 里原有的数据清空 let rightDiv = document.querySelector(.right); rightDiv.innerHTML = ; // 2 
 

 
 

 
 

 
 

 
 

 
 、遍历body

 

 

 

 

 
，构造出一个个blogDiv for(let blog of body){ let blogDiv = document.createElement(div); blogDiv.className = blog; // 构造标题的div： let titleDiv = document.createElement(div); titleDiv.className = title; titleDiv.innerHTML = blog.title; blogDiv.appendChild(titleDiv); // 构造发布时间的div： let dateDiv = document.createElement(div); dateDiv.className = date; dateDiv.innerHTML = blog.postTime; blogDiv.appendChild(dateDiv); // 构造博客摘要的div： let descDiv = document.createElement(div); descDiv.className = desc; descDiv.innerHTML = blog.content; blogDiv.appendChild(descDiv); // 构造查看全文： let a = document.createElement(a); a.innerHTML = 点击查看全文>>; // 此处希望点击之后能够跳转到博客详情页            ，跳转过程需要告知服务器要访问的是哪个博客的详情页： a.href = blog_detail.html?blogId= + blog.blogId; blogDiv.appendChild(a); // 最后把blogDiv挂到dom树上： rightDiv.appendChild(blogDiv); } }, error:function(){ alert(获取博客列表失败！); } }); } getBloglist(); </script> <!-- 在这里引入common.js文件
 
 

 
 

 
 

 
 

 
 

 
，就可以执行到里面的代码










，也就进行了登录状态的检测了 --> <script src="js/common.js"></script> <script> getUserInfo(blog_list.html); </script> </body> </html>

        2）博客详情页：

        在 webapp 目录下创建一个文件                 ，命名为 blog_detail.html ：

<!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/blog-detail.css"> <!-- 引入 editor.md 的依赖： --> <link rel="stylesheet" href="editor.md/css/editormd.min.css" /> <script src="js/jquery.min.js"></script> <script src="editor.md/lib/marked.min.js"></script> <script src="editor.md/lib/prettify.min.js"></script> <script src="editor.md/editormd.js"></script> </head> <body> <!-- 这里是导航栏 --> <div class="nav"> <img src="image/小猪头像.png" alt=""> <span>我的博客系统</span> <!-- 空白元素 
 
 
 
 
 
 
 
 
 
 
，用来占位置！ --> <div class="spacer"></div> <a href="blog_list.html">主页</a> <a href="blog_edit.html">写博客</a> <a href="logout">退出</a> </div> <!-- 这里的contaier作为页面的版心： --> <div class="container"> <!-- 左侧个人信息： --> <div class="left"> <div class="card"> <img src="image/张卫健.png" alt=""> <h3>夏开开</h3> <a href="#">github 地址</a> <div class="counter"> <span>文章</span> <span>分类</span> </div> <div class="counter"> <span>2</span> <span>1</span> </div> </div> </div> <!-- 右侧内容信息： --> <div class="right"> <!-- 使用这个div来包裹住整个博客的内容详情 --> <div class="blog-content"> <!-- 博客标题 --> <h3></h3> <!-- 博客的时间 --> <div class="date"></div> <!-- 正文 --> <div id="content" style="opacity: 80%"> </div> </div> </div> </div> <script> function getBlogDetail(){ $.ajax({ type:get, // location.search 拿到了形如“?vlogId=5  
  
  
  
  
 ” 这样的内容 url:blog + location.search, success: function(body){ // 根据body里的内容来构造html页面： // 1











、先构造博客的标题： let h3 = document.querySelector(".blog-content>h3"); h3.innerHTML = body.title; // 2                、构造博客发布时间： let dateDiv = document.querySelector(".date"); dateDiv.innerHTML = body.postTime; // 3 
 
 
 
 
 
 
 
 
 
 
 、构造博客正文内容： // 如果直接把content设为innerHTML
















，此时展示在页面上的是原始的markdown字符串 // 咱们需要的是渲染后           ，带格式的效果  
 
  
 
  
 
  
 
  
 
  
，所以不用下面方法










， // let content = document.querySelector("#content"); // content.innerHTML = body.content; // 第一个参数对应id=content的html标签
  
  
  
  
  
 ，渲染后得到的html片段就会被放到这个标签下 editormd.markdownToHTML(content,{ markdown: body.content }); } }); } getBlogDetail(); //加上一个逻辑  
  
  
  
  
 ，通过GET /login 这个接口来获取当前的登陆状态： function getUserInfo(pageName){ $.ajax({ type: get, url: login, success: function(body){ // 判定此处的body是不是一个有效的user对象（userId 是否为非0） if(body.userId && body.userId > 0){ // 此时登陆成功
 


 


 


 


 


 
，不做处理 console.log(当前登陆成功！用户名：+body.username); // // 根据当前用户登录的情况
 
 
 
 
 
，把用户名设置到html页面上： // if(pageName == blog_list.html){ // changeUserName(body.username); // } // 在getUserInfo 的回调函数中   
   
   
   
   
  ，来调用获取作者信息 getAuthorInfo(body); }else{ // 登录失败： // 让前端页面跳转到login.html alert(当前尚未登录
 

 

 

 

 

 
，请登录后再访问！) location.assign(blog_login.html); } }, error: function(){ alert(当前尚未登录

 

 

 

 

 
，请登录后再访问！) location.assign(blog_login.html); } }); } // 判定用户的登录状态： getUserInfo(blog_detail.html); // 从服务器获取一下当前博客的作者信息            ，并显示在界面上 // 这里的参数user就是刚才从服务器拿到的当前登录用户信息 function getAuthorInfo(user){ $.ajax({ type: get, url: authorInfo+location.search, success: function(body){ // 此处的body
 
 

 
 

 
 

 
 

 
 

 
，就是服务器返回的User对象










，是文章的作者信息 if(body.username){ // 若响应中的username存在                 ，就把这个值设置到页面上： changeUserName(body.username); if(body.username == user.username){ // 若作者和当前登录用户是同一个人 
 
 
 
 
 
 
 
 
 
 
，则显示“删除按钮
 


 


 


 


 


 
” let navDiv = document.querySelector(.nav); let a = document.createElement(a); a.innerHTML = 删除; // 此时点击删除时
















，期望构造一个形如：blogDelete?blogId=6 这样的请求 a.href = blogDelete+location.search; navDiv.appendChild(a); } }else{ console.log(获取作者信息失败！ + body.season); } } }); } function changeUserName(username){ let h3 = document.querySelector(.card>h3); h3.innerHTML = username; } </script> </body> </html>

        3）博客编辑页：

        在编写博客编辑页之前需要导入editor.md 这个 api            ，这个可以自己自行下载  
 
  
 
  
 
  
 
  
 
  
，也可以在文章最后进入我的码云下载










，里面也有整套代码                。

        在 webapp 目录下创建一个文件
  
  
  
  
  
 ，命名为 blog_edit.html ：

<!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/blog_edit.css"> <!-- 引入 editor.md 的依赖 --> <link rel="stylesheet" href="editor.md/css/editormd.min.css" /> <script src="js/jquery.min.js"></script> <script src="editor.md/lib/marked.min.js"></script> <script src="editor.md/lib/prettify.min.js"></script> <script src="editor.md/editormd.js"></script> </head> <body> <!-- 这里是导航栏 --> <div class="nav"> <img src="image/小猪头像.png" alt=""> <span>我的博客系统</span> <!-- 空白元素  
  
  
  
  
 ，用来占位置！ --> <div class="spacer"></div> <a href="blog_list.html">主页</a> <a href="blog_edit.html">写博客</a> <a href="logout">退出</a> </div> <!-- 包含整个博客编辑页内容的编辑器： --> <div class="blog-edit-container"> <form action="blog" method="post" style="height: 100%"> <div class="title"> <input type="text" placeholder="在此处输入标题" name="title" id="title"> <!-- <button>发布文章</button> --> <input type="submit" value="发布文章" id="submit"> </div> <!-- 放置 md 编辑器： --> <div id="editor"> <!-- 为了进行form的提交
 


 


 


 


 


 
，此处加一个textarea多行编辑器
 
 
 
 
 
，借助这个编辑框来实现表单提交 --> <textarea name="content" style="display: none"></textarea> </div> </form> </div> <script> // 初始化编辑器： let editor = editormd("editor", { // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. width: "100%", // 设定编辑器高度 height: "calc(100% - 50px)", // 编辑器中的初始内容 markdown: "# 在这里写下一篇博客", // 指定 editor.md 依赖的插件路径 path: "editor.md/lib/", // 此处要加上一个重要的选项   
   
   
   
   
  ，然后editor.md会自动把内容同步在这里： saveHTMLToTextarea: true }); </script> </body> </html>

        4）博客登录页：

        在 webapp 目录下创建一个文件
 

 

 

 

 

 
，命名为 blog_login.html ：

<!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/blog-login.css"> </head> <body> <!-- 这里是导航栏 --> <div class="nav"> <img src="image/小猪头像.png" alt=""> <span>我的博客系统</span> <!-- 空白元素

 

 

 

 

 
，用来占位置！ --> <div class="spacer"></div> <a href="blog_list.html">主页</a> <a href="blog_edit.html">写博客</a> <!-- 注销按钮没必要在登录页面展示： --> <!-- <a href="#">注销</a> --> </div> <div class="login-container"> <!-- 设置登录界面的登录框： --> <form action="login" method="post"> <div class="login-dialog"> <h3>登录</h3> <div class="row"> <span>用户名:</span> <input type="text" id="username" name="username"> </div> <div class="row"> <span>密码:</span> <input type="password" id="password" name="password"> </div> <div class="row"> <!-- <button>提交</button> --> <input type="submit" id="submit" value="提交"> </div> </div> </form> </div> </body> </html>

        CSS 部分：

        这部分代码可以直接在webapp 目录里写            ，也可以先创建一个 css 目录
 
 

 
 

 
 

 
 

 
 

 
，在这个目录里写










，我选择的是在创建一个 css 目录：

        1）博客通用样式：

        创建一个文件                 ，命名为 common.css ：

/* 放置一些页面都会用到的样式 */ /* 此操作取消浏览器的默认样式： */ *{ margin: 0; padding: 0; box-sizing: border-box; } /* 给整个页面添加背景： */ html,body{ height: 100%; } body{ /* 这里路径：因为common是在css目录里 
 
 
 
 
 
 
 
 
 
 
，而css和image是同级的
















，所以需要.. */ background-image: url(../image/粉红猪猪背景.jpeg); background-repeat: no-repeat; background-position: center center; background-size: cover; } /* 设置导航栏样式： */ .nav{ /* 设置宽度： */ width: 100%; /* 设置高度： */ height: 50px; /* r-红色；g-绿色；b-蓝色；a-透明度 */ background-color: rgba(51, 51, 51, 0.5); /* 文字颜色： */ color: white; /* 导航栏内部的内容都是一行排列           ，所以使用弹性布局 flex */ display: flex; /* 设置子元素垂直居中： */ align-items: center; } /* 设置导航栏里的图片样式： */ .nav img{ width: 40px; height: 40px; /* 设置圆角弧度  
 
  
 
  
 
  
 
  
 
  
，当为50%时










，是圆形： */ border-radius: 50%; /* 设置图片与左侧的外边距： */ margin-left: 30px; /* 设置图片与右侧的外边距： */ margin-right: 10px; } /* 设置那个空白元素： */ .nav .spacer{ /* 相对于父元素
  
  
  
  
  
 ，宽度设为父元素的70%： */ width: 78%; } /* 设置导航栏的a标签样式： */ .nav a{ color: white; /* 取消下划线： */ text-decoration: none; /* 设置a标签之间的内边距：0 为上下边距；10px为左右边距： */ padding: 0 10px; } /* 以下为版心相关样式： */ .container{ /* 设置版心宽度： */ width: 1000px; /* 设置版心高度  
  
  
  
  
 ，为浏览器页面高度减去导航栏高度（使用calc()函数）： */ height: calc(100% - 50px); /* 将版心设为水平居中： */ margin: 0 auto; /* 设置弹性布局
 


 


 


 


 


 
，因为left 和right 都是块级元素
 
 
 
 
 
，默认占一行 */ display: flex; /* 设置container里的两个元素为左右分开 */ justify-content: space-between; } /* 设置left个人信息的样式： */ .container .left{ height: 100%; width: 200px; } /* 设置right内容信息的样式： */ .container .right{ height: 100%; width: 790px; background-color: rgba(255, 255, 255, 0.8); border-radius: 10px; /* 将页面设置为上下延申 */ overflow: auto; } /* 下面设置card部分样式： */ .card{ /* 设置背景颜色： */ background-color: rgba(255, 255, 255, 0.8); /* 设置圆角弧度： */ border-radius: 10px; /* 通过设置内边距   
   
   
   
   
  ，达到使头像居中效果： */ padding: 30px; } /* 设置card里的图片： */ .card img{ width: 140px; height: 140px; /* 将其设为圆形： */ border-radius: 50%; } /* 设置h3标签： */ .card h3{ text-align: center; padding: 10px; } /* 设置card里的a标签： */ .card a{ /* 将a标签转换为块级元素
 

 

 

 

 

 
，因为很多行内元素边距不生效： */ display: block; text-align: center; text-decoration: none; color: grey; padding: 10px; } /* 设置“文章

 

 

 

 

 
，分类
 
 
 
 
 
”标签： */ .card .counter{ display: flex; justify-content: space-around; padding: 5px; }

        2）博客列表页样式：

        创建一个文件            ，命名为 blog_list.css ：

/* 这里专门写和博客列表页相关样式： */ .blog{ width: 100%; padding: 20px; } /* 设置博客标题： */ .blog .title{ /* 设置标题水平居中： */ text-align: center; /* 设置标题字体大小： */ font-size: 22px; /* 设置字体是否加粗： */ font-weight: bold; padding: 10px; } /* 设置博客日期： */ .blog .date{ text-align: center; color: rgb(189, 8, 77); /* 设置内边距
 
 

 
 

 
 

 
 

 
 

 
，上下10px










，左右0： */ padding: 10px 0; } .blog .desc{ /* 设置首行缩进2字符： */ text-indent: 2em; } /* 设置 查看全文 按钮： */ .blog a{ /* 设为块级元素                 ，方便设置尺寸： */ display: block; width: 140px; height: 40px; /* 将该元素设为水平居中： */ margin: 13px auto; /* 设置边框： */ border: 2px rgb(238, 87, 87) solid; border-radius: 20px; /* 设置字体颜色： */ color: rgb(238, 87, 87); /* 设置字体垂直居中： */ line-height: 40px; /* 设置字体水平居中： */ text-align: center; /* 取消下划线： */ text-decoration: none; /* 如果想让变化有一个渐变 
 
 
 
 
 
 
 
 
 
 
，可以加上过渡效果： */ transition: all 1s; } /* 设置将鼠标放在a标签上时
















，出现的样式： */ .blog a:hover{ background-color: tomato; color: white; }

        3）博客详情页样式：

        创建一个文件           ，命名为 blog_detail.css ：

/* 给博客详情页使用的样式文件： */ .blog-content{ padding: 30px; } /* 设置博客标题： */ .blog-content h3{ /* 设置文本居中对齐： */ text-align: center; } /* 设置博客时间： */ .blog-content .date{ text-align: center; color: rgb(189, 8, 77); /* 设置边距：上下20px  
 
  
 
  
 
  
 
  
 
  
，左右0； */ padding: 20px 0; } .blog-content p{ /* 首行缩进2字符： */ text-indent: 2em; padding: 10px 0; }

        4）博客编辑页样式：

        创建一个文件










，命名为 blog_edit.css ：

/* 这是博客编辑页专用的样式文件： */ .blog-edit-container{ width: 1000px; height: calc(100% - 50px); /* 设置该元素为水平居中 */ margin: 0 auto; } .blog-edit-container .title{ width: 100%; height: 50px; display: flex; align-items: center; justify-content: space-between; } .blog-edit-container .title #title{ width: 900px; height: 40px; border-radius: 10px; border: none; outline: none; font-size: 22px; line-height: 40px; padding-left: 10px; background-color: rgba(255, 255, 255, 0.8); } .blog-edit-container .title #submit{ width: 95px; height: 40px; color: white; background-color: rgb(231, 76, 89); border-radius: 10px; border: none; outline: none; } /* 设置“发布文章   
   
   
   
   
  ”按钮的点击效果： */ .blog-edit-container .title #submit:active{ background-color: rgb(201, 11, 4); } #editor{ border-radius: 10px; /* opacity 也是设置元素背景颜色的透明度 但是background-color只是针对当前元素进行设置
  
  
  
  
  
 ，不会影响到子元素 而 opacity会影响到子元素  
  
  
  
  
 ，具备“继承性
 

 

 

 

 

 
”
 


 


 


 


 


 
，即： 给最外面元素设置了透明度
 
 
 
 
 
，里面的元素也会一起变透明~ */ opacity: 90%; }

        5）博客登录页样式：

        创建一个文件   
   
   
   
   
  ，命名为 blog_login.css ：

/* 登陆页面的专用样式文件 */ .login-container{ width: 100%; height: calc(100% - 50px); /* 需要让里面的登录框垂直水平居中： */ display: flex; /* 垂直居中 */ align-items: center; /* 水平居中 */ justify-content: center; } /* 设置登录框： */ .login-dialog{ width: 400px; height: 350px; background-color: rgba(255, 255, 255, 0.9); /* 设置矩形的圆角弧度： */ border-radius: 10px; } /* 设置登录框里的“登录

 

 

 

 

 
”标题： */ .login-dialog h3{ text-align: center; padding: 50px; } /* 设置“row            ”行： */ .login-dialog .row{ width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; } .login-dialog .row span{ /* 将其设为块级元素
 

 

 

 

 

 
，方便设置尺寸： */ display: block; width: 100px; font-weight: 700; } /* 设置两个输入框： */ #username,#password{ width: 200px; height: 40px; /* 设置输入框里的文字大小： */ font-size: 22px; /* 使输入款里的文字垂直居中： */ line-height: 40px; /* 让文字与左边有10px的距离： */ padding-left: 10px; border-radius: 10px; /* 消除边框： */ /* border: none; */ /* 消除轮廓线： */ outline: none; } /* 设置提交按钮的样式： */ .row #submit{ width: 300px; height: 50px; /* 与上面元素的边距： */ margin-top: 45px; border-radius: 10px; border: none; outline: none; color: white; background-color: rgb(212, 53, 67); font-size: 15px; } /* 设置提交按钮点击时的样式： */ .row #submit:active{ background-color: rgb(184, 45, 10); }

        JS 部分： 

        js 部分也是一样

 

 

 

 

 
，可以选择创建一个子目录            ，也可以不创建直接生产文件
 
 

 
 

 
 

 
 

 
 

 
，这里我们只需要创建两个文件










，

        1）创建一个文件                 ，命名为 common.js ：

// 这里放置一些检测登录状态的公共代码： //加上一个逻辑 
 
 
 
 
 
 
 
 
 
 
，通过GET /login 这个接口来获取当前的登陆状态： function getUserInfo(pageName){ $.ajax({ type: get, url: login, success: function(body){ // 判定此处的body是不是一个有效的user对象（userId 是否为非0） if(body.userId && body.userId > 0){ // 此时登陆成功
















，不做处理 console.log(当前登陆成功！用户名：+body.username); // 根据当前用户登录的情况           ，把用户名设置到html页面上： if(pageName == blog_list.html){ changeUserName(body.username); } }else{ // 登录失败： // 让前端页面跳转到login.html alert(当前尚未登录  
 
  
 
  
 
  
 
  
 
  
，请登录后再访问！) location.assign(blog_login.html); } }, error: function(){ alert(当前尚未登录










，请登录后再访问！) location.assign(blog_login.html); } }); } function changeUserName(username){ let h3 = document.querySelector(.card>h3); h3.innerHTML = username; }

        2）创建一个文件
  
  
  
  
  
 ，命名为 jquery.min.js ：

/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */ !function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.6.0",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0<t&&t-1 in e)}S.fn=S.prototype={jquery:f,constructor:S,length:0,toArray:function(){return s.call(this)},get:function(e){return null==e?s.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=S.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return S.each(this,e)},map:function(n){return this.pushStack(S.map(this,function(e,t){return n.call(e,t,e)}))},slice:function(){return this.pushStack(s.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},even:function(){return this.pushStack(S.grep(this,function(e,t){return(t+1)%2}))},odd:function(){return this.pushStack(S.grep(this,function(e,t){return t%2}))},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(0<=n&&n<t?[this[n]]:[])},end:function(){return this.prevObject||this.constructor()},push:u,sort:t.sort,splice:t.splice},S.extend=S.fn.extend=function(){var e,t,n,r,i,o,a=arguments[0]||{},s=1,u=arguments.length,l=!1;for("boolean"==typeof a&&(l=a,a=arguments[s]||{},s++),"object"==typeof a||m(a)||(a={}),s===u&&(a=this,s--);s<u;s++)if(null!=(e=arguments[s]))for(t in e)r=e[t],"__proto__"!==t&&a!==r&&(l&&r&&(S.isPlainObject(r)||(i=Array.isArray(r)))?(n=a[t],o=i&&!Array.isArray(n)?[]:i||S.isPlainObject(n)?n:{},i=!1,a[t]=S.extend(l,o,r)):void 0!==r&&(a[t]=r));return a},S.extend({expando:"jQuery"+(f+Math.random()).replace(/\D/g,""),isReady:!0,error:function(e){throw new Error(e)},noop:function(){},isPlainObject:function(e){var t,n;return!(!e||"[object Object]"!==o.call(e))&&(!(t=r(e))||"function"==typeof(n=v.call(t,"constructor")&&t.constructor)&&a.call(n)===l)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},globalEval:function(e,t,n){b(e,{nonce:t&&t.nonce},n)},each:function(e,t){var n,r=0;if(p(e)){for(n=e.length;r<n;r++)if(!1===t.call(e[r],r,e[r]))break}else for(r in e)if(!1===t.call(e[r],r,e[r]))break;return e},makeArray:function(e,t){var n=t||[];return null!=e&&(p(Object(e))?S.merge(n,"string"==typeof e?[e]:e):u.call(n,e)),n},inArray:function(e,t,n){return null==t?-1:i.call(t,e,n)},merge:function(e,t){for(var n=+t.length,r=0,i=e.length;r<n;r++)e[i++]=t[r];return e.length=i,e},grep:function(e,t,n){for(var r=[],i=0,o=e.length,a=!n;i<o;i++)!t(e[i],i)!==a&&r.push(e[i]);return r},map:function(e,t,n){var r,i,o=0,a=[];if(p(e))for(r=e.length;o<r;o++)null!=(i=t(e[o],o,n))&&a.push(i);else for(o in e)null!=(i=t(e[o],o,n))&&a.push(i);return g(a)},guid:1,support:y}),"function"==typeof Symbol&&(S.fn[Symbol.iterator]=t[Symbol.iterator]),S.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(e,t){n["[object "+t+"]"]=t.toLowerCase()});var d=function(n){var e,d,b,o,i,h,f,g,w,u,l,T,C,a,E,v,s,c,y,S="sizzle"+1*new Date,p=n.document,k=0,r=0,m=ue(),x=ue(),A=ue(),N=ue(),j=function(e,t){return e===t&&(l=!0),0},D={}.hasOwnProperty,t=[],q=t.pop,L=t.push,H=t.push,O=t.slice,P=function(e,t){for(var n=0,r=e.length;n<r;n++)if(e[n]===t)return n;return-1},R="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",M="[\\x20\\t\\r\\n\\f]",I="(?:\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\[^\\r\\n\\f]|[\\w-]|[^\0-\\x7f])+",W="\\["+M+"*("+I+")(?:"+M+"*([*^$|!~]?=)"+M+"*(?:((?:\\\\.|[^\\\\])*)|\"((?:\\\\.|[^\\\\\"])*)\"|("+I+"))|)"+M+"*\\]",F=":("+I+")(?:\\(((((?:\\\\.|[^\\\\])*)|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+W+")*)|.*)\\)|)",B=new RegExp(M+"+","