• 博客系统详解

    博客系统的前端代码，我放在码云的，这里就不给大家重复展示了。

    https://gitee.com/zhang-qinyang1/class102.git

    目录

    1.设计一个简单网站的基本思路

    2.准备工作

    3.编写数据库的代码

    3.1数据库设计

    3.2数据库封装

    4.开发服务器controller和客户端的功能

    4.1博客列表页的展示

    4.2博客详情页的展示

    4.3登录功能

    4.4检测用户登录状态

    4.5能够正确显示用户信息

    4.6实现注销博客功能

    4.7实现发布博客功能

    4.8实现删除博客功能

    5.小结

    1.设计一个简单网站的基本思路

    （1）设计前后端交互的接口
    （2）实现服务器部分
    （3）实现客户端部分
    我们主要是采取客户端渲染来实现前后端分离

    2.准备工作

    这里的准备工作实际上就是一个servlet使用前所需要的导入工作

    ①创建Maven项目

    这里我给博客系统命名为blog_system

    ②引入依赖（servlet，Jackon，mysql）

    这里是在中央仓库去找你需要的

    Maven Repository: Search/Browse/Explore (mvnrepository.com)https://mvnrepository.com/③创建必要的目录

    在main的目录下创建webapp这个目录文件，之后再webapp这个目录下创建WEB-INF这个目录文件，在WEB-INF这个目录下创建文件web.xml;并且对其进行配置固定内容如下：

    1. web-app PUBLIC
    2.         "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
    3.         "http://java.sun.com/dtd/web-app_2_3.dtd" >
    4.  
    5. <web-app>
    6.     <display-name>Archetype Created Web Applicationdisplay-name>
    7. web-app>

    ④编写代码

    我们先试着随便输出一个来测试以上环境是否配置无误

    1. import javax.servlet.ServletException;
    2. import javax.servlet.annotation.WebServlet;
    3. import javax.servlet.http.HttpServlet;
    4. import javax.servlet.http.HttpServletRequest;
    5. import javax.servlet.http.HttpServletResponse;
    6. import java.io.IOException;
    7. @WebServlet("/test")
    8. public class TestServlet extends HttpServlet {
    9.     @Override
    10.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    11.         req.setCharacterEncoding("utf8");
    12.         resp.setContentType("text/html;charset=utf8");
    13.         resp.getWriter().write("这是用来测试环境的servlet");
    14.     }
    15. }

    ⑤⑥部署打包（用smart Tomcat）

     ⑦在浏览器中验证

    这里的时候需要注意一级路径与二级路径分别是什么

    3.编写数据库的代码

    数据库这里的操作大多是JDBC，因此大家首先需要对其熟悉，才能够看懂后续代码操作。

    3.1数据库设计

    数据库设计在这里的话就是指的创建数据库/数据表的结构
    对于我们博客的功能来说，我们需要发布博客，获取博客，以及用户登录。所以，建表的时候抓住实体，我们就很容易想到建博客表和用户表来进行操作。

    1. create database if not exists blog_system;
    2. use blog_system;
    3. --创建一个博客表
    4. drop table if exists blog;
    5. create table blog(
    6.   blogId int primary key auto_increment,
    7.   title varchar(1024),
    8.   content mediumtext,--对于blog而言，往往是较长的，所以我们这里用mediumtext来表示
    9.   userId int,--文章作者id
    10.   postTime datetime--发布的时间
    11. );
    12. --创建一个user表
    13. drop table if exists user;
    14. create table user(
    15. userId int primary key auto_increment,
    16. username varchar(1024) unique,
    17. password varchar(124)
    18. );
    19. insert into user values(null,'zhangsan','123');
    20. insert into user values(null,'lisi','123');

    然后将它插入到数据库中去，显示如下：

    插入的时候注意一些细节，比如去掉注释这些，不然的话就会报错

    3.2数据库封装

    （1）先创建DBUtil封装数据库连接的操作

    1. package model;
    2. import com.mysql.jdbc.Connection;
    3. import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;
    4. import javax.sql.DataSource;
    5. import java.sql.PreparedStatement;
    6. import java.sql.ResultSet;
    7. import java.sql.SQLException;
    8. //使用这个类和数据库建立连接
    9. public class DBUtil {
    10.     //这个不用背，每次复制粘贴就行
    11.     private static final String URL = "jdbc:mysql://127.0.0.1:3306/my_blog?characterEncoding=utf8&useSSL=false";
    12.     private static final String USERNAME = "root";
    13.     //数据库密码
    14.     private static final String PASSWORD = "123456";
    15.     private static volatile DataSource dataSource=null;
    16.     private  static DataSource getDataSource(){
    17.         if (dataSource==null){
    18.             synchronized (DBUtil.class){
    19.                 if (dataSource==null){
    20.                     dataSource=new MysqlDataSource();
    21.                     ((MysqlDataSource)dataSource).setURL(URL);
    22.                     ((MysqlDataSource)dataSource).setUser(USERNAME);
    23.                     ((MysqlDataSource)dataSource).setPassword(PASSWORD);
    24.                 }
    25.             }
    26.         }
    27.         return dataSource;
    28.     }
    29.     public static Connection getConnection()throws SQLException {
    30.         return (Connection) getDataSource().getConnection();
    31.     }
    32.     public static void close(Connection connection, PreparedStatement statement, ResultSet resultSet) throws SQLException {
    33.         if (resultSet!=null){
    34.             resultSet.close();
    35.         }
    36.         if(statement!=null){
    37.             statement.close();
    38.         }
    39.         if (connection!=null){
    40.             connection.close();
    41.         }
    42.     }
    43. }

    （2）创建实体类，使用实体来表示数据库中的一条内容，此处主要创建的是Blog类以及User类

    这里只展示Blog类

    1. package model;
    2. import java.sql.Timestamp;
    3. //每个Blog对象，对应blog表中的一条记录
    4. public class Blog {
    5.     //因为都是private,所以这里要重写get,set方法
    6.     private int BlogId;
    7.     private String title;
    8.     private String content;
    9.     private int UserId;
    10.     private Timestamp postTime;
    11.  
    12.     public void setBlogId(int blogId) {
    13.         BlogId = blogId;
    14.     }
    15.  
    16.     public int getBlogId() {
    17.         return BlogId;
    18.     }
    19.  
    20.     public String getTitle() {
    21.         return title;
    22.     }
    23.  
    24.     public void setTitle(String title) {
    25.         this.title = title;
    26.     }
    27.  
    28.     public String getContent() {
    29.         return content;
    30.     }
    31.  
    32.     public void setContent(String content) {
    33.         this.content = content;
    34.     }
    35.  
    36.     public int getUserId() {
    37.         return UserId;
    38.     }
    39.  
    40.     public void setUserId(int userId) {
    41.         UserId = userId;
    42.     }
    43.  
    44.     public Timestamp getPostTime() {
    45.         return postTime;
    46.     }
    47.  
    48.     public void setPostTime(Timestamp postTime) {
    49.         this.postTime = postTime;
    50.     }
    51. }

    （3）封装针对数据的增删查改，把提供增删查改的这样的类，称为DAO。这里也只展示BlogDao

    1. package model;
    2. import com.mysql.jdbc.Connection;
    3. import java.sql.PreparedStatement;
    4. import java.sql.ResultSet;
    5. import java.sql.SQLException;
    6. import java.util.ArrayList;
    7. import java.util.List;
    8. // 这个类用于去封装博客表的基本操作
    9. public class BlogDao {
    10.     // 1. 向博客列表中插入一个博客
    11.     public void insert(Blog blog) throws SQLException {
    12.         // JDBC 基本代码
    13.         Connection connection=null;
    14.         PreparedStatement statement=null;
    15.         try {
    16.             // ①和数据库建立连接.
    17.             connection = DBUtil.getConnection();
    18.             // ② 构造 SQL 语句
    19.             String sql = "insert into blog values(null, ?, ?, ?, now())";
    20.             statement=connection.prepareStatement(sql);
    21.             //第一个参数表示的是第几个？的位置
    22.             statement.setString(1, blog.getTitle());
    23.             statement.setString(2, blog.getContent());
    24.             statement.setInt(3,blog.getUserId());
    25.             // ③执行 SQL
    26.           statement.executeUpdate();
    27.         } catch (SQLException e) {
    28.             e.printStackTrace();
    29.         } finally {
    30.             // ④ 关闭连接, 释放资源
    31.             DBUtil.close(connection,statement,null);
    32.         }
    33.     }
    34.     // 2. 能够获取到博客表中的所有博客的信息 (用于在博客列表页, 此处每篇博客不一定会获取到完整的正文)
    35.     public List selectAll() throws SQLException {
    36.         Listblogs=new ArrayList<>();
    37.         Connection connection=null;
    38.         PreparedStatement statement=null;
    39.         ResultSet resultSet=null;
    40.         try {
    41.             connection=DBUtil.getConnection();
    42.             String sql="select * from blog";
    43.             statement=connection.prepareStatement(sql);
    44.             resultSet=statement.executeQuery();
    45.             //遍历整个集合
    46.             while(resultSet.next()){
    47.                 Blog blog=new Blog();
    48.                 blog.setBlogId(resultSet.getInt("blogId"));
    49.                 blog.setTitle(resultSet.getString("title"));
    50.                 blog.setContent(resultSet.getString("content"));
    51.                 blog.setUserId(resultSet.getInt("userId"));
    52.                 blog.setPostTime(resultSet.getTimestamp("postTime"));
    53.                 blogs.add(blog);
    54.             }
    55.         } catch (SQLException e) {
    56.             e.printStackTrace();
    57.         }finally {
    58.             DBUtil.close(connection, statement,resultSet );
    59.         }
    60.         return blogs;
    61.     }
    62.  
    63.     // 3. 能够根据博客 id 获取到指定的博客内容 (用于在博客详情页)
    64.     public Blog selectOne(int blogId) throws SQLException {
    65.         Connection connection=null;
    66.         PreparedStatement statement=null;
    67.         ResultSet resultSet=null;
    68.         try {
    69.             connection=DBUtil.getConnection();
    70.             String sql="select * from blog where blogId=?";
    71.             statement=connection.prepareStatement(sql);
    72.             statement.setInt(1,blogId);
    73.             resultSet=statement.executeQuery();
    74.             //由于id是唯一的，要么是0条，要么是唯一的，是主键作为查询条件的，所以直接用if
    75.             if (resultSet.next()){
    76.                 Blog blog=new Blog();
    77.                 blog.setBlogId(resultSet.getInt("blogId"));
    78.                 blog.setTitle(resultSet.getString("title"));
    79.                 blog.setContent(resultSet.getString("content"));
    80.                 blog.setUserId(resultSet.getInt("userId"));
    81.                 blog.setPostTime(resultSet.getTimestamp("postTime"));
    82.                 return blog;
    83.             }
    84.         } catch (SQLException e) {
    85.             e.printStackTrace();
    86.         }finally {
    87.             DBUtil.close(connection,statement,resultSet);
    88.         }
    89.         return null;
    90.     }
    91.     // 4. 从博客表中, 根据博客 id 删除博客.
    92.     public void delete(int blogId) throws SQLException {
    93.         Connection connection=null;
    94.         PreparedStatement statement=null;
    95.         try {
    96.             connection=DBUtil.getConnection();
    97.             String sql="delete from blog where blogId=?";
    98.             statement.setInt(1,blogId);
    99.             statement.executeUpdate();
    100.         } catch (SQLException e) {
    101.             e.printStackTrace();
    102.         }finally {
    103.             DBUtil.close(connection,statement,null);
    104.         }
    105.     }
    106.     // 注意, 上述操作是 增删查, 没有改
    107. }

    4.开发服务器controller和客户端的功能

    4.1博客列表页的展示

    ①需求：

    这个页面需要能够展示出数据库中的博客列表

    ②约定前后端的交互接口：

    ③编写服务器代码：

    1. package controller;
    2. import com.fasterxml.jackson.databind.ObjectMapper;
    3. import model.Blog;
    4. import model.BlogDao;
    5. import javax.servlet.ServletException;
    6. import javax.servlet.annotation.WebServlet;
    7. import javax.servlet.http.HttpServlet;
    8. import javax.servlet.http.HttpServletRequest;
    9. import javax.servlet.http.HttpServletResponse;
    10. import java.io.IOException;
    11. import java.util.List;
    12. @WebServlet("/blog")
    13. public class BlogServlet extends HttpServlet {
    14.     private ObjectMapper objectMapper=new ObjectMapper();
    15.     @Override
    16.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    17.         //从数据库中查询到博客列表，转成json格式，直接返回
    18.         //查询数据库
    19.         BlogDao blogDao=new BlogDao();
    20.         List blogs=blogDao.selectAll();
    21.         //将blogs转成json格式
    22.         String respJson=objectMapper.writeValueAsString(blogs);
    23.         resp.setContentType("application/json;charset=utf8");
    24.         resp.getWriter().write(respJson);
    25.     }
    26. }

    ④编写客户端代码：

    在页面加载的时候，让页面通过ajax访问服务器，获取到数据库中的博客数据，并且填到页面中

    1. !DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>博客列表title>
    8.     <link rel="stylesheet" href="css/blog_list.css">
    9.     <link rel="stylesheet" href="css/common.css">
    10. head>
    11. <body>
    12.     
    13.     <div class="nav">
    14.         <img src="images/1.jpg" alt="">
    15.         <span >我的博客系统span>
    16.         
    17.         <div class="spacer">div>
    18.         <a href="blog_list.html">主页a>
    19.         <a href="blog_edit.html">写博客a>
    20.         <a href="#">注销a>
    21.     div>
    22.     
    23.     <div class="container">
    24.         
    25.         <div class="left">
    26.             
    27.          <div class="card">
    28.              <img src="./images/3.webp" alt="">
    29.              <h3>知名博主h3>
    30.              <a href="">博客网址a>
    31.              <div class="counter">
    32.                  <span>文章span>
    33.                  <span>分类span>
    34.              div>
    35.              <div class="counter">
    36.                  <span>2span>
    37.                  <span>1span>
    38.              div>
    39.          div>
    40.         div>
    41.         
    42.         <div class="right">
    43.         
    44.         div>
    45.         div>
    46.     div>
    47.     <script src="http://code.jquery.com/jquery-2.1.1.min.js">script>
    48.     <script>
    49.         //在页面加载的时候，通过ajax给服务器发送消息，获取到博客列表信息，并且显示在页面上
    50.         function getBlogList(){
    51.             $.ajax({
    52.                 type:'get',
    53.                 url:'blog',
    54.                 success:function(body){
    55.                     //获取到的body就是一个js对象数组，每个元素就是一个js对象，根据这个对象来构造一个div
    56.                     //1.把原来.right里面原有的内容清空，替换成从数据库服务器拿到的
    57.                     let rightDiv=document.querySelector('.right');
    58.                     rightDiv.innerHTML='';//清空原有数据
    59.                     //2.遍历body，构造出一个个blogDiv
    60.                     for(let blog of body){
    61.                         let blogDiv=document.createElement('div');
    62.                         //针对blogDiv设置一个属性，类名设为blog
    63.                         blogDiv.className='blog';
    64.                         //构造内部元素
    65.                         //构造标题
    66.                         let titleDiv=document.createElement('div');
    67.                        titleDiv.className='title';
    68.                         titleDiv.innerHTML=blog.title;
    69.                         //作为子元素添加进去
    70.                         blogDiv.appendChild(titleDiv);
    71.                         //构造发布时间
    72.                         let dateDiv=document.createElement('div');
    73.                         dateDiv.className='date';
    74.                         dateDiv.innerHTML=blog.postTime;
    75.                         blogDiv.appendChild(dateDiv);
    76.                         //构造摘要
    77.                         let descDiv=document.createElement('div');
    78.                         descDiv.className='desc';
    79.                         descDiv.innerHTML=blog.content;
    80.                         blogDiv.appendChild(descDiv);
    81.                         //链接 查看全文(这里用的是a标签)
    82.                         let a=document.createElement('a');
    83.                         a.innerHTML='查看全文 >>';
    84.                         //希望点击后能跳转到博客详情页
    85.                         //跳转要告知哪个博客的详情页
    86.                         a.href='blog_detail.html?blogId='+blog.blogId;
    87.                         blogDiv.appendChild(a);
    88.                         //把blogDiv挂到dom树上
    89.                         rightDiv.appendChild(blogDiv);
    90.  
    91.                     }
    92.                 },
    93.                 error:function(){
    94.                     alert("获取博客列表失败");
    95.                 }
    96.  
    97.             });
    98.         }
    99.         getBlogList();
    100.     script>
    101. body>
    102. html>

    展示效果：当我们在数据库中插入一条数据后，他会更新到列表页的最前面

    值得注意的是：

    a.db.sql中的代码并不会生效，我们需要把其添加到mysql中去

    b.可以利用postman来看我们构造的响应body中返回的数据格式与希望的是不是一致的

    c.转换时间格式：yyyy-MM-dd HH:mm:ss(分别指的是年月日 小时分钟秒钟) 

    d.要想插入的博客是按照时间约后发布越在上面，就不能忘了加上order by desc来进行降序的排列

    4.2博客详情页的展示

    ①需求：

    这里用来获取博客的详情页，发送的请求。希望得到的页面能够显示出博客对应的正文内容
    而这个正文内容，我们通过ajax来进行获取。在blog_detail.html页面加载的时候，触发ajax请求来访问服务器，获取到博客内容，再次填充到博客详情页里面去。
    ②前后端的交互接口：

    注意：这里我们是通过某个博客的id来确定具体要访问哪个内容的。与博客列表页不同之处有以下三点：

    （1）请求中带有参数blogId

    （2）结果响应不是json数组，而是单一的对象（因为具体到了某一个）

    （3） 响应博客的正文，不用进行截断了

    ③编写服务器代码：

    此处服务器代码几乎和博客列表页一致，唯一不同的点就是有了个blogId来区分是博客列表还是详情，因此我们还是放到同一个方法中来实现

    1. package controller;
    2. import com.fasterxml.jackson.databind.ObjectMapper;
    3. import model.Blog;
    4. import model.BlogDao;
    5. import javax.servlet.ServletException;
    6. import javax.servlet.annotation.WebServlet;
    7. import javax.servlet.http.HttpServlet;
    8. import javax.servlet.http.HttpServletRequest;
    9. import javax.servlet.http.HttpServletResponse;
    10. import java.io.IOException;
    11. import java.util.List;
    12.  
    13. @WebServlet("/blog")
    14. public class BlogServlet extends HttpServlet {
    15.     private ObjectMapper objectMapper=new ObjectMapper();
    16.     @Override
    17.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    18.         //从数据库中查询到博客列表，转成json格式，直接返回
    19.         //查询数据库
    20.  
    21.         BlogDao blogDao=new BlogDao();
    22.         // 先尝试获取到 req 中的 blogId 参数. 如果该参数存在, 说明是要请求博客详情页
    23.         // 如果该参数不存在, 说明是要请求博客的列表.
    24.         //因为这里是get，我们直接可以在URL中判断该参数是否存在
    25.         String param=req.getParameter("blogId");
    26.         //当其不存在是则是获取列表页
    27.         if(param==null){
    28.             List blogs=blogDao.selectAll();
    29.             //将blogs转成json格式
    30.             String respJson=objectMapper.writeValueAsString(blogs);
    31.             resp.setContentType("application/json;charset=utf8");
    32.             resp.getWriter().write(respJson);
    33.         }else {//存在参数，则是获取博客详情页
    34.             int blogId = Integer.parseInt(param);//包装类转换成Integer
    35.             Blog blog = blogDao.selectOne(blogId);
    36.             //用json对象来进行接收
    37.             String respJson = objectMapper.writeValueAsString(blog);
    38.             resp.setContentType("application/json;charset=utf8");
    39.             resp.getWriter().write(respJson);
    40.         }
    41.     }
    42. }

    ④编写客户端代码：

    前端代码这边，要想构造一个请求获取博客详情，就得知道当前用户的博客id,当然这个id已经在当前的blog_detail.html页面的url中了。在前端的时候，我们可以通过location.search来获取到blogId.

    1.  
    2. html>
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>博客详情页title>
    9.     <link rel="stylesheet" href="css/blog_detail.css">
    10.     link<link rel="stylesheet" href="css/common.css">
    11.     
    12.     <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    13.     <script src="http://code.jquery.com/jquery-2.1.1.min.js">script>
    14.     <script src="editor.md/lib/marked.min.js">script>
    15.     <script src="editor.md/lib/prettify.min.js">script>
    16.     <script src="editor.md/editormd.js">script>
    17. head>
    18. <body>
    19.       
    20.       <div class="nav">
    21.         <img src="images/1.jpg" alt="">
    22.         <span >我的博客系统span>
    23.         
    24.         <div class="spacer">div>
    25.         <a href="blog_list.html">主页a>
    26.         <a href="blog_edit.html">写博客a>
    27.         <a href="#">注销a>
    28.     div>
    29.       
    30.       <div class="container">
    31.         
    32.         <div class="left">
    33.             
    34.          <div class="card">
    35.              <img src="./images/3.webp" alt="">
    36.              <h3>知名博主h3>
    37.              <a href="">博客网址a>
    38.              <div class="counter">
    39.                  <span>文章span>
    40.                  <span>分类span>
    41.              div>
    42.              <div class="counter">
    43.                  <span>2span>
    44.                  <span>1span>
    45.              div>
    46.          div>
    47.         div>
    48.         
    49.         <div class="right">
    50.             
    51.             <div class="blog-content">
    52.                 
    53.                 <h3>h3>
    54.                 
    55.                 <div class="date">div>
    56.                 
    57.                 <div id="content">div>
    58.             div>
    59.             div>
    60.     div>
    61.     
    62.     <script>
    63.         function getBlogDetail(){
    64.             $.ajax({
    65.                 type:'get',
    66.                 url:'blog'+location.search,
    67.                 success:function(body){
    68.                     //根据body内容来构造页面
    69.                     //①title
    70.                     let h3=document.querySelector(".blog-content>h3");
    71.                     h3.innerHTML=body.title;
    72.                     //②postTime
    73.                     let dateDiv=document.querySelector(".date");
    74.                     dateDiv.innerHTML=body.postTime;
    75.                     //③正文
    76.                     // let content=document.querySelector("#content");
    77.                     // content.innerHTML=body.content;
    78.                     //为了展现出来是Markdown的形式，所以引入editor.markdown操作
    79.                     editormd.markdownToHTML('content',{
    80.                         markdown:body.content
    81.                     });
    82.  
    83.                 }
    84.             });
    85.  
    86.         }
    87.         getBlogDetail();
    88.     script>
    89. body>

    注意！！！这里的难点主要有三个问题：

    a.弄清楚blogId到底是怎么来的

     b.为什么要引入editor.md？

    因为我们编辑的时候用的是Markdown格式的，要想响应的时候也是，就需要引入相应的需求

    c.为了防止出现乱码情况，我们一定要设置格式！！！而且要注意整体和局部之间的关系！！！

    展示结果： 

    4.3登录功能

    ①需求：

    实现登录，当登录之后跳转至博客列表页

    ②实现前后端交互：

    很显然，我们这里决定基于form表单来实现，当然ajax也可以，只是这里用form表单

    ③服务器代码：

    1. package controller;
    2. import model.User;
    3. import model.UserDao;
    4. import javax.servlet.ServletException;
    5. import javax.servlet.annotation.WebServlet;
    6. import javax.servlet.http.HttpServlet;
    7. import javax.servlet.http.HttpServletRequest;
    8. import javax.servlet.http.HttpServletResponse;
    9. import javax.servlet.http.HttpSession;
    10. import java.io.IOException;
    11.  
    12. @WebServlet("/login")
    13. public class LoginServlet extends HttpServlet {
    14.     @Override
    15.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    16.         req.setCharacterEncoding("utf-8");
    17.         resp.setCharacterEncoding("utf-8");
    18.         //①获取到参数中的请求
    19.         String username=req.getParameter("username");
    20.         String password=req.getParameter("password");
    21.         if(username == null || "".equals(username) || password == null || "".equals(password)) {
    22.             // 请求内容缺失，登录失败
    23.             resp.setContentType("text/html; charset=utf8");
    24.             resp.getWriter().write("当前的用户名或者密码为空");
    25.             return;
    26.         }
    27.         //②和数据库里面存储的数据进行比对
    28.         UserDao userDao=new UserDao();
    29.         User user=userDao.selectByName(username);
    30.         if(user == null || !user.getPassword().equals(password)) {
    31.             // 用户没有查到或者密码不匹配，登录失败
    32.             resp.setContentType("text/html;charset=utf8");
    33.             resp.getWriter().write("用户名或密码错误");
    34.             return;
    35.         }
    36.         //③如果比较通过，则用会话记录下来,即创建会话
    37.         HttpSession session= req.getSession(true);
    38.         //将信息存入会话中
    39.         session.setAttribute("user",user);
    40.         //④跳转页面，页面重定向
    41.         resp.sendRedirect("blog_list.html");
    42.     }
    43. }

    ④客户端代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>登录页面title>
    8.     <link rel="stylesheet" href="css/common.css">
    9.     <link rel="stylesheet" href="css/blog_login.css">
    10. head>
    11. <body>
    12.     
    13.     <div class="nav">
    14.         <img src="./images/1.jpg" alt="">
    15.         <span>我的博客系统span>
    16.         
    17.         <div class="spacer">div>
    18.         <a href="blog_list.html">主页a>
    19.         <a href="blog_edit.html">写博客a>
    20.         
    21.         
    22.     div>
    23.     <div class="login-container">
    24.         <form action="login" method="post">
    25.             <div class="login-dialog">
    26.                 <h3>登录h3>
    27.                 <div class="row">
    28.                     <span>用户名span>
    29.                     <input type="text" id="username" name="username">
    30.                 div>
    31.                 <div class="row">
    32.                     <span>密码span>
    33.                     <input type="password" id="password" name="password">
    34.                 div>
    35.                 <div class="row">
    36.                     
    37.                     <input type="submit" id="submit" value="提交">
    38.                 div>
    39.             div>
    40.         form>
    41.     div>
    42. body>
    43. html>

    结果展示：

     注意！！！值得注意的是用form表单的时候，不要忘了添加name属性，还有css里面的格式会随着属性的改变可能会不同。并且form表单中提交按钮不能是button，要是type类型的submit。

    4.4检测用户登录状态

    ①需求：

    当登录功能完成后，我们要调节一下列表页和详情页，使得这两个页面只有登录了才能访问，要是没有登录就跳转到登录页面

    ②实现前后端交互接口：

    ③服务器代码：

    我们就直接在上述代码中直接添加一个doGet方法，用来检验这个时候用户的登录状态就好。因此，我们这里的代码也就是直接连着的上面的

    1. //用来检验用户的登录状态
    2.     @Override
    3.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    4.         resp.setContentType("application/json;charset=utf8");
    5.         //①获取开始存在的会话，看会话是否存在，会话都不存在的话，那么必然是没有登录
    6.         //因为false是不会创建新的会话的
    7.         HttpSession session=req.getSession(false);
    8.         if (session==null){
    9.             //没有会话
    10.             //创建对象，里面为空，并返回,注意这里返回空，就不用和数据库进行连接,，但是仍然是json格式的，所以用mapper来转换
    11.             User user=new User();
    12.             resp.getWriter().write(objectMapper.writeValueAsString(user));
    13.             return;
    14.         }
    15.         //拿到了会话，但是会话里面的user为空值
    16.         User user= (User) session.getAttribute("user");
    17.         if (user==null){
    18.             //这个时候，仍然是没有登录，那么仍然返回空
    19.             user = new User();
    20.             resp.getWriter().write(objectMapper.writeValueAsString(user));
    21.             return;
    22.         }
    23.         //获取到了session，且里面的user并不为空，那么可以继续访问
    24.         //但是注意不要把密码返回给了前端
    25.         user.setPassword("");
    26.         resp.getWriter().write(objectMapper.writeValueAsString(user));
    27.     }

    ④客户端代码：

    对于一些通用的代码，我们可以放到一个js里面来统一管理，然后其他页面直接调用它就好，这里我们把其命名为common.js。然后把这个js分别引入到列表页和详情页即可。

    common.js

    1. // 这个文件里放一些 页面公共的代码
    2. // 加上一个逻辑，通过 GET/login 这个接口来获取下当前的登录状态
    3. function getUserInfo() {
    4.     $.ajax({
    5.         type: 'get',
    6.         url: 'login',
    7.         success: function(body) {
    8.             // 判定此处的 body 是不是一个有效的 user 对象（userId 是否非 0）
    9.             if(body.userId && body.userId >0) {
    10.                 // 登录成功
    11.                 // 不做处理
    12.                 console.log("当前用户登录成功！用户名：" + body.username);
    13.             }else{
    14.                 // 登录失败
    15.                 // 让前端页面，跳转到 login.html
    16.                 alert("当前你尚未登录！请登录后再访问博客列表！");
    17.                 location.assign('blog_login.html');
    18.             }
    19.         },
    20.         error: function() {
    21.             alert("当前你尚未登录！请登录后再访问博客列表！");
    22.                 location.assign('blog_login.html');
    23.         }
    24.     });
    25.     
    26.  
    27. }
    28. getUserInfo();

    引入：

    结果展示：（当我们直接访问列表页时） 

    当我们点击确定或者等待一段时间后，就会跳转到登录页面：

     而当我们登录后就不会出现这种情况。

    4.5能够正确显示用户信息

    由于我们登录的人是可能与发布文章的博主是不同的人，但是我们发现，当我们进去的时候登录的用户是zhangsan,但是写博客的可能不是zhangsan,所以我们要实现能够根据具体情况进行转换。

    ①需求：

    让在列表页显示的用户名称是用户的登陆者，而在详情页具体某篇博客时，显示的是作者本人。

    博客列表页：

    而我们可以发现针对博客列表页来说，其实前面已经处理过了，我们通过ajax得到了body，此时我们只需要在前端代码中稍作改动，拿到当前改动的这个名字，作为当前用户名即可。

    所以我们只需要在common.js里面做改动

    1. /// 这个文件里放一些页面公共的代码
    2.  
    3. // 加上一个逻辑, 通过 GET /login 这个接口来获取下当前的登录状态~
    4. function getUserInfo() {
    5.     $.ajax({
    6.         type: 'get',
    7.         url: 'login',
    8.         success: function(body) {
    9.             // 判定此处的 body 是不是一个有效的 user 对象(userId 是否非 0)
    10.             if (body.userId && body.userId > 0) {
    11.                 // 登录成功!
    12.                 // 不做处理!
    13.                 console.log("当前用户登录成功! 用户名: " + body.username);
    14.  
    15.                 // 根据当前用户登录的情况, 把当前用户名设置到界面上
    16.                     changeUserName(body.username);
    17.             } else {
    18.                 // 登录失败!
    19.                 // 让前端页面, 跳转到 login.html
    20.                 alert("当前您尚未登录! 请登录后再访问博客列表!");
    21.                 location.assign('blog_login.html');
    22.             }
    23.         },
    24.         error: function() {
    25.             alert("当前您尚未登录! 请登录后再访问博客列表!");
    26.             location.assign('blog_login.html');
    27.         }
    28.     });
    29. }
    30. getUserInfo();
    31. function changeUserName(username){
    32.     let h3=document.querySelector('.card>h3');
    33.     h3.innerHTML=username;
    34.  
    35. }

    此时我们在列表页看到的用户名就是我们登录时的用户名了

    博客详情页：

    根据上面的操作，我们发现，当我们进入任何一篇内容时，用户名都是zhangsan;

     然而实际上第五篇的作者却是wangwu,所以说我们得在列表页与详情页作出区分。而如何区分呢？很显然，我们可以通过blogId来提供新的接口，这个接口可以让客户端指定blogId,从而获取指定blogId的作者信息

    ②前后端交互接口：

    ③后端服务器代码：

    1. package controller;
    2. import com.fasterxml.jackson.databind.ObjectMapper;
    3. import model.Blog;
    4. import model.BlogDao;
    5. import model.User;
    6. import model.UserDao;
    7. import javax.servlet.ServletException;
    8. import javax.servlet.annotation.WebServlet;
    9. import javax.servlet.http.HttpServlet;
    10. import javax.servlet.http.HttpServletRequest;
    11. import javax.servlet.http.HttpServletResponse;
    12. import java.io.IOException;
    13. @WebServlet("/authorInfo")
    14. public class AuthorServlet extends HttpServlet {
    15.     private ObjectMapper objectMapper=new ObjectMapper();
    16.     @Override
    17.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    18.         //获取指定博客的作者信息
    19.         resp.setContentType("application/json;charset=utf8");
    20.         String param=req.getParameter("blogId");
    21.         if(param==null || "".equals(param)){
    22.             resp.getWriter().write("{ \"ok\": false, \"reason\": \"参数缺失!\" }");
    23.             return;
    24.         }
    25.         //根据当前blogId,在数据库中进行查找，找到对应的blog对象，再进一步根据blog对象，找到作者信息
    26.         BlogDao blogDao=new BlogDao();
    27.         Blog blog=blogDao.selectOne(Integer.parseInt(param));
    28.         if(blog==null){
    29.             resp.setContentType("application/json;charset=utf8");
    30.             resp.getWriter().write("{ \"ok\": false, \"reason\": \"参数缺失!\" }");
    31.             return;
    32.         }
    33.         // 根据 blog 对象, 查询到用户对象
    34.         UserDao userDao = new UserDao();
    35.         User author = userDao.selectById(blog.getUserId());
    36.         if (author == null) {
    37.             resp.getWriter().write("{ \"ok\": false, \"reason\": \"要查询的用户不存在!\" }");
    38.             return;
    39.         }
    40.  
    41.         // 把 author 返回到浏览器这边
    42.         // 把密码给去掉
    43.         author.setPassword("");
    44.         resp.getWriter().write(objectMapper.writeValueAsString(author));
    45.     }
    46. }

    ④客户端代码： (这里主要是此处的核心代码)

    1.   //从服务器获取一下当前博客的作者信息，并且显示到界面上
    2.         function getAuthorInfo(){
    3.             $.ajax({
    4.                 type:'get',
    5.                 url:'authorInfo'+location.search,
    6.                 success:function(body){
    7.                     // 此处的 body, 就是服务器返回的 User 对象, 是文章的作者信息
    8.                     if (body.username) {
    9.                         // 如果响应中的 username 存在, 就把这个值设置到页面上. 
    10.                         changeUserName(body.username)
    11.                     }else{
    12.                         console.log("获取作者信息失败"+body.reason);
    13.                     }
    14.                 }
    15.             });
    16.         }
    17.         getAuthorInfo();

    common.js里面的内容也要稍作修改，代码如下：

    1. // 这个文件里放一些页面公共的代码
    2.  
    3. // 加上一个逻辑, 通过 GET /login 这个接口来获取下当前的登录状态~
    4. function getUserInfo(pageName) {
    5.     $.ajax({
    6.         type: 'get',
    7.         url: 'login',
    8.         success: function(body) {
    9.             // 判定此处的 body 是不是一个有效的 user 对象(userId 是否非 0)
    10.             if (body.userId && body.userId > 0) {
    11.                 // 登录成功!
    12.                 // 不做处理!
    13.                 console.log("当前用户登录成功! 用户名: " + body.username);
    14.  
    15.                 // 根据当前用户登录的情况, 把当前用户名设置到界面上
    16.                 if (pageName == 'blog_list.html') {
    17.                     changeUserName(body.username);
    18.                 }
    19.             } else {
    20.                 // 登录失败!
    21.                 // 让前端页面, 跳转到 login.html
    22.                 alert("当前您尚未登录! 请登录后再访问博客列表!");
    23.                 location.assign('blog_login.html');
    24.             }
    25.         },
    26.         error: function() {
    27.             alert("当前您尚未登录! 请登录后再访问博客列表!");
    28.             location.assign('blog_login.html');
    29.         }
    30.     });
    31. }
    32.  
    33. function changeUserName(username) {
    34.     let h3 = document.querySelector('.card>h3');
    35.     h3.innerHTML = username;
    36. }

    结果展示：

    我们就可以看到第五篇博客的作者是wangwu了 

    我们需要注意的点是，在完成局部功能函数后，一定不要忘记调用它，不然就毫无意义了。

    4.6实现注销博客功能

    ①需求：
    退出当前的登录状态，当我们点击注销按钮之后，就会在服务器上取消登录并且能够跳转到登录页面。

    ②前后端交互接口:

    ③服务器后端代码：

    我们希望点击注销后，能够给服务器发送一个HTTP请求，从而触发注销动作，具体来说就是这个动作把会话中的信息给删掉就行

    1. package controller;
    2. import javax.servlet.ServletException;
    3. import javax.servlet.annotation.WebServlet;
    4. import javax.servlet.http.HttpServlet;
    5. import javax.servlet.http.HttpServletRequest;
    6. import javax.servlet.http.HttpServletResponse;
    7. import javax.servlet.http.HttpSession;
    8. import java.io.IOException;
    9. @WebServlet("/logout")
    10. public class LogoutServlet extends HttpServlet {
    11.     @Override
    12.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    13.         //先找到当前用户的会话
    14.         HttpSession session=req.getSession(false);
    15.         if (session==null){
    16.             //用户没登录，就不用注销啦
    17.             resp.getWriter().write("当前用户没有登录，无法注销");
    18.         }
    19.         //然后把这个用户的会话中的信息删掉
    20.         session.removeAttribute("user");
    21.         resp.sendRedirect("blog_login.html");
    22.     }
    23. }

    什么叫做登录呢？

    用户有一个session，同时session有一个user属性，两个同时具备，才叫做登录状态。注销，只需要破坏上面的任意一个条件就OK啦，此处选择的破坏第二个条件，也就是让session不具备user属性，把user属性从session中删了。为啥不删会话呢？因为没有提供删会话的API。我们可以看我们检测登录状态的代码，会看到两者必须同时具备；

    无论删谁，都会返回null，也就是说都会被认为是未登录状态。 

     ④客户端代码：

    我们把博客列表页，详情页和编辑页的注销按钮的herf属性作出修改即可

     结果展示：（此时当我们点击注销，就会回到登录页面）

     注意！！！博客登录页不用设置注销按钮的。

    4.7实现发布博客功能

    ①需求：

    ​​​​​​​在博客编辑页中，当用户输入了博客标题和正文，点击发布后，此时就会把这些数据提交到服务器，由服务器存储到数据库中

    ②前后端交互接口：

    ③服务器代码：（在blogservlet中继续创建写在post请求中的）

    1.     @Override
    2.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    3.         resp.setCharacterEncoding("utf8");
    4.         req.setCharacterEncoding("utf8");
    5.         HttpSession session=req.getSession();
    6.         if (session==null){
    7.             //当前用户未登录，不能提交
    8.             resp.setContentType("text/html;charset=utf8");
    9.             resp.getWriter().write("当前用户未登录，不能提交博客！");
    10.             return;
    11.         }
    12.         User user= (User) session.getAttribute("user");
    13.         if (user==null){
    14.             //当前用户未登录，不能提交
    15.             resp.setContentType("text/html;charset=utf8");
    16.             resp.getWriter().write("当前用户未登录，不能提交博客！");
    17.             return;
    18.         }
    19.         //先从请求中取出参数，博客的标题和正文
    20.         resp.setCharacterEncoding("utf8");
    21.         String title=req.getParameter("title");
    22.         String content=req.getParameter("content");
    23.         if (title==null||"".equals(title)||content==null||"".equals(content)){
    24.             //参数有误
    25.             resp.getWriter().write("提交博客失败，缺少必要的参数");
    26.             return;
    27.         }
    28.         //构造blog对象，把当前的信息填进去，并插入数据库中
    29.         //此处要设置的属性主要是title，content，userId;而postTime和blogId都是系统自动生成的
    30.         Blog blog=new Blog();
    31.         blog.setTitle(title);
    32.         blog.setContent(content);
    33.         blog.setUserId(user.getUserId());//作者id就是当前提交这个博客的用户的身份信息
    34.         BlogDao blogDao=new BlogDao();
    35.         blogDao.insert(blog);
    36.         //新增成功后重定向到列表页
    37.         resp.sendRedirect("blog_list.html");
    38.     }
    39. }

    ④客户端代码:

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>博客编辑页title>
    8.     <link rel="stylesheet" href="css/common.css">
    9.     <link rel="stylesheet" href="css/blog_edit.css">
    10.  
    11.     
    12.     <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    13.     <script src="jquery.js">script>
    14.     <script src="editor.md/lib/marked.min.js">script>
    15.     <script src="editor.md/lib/prettify.min.js">script>
    16.     <script src="editor.md/editormd.js">script>
    17. head>
    18. <body>
    19.     
    20.     <div class="nav">
    21.         <img src="./images/1.jpg" alt="">
    22.         <span>我的博客系统span>
    23.         
    24.         <div class="spacer">div>
    25.         <a href="blog_list.html">主页a>
    26.         <a href="blog_edit.html">写博客a>
    27.         <a href="logout">注销a>
    28.     div>
    29.     
    30.     <div class="blog-edit-container">
    31.         <form action="blog" method="post" style="height:100%">
    32.             <div class="title">
    33.                 <input type="text" placeholder="在此处输入标题" name="title">
    34.                 <input type="submit" value="发布文章" id="submit">
    35.             div>
    36.             
    37.             <div id="editor">
    38.                 
    39.                 
    40.                 <textarea name="content" style="display: none">textarea>
    41.             div>
    42.         form>
    43.       
    44.     div>
    45.  
    46.     <script>
    47.         // 初始化编辑器
    48.         let editor = editormd("editor", {
    49.             // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
    50.             width: "100%",
    51.             // 设定编辑器高度
    52.             height: "calc(100% - 50px)",
    53.             // 编辑器中的初始内容
    54.             markdown: "# 在这里写下一篇博客",
    55.             // 指定 editor.md 依赖的插件路径
    56.             path: "editor.md/lib/",
    57.             // 此处要加上一个重要的选项, 然后 editor.md 就会自动把用户在编辑器输入的内容同步保存到 隐藏的 textarea 中
    58.             saveHTMLToTextarea: true,
    59.         });
    60.     script>
    61. body>
    62. html>

     结果显示：（当我们写一篇新的文章提交后，会自动跳转到博客列表，并且刷新当前内容）

    注意!!

    form表单的添加与修改，以及为了延续Markdown使用的textarea的调节。还有别忘了在将button修改后应该注意对应在css中同样进行修改，不然样式就会有所改变。 

    4.8实现删除博客功能

    ①需求：

    我们这里的删除博客，不考虑管理员删除，只考虑我们自己删除。因此，在博客详情页上我们就要进行判定，判定当前这个博客的作者，是否就是登录的用户，如果是，就在导航栏显示一个“删除按钮”，如果哦不是，就不显示删除按钮。而在博客详情页这里，其实既从服务器获取了当前用户的登录信息，又获取到了博客的作者信息，我们主要看这两个接口返回的用户信息是不是一样的。

    ②前后端交互：

     

    ③服务器代码：

    1. package controller;
    2.  
    3. import model.Blog;
    4. import model.BlogDao;
    5. import model.User;
    6.  
    7. import javax.servlet.ServletException;
    8. import javax.servlet.annotation.WebServlet;
    9. import javax.servlet.http.HttpServlet;
    10. import javax.servlet.http.HttpServletRequest;
    11. import javax.servlet.http.HttpServletResponse;
    12. import javax.servlet.http.HttpSession;
    13. import java.io.IOException;
    14.  
    15. @WebServlet("/blogDelete")
    16. public class BlogDeleteServlet extends HttpServlet {
    17.     @Override
    18.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    19.         //1.检查用户是否登录
    20.         HttpSession session=req.getSession();
    21.         if (session==null){
    22.             resp.setContentType("text/html;charset=utf8");
    23.             resp.getWriter().write("当前尚未登录，不能删除");
    24.             return;
    25.         }
    26.         User user= (User) session.getAttribute("user");
    27.         if (user==null){
    28.             resp.setContentType("text/html;charset=utf8");
    29.             resp.getWriter().write("当前尚未登录，不能删除");
    30.             return;
    31.         }
    32.         //2.获取到参数中的blogId
    33.         String blogId=req.getParameter("blogId");
    34.         if (blogId==null||"".equals(blogId)){
    35.             resp.setContentType("text/html;charset=utf8");
    36.             resp.getWriter().write("当前blog参数不对");
    37.             return;
    38.         }
    39.         //3.获取要删除的博客信息
    40.         BlogDao blogDao=new BlogDao();
    41.         Blog blog=blogDao.selectOne(Integer.parseInt(blogId));
    42.         if (blog==null){
    43.             resp.setContentType("text/html;charset=utf8");
    44.             resp.getWriter().write("当前要生成的博客不存在");
    45.             return;
    46.         }
    47.         //4.当前用户是不是作者
    48.         if (user.getUserId()!=blog.getUserId()){
    49.             resp.setContentType("text/html;charset=utf8");
    50.             resp.getWriter().write("当前登录的用户不是作者，没有权限");
    51.             return;
    52.         }
    53.         //5.没有问题了,进行删除
    54.         blogDao.delete(Integer.parseInt(blogId));
    55.         //6.重定向到列表页
    56.         resp.sendRedirect("blog_list.html");
    57.     }
    58. }

    ④客户端代码：

    1.  
    2. html>
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>博客详情页title>
    9.     <link rel="stylesheet" href="css/blog_detail.css">
    10.     <link rel="stylesheet" href="css/common.css">
    11.     
    12.     <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    13.     <script src="http://code.jquery.com/jquery-2.1.1.min.js">script>
    14.     <script src="editor.md/lib/marked.min.js">script>
    15.     <script src="editor.md/lib/prettify.min.js">script>
    16.     <script src="editor.md/editormd.js">script>
    17. head>
    18. <body>
    19.       
    20.       <div class="nav">
    21.         <img src="images/1.jpg" alt="">
    22.         <span >我的博客系统span>
    23.         
    24.         <div class="spacer">div>
    25.         <a href="blog_list.html">主页a>
    26.         <a href="blog_edit.html">写博客a>
    27.         <a href="logout">注销a>
    28.     div>
    29.       
    30.       <div class="container">
    31.         
    32.         <div class="left">
    33.             
    34.          <div class="card">
    35.              <img src="./images/3.webp" alt="">
    36.              <h3>h3>
    37.              <a href="">博客网址a>
    38.              <div class="counter">
    39.                  <span>文章span>
    40.                  <span>分类span>
    41.              div>
    42.              <div class="counter">
    43.                  <span>2span>
    44.                  <span>1span>
    45.              div>
    46.          div>
    47.         div>
    48.         
    49.         <div class="right">
    50.             
    51.             <div class="blog-content">
    52.                 
    53.                 <h3>h3>
    54.                 
    55.                 <div class="date">div>
    56.                 
    57.                 <div id="content">div>
    58.             div>
    59.             div>
    60.     div>
    61.     <script>
    62.         function getBlogDetail() {
    63.             $.ajax({
    64.                 type: 'get',
    65.                 // location.search 拿到了形如 '?blogId=5' 这样的一段内容
    66.                 url: 'blog' + location.search,
    67.                 success: function(body) {
    68.                     // 根据 body 中的内容来构造页面
    69.                     // 1. 构造博客标题
    70.                     let h3 = document.querySelector(".blog-content>h3");
    71.                     h3.innerHTML = body.title;
    72.                     // 2. 构造博客发布时间
    73.                     let dateDiv = document.querySelector('.date');
    74.                     dateDiv.innerHTML = body.postTime;
    75.                     // 3. 构造博客正文
    76.                     // 如果直接把 content 设为 innerHTML, 此时展示在界面上的内容, 是原始的 markdown 字符串
    77.                     // 咱们需要的是渲染后的, 带有格式的效果
    78.                     // let content = document.querySelector('#content');
    79.                     // content.innerHTML = body.content;
    80.  
    81.                     // 第一个参数对应 id=content 的 html 标签. 渲染后得到的 html 片段就会被放到这个 标签下. 
    82.                     editormd.markdownToHTML('content', {
    83.                         markdown: body.content
    84.                     });
    85.                 }
    86.             });
    87.         }
    88.  
    89.         getBlogDetail();
    90.  
    91.  
    92.         // 加上一个逻辑, 通过 GET /login 这个接口来获取下当前的登录状态~
    93.         function getUserInfo(pageName) {
    94.             $.ajax({
    95.                 type: 'get',
    96.                 url: 'login',
    97.                 success: function(body) {
    98.                     // 判定此处的 body 是不是一个有效的 user 对象(userId 是否非 0)
    99.                     if (body.userId && body.userId > 0) {
    100.                         // 登录成功!
    101.                         // 不做处理!
    102.                         console.log("当前用户登录成功! 用户名: " + body.username);
    103.  
    104.                         // 在 getUserInfo 的回调函数中, 来调用获取作者信息
    105.                         getAuthorInfo(body);
    106.                     } else {
    107.                         // 登录失败!
    108.                         // 让前端页面, 跳转到 login.html
    109.                         alert("当前您尚未登录! 请登录后再访问博客列表!");
    110.                         location.assign('blog_login.html');
    111.                     }
    112.                 },
    113.                 error: function() {
    114.                     alert("当前您尚未登录! 请登录后再访问博客列表!");
    115.                     location.assign('blog_login.html');
    116.                 }
    117.             });
    118.         }
    119.  
    120.         // 判定用户的登录状态
    121.         getUserInfo("blog_detail.html");
    122.  
    123.         // 从服务器获取一下当前博客的作者信息, 并显示到界面上. 
    124.         // 参数 user 就是刚才从服务器拿到的当前登录用户的信息
    125.         function getAuthorInfo(user) {
    126.             $.ajax({
    127.                 type: 'get',
    128.                 url: 'authorInfo' + location.search,
    129.                 success: function(body) {
    130.                     // 此处的 body, 就是服务器返回的 User 对象, 是文章的作者信息
    131.                     if (body.username) {
    132.                         // 如果响应中的 username 存在, 就把这个值设置到页面上. 
    133.                         changeUserName(body.username);
    134.  
    135.                         if (body.username == user.username) {
    136.                             // 作者和登录的用户是一个人, 则显示 "删除按钮"
    137.                             let navDiv = document.querySelector('.nav');
    138.                             let a = document.createElement('a');
    139.                             a.innerHTML = '删除';
    140.                             // 期望点击删除, 构造一个形如 blogDelete?blogId=6 这样的请求
    141.                             a.href = 'blogDelete' + location.search;
    142.                             navDiv.appendChild(a);
    143.                         }
    144.                     } else {
    145.                         console.log("获取作者信息失败! " + body.reason);
    146.                     }
    147.                 }
    148.             });
    149.         }
    150.  
    151.         function changeUserName(username) {
    152.             let h3 = document.querySelector('.card>h3');
    153.             h3.innerHTML = username;
    154.         }
    155.     script>
    156. body>
    157. html>

    结果如下：

    当我们删了我是新文章后跳转到列表就没有这篇文章了。

    注意！！！：

    a.调用顺序，因为ajax是并发执行的，我们不知道谁会先执行完，我们就决定使用回调的方式来完成

     回调函数部分如下：

    5.小结

    这只是一个很简单的网站，可能很多地方没有考虑全面，仅供参考。详细代码，可以在页首查看我的码云地址。

    感谢观看嘿嘿嘿~ 

  • 相关阅读:
    ActiveMQ用法
    【操作系统】esp栈指针
    SwiftUI 为不同视图限制不同的屏幕旋转方向
    Android BottomSheetDialogFragment 使用详解，设置圆角、固定高度、默认全屏等
    使用Kubernetes部署Kubernetes集群
    【django+vue】项目搭建、解决跨域访问
    MySQL数据库
    深入探讨 Presto 中的缓存
    http（下）
    LeetCode 0952.按公因数计算最大组件大小：建图 / 并查集
  • 原文地址：https://blog.csdn.net/weixin_58850105/article/details/126907030