devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

博客网站/部署服务器---继上篇前端页面接入后端

作者：AllinToyou | 2024-04-22 08:36:52

赞

踩

博客网站/部署服务器---继上篇前端页面接入后端

目录

准备工作

创建用户类博客类与连接数据库

创建博客类

创建用户类

创建连接数据库工具类

实现对数据库数据博客的操作

实现对数据库用户的操作

创建数据库语句

登录页面

前端

后端

博客列表

前端

注销登录

写入数据

判断用户是否登录

替换页面用户昵称

后端

处理注销登录 LogoutServlet/doGet

处理获取所有博客 BlogServlet/doGet

处理判断用户是否登录 loginServlet/doGet

处理替换页面用户昵称 UserinfoServlet/doGet

博客详情页

前端

注销登录

查询博客

判断用户是否登录

将博客详情页昵称替换为当前博客作者昵称/是否显示删除博客

后端

处理注销登录 LogoutServlet/doGet

处理查询博客 BlogServlet/doGet

处理判断用户是否登录 LoginServlet/doGet

处理将博客详情页昵称替换为当前博客作者昵称/是否显示删除博客 UserinfoServlet/doGet

博客编辑页

前端

后端 BlogServlet/doPost

部署

准备工作

下载jdk

下载tomcat

加权限

安装mysql

使用maven打包

访问

准备工作

在main下创建webapp文件夹下再创建WEB-INF文件夹下再创建web.xml文件

web.xml

  1. <!DOCTYPE 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. <web-app>
  5.     <display-name>Archetype Created Web Application</display-name>
  6. </web-app>

需要用到

  1. javaservlet3.1
  2. jackson 版本随意
  3. mysql 根据你的mysql版本

这些均在Maven Repository: Search/Browse/Explore (mvnrepository.com)网址内下载

之后复制代码粘贴到pom.xml下的 <dependecies>标签内，并且设置打包格式为war这是tomcat要求的（之后部署需要使用），再设置包名

  1. <dependencies>
  2.         <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
  3.         <!--jQuery库-->
  4.         <dependency>
  5.             <groupId>javax.servlet</groupId>
  6.             <artifactId>javax.servlet-api</artifactId>
  7.             <version>3.1.0</version>
  8.             <scope>provided</scope>
  9.         </dependency>
  10.  
  11.         <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
  12.         <!--jackSon库-->
  13.         <dependency>
  14.             <groupId>com.fasterxml.jackson.core</groupId>
  15.             <artifactId>jackson-databind</artifactId>
  16.             <version>2.13.5</version>
  17.         </dependency>
  18.  
  19.         <!-- https://mvnrepository.com/artifact/com.mysql/mysql-connector-j -->
  20.         <!--Mysql库-->
  21.         <dependency>
  22.             <groupId>com.mysql</groupId>
  23.             <artifactId>mysql-connector-j</artifactId>
  24.             <version>8.0.33</version>
  25.         </dependency>
  26.  
  27.  
  28.     </dependencies>
  29.  
  30. <!--    打包格式-->
  31.     <packaging>war</packaging>
  32.  
  33.     <build>
  34. <!--        包名-->
  35.         <finalName>blog_system</finalName>
  36.     </build>

创建用户类博客类与连接数据库

创建博客类

博客包含

  1. 博客ID
  2. 博客标题
  3. 博客内容
  4. 创建它的作者ID
  5. 发布博客的时间

之后ALT+Insert生成Get和Set方法（时间的get方法有所改变，需要格式化为日期格式）

  1. package model;
  2.  
  3. import java.sql.Timestamp;
  4. import java.text.SimpleDateFormat;
  5. import java.util.SimpleTimeZone;
  6.  
  7. //表示博客
  8. public class Blog {
  9.     private int blogId;
  10.     private String title;
  11.     private String content;
  12.     private int userId;
  13.     private Timestamp postTime;
  14.  
  15.     public int getBlogId() {
  16.         return blogId;
  17.     }
  18.  
  19.     public void setBlogId(int blogId) {
  20.         this.blogId = blogId;
  21.     }
  22.  
  23.     public String getTitle() {
  24.         return title;
  25.     }
  26.  
  27.     public void setTitle(String title) {
  28.         this.title = title;
  29.     }
  30.  
  31.     public String getContent() {
  32.         return content;
  33.     }
  34.  
  35.     public void setContent(String content) {
  36.         this.content = content;
  37.     }
  38.  
  39.     public int getUserId() {
  40.         return userId;
  41.     }
  42.  
  43.     public void setUserId(int userId) {
  44.         this.userId = userId;
  45.     }
  46.  
  47.     public String getPostTime() {
  48.         //把时间戳构造成日期结构
  49.         SimpleDateFormat simpleDateFormat=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
  50.         return simpleDateFormat.format(this.postTime);
  51.     }
  52.  
  53.     public void setPostTime(Timestamp postTime) {
  54.         this.postTime = postTime;
  55.     }
  56. }

创建用户类

  1. 用户包含
  2. 用户ID
  3. 用户名称
  4. 用户密码
  5. 判定该博客是否是登录用户的博客（后续删除博客功能需要用到、此变量不会写入数据库）

生成Get、Set方法

  1. package model;
  2.  
  3. //表示用户
  4. public class User {
  5.     private int userId;
  6.  
  7.     private String username;
  8.  
  9.     private String password;
  10.  
  11.     private int isYourBlog=0;
  12.  
  13.     public int getIsYourBlog() {
  14.         return isYourBlog;
  15.     }
  16.  
  17.     public void setIsYourBlog(int isYourBlog) {
  18.         this.isYourBlog = isYourBlog;
  19.     }
  20.  
  21.     public int getUserId() {
  22.         return userId;
  23.     }
  24.  
  25.     public void setUserId(int userId) {
  26.         this.userId = userId;
  27.     }
  28.  
  29.     public String getUsername() {
  30.         return username;
  31.     }
  32.  
  33.     public void setUsername(String username) {
  34.         this.username = username;
  35.     }
  36.  
  37.     public String getPassword() {
  38.         return password;
  39.     }
  40.  
  41.     public void setPassword(String password) {
  42.         this.password = password;
  43.     }
  44. }

创建连接数据库工具类

获取数据库连接 管理数据库的创建配置和管理

  1. package model;
  2.  
  3. import com.mysql.cj.jdbc.MysqlDataSource;
  4.  
  5. import javax.sql.DataSource;
  6. import java.sql.Connection;
  7. import java.sql.PreparedStatement;
  8. import java.sql.ResultSet;
  9. import java.sql.SQLException;
  10.  
  11.  
  12. public class DBUtil {
  13.     //定义私有静态的DataSource对象，用于存储数据库连接信息。
  14.     //volatile确保了对这个变量的读写操作都是原子性的，即使再多线程环境下
  15.     //对这个变量访问也是线程安全的
  16.     private volatile static DataSource dataSource=null;
  17.  
  18.     //获取数据库连接 管理数据库的创建、配置和管理
  19.     private static javax.sql.DataSource getDataSource() {
  20.         //如果为空时 加锁
  21.         if(dataSource==null){
  22.             synchronized (DBUtil.class){
  23.                 if (dataSource == null) {
  24.                     dataSource = new MysqlDataSource();
  25.                     ((MysqlDataSource)dataSource).setURL("jdbc:mysql://127.0.0.1:3306/blog_system?characterEncoding=utf8&useSSL=false");
  26.                     ((MysqlDataSource)dataSource).setUser("root");
  27.                     ((MysqlDataSource)dataSource).setPassword("monan1946");
  28.                 }
  29.             }
  30.         }
  31.         return dataSource;
  32.     }
  33.  
  34.     //这个方法是从DataSource获取一个具体的数据库连接
  35.     //它通常在需要执行数据库操作时调用，比如执行SQL查询或更新
  36.     public static Connection getConnection() throws SQLException {
  37.         return getDataSource().getConnection();
  38.     }
  39.  
  40.     //关闭数据库连接
  41.     public static void close(Connection connection, PreparedStatement statement, ResultSet resultSet){
  42.         if (resultSet!=null){
  43.             try {
  44.                 resultSet.close();
  45.             } catch (SQLException e) {
  46.                 throw new RuntimeException(e);
  47.             }
  48.         }
  49.         if(statement!=null){
  50.             try {
  51.                 statement.close();
  52.             } catch (SQLException e) {
  53.                 throw new RuntimeException(e);
  54.             }
  55.         }
  56.         if(connection!=null){
  57.             try {
  58.                 connection.close();
  59.             } catch (SQLException e) {
  60.                 throw new RuntimeException(e);
  61.             }
  62.         }
  63.     }
  64.  
  65.  
  66. }

实现对数据库数据博客的操作

与数据库连接后，查询数据库，插入数据，删除数据操作

  1. package model;
  2.  
  3. import java.sql.Connection;
  4. import java.sql.PreparedStatement;
  5. import java.sql.ResultSet;
  6. import java.sql.SQLException;
  7. import java.util.ArrayList;
  8. import java.util.List;
  9.  
  10. //import static jdk.nashorn.internal.objects.NativeString.substring;
  11.  
  12. //Dao Data Access Object 用来访问数据的对象
  13. //针对博客的增删改查
  14. public class BlogDao {
  15.     //插入博客
  16.     public void insert(Blog blog){
  17.         Connection connection=null;
  18.         PreparedStatement statement=null;
  19.         try {
  20.             //与数据库建立连接
  21.             connection = DBUtil.getConnection();
  22.  
  23.             //构造SQL语句
  24.             String sql = "insert into blog values(null,?,?,?,now())";
  25.             //写入sql语句
  26.             statement = connection.prepareStatement(sql);
  27.             //写入问号对应的数据
  28.             statement.setString(1, blog.getTitle());
  29.             statement.setString(2, blog.getContent());
  30.             statement.setInt(3, blog.getUserId());
  31.             //执行sql
  32.             int ret = statement.executeUpdate();
  33.             if (ret == 1) {
  34.                 System.out.println("插入成功");
  35.             } else {
  36.                 System.out.println("插入失败");
  37.             }
  38.         }catch (SQLException e) {
  39.             e.printStackTrace();
  40.         }finally {
  41.             //关闭连接
  42.             DBUtil.close(connection,statement,null);
  43.         }
  44.     }
  45.  
  46.     //查询所有博客
  47.     public List<Blog> selectAll(){
  48.         Connection connection=null;
  49.         PreparedStatement statement=null;
  50.         ResultSet resultSet=null;
  51.         List<Blog> blogs=new ArrayList<>();
  52.         try {
  53.             //与数据库建立连接
  54.             connection=DBUtil.getConnection();
  55.  
  56.             //构造sql
  57.             //让新的先读取 页面新的在最上面
  58.             String sql="select * from blog order by postTime desc";
  59.             //写入sql
  60.             statement=connection.prepareStatement(sql);
  61.             //执行SQL
  62.             resultSet=statement.executeQuery();
  63.             //遍历结果集合
  64.             while (resultSet.next()){
  65.                 Blog blog=new Blog();
  66.                 blog.setBlogId(resultSet.getInt("blogId"));
  67.                 blog.setTitle(resultSet.getString("title"));
  68.                 String content=resultSet.getString("content");
  69. //                //如果长度大于100时，只截取100个字符作为摘要
  70.                 if(content.length()>100){
  71.                     content=content.substring(0,100);
  72.                 }
  73.                 //如果不大于100 不截取
  74.                 blog.setContent(content);
  75.                 blog.setUserId(resultSet.getInt("userId"));
  76.                 blog.setPostTime(resultSet.getTimestamp("postTime"));
  77.                 blogs.add(blog);
  78.             }
  79.  
  80.         } catch (SQLException e) {
  81.             e.printStackTrace();
  82.         }finally {
  83.             //关闭连接
  84.             DBUtil.close(connection,statement,resultSet);
  85.         }
  86.         return blogs;
  87.     }
  88.  
  89.     //查询一篇博客
  90.     public Blog selectOne(int blogId) {
  91.         Connection connection = null;
  92.         PreparedStatement statement = null;
  93.         ResultSet resultSet = null;
  94.         try {
  95.             // 1. 和数据库建立连接
  96.             connection = DBUtil.getConnection();
  97.             // 2. 构造 SQL
  98.             String sql = "select * from blog where blogId = ?";
  99.             statement = connection.prepareStatement(sql);
  100.             statement.setInt(1, blogId);
  101.             // 3. 执行 SQL
  102.             resultSet = statement.executeQuery();
  103.             // 4. 遍历结果集. 由于是按照 blogId 来查询. blogId 是自增主键, 不能重复.
  104.             //    此处的查询结果不可能是多条记录. 只能是 1 条或者 0 条.
  105.             if (resultSet.next()) {
  106.                 Blog blog = new Blog();
  107.                 blog.setBlogId(resultSet.getInt("blogId"));
  108.                 blog.setTitle(resultSet.getString("title"));
  109.                 blog.setContent(resultSet.getString("content"));
  110.                 blog.setPostTime(resultSet.getTimestamp("postTime"));
  111.                 blog.setUserId(resultSet.getInt("userId"));
  112.                 return blog;
  113.             }
  114.         } catch (SQLException throwables) {
  115.             throwables.printStackTrace();
  116.         } finally {
  117.             // 5. 关闭资源
  118.             DBUtil.close(connection, statement, resultSet);
  119.         }
  120.  
  121.         return null;
  122.     }
  123.  
  124.     //删除博客
  125.     public void delete(int blogId){
  126.         Connection connection=null;
  127.         PreparedStatement statement=null;
  128.         ResultSet resultSet=null;
  129.         try {
  130.             //建立连接
  131.             connection =DBUtil.getConnection();
  132.  
  133.             //构造SQL语句
  134.             String sql="delete from blog where blogId=?";
  135.             //写入sql
  136.             statement=connection.prepareStatement(sql);
  137.             //替换?
  138.             statement.setInt(1,blogId);
  139.             //执行sql
  140.             int ret=statement.executeUpdate();
  141.             if(ret==1){
  142.                 System.out.println("删除成功");
  143.             }
  144.             else{
  145.                 System.out.println("删除失败");
  146.             }
  147.         } catch (SQLException e) {
  148.  
  149.             e.printStackTrace();
  150.         }finally {
  151.             DBUtil.close(connection,statement,null);
  152.         }
  153.     }
  154. }

实现对数据库用户的操作

对数据库内的数据进行操作

  1. package model;
  2.  
  3. import java.sql.Connection;
  4. import java.sql.PreparedStatement;
  5. import java.sql.ResultSet;
  6. import java.sql.SQLException;
  7.  
  8. //Dao Data Access Object 用来访问数据的对象
  9. //针对用户的增删改查
  10. public class UserDao {
  11.     //查询用户
  12.     public User selectByName(String username){
  13.         Connection connection=null;
  14.         PreparedStatement statement=null;
  15.         ResultSet resultSet=null;
  16.         try {
  17.             //建立连接
  18.             connection=DBUtil.getConnection();
  19.             //构造sql语句
  20.             String sql="select * from user where username=?";
  21.             //写入sql
  22.             statement=connection.prepareStatement(sql);
  23.             //填入问号
  24.             statement.setString(1,username);
  25.             //执行sql
  26.             resultSet=statement.executeQuery();
  27.             if(resultSet.next()){
  28.                 User user=new User();
  29.                 user.setUserId(resultSet.getInt("userId"));
  30.                 user.setUsername(resultSet.getString("username"));
  31.                 user.setPassword(resultSet.getString("password"));
  32.                 return user;
  33.             }
  34.         } catch (SQLException e) {
  35.             e.printStackTrace();
  36.         }finally {
  37.             DBUtil.close(connection,statement,resultSet);
  38.         }
  39.         return null;
  40.     }
  41.  
  42.     public User selectById(int userId){
  43.         Connection connection=null;
  44.         PreparedStatement statement=null;
  45.         ResultSet resultSet=null;
  46.         try {
  47.             //建立连接
  48.             connection=DBUtil.getConnection();
  49.             //构造sql语句
  50.             String sql="select * from user where userId=?";
  51.             //写入sql
  52.             statement=connection.prepareStatement(sql);
  53.             //填入问号
  54.             statement.setInt(1,userId);
  55.             //执行sql
  56.             resultSet=statement.executeQuery();
  57.             if(resultSet.next()){
  58.                 User user=new User();
  59.                 user.setUserId(resultSet.getInt("userId"));
  60.                 user.setUsername(resultSet.getString("username"));
  61.                 user.setPassword(resultSet.getString("password"));
  62.                 return user;
  63.             }
  64.         } catch (SQLException e) {
  65.             e.printStackTrace();
  66.         }finally {
  67.             DBUtil.close(connection,statement,resultSet);
  68.         }
  69.         return null;
  70.     }
  71. }

创建数据库语句

需要把创建数据库的语句放入db.sql中，方便后续更换数据库使用

  1. create database blog_system;
  2.  
  3. use blog_system;
  4.  
  5. create table blog(
  6.     blogId int primary key auto_increment, --主键 自增 博客ID
  7.     title varchar(1024), --博客标题
  8.     content mediumtext, --博客正文  mediutext类型很长
  9.     userId int, --作者id
  10.     postTime datetime --发布事件
  11. );
  12.  
  13. create table blog(
  14.     blogId int primary key auto_increment,
  15.     title varchar(1024),
  16.     content mediumtext,
  17.     userId int,
  18.     postTime datetime
  19. );
  20.  
  21. create table user(
  22.     userId int primary key auto_increment, --用户id
  23.     username varchar(128) unique , --用户名
  24.     password varchar(128) --密码
  25. );
  26. create table user(
  27.     userId int primary key auto_increment,
  28.     username varchar(128) unique ,
  29.     password varchar(128)
  30. );

登录页面

前端

login/loginServlet

前端将用户写入的数据已post方法提交给后端

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

后端

  1. 后端调用doPost方法
  2. 使用resp.getParameter方法获取数据
  3. 去数据库内查询数据。
  4. 查询不到则响应登录失败
  5. 若查询到时，创建session HttpSession session= req.getSession()
  6. 也就是浏览器内的cookie session.setAttribute把此用户存储进去，方便后续使用之后登录成功跳转至博客列表
  1. package controller;
  2.  
  3. import model.User;
  4. import model.UserDao;
  5.  
  6. import javax.servlet.ServletException;
  7. import javax.servlet.annotation.WebServlet;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  11. import javax.servlet.http.HttpSession;
  12. import java.io.IOException;
  13.  
  14. @WebServlet("/login")
  15. public class loginServlet extends HttpServlet {
  16.     @Override
  17.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  18.         //告诉servlet(服务器)按照utf格式解析请求中的body
  19.         //如果不使用这个 中文格式的会乱码
  20.         req.setCharacterEncoding("utf8");
  21.  
  22.         //告诉浏览器 按照utf8格式解析响应
  23. //        resp.setCharacterEncoding("utf8");
  24.  
  25.         resp.setContentType("text/html;charset=utf8");
  26.         String username=req.getParameter("username");
  27.         String password=req.getParameter("password");
  28.  
  29. //        System.out.println(username);
  30. //        System.out.println(password);
  31.  
  32. //        if(username.equals("user")&&password.equals("123")){
  33. //            resp.getWriter().write("登录成功");
  34. //        }
  35. //        else
  36. //        {
  37. //            resp.getWriter().write("用户名或密码错误");
  38. //        }
  39.  
  40.         UserDao userDao=new UserDao();
  41.         User user=userDao.selectByName(username);
  42.         if(user==null){
  43.             resp.getWriter().write("用户名或密码错误");
  44.             return;
  45.         }
  46.         if(!user.getPassword().equals(password)){
  47.             resp.getWriter().write("用户名或密码错误");
  48.             return;
  49.         }
  50.         //到这里就是登录成功了
  51.  
  52.         //构造会话 cookie
  53.         HttpSession session= req.getSession();
  54.  
  55.         //把信息存到cookie内，方便后续使用
  56.         session.setAttribute("user",user);
  57.  
  58.         //登录成功后 跳转页面
  59.         resp.sendRedirect("blog_list.html");
  60.     }
  61.  
  62.     @Override
  63.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  64.         //验证登录状态
  65.         //如果用户未登录，强制重定向到登录页面
  66.         //如果用户已登录，不做动作
  67.  
  68.         //取查询session
  69.         HttpSession session=req.getSession(false);
  70.         if(session==null){
  71.             //如果连session都没有 返回403状态码
  72.             //403状态码就是代表用户未登录的状态码
  73.             resp.setStatus(403);
  74.             return;
  75.         }
  76.         //取cookie查找是否有user这个用户
  77.         //这个user不是用户名 而是user内的用户名
  78.         User user= (User) session.getAttribute("user");
  79.         if(user==null){
  80.             //没有这个用户，说明未登录
  81.             resp.setStatus(403);
  82.             return;
  83.         }
  84.         //到这说明用户已经登录成功
  85.         resp.setStatus(200);
  86.     }
  87. }

博客列表

前端

前端使用ajax方法，所以需要引入jquery

jquery需要从jQuery CDN  链接内点击minified 复制

https://code.jquery.com/jquery-3.7.1.min.js

之后引入即可使用

前端整体代码

  1. <!DOCTYPE html>
  2.  <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>墨轩博客页</title>
  7.     <link rel="stylesheet" href="css/common.css">
  8.     <link rel="stylesheet" href="css/blog.css">
  9. </head>
  10. <body>
  11.     <!-- 导航栏 -->
  12.     <div class="nav">
  13.         <!-- logo图片 -->
  14.         <img src="image/logo.jpg" alt="" width="50px">
  15.  
  16.         <span class="title">我的博客系统</span>
  17.         <span class="spacer"></span>
  18.  
  19.         <!-- 导航栏 -->
  20.         <a href="blog_list.html">主页</a>
  21.         <a href="blog_edit.html">写博客</a>
  22.         <a href="logout">注销</a>
  23. <!--        a会直接向对应路径发起get请求-->
  24.     </div>
  25.  
  26.     <!-- 页面主体 -->
  27.     <div class="container">
  28.  
  29.         <!-- 左侧个人信息 -->
  30.         <div class="container-left">
  31.             <div class="card">
  32.                 <img src="image/蕾姆.jpg" alt="">
  33.                 <h2>墨轩111</h2>
  34.                 <a href="#">github链接</a>
  35.                 <div class="counter">
  36.                     <span>文章</span>
  37.                     <span>分类</span>
  38.                 </div>
  39.                 <div class="counter">
  40.                     <span>2</span>
  41.                     <span>3</span>
  42.                 </div>
  43.             </div>
  44.  
  45.  
  46.         <!-- 右侧个人信息 -->
  47.         </div>
  48.         <div class="container-right">
  49.             <!-- <div class="blog">这是我的第一篇文章</div>
  50.             <div class="date">2024-3-27 20:20</div>
  51.             <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
  52.             <a href="blog_detail.html">查看全文 &gt;&gt; </a> -->
  53.             <!-- &gt;是html的> 正常的>无法之间写入 -->
  54.         </div>
  55.     </div>
  56.  
  57.     <!-- 引入jquery -->
  58.     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  59.     <script src="js/app.js"></script>
  60.     <script>
  61.         function getBlogs(){
  62.             //构造ajax
  63.             $.ajax({
  64.                 type:'get',
  65.                 url:'blog',
  66.                 success: function(body){
  67.                     let container=document.querySelector('.container-right');
  68.                     //后端返回的是json数据
  69.                     //如果Content-Type是application/json,jquery ajax会把body转成js对象
  70.                     for(let blog of body){
  71.                         //构造最外层的div
  72.                         let blogDiv=document.createElement('div');
  73.                         blogDiv.className='blog';
  74.  
  75.                         //创建博客标题
  76.                         let titleDiv=document.createElement('div');
  77.                         titleDiv.className='title';
  78.                         //把后端传来的json，被jackson解析成blog对象，对象内的标题属性赋值
  79.                         titleDiv.innerHTML=blog.title;
  80.                         //把titleDiv添加在blogDiv内
  81.                         blogDiv.appendChild(titleDiv);
  82.  
  83.                         //创建日期
  84.                         let dateDiv=document.createElement('div');
  85.                         dateDiv.className='date';
  86.                         //把后端传来的json，被jackson解析成blog对象 对象内的时间属性赋值
  87.                         dateDiv.innerHTML=blog.postTime;
  88.                         //把dateDiv添加到blogDiv内
  89.                         blogDiv.appendChild(dateDiv);
  90.  
  91.                         //创建内容
  92.                         let descDiv=document.createElement('div');
  93.                         descDiv.className='desc';
  94.                         //把把后端传来的json，被jackson解析成blog对象 对象内的内容属性赋值
  95.                         descDiv.innerHTML=blog.content;
  96.                         //把descDiv添加到blogDiv内
  97.                         blogDiv.appendChild(descDiv);
  98.  
  99.                         //创建按钮
  100.                         let a=document.createElement('a');
  101.                         a.innerHTML='查看全文 >>';
  102.                         //传递这篇博客的ID是多少 后端才能取查询这篇博客的详细页
  103.                         a.href='blog_detail.html?blogId='+blog.blogId;
  104.                         blogDiv.appendChild(a);
  105.  
  106.                         //把blogDiv添加到container内
  107.                         container.appendChild(blogDiv);
  108.                     }
  109.                 }
  110.             });
  111.         }
  112.         getBlogs();
  113.  
  114.         //使用ajax构造get方法。判断当前是否用户
  115.         // 如果没登陆，强制跳转到登录页面
  116.         checkLogin();
  117.  
  118.         //将博客列表的昵称替换为当前登录用户的昵称
  119.         function GetUser(){
  120.             $.ajax({
  121.                 type: 'get',
  122.                 url:'userInfo',
  123.                 //后端查询失败时，发送状态码为403 403不会触发回调函数
  124.                 success:function (body){
  125.                     //将登录的用户名替换上去
  126.                     let user=document.querySelector('.card h2');
  127.                     user.innerHTML=body.username;
  128.                 }
  129.             });
  130.         }
  131.         GetUser();
  132.     </script>
  133. </body>
  134. </html>

注销登录

注意：注销登录和注销账号是不同的，注销登录即退出登录，而注销账户是删除账号

  1. <a href="logout">注销</a>
  2. <!--        a会直接向对应路径发起get请求-->

写入数据

  1. 前端构造ajax构造get方法，发送给后端。
  2. 调用回调函数。
  3. 遍历后端传来的数据（想要用遍历，那么后端传来的数据一定是像List这种可遍历的，如何只传来的对象，那就无法遍历）
  4. 创建div 分别把博客的标题，时间，内容创建，把后端数据都写入。并且创建查询博客详情页的按键。当按下这个按键时，会把博客ID传递给博客详情页，详情页就能拿着这个ID去后端查询此博客
  5. 把整体div放入原先的div内
  1. <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  2.     <script src="js/app.js"></script>
  3.     <script>
  4.         function getBlogs(){
  5.             //构造ajax
  6.             $.ajax({
  7.                 type:'get',
  8.                 url:'blog',
  9.                 success: function(body){
  10.                     let container=document.querySelector('.container-right');
  11.                     //后端返回的是json数据
  12.                     //如果Content-Type是application/json,jquery ajax会把body转成js对象
  13.                     for(let blog of body){
  14.                         //构造最外层的div
  15.                         let blogDiv=document.createElement('div');
  16.                         blogDiv.className='blog';
  17.  
  18.                         //创建博客标题
  19.                         let titleDiv=document.createElement('div');
  20.                         titleDiv.className='title';
  21.                         //把后端传来的json，被jackson解析成blog对象，对象内的标题属性赋值
  22.                         titleDiv.innerHTML=blog.title;
  23.                         //把titleDiv添加在blogDiv内
  24.                         blogDiv.appendChild(titleDiv);
  25.  
  26.                         //创建日期
  27.                         let dateDiv=document.createElement('div');
  28.                         dateDiv.className='date';
  29.                         //把后端传来的json，被jackson解析成blog对象 对象内的时间属性赋值
  30.                         dateDiv.innerHTML=blog.postTime;
  31.                         //把dateDiv添加到blogDiv内
  32.                         blogDiv.appendChild(dateDiv);
  33.  
  34.                         //创建内容
  35.                         let descDiv=document.createElement('div');
  36.                         descDiv.className='desc';
  37.                         //把把后端传来的json，被jackson解析成blog对象 对象内的内容属性赋值
  38.                         descDiv.innerHTML=blog.content;
  39.                         //把descDiv添加到blogDiv内
  40.                         blogDiv.appendChild(descDiv);
  41.  
  42.                         //创建按钮
  43.                         let a=document.createElement('a');
  44.                         a.innerHTML='查看全文 >>';
  45.                         //传递这篇博客的ID是多少 后端才能取查询这篇博客的详细页
  46.                         a.href='blog_detail.html?blogId='+blog.blogId;
  47.                         blogDiv.appendChild(a);
  48.  
  49.                         //把blogDiv添加到container内
  50.                         container.appendChild(blogDiv);
  51.                     }
  52.                 }
  53.             });
  54.         }
  55.         getBlogs();

判断用户是否登录

因为这个功能是多个页面都会使用，所以写入js文件内，在前面引入js即可调用这个方法

  1. //使用ajax构造get方法。判断当前是否用户
  2.         // 如果没登陆，强制跳转到登录页面
  3.         checkLogin();
  4.  
  5. 这个在js内的app.js文件
  6.  
  7. function checkLogin(){
  8.     $.ajax({
  9.         type: 'get',
  10.         url:'login',
  11.         success:function (){
  12.             // 当客户端响应200状态码时，说明用户已登录，不做处理
  13.         },
  14.         error:function (){
  15.             //发客户端响应403时 就会触发error
  16.  
  17.             //强制跳转登录页面
  18.             location.assign('login.html');
  19.         }
  20.     })
  21. }

替换页面用户昵称

向后端发起get方法，把页面昵称替换为当前登录用户的昵称

  1. function GetUser(){
  2.             $.ajax({
  3.                 type: 'get',
  4.                 url:'userInfo',
  5.                 //后端查询失败时，发送状态码为403 403不会触发回调函数
  6.                 success:function (body){
  7.                     //将登录的用户名替换上去
  8.                     let user=document.querySelector('.card h2');
  9.                     user.innerHTML=body.username;
  10.                 }
  11.             });
  12.         }
  13.         GetUser();

后端

处理注销登录 LogoutServlet/doGet

  1. req.getSession查询是否创建了session
  2. 使用session.removeAttribute删除session的当前的用户
  3. resp.sendRedirect强制跳转到登录页面
  1. @WebServlet("/logout")
  2. public class LogoutServlet extends HttpServlet {
  3.     @Override
  4.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  5.         //注销功能
  6.         //删除session中的对象 就相当于取消状态
  7.  
  8.         //查找是否有session
  9.         HttpSession session=req.getSession(false);
  10.         if(session==null) {
  11.             resp.setStatus(403);
  12.             return;
  13.         }
  14.  
  15.         //删除session中的user
  16.         session.removeAttribute("user");
  17.         //重定向到登录页面
  18.         resp.sendRedirect("login.html");
  19.     }
  20. }

处理获取所有博客 BlogServlet/doGet

  1. 想要构造JSON格式，就得创建ObjectMapper
  2. 因为前端使用的是ajax，后端需要响应json格式。所以需要用resp.setContentType设置响应格式 (application/json;charset=utf8)
  3. 创建操作博客内容的数据库类
  4. 查看req.getParameter获取前端是否传来了博客ID，如果传来了，说明前端想要查询单个博客（这里是博客详情页，后续讲）
  5. 如果没传博客ID，说明前端想要查询所有博客，博客列表是查询所有博客
  6. 调用blogDo查询博客类，查询所有博客，并且把这些数据放入List，保证所有博客可以遍历。
  7. 使用objectMapper.writeValueAsString将数据构造成json格式
  8. 响应数据
  1. @Override
  2.     //发送博客列表或博客详情页的内容
  3.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  4.         //想要构造JSON格式，就得用到此类
  5.         private ObjectMapper objectMapper=new ObjectMapper();
  6.         resp.setContentType("application/json;charset=utf8");
  7.         //要拿到写数据库操作的类
  8.         BlogDao blogDao=new BlogDao();
  9.         //获取url中的博客ID
  10.         String blogId=req.getParameter("blogId");
  11.         System.out.println(blogId);
  12.         //为空时 说明时获取博客列表，而不是获取博客详情
  13.         if(blogId==null){
  14.             //查询所有 返回的是list 每个类型是一个博客类型
  15.             List<Blog> blogs=blogDao.selectAll();
  16.             //转成json格式
  17.  
  18.             String jsonString=objectMapper.writeValueAsString(blogs);
  19.             //响应
  20.             resp.getWriter().write(jsonString);
  21.         }else{
  22.             //如果获取到博客ID时，说明时获取博客详情页
  23.             //使用数据库查找这个博客ID
  24.             Blog blog=blogDao.selectOne(Integer.parseInt(blogId));
  25.             //记住，传json格式，如果你要用for循环 那么你的对象一定要是可迭代的对象
  26.             //如果你单构造个类过去，你用for是肯定循环不了的，你必须使用List这种可以迭代的对象，才能使用这个迭代循环
  27.             List<Blog> blogs=new ArrayList<>();
  28.             blogs.add(blog);
  29.  
  30.             //你也可以单传个对象 到前端那不用循环直接使用也可以
  31. //            List<Blog> blogs=new ArrayList<>();
  32. //            String jsonString=objectMapper.writeValueAsString(blog);
  33.  
  34.  
  35.             //转为json格式
  36.             String jsonString=objectMapper.writeValueAsString(blogs);
  37.             //响应
  38.             resp.getWriter().write(jsonString);
  39.         }
  40.     }

处理判断用户是否登录 loginServlet/doGet

  1. req.getSession查询是否创建了session（这里可以直接判断用户是否登录了，因为只要登录，那么就一定创建了session
  2. 为空时，resp.setStatus响应状态码403
  3. 如果不为空时，session.getAttribute查询session是否有该用户
  4. 如果为空，则有创建session，但没有此用户，setStatus响应状态码403
  5. 如果也不为空，说明该用户以及登录，setStatus响应状态码200
  6. 响应状态码403是为了不让前端调用回调函数，当返回200时，才调用
  1. @Override
  2.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  3.         //验证登录状态
  4.         //如果用户未登录，强制重定向到登录页面
  5.         //如果用户已登录，不做动作
  6.  
  7.         //取查询session
  8.         HttpSession session=req.getSession(false);
  9.         if(session==null){
  10.             //如果连session都没有 返回403状态码
  11.             //403状态码就是代表用户未登录的状态码
  12.             resp.setStatus(403);
  13.             return;
  14.         }
  15.         //取cookie查找是否有user这个用户
  16.         //这个user不是用户名 而是user内的用户名
  17.         User user= (User) session.getAttribute("user");
  18.         if(user==null){
  19.             //没有这个用户，说明未登录
  20.             resp.setStatus(403);
  21.             return;
  22.         }
  23.         //到这说明用户已经登录成功
  24.         resp.setStatus(200);
  25.     }

处理替换页面用户昵称 UserinfoServlet/doGet

  1. 想要构造JSON格式，就得创建此类objectMapper
  2. req.getParameter获取blogId（如果为空，则是博客列表发来的，想要获取此博客的用户名，如果不为空，是博客详情页发来的，判断此博客是否是当前登录用户的博客）
  3. req.getSession判断是否有session
  4. session.getAttribute 查询session是否有该用户，获取此用户
  5. 当blogId为空时，博客列表发来的
  6. 首先用户的密码设为空串 （不是修改数据库内的数据）
  7. resp.setContentType设置响应格式
  8. objectMapper.writeValueAsString数据构造为JSON格式
  9. 响应数据
  1. protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  2.         //想要构造json 就要创建这个类
  3.         ObjectMapper objectMapper=new ObjectMapper();
  4.  
  5.         String blogid=req.getParameter("blogId");
  6.  
  7.         //直接取查找是否有cookie
  8.         HttpSession session=req.getSession(false);
  9.         if(session==null){
  10.             //后端查询失败时，发送状态码为403 403不会触发回调函数
  11.             resp.setStatus(403);
  12.             resp.setContentType("text/html;charset=utf8");
  13.             resp.getWriter().write("没有该用户");
  14.             return;
  15.         }
  16.         //获取当前登录用户
  17.         User user= (User) session.getAttribute("user");
  18.         if(user==null){
  19.             resp.setStatus(403);
  20.             resp.setContentType("text/html;charset=utf8");
  21.             resp.getWriter().write("没有该用户");
  22.             return;
  23.         }
  24.  
  25.         if(blogid==null){
  26.             //查询登录的用户
  27.             //当url中的查询字符串中没有blogId时，说明是博客列表发来的请求
  28.             //不用让密码在body中明文显示
  29.             user.setPassword("");
  30.             resp.setContentType("application/json;charset=utf8");
  31.             //构造成json格式
  32.             //返回登录的用户
  33.             String jsonString=objectMapper.writeValueAsString(user);
  34.             //写入
  35.             resp.getWriter().write(jsonString);

博客详情页

前端

总体

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>博客详情页</title>
  7.  
  8.     <link rel="stylesheet" href="css/common.css">
  9.     <link rel="stylesheet" href="css/blog.css">
  10.     <link rel="stylesheet" href="css/blog_detail.css">
  11.  
  12.     <!-- 引入 editor.md 的依赖 -->
  13.     <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
  14.     <script src="js/jquery.min.js"></script>
  15.     <script src="editor.md/lib/marked.min.js"></script>
  16.     <script src="editor.md/lib/prettify.min.js"></script>
  17.     <script src="editor.md/editormd.js"></script>
  18. </head>
  19. <body>
  20.         <!-- 导航栏 -->
  21.         <div class="nav">
  22.             <!-- logo图片 -->
  23.             <img src="image/logo.jpg" alt="" width="50px">
  24.     
  25.             <span class="title">我的博客系统</span>
  26.             <span class="spacer"></span>
  27.     
  28.             <!-- 导航栏 -->
  29.             <a href="blog_list.html">主页</a>
  30.             <a href="blog_edit.html">写博客</a>
  31.             <a href="logout">注销</a><!--        a会直接向对应路径发起get请求-->
  32.             <div class="dete"></div>
  33. <!--            删除博客-->
  34.         </div>
  35.  
  36.         <!-- 页面主体 -->
  37.     <div class="container">
  38.  
  39.         <!-- 左侧个人信息 -->
  40.         <div class="container-left">
  41.             <div class="card">
  42.                 <img src="image/蕾姆.jpg" alt="">
  43.                 <h2>墨轩111</h2>
  44.                 <a href="#">github链接</a>
  45.                 <div class="counter">
  46.                     <span>文章</span>
  47.                     <span>分类</span>
  48.                 </div>
  49.                 <div class="counter">
  50.                     <span>2</span>
  51.                     <span>3</span>
  52.                 </div>
  53.             </div>
  54.         </div>
  55.  
  56.         <!-- 右侧个人信息 -->
  57. <!--        <div class="container-right">-->
  58. <!--        </div>-->
  59.  
  60.         <div class="container-right">
  61.             <!-- 这个 div 里来放博客的内容 -->
  62.             <div class="blog-content">
  63.             </div>
  64.         </div>
  65.     </div>
  66.  
  67.  
  68.         <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
  69.         <script src="js/app.js"></script>
  70.     <script>
  71.         function getBlogs() {
  72.             //构造ajax
  73.             $.ajax({
  74.                 type: 'get',
  75.                 //博客列表传来的
  76.                 url: 'blog' + location.search,
  77.                 success: function (body) {
  78.                     let container = document.querySelector('.container-right');
  79.                     //后端返回的是json数据
  80.                     //如果Content-Type是application/json,jquery ajax会把body转成js对象
  81.                     for (let blog of body) {
  82.                         //构造最外层的div
  83.                         let blogDiv = document.createElement('div');
  84.                         blogDiv.className = 'blog';
  85.  
  86.                         //创建博客标题
  87.                         let titleDiv = document.createElement('div');
  88.                         titleDiv.className = 'title';
  89.                         //把后端传来的json，被jackson解析成blog对象，对象内的标题属性赋值
  90.                         titleDiv.innerHTML = blog.title;
  91.                         //把titleDiv添加在blogDiv内
  92.                         blogDiv.appendChild(titleDiv);
  93.  
  94.                         //创建日期
  95.                         let dateDiv = document.createElement('div');
  96.                         dateDiv.className = 'date';
  97.                         //把后端传来的json，被jackson解析成blog对象 对象内的时间属性赋值
  98.                         dateDiv.innerHTML = blog.postTime;
  99.                         //把dateDiv添加到blogDiv内
  100.                         blogDiv.appendChild(dateDiv);
  101.  
  102.                         //创建内容
  103.                         let descDiv = document.createElement('div');
  104.                         descDiv.className = 'desc';
  105.                         //把把后端传来的json，被jackson解析成blog对象 对象内的内容属性赋值
  106.                         descDiv.innerHTML = blog.content;
  107.                         //把descDiv添加到blogDiv内
  108.                         blogDiv.appendChild(descDiv);
  109.  
  110.                         //把blogDiv添加到container内
  111.                         container.appendChild(blogDiv);
  112.                     }
  113.                 }
  114.             });
  115.         }
  116.  
  117.         getBlogs();
  118.  
  119.         checkLogin();
  120.  
  121.                 function GetUser(){
  122.                 $.ajax({
  123.                 type: 'get',
  124.                 url:'userInfo'+location.search,//加个博客ID 让后端查找这篇博客
  125.                 success:function (body){
  126.                     //将这篇作者的用户名替换上去
  127.                 let user=document.querySelector('.card h2');
  128.                 user.innerHTML=body.username;
  129.                 //当这篇博客是当前用户的 那么就显示删除按钮
  130.                 if(body.isYourBlog){
  131.                     let delet=document.createElement('a');
  132.                     delet.className="delete";
  133.                     delet.innerHTML="删除博客"
  134.                     delet.href='blogdelete'+location.search;
  135.  
  136.                     let de=document.querySelector('.dete');
  137.                     de.appendChild(delet);
  138.                 }
  139.             }
  140.             });
  141.             }
  142.         GetUser();
  143.     </script>
  144. </body>
  145. </html>

注销登录

与博客列表一致这里不再赘述

查询博客

  1. 构造ajax的get方法，url是博客列表传来的博客ID，传给后端，后端才能根据这个ID查询博客
  2. 后端传来了数据，只要是json格式（application/json;charset=utf8）那么ajax就会把body转成js的对象。
  3. 创建div，分别把博客的标题、时间、内容写入
  1. <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
  2.         <script src="js/app.js"></script>
  3.     <script>
  4.         function getBlogs() {
  5.             //构造ajax
  6.             $.ajax({
  7.                 type: 'get',
  8.                 //博客列表传来的
  9.                 url: 'blog' + location.search,
  10.                 success: function (body) {
  11.                     let container = document.querySelector('.container-right');
  12.                     //后端返回的是json数据
  13.                     //如果Content-Type是application/json,jquery ajax会把body转成js对象
  14.                     for (let blog of body) {
  15.                         //构造最外层的div
  16.                         let blogDiv = document.createElement('div');
  17.                         blogDiv.className = 'blog';
  18.  
  19.                         //创建博客标题
  20.                         let titleDiv = document.createElement('div');
  21.                         titleDiv.className = 'title';
  22.                         //把后端传来的json，被jackson解析成blog对象，对象内的标题属性赋值
  23.                         titleDiv.innerHTML = blog.title;
  24.                         //把titleDiv添加在blogDiv内
  25.                         blogDiv.appendChild(titleDiv);
  26.  
  27.                         //创建日期
  28.                         let dateDiv = document.createElement('div');
  29.                         dateDiv.className = 'date';
  30.                         //把后端传来的json，被jackson解析成blog对象 对象内的时间属性赋值
  31.                         dateDiv.innerHTML = blog.postTime;
  32.                         //把dateDiv添加到blogDiv内
  33.                         blogDiv.appendChild(dateDiv);
  34.  
  35.                         //创建内容
  36.                         let descDiv = document.createElement('div');
  37.                         descDiv.className = 'desc';
  38.                         //把把后端传来的json，被jackson解析成blog对象 对象内的内容属性赋值
  39.                         descDiv.innerHTML = blog.content;
  40.                         //把descDiv添加到blogDiv内
  41.                         blogDiv.appendChild(descDiv);
  42.  
  43.                         //把blogDiv添加到container内
  44.                         container.appendChild(blogDiv);
  45.                     }
  46.                 }
  47.             });
  48.         }
  49.  
  50.         getBlogs();

判断用户是否登录

这个与博客列表页一样，这里不再赘述

将博客详情页昵称替换为当前博客作者昵称/是否显示删除博客

  1. 构造ajax的get方法，url传入博客列表传来的博客ID
  2. 获取数据后，将后端的数据写入昵称
  3. 判断isYourBlog是否为1 （1是说明当前登录用户的ID与博客ID相同（此篇博客是当前用户写的)，说明当前用户有支配此篇博客的权利，显示删除博客 0说明当前登录用户的ID与博客ID不同（此篇博客不是当前用户写的，没有支配全，不显示删除博客）
  4. 为1时，创建a标签，命名为删除博客，链接到删除博客的后端，并且传入博客ID
  5. 再放入原先的div
  1. function GetUser(){
  2.                 $.ajax({
  3.                 type: 'get',
  4.                 url:'userInfo'+location.search,//加个博客ID 让后端查找这篇博客
  5.                 success:function (body){
  6.                     //将这篇作者的用户名替换上去
  7.                 let user=document.querySelector('.card h2');
  8.                 user.innerHTML=body.username;
  9.                 //当这篇博客是当前用户的 那么就显示删除按钮
  10.                 if(body.isYourBlog){
  11.                     let delet=document.createElement('a');
  12.                     delet.className="delete";
  13.                     delet.innerHTML="删除博客"
  14.                     delet.href='blogdelete'+location.search;
  15.  
  16.                     let de=document.querySelector('.dete');
  17.                     de.appendChild(delet);
  18.                 }
  19.             }
  20.             });
  21.             }
  22.         GetUser();

后端

处理注销登录 LogoutServlet/doGet

这里与博客列表一致，不再赘述

处理查询博客 BlogServlet/doGet

  1. resp.setContentTyoe设置响应格式 (application/json;charset=utf8)
  2. 创建操作博客类
  3. req.getParameter获取前端传来的博客ID
  4. 这里是查询单个博客，所以是不为空的
  5. 将博客ID转为int 并且从数据库内查询
  6. 将博客放入List（这里最好不用放入List，因为只是单个博客，不需要迭代，我只是演示）
  7. objectMapper.writeVlueAsString构造成JSON格式
  8. 响应数据
  1. else{
  2.  
  3.  
  4.             resp.setContentType("application/json;charset=utf8");
  5.             //如果获取到博客ID时，说明时获取博客详情页
  6.             //使用数据库查找这个博客ID
  7.             String blogId=req.getParameter("blogId");
  8.             Blog blog=blogDao.selectOne(Integer.parseInt(blogId));
  9.             //记住，传json格式，如果你要用for循环 那么你的对象一定要是可迭代的对象
  10.             //如果你单构造个类过去，你用for是肯定循环不了的，你必须使用List这种可以迭代的对象，才能使用这个迭代循环
  11.             List<Blog> blogs=new ArrayList<>();
  12.             blogs.add(blog);
  13.  
  14.             //你也可以单传个对象 到前端那不用循环直接使用也可以
  15. //            List<Blog> blogs=new ArrayList<>();
  16. //            String jsonString=objectMapper.writeValueAsString(blog);
  17.  
  18.  
  19.             //转为json格式
  20.             String jsonString=objectMapper.writeValueAsString(blogs);
  21.             //响应
  22.             resp.getWriter().write(jsonString);
  23.         }

处理判断用户是否登录 LoginServlet/doGet

这里是与博客列表是一样的，就不再赘述

处理将博客详情页昵称替换为当前博客作者昵称/是否显示删除博客 UserinfoServlet/doGet

  1. 创建要构造JSON的类
  2. resp.getParameter获取blogId
  3. req.GetSession查询是否有session
  4. session.getAttribute获取session是否有该用户
  5. 数据库中查询此篇博客
  6. 数据中查询用户类是否有此篇博客的作者
  7. 当都有时，判断当前session的用户ID与此篇博客的ID是否相同（相同时，用户类的isyourblog设置1反之设置0）
  8. 响应时，把用户密码设置为0不要名为显示，不修改数据库的数据
  9. resp.setContentType设置响应格式
  10. objectMapper.writeValueAsString构造为JSON格式
  11. 响应
  1. //想要构造json 就要创建这个类
  2.         ObjectMapper objectMapper=new ObjectMapper();
  3.  
  4.         String blogid=req.getParameter("blogId");
  5.  
  6.         //直接取查找是否有cookie
  7.         HttpSession session=req.getSession(false);
  8.         if(session==null){
  9.             //后端查询失败时，发送状态码为403 403不会触发回调函数
  10.             resp.setStatus(403);
  11.             resp.setContentType("text/html;charset=utf8");
  12.             resp.getWriter().write("没有该用户");
  13.             return;
  14.         }
  15.         //获取当前登录用户
  16.         User user= (User) session.getAttribute("user");
  17.         if(user==null){
  18.             resp.setStatus(403);
  19.             resp.setContentType("text/html;charset=utf8");
  20.             resp.getWriter().write("没有该用户");
  21.             return;
  22.         }
  23.  
  24. else{
  25.             //查询这篇博客的作者
  26.             //如果有blogId时，说明是博客详情页发来的请求
  27.             BlogDao blogDao=new BlogDao();
  28.             Blog blog=blogDao.selectOne(Integer.parseInt(blogid));
  29.             if(blog==null){
  30.                 resp.setStatus(403);
  31.                 resp.setContentType("text/html;charset=utf8");
  32.                 resp.getWriter().write("没有该用户");
  33.                 return;
  34.             }
  35.             UserDao userDao=new UserDao();
  36.             //用博客类里的用户id 去用户类去查询  查询用户是否有这个博客作者
  37.             User author=userDao.selectById(blog.getUserId());
  38.             if(author==null){
  39.                 resp.setStatus(403);
  40.                 resp.setContentType("text/html;charset=utf8");
  41.                 resp.getWriter().write("没有该用户");
  42.                 return;
  43.             }
  44.  
  45.             if(author.getUserId()== user.getUserId()){
  46.                 author.setIsYourBlog(1);
  47.             }else {
  48.                 author.setIsYourBlog(0);
  49.             }
  50.  
  51.             //不用让密码在body中明文显示
  52.             user.setPassword("");
  53.             resp.setContentType("application/json;charset=utf8");
  54.             String jsonString=objectMapper.writeValueAsString(author);
  55.             //返回这篇博客的作者
  56.             resp.getWriter().write(jsonString);
  57.         }

博客编辑页

前端

通过from表单提交标题，内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>博客编辑页</title>
  7.  
  8.     <link rel="stylesheet" href="css/common.css">
  9.     <link rel="stylesheet" href="css/blog-edit-container.css">
  10.  
  11.     <!-- 引入 editor.md 的依赖 -->
  12.     <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
  13.     <script src="js/jquery.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.         <!-- logo图片 -->
  22.         <img src="image/logo.jpg" alt="" width="50px">
  23.  
  24.         <span class="title">我的博客系统</span>
  25.         <span class="spacer"></span>
  26.  
  27.         <!-- 导航栏 -->
  28.         <a href="blog_list.html">主页</a>
  29.         <a href="blog_edit.html">写博客</a>
  30.         <a href="logout">注销</a><!--        a会直接向对应路径发起get请求-->
  31.     </div>
  32.  
  33.     <div class="blog-edit-container">
  34.         <form action="blog" method="post" style="height: 100%">
  35.             <!-- 标题编辑区 -->
  36.             <div class="title">
  37.                 <input type="text" id="title" placeholder="请输入文章标题" name="title">
  38.                 <input type="submit" id="submit" value="发布文章">
  39.             </div>
  40.             <!-- 博客编辑器标签 -->
  41.             <div id="editor">
  42.                 <!-- 需要在这里加上一个隐藏的 textarea -->
  43.                 <!-- 属于 editor.md 这个库要求的. -->
  44.                 <textarea name="content" style="display: none;" ></textarea>
  45.             </div>
  46.         </form>
  47.     </div>
  48.  
  49.     <script>
  50.         // 初始化编辑器
  51.         var editor = editormd("editor", {
  52.             // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
  53.             width: "100%",
  54.             // 设定编辑器高度
  55.             height: "calc(100% - 50px)",
  56.             // 编辑器中的初始内容
  57.             markdown: "# 在这里写下一篇博客",
  58.             // 指定 editor.md 依赖的插件路径
  59.             path: "editor.md/lib/",
  60.             // 加上这个属性, 效果就是把编辑器里的内容给自动保存到 textarea 里.
  61.             saveHTMLToTextArea: true,
  62.         });
  63.     </script>
  64. </body>
  65. </html>

后端 BlogServlet/doPost

  1. req.setCharacterEncoding设置后端读取的格式
  2. req.getSession判断session是否存在
  3. session.getAttribute判断用户是否在session内
  4. 使用req.getParameter获取标题、内容
  5. 如果标题内容为空或者为空串，则响应400状态码
  6. 创建一个博客类
  7. 将数据写入博客类中
  8. 博客的作者ID就是当前登录用户的ID
  9. 最后将这个类写入数据库（实际就是将类中的数据写入）
  10. 写入后，resp.sendRedirect跳转到博客列表
  1. //提交博客
  2.     @Override
  3.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  4.         req.setCharacterEncoding("utf8");
  5.         //判断会话是否存在和会话中的用户是否存在
  6.         HttpSession session=req.getSession(false);
  7.         if (session == null) {
  8.             resp.setStatus(400);
  9.             return;
  10.         }
  11.         User user= (User) session.getAttribute("user");
  12. //        System.out.println(user.getUsername());
  13. //        System.out.println(user.getUserId());
  14.         if(user==null){
  15.             resp.setStatus(400);
  16.             return;
  17.         }
  18.  
  19.         //2.获取博客的标题和正文
  20.         String title=req.getParameter("title");
  21.         String content=req.getParameter("content");
  22. //        System.out.println(title);
  23. //        System.out.println(content);
  24.         if(title==null||content==null||title.equals("")||content.equals("")){
  25.             resp.setStatus(400);
  26.             resp.setContentType("text/html;charset=utf8");
  27.             resp.getWriter().write("标题或正文不符合");
  28.             return;
  29.         }
  30.  
  31.         //把数据写入一个对象
  32.         Blog blog=new Blog();
  33.         blog.setTitle(title);
  34.         blog.setContent(content);
  35.         //博客作者的ID就是当前登录用户的ID  所以直接从session拿出当前用户 再拿出当前用户的id
  36.         blog.setUserId(user.getUserId());
  37.         //创建博客写入数据库的对象
  38.         BlogDao blogDao=new BlogDao();
  39.         //把这个博客对象写入数据库
  40.         blogDao.insert(blog);
  41.  
  42.         //响应
  43.         resp.sendRedirect("blog_list.html");
  44.     }

部署

准备工作

均在Linux系统下

下载jdk

yum install java-1.8.0-openjdk-devel.x86_64

下载tomcat

把window下的tomcat8.0拖拽到linux上

解压 

unzip apache-tomcat-8.5.100.zip

加权限

cd到tomcat的bin目录下

给所有.sh加上权限

chmod +x *.sh

./即可启动

  1. startup.sh是linux启动脚本
  2.  
  3. startup.bat是window启动脚本

但是大概率启动不了，因为tomcat8080端口，服务器是默认不开放的，所有要进入你的服务器控制台开放端口

安装mysql

之后把db.sql里的sql语句复制到数据库内，重新建库建表

使用maven打包

记得改包格式和包名

把打好的包从window拖拽到Linux的Tomcat的webappsxia

访问

你服务器的地址:端口:包名:你也访问的页面

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/467730
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号