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

avatar
作者
猴君
阅读量:1

目录

准备工作

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

创建博客类

创建用户类

创建连接数据库工具类

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

实现对数据库用户的操作

创建数据库语句

登录页面

前端

后端

博客列表

前端

注销登录

写入数据

判断用户是否登录

替换页面用户昵称

后端

处理注销登录 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

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

需要用到

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

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

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

<dependencies>         <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->         <!--jQuery库-->         <dependency>             <groupId>javax.servlet</groupId>             <artifactId>javax.servlet-api</artifactId>             <version>3.1.0</version>             <scope>provided</scope>         </dependency>          <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->         <!--jackSon库-->         <dependency>             <groupId>com.fasterxml.jackson.core</groupId>             <artifactId>jackson-databind</artifactId>             <version>2.13.5</version>         </dependency>          <!-- https://mvnrepository.com/artifact/com.mysql/mysql-connector-j -->         <!--Mysql库-->         <dependency>             <groupId>com.mysql</groupId>             <artifactId>mysql-connector-j</artifactId>             <version>8.0.33</version>         </dependency>       </dependencies>  <!--    打包格式-->     <packaging>war</packaging>      <build> <!--        包名-->         <finalName>blog_system</finalName>     </build>

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

创建博客类

博客包含

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

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

package model;  import java.sql.Timestamp; import java.text.SimpleDateFormat; import java.util.SimpleTimeZone;  //表示博客 public class Blog {     private int blogId;     private String title;     private String content;     private int userId;     private Timestamp postTime;      public int getBlogId() {         return blogId;     }      public void setBlogId(int blogId) {         this.blogId = blogId;     }      public String getTitle() {         return title;     }      public void setTitle(String title) {         this.title = title;     }      public String getContent() {         return content;     }      public void setContent(String content) {         this.content = content;     }      public int getUserId() {         return userId;     }      public void setUserId(int userId) {         this.userId = userId;     }      public String getPostTime() {         //把时间戳构造成日期结构         SimpleDateFormat simpleDateFormat=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");         return simpleDateFormat.format(this.postTime);     }      public void setPostTime(Timestamp postTime) {         this.postTime = postTime;     } }

创建用户类

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

生成Get、Set方法

package model;  //表示用户 public class User {     private int userId;      private String username;      private String password;      private int isYourBlog=0;      public int getIsYourBlog() {         return isYourBlog;     }      public void setIsYourBlog(int isYourBlog) {         this.isYourBlog = isYourBlog;     }      public int getUserId() {         return userId;     }      public void setUserId(int userId) {         this.userId = userId;     }      public String getUsername() {         return username;     }      public void setUsername(String username) {         this.username = username;     }      public String getPassword() {         return password;     }      public void setPassword(String password) {         this.password = password;     } }

创建连接数据库工具类

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

package model;  import com.mysql.cj.jdbc.MysqlDataSource;  import javax.sql.DataSource; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException;   public class DBUtil {     //定义私有静态的DataSource对象，用于存储数据库连接信息。     //volatile确保了对这个变量的读写操作都是原子性的，即使再多线程环境下     //对这个变量访问也是线程安全的     private volatile static DataSource dataSource=null;      //获取数据库连接 管理数据库的创建、配置和管理     private static javax.sql.DataSource getDataSource() {         //如果为空时 加锁         if(dataSource==null){             synchronized (DBUtil.class){                 if (dataSource == null) {                     dataSource = new MysqlDataSource();                     ((MysqlDataSource)dataSource).setURL("jdbc:mysql://127.0.0.1:3306/blog_system?characterEncoding=utf8&useSSL=false");                     ((MysqlDataSource)dataSource).setUser("root");                     ((MysqlDataSource)dataSource).setPassword("monan1946");                 }             }         }         return dataSource;     }      //这个方法是从DataSource获取一个具体的数据库连接     //它通常在需要执行数据库操作时调用，比如执行SQL查询或更新     public static Connection getConnection() throws SQLException {         return getDataSource().getConnection();     }      //关闭数据库连接     public static void close(Connection connection, PreparedStatement statement, ResultSet resultSet){         if (resultSet!=null){             try {                 resultSet.close();             } catch (SQLException e) {                 throw new RuntimeException(e);             }         }         if(statement!=null){             try {                 statement.close();             } catch (SQLException e) {                 throw new RuntimeException(e);             }         }         if(connection!=null){             try {                 connection.close();             } catch (SQLException e) {                 throw new RuntimeException(e);             }         }     }   }

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

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

package model;  import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List;  //import static jdk.nashorn.internal.objects.NativeString.substring;  //Dao Data Access Object 用来访问数据的对象 //针对博客的增删改查 public class BlogDao {     //插入博客     public void insert(Blog blog){         Connection connection=null;         PreparedStatement statement=null;         try {             //与数据库建立连接             connection = DBUtil.getConnection();              //构造SQL语句             String sql = "insert into blog values(null,?,?,?,now())";             //写入sql语句             statement = connection.prepareStatement(sql);             //写入问号对应的数据             statement.setString(1, blog.getTitle());             statement.setString(2, blog.getContent());             statement.setInt(3, blog.getUserId());             //执行sql             int ret = statement.executeUpdate();             if (ret == 1) {                 System.out.println("插入成功");             } else {                 System.out.println("插入失败");             }         }catch (SQLException e) {             e.printStackTrace();         }finally {             //关闭连接             DBUtil.close(connection,statement,null);         }     }      //查询所有博客     public List<Blog> selectAll(){         Connection connection=null;         PreparedStatement statement=null;         ResultSet resultSet=null;         List<Blog> blogs=new ArrayList<>();         try {             //与数据库建立连接             connection=DBUtil.getConnection();              //构造sql             //让新的先读取 页面新的在最上面             String sql="select * from blog order by postTime desc";             //写入sql             statement=connection.prepareStatement(sql);             //执行SQL             resultSet=statement.executeQuery();             //遍历结果集合             while (resultSet.next()){                 Blog blog=new Blog();                 blog.setBlogId(resultSet.getInt("blogId"));                 blog.setTitle(resultSet.getString("title"));                 String content=resultSet.getString("content"); //                //如果长度大于100时，只截取100个字符作为摘要                 if(content.length()>100){                     content=content.substring(0,100);                 }                 //如果不大于100 不截取                 blog.setContent(content);                 blog.setUserId(resultSet.getInt("userId"));                 blog.setPostTime(resultSet.getTimestamp("postTime"));                 blogs.add(blog);             }          } catch (SQLException e) {             e.printStackTrace();         }finally {             //关闭连接             DBUtil.close(connection,statement,resultSet);         }         return blogs;     }      //查询一篇博客     public Blog selectOne(int blogId) {         Connection connection = null;         PreparedStatement statement = null;         ResultSet resultSet = null;         try {             // 1. 和数据库建立连接             connection = DBUtil.getConnection();             // 2. 构造 SQL             String sql = "select * from blog where blogId = ?";             statement = connection.prepareStatement(sql);             statement.setInt(1, blogId);             // 3. 执行 SQL             resultSet = statement.executeQuery();             // 4. 遍历结果集. 由于是按照 blogId 来查询. blogId 是自增主键, 不能重复.             //    此处的查询结果不可能是多条记录. 只能是 1 条或者 0 条.             if (resultSet.next()) {                 Blog blog = new Blog();                 blog.setBlogId(resultSet.getInt("blogId"));                 blog.setTitle(resultSet.getString("title"));                 blog.setContent(resultSet.getString("content"));                 blog.setPostTime(resultSet.getTimestamp("postTime"));                 blog.setUserId(resultSet.getInt("userId"));                 return blog;             }         } catch (SQLException throwables) {             throwables.printStackTrace();         } finally {             // 5. 关闭资源             DBUtil.close(connection, statement, resultSet);         }          return null;     }      //删除博客     public void delete(int blogId){         Connection connection=null;         PreparedStatement statement=null;         ResultSet resultSet=null;         try {             //建立连接             connection =DBUtil.getConnection();              //构造SQL语句             String sql="delete from blog where blogId=?";             //写入sql             statement=connection.prepareStatement(sql);             //替换?             statement.setInt(1,blogId);             //执行sql             int ret=statement.executeUpdate();             if(ret==1){                 System.out.println("删除成功");             }             else{                 System.out.println("删除失败");             }         } catch (SQLException e) {              e.printStackTrace();         }finally {             DBUtil.close(connection,statement,null);         }     } }

实现对数据库用户的操作

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

package model;  import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException;  //Dao Data Access Object 用来访问数据的对象 //针对用户的增删改查 public class UserDao {     //查询用户     public User selectByName(String username){         Connection connection=null;         PreparedStatement statement=null;         ResultSet resultSet=null;         try {             //建立连接             connection=DBUtil.getConnection();             //构造sql语句             String sql="select * from user where username=?";             //写入sql             statement=connection.prepareStatement(sql);             //填入问号             statement.setString(1,username);             //执行sql             resultSet=statement.executeQuery();             if(resultSet.next()){                 User user=new User();                 user.setUserId(resultSet.getInt("userId"));                 user.setUsername(resultSet.getString("username"));                 user.setPassword(resultSet.getString("password"));                 return user;             }         } catch (SQLException e) {             e.printStackTrace();         }finally {             DBUtil.close(connection,statement,resultSet);         }         return null;     }      public User selectById(int userId){         Connection connection=null;         PreparedStatement statement=null;         ResultSet resultSet=null;         try {             //建立连接             connection=DBUtil.getConnection();             //构造sql语句             String sql="select * from user where userId=?";             //写入sql             statement=connection.prepareStatement(sql);             //填入问号             statement.setInt(1,userId);             //执行sql             resultSet=statement.executeQuery();             if(resultSet.next()){                 User user=new User();                 user.setUserId(resultSet.getInt("userId"));                 user.setUsername(resultSet.getString("username"));                 user.setPassword(resultSet.getString("password"));                 return user;             }         } catch (SQLException e) {             e.printStackTrace();         }finally {             DBUtil.close(connection,statement,resultSet);         }         return null;     } }

创建数据库语句

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

create database blog_system;  use blog_system;  create table blog(     blogId int primary key auto_increment, --主键 自增 博客ID     title varchar(1024), --博客标题     content mediumtext, --博客正文  mediutext类型很长     userId int, --作者id     postTime datetime --发布事件 );  create table blog(     blogId int primary key auto_increment,     title varchar(1024),     content mediumtext,     userId int,     postTime datetime );  create table user(     userId int primary key auto_increment, --用户id     username varchar(128) unique , --用户名     password varchar(128) --密码 ); create table user(     userId int primary key auto_increment,     username varchar(128) unique ,     password varchar(128) );

登录页面

前端

login/loginServlet

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

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>登录页</title>     <link rel="stylesheet" href="css/common.css">     <link rel="stylesheet" href="css/login.css"> </head> <body>         <!-- 导航栏 -->         <div class="nav">             <!-- logo图片 -->             <img src="image/logo.jpg" alt="" width="50px">                  <span class="title">我的博客系统</span>             <span class="spacer"></span>                  <!-- 导航栏 -->             <a href="blog_list.html">主页</a>             <a href="blog_edit.html">写博客</a>         </div>          <!-- 登录板块 -->         <div class="login-container">             <div class="login-dialog">                 <p>登录</p>             <form action="login" method="post">                 <div class="row">                     <span>用户名</span>                     <input type="text" id="username" name="username">                 </div>                 <div class="row">                     <span>密码</span>                     <input type="password" id="password" name="password">                 </div>                 <div class="row">                     <input type="submit" value="提交"id="submit">                 </div>             </form>             </div>         </div> </body> </html>

后端

  1. 后端调用doPost方法
  2. 使用resp.getParameter方法获取数据
  3. 去数据库内查询数据。
  4. 查询不到则响应登录失败
  5. 若查询到时，创建session HttpSession session= req.getSession()
  6. 也就是浏览器内的cookie session.setAttribute把此用户存储进去，方便后续使用之后登录成功跳转至博客列表
package controller;  import model.User; import model.UserDao;  import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import java.io.IOException;  @WebServlet("/login") public class loginServlet extends HttpServlet {     @Override     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {         //告诉servlet(服务器)按照utf格式解析请求中的body         //如果不使用这个 中文格式的会乱码         req.setCharacterEncoding("utf8");          //告诉浏览器 按照utf8格式解析响应 //        resp.setCharacterEncoding("utf8");          resp.setContentType("text/html;charset=utf8");         String username=req.getParameter("username");         String password=req.getParameter("password");  //        System.out.println(username); //        System.out.println(password);  //        if(username.equals("user")&&password.equals("123")){ //            resp.getWriter().write("登录成功"); //        } //        else //        { //            resp.getWriter().write("用户名或密码错误"); //        }          UserDao userDao=new UserDao();         User user=userDao.selectByName(username);         if(user==null){             resp.getWriter().write("用户名或密码错误");             return;         }         if(!user.getPassword().equals(password)){             resp.getWriter().write("用户名或密码错误");             return;         }         //到这里就是登录成功了          //构造会话 cookie         HttpSession session= req.getSession();          //把信息存到cookie内，方便后续使用         session.setAttribute("user",user);          //登录成功后 跳转页面         resp.sendRedirect("blog_list.html");     }      @Override     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {         //验证登录状态         //如果用户未登录，强制重定向到登录页面         //如果用户已登录，不做动作          //取查询session         HttpSession session=req.getSession(false);         if(session==null){             //如果连session都没有 返回403状态码             //403状态码就是代表用户未登录的状态码             resp.setStatus(403);             return;         }         //取cookie查找是否有user这个用户         //这个user不是用户名 而是user内的用户名         User user= (User) session.getAttribute("user");         if(user==null){             //没有这个用户，说明未登录             resp.setStatus(403);             return;         }         //到这说明用户已经登录成功         resp.setStatus(200);     } }

博客列表

前端

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

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

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

之后引入即可使用

前端整体代码

<!DOCTYPE html>  <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>墨轩博客页</title>     <link rel="stylesheet" href="css/common.css">     <link rel="stylesheet" href="css/blog.css"> </head> <body>     <!-- 导航栏 -->     <div class="nav">         <!-- logo图片 -->         <img src="image/logo.jpg" alt="" width="50px">          <span class="title">我的博客系统</span>         <span class="spacer"></span>          <!-- 导航栏 -->         <a href="blog_list.html">主页</a>         <a href="blog_edit.html">写博客</a>         <a href="logout">注销</a> <!--        a会直接向对应路径发起get请求-->     </div>      <!-- 页面主体 -->     <div class="container">          <!-- 左侧个人信息 -->         <div class="container-left">             <div class="card">                 <img src="image/蕾姆.jpg" alt="">                 <h2>墨轩111</h2>                 <a href="#">github链接</a>                 <div class="counter">                     <span>文章</span>                     <span>分类</span>                 </div>                 <div class="counter">                     <span>2</span>                     <span>3</span>                 </div>             </div>           <!-- 右侧个人信息 -->         </div>         <div class="container-right">             <!-- <div class="blog">这是我的第一篇文章</div>             <div class="date">2024-3-27 20:20</div>             <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>             <a href="blog_detail.html">查看全文 &gt;&gt; </a> -->             <!-- &gt;是html的> 正常的>无法之间写入 -->         </div>     </div>      <!-- 引入jquery -->     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>     <script src="js/app.js"></script>     <script>         function getBlogs(){             //构造ajax             $.ajax({                 type:'get',                 url:'blog',                 success: function(body){                     let container=document.querySelector('.container-right');                     //后端返回的是json数据                     //如果Content-Type是application/json,jquery ajax会把body转成js对象                     for(let blog of body){                         //构造最外层的div                         let blogDiv=document.createElement('div');                         blogDiv.className='blog';                          //创建博客标题                         let titleDiv=document.createElement('div');                         titleDiv.className='title';                         //把后端传来的json，被jackson解析成blog对象，对象内的标题属性赋值                         titleDiv.innerHTML=blog.title;                         //把titleDiv添加在blogDiv内                         blogDiv.appendChild(titleDiv);                          //创建日期                         let dateDiv=document.createElement('div');                         dateDiv.className='date';                         //把后端传来的json，被jackson解析成blog对象 对象内的时间属性赋值                         dateDiv.innerHTML=blog.postTime;                         //把dateDiv添加到blogDiv内                         blogDiv.appendChild(dateDiv);                          //创建内容                         let descDiv=document.createElement('div');                         descDiv.className='desc';                         //把把后端传来的json，被jackson解析成blog对象 对象内的内容属性赋值                         descDiv.innerHTML=blog.content;                         //把descDiv添加到blogDiv内                         blogDiv.appendChild(descDiv);                          //创建按钮                         let a=document.createElement('a');                         a.innerHTML='查看全文 >>';                         //传递这篇博客的ID是多少 后端才能取查询这篇博客的详细页                         a.href='blog_detail.html?blogId='+blog.blogId;                         blogDiv.appendChild(a);                          //把blogDiv添加到container内                         container.appendChild(blogDiv);                     }                 }             });         }         getBlogs();          //使用ajax构造get方法。判断当前是否用户         // 如果没登陆，强制跳转到登录页面         checkLogin();          //将博客列表的昵称替换为当前登录用户的昵称         function GetUser(){             $.ajax({                 type: 'get',                 url:'userInfo',                 //后端查询失败时，发送状态码为403 403不会触发回调函数                 success:function (body){                     //将登录的用户名替换上去                     let user=document.querySelector('.card h2');                     user.innerHTML=body.username;                 }             });         }         GetUser();     </script> </body> </html>

注销登录

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

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

写入数据

  1. 前端构造ajax构造get方法，发送给后端。
  2. 调用回调函数。
  3. 遍历后端传来的数据（想要用遍历，那么后端传来的数据一定是像List这种可遍历的，如何只传来的对象，那就无法遍历）
  4. 创建div 分别把博客的标题，时间，内容创建，把后端数据都写入。并且创建查询博客详情页的按键。当按下这个按键时，会把博客ID传递给博客详情页，详情页就能拿着这个ID去后端查询此博客
  5. 把整体div放入原先的div内
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>     <script src="js/app.js"></script>     <script>         function getBlogs(){             //构造ajax             $.ajax({                 type:'get',                 url:'blog',                 success: function(body){                     let container=document.querySelector('.container-right');                     //后端返回的是json数据                     //如果Content-Type是application/json,jquery ajax会把body转成js对象                     for(let blog of body){                         //构造最外层的div                         let blogDiv=document.createElement('div');                         blogDiv.className='blog';                          //创建博客标题                         let titleDiv=document.createElement('div');                         titleDiv.className='title';                         //把后端传来的json，被jackson解析成blog对象，对象内的标题属性赋值                         titleDiv.innerHTML=blog.title;                         //把titleDiv添加在blogDiv内                         blogDiv.appendChild(titleDiv);                          //创建日期                         let dateDiv=document.createElement('div');                         dateDiv.className='date';                         //把后端传来的json，被jackson解析成blog对象 对象内的时间属性赋值                         dateDiv.innerHTML=blog.postTime;                         //把dateDiv添加到blogDiv内                         blogDiv.appendChild(dateDiv);                          //创建内容                         let descDiv=document.createElement('div');                         descDiv.className='desc';                         //把把后端传来的json，被jackson解析成blog对象 对象内的内容属性赋值                         descDiv.innerHTML=blog.content;                         //把descDiv添加到blogDiv内                         blogDiv.appendChild(descDiv);                          //创建按钮                         let a=document.createElement('a');                         a.innerHTML='查看全文 >>';                         //传递这篇博客的ID是多少 后端才能取查询这篇博客的详细页                         a.href='blog_detail.html?blogId='+blog.blogId;                         blogDiv.appendChild(a);                          //把blogDiv添加到container内                         container.appendChild(blogDiv);                     }                 }             });         }         getBlogs();

判断用户是否登录

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

//使用ajax构造get方法。判断当前是否用户         // 如果没登陆，强制跳转到登录页面         checkLogin();  这个在js内的app.js文件  function checkLogin(){     $.ajax({         type: 'get',         url:'login',         success:function (){             // 当客户端响应200状态码时，说明用户已登录，不做处理         },         error:function (){             //发客户端响应403时 就会触发error              //强制跳转登录页面             location.assign('login.html');         }     }) }

替换页面用户昵称

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

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

后端

处理注销登录 LogoutServlet/doGet

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

处理获取所有博客 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. 响应数据
@Override     //发送博客列表或博客详情页的内容     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {         //想要构造JSON格式，就得用到此类         private ObjectMapper objectMapper=new ObjectMapper();         resp.setContentType("application/json;charset=utf8");         //要拿到写数据库操作的类         BlogDao blogDao=new BlogDao();         //获取url中的博客ID         String blogId=req.getParameter("blogId");         System.out.println(blogId);         //为空时 说明时获取博客列表，而不是获取博客详情         if(blogId==null){             //查询所有 返回的是list 每个类型是一个博客类型             List<Blog> blogs=blogDao.selectAll();             //转成json格式              String jsonString=objectMapper.writeValueAsString(blogs);             //响应             resp.getWriter().write(jsonString);         }else{             //如果获取到博客ID时，说明时获取博客详情页             //使用数据库查找这个博客ID             Blog blog=blogDao.selectOne(Integer.parseInt(blogId));             //记住，传json格式，如果你要用for循环 那么你的对象一定要是可迭代的对象             //如果你单构造个类过去，你用for是肯定循环不了的，你必须使用List这种可以迭代的对象，才能使用这个迭代循环             List<Blog> blogs=new ArrayList<>();             blogs.add(blog);              //你也可以单传个对象 到前端那不用循环直接使用也可以 //            List<Blog> blogs=new ArrayList<>(); //            String jsonString=objectMapper.writeValueAsString(blog);               //转为json格式             String jsonString=objectMapper.writeValueAsString(blogs);             //响应             resp.getWriter().write(jsonString);         }     }

处理判断用户是否登录 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时，才调用
@Override     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {         //验证登录状态         //如果用户未登录，强制重定向到登录页面         //如果用户已登录，不做动作          //取查询session         HttpSession session=req.getSession(false);         if(session==null){             //如果连session都没有 返回403状态码             //403状态码就是代表用户未登录的状态码             resp.setStatus(403);             return;         }         //取cookie查找是否有user这个用户         //这个user不是用户名 而是user内的用户名         User user= (User) session.getAttribute("user");         if(user==null){             //没有这个用户，说明未登录             resp.setStatus(403);             return;         }         //到这说明用户已经登录成功         resp.setStatus(200);     }

处理替换页面用户昵称 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. 响应数据
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {         //想要构造json 就要创建这个类         ObjectMapper objectMapper=new ObjectMapper();          String blogid=req.getParameter("blogId");          //直接取查找是否有cookie         HttpSession session=req.getSession(false);         if(session==null){             //后端查询失败时，发送状态码为403 403不会触发回调函数             resp.setStatus(403);             resp.setContentType("text/html;charset=utf8");             resp.getWriter().write("没有该用户");             return;         }         //获取当前登录用户         User user= (User) session.getAttribute("user");         if(user==null){             resp.setStatus(403);             resp.setContentType("text/html;charset=utf8");             resp.getWriter().write("没有该用户");             return;         }          if(blogid==null){             //查询登录的用户             //当url中的查询字符串中没有blogId时，说明是博客列表发来的请求             //不用让密码在body中明文显示             user.setPassword("");             resp.setContentType("application/json;charset=utf8");             //构造成json格式             //返回登录的用户             String jsonString=objectMapper.writeValueAsString(user);             //写入             resp.getWriter().write(jsonString);

博客详情页

前端

总体

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>博客详情页</title>      <link rel="stylesheet" href="css/common.css">     <link rel="stylesheet" href="css/blog.css">     <link rel="stylesheet" href="css/blog_detail.css">      <!-- 引入 editor.md 的依赖 -->     <link rel="stylesheet" href="editor.md/css/editormd.min.css" />     <script src="js/jquery.min.js"></script>     <script src="editor.md/lib/marked.min.js"></script>     <script src="editor.md/lib/prettify.min.js"></script>     <script src="editor.md/editormd.js"></script> </head> <body>         <!-- 导航栏 -->         <div class="nav">             <!-- logo图片 -->             <img src="image/logo.jpg" alt="" width="50px">                  <span class="title">我的博客系统</span>             <span class="spacer"></span>                  <!-- 导航栏 -->             <a href="blog_list.html">主页</a>             <a href="blog_edit.html">写博客</a>             <a href="logout">注销</a><!--        a会直接向对应路径发起get请求-->             <div class="dete"></div> <!--            删除博客-->         </div>          <!-- 页面主体 -->     <div class="container">          <!-- 左侧个人信息 -->         <div class="container-left">             <div class="card">                 <img src="image/蕾姆.jpg" alt="">                 <h2>墨轩111</h2>                 <a href="#">github链接</a>                 <div class="counter">                     <span>文章</span>                     <span>分类</span>                 </div>                 <div class="counter">                     <span>2</span>                     <span>3</span>                 </div>             </div>         </div>          <!-- 右侧个人信息 --> <!--        <div class="container-right">--> <!--        </div>-->          <div class="container-right">             <!-- 这个 div 里来放博客的内容 -->             <div class="blog-content">             </div>         </div>     </div>           <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>         <script src="js/app.js"></script>     <script>         function getBlogs() {             //构造ajax             $.ajax({                 type: 'get',                 //博客列表传来的                 url: 'blog' + location.search,                 success: function (body) {                     let container = document.querySelector('.container-right');                     //后端返回的是json数据                     //如果Content-Type是application/json,jquery ajax会把body转成js对象                     for (let blog of body) {                         //构造最外层的div                         let blogDiv = document.createElement('div');                         blogDiv.className = 'blog';                          //创建博客标题                         let titleDiv = document.createElement('div');                         titleDiv.className = 'title';                         //把后端传来的json，被jackson解析成blog对象，对象内的标题属性赋值                         titleDiv.innerHTML = blog.title;                         //把titleDiv添加在blogDiv内                         blogDiv.appendChild(titleDiv);                          //创建日期                         let dateDiv = document.createElement('div');                         dateDiv.className = 'date';                         //把后端传来的json，被jackson解析成blog对象 对象内的时间属性赋值                         dateDiv.innerHTML = blog.postTime;                         //把dateDiv添加到blogDiv内                         blogDiv.appendChild(dateDiv);                          //创建内容                         let descDiv = document.createElement('div');                         descDiv.className = 'desc';                         //把把后端传来的json，被jackson解析成blog对象 对象内的内容属性赋值                         descDiv.innerHTML = blog.content;                         //把descDiv添加到blogDiv内                         blogDiv.appendChild(descDiv);                          //把blogDiv添加到container内                         container.appendChild(blogDiv);                     }                 }             });         }          getBlogs();          checkLogin();                  function GetUser(){                 $.ajax({                 type: 'get',                 url:'userInfo'+location.search,//加个博客ID 让后端查找这篇博客                 success:function (body){                     //将这篇作者的用户名替换上去                 let user=document.querySelector('.card h2');                 user.innerHTML=body.username;                 //当这篇博客是当前用户的 那么就显示删除按钮                 if(body.isYourBlog){                     let delet=document.createElement('a');                     delet.className="delete";                     delet.innerHTML="删除博客"                     delet.href='blogdelete'+location.search;                      let de=document.querySelector('.dete');                     de.appendChild(delet);                 }             }             });             }         GetUser();     </script> </body> </html>

注销登录

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

查询博客

  1. 构造ajax的get方法，url是博客列表传来的博客ID，传给后端，后端才能根据这个ID查询博客
  2. 后端传来了数据，只要是json格式（application/json;charset=utf8）那么ajax就会把body转成js的对象。
  3. 创建div，分别把博客的标题、时间、内容写入
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>         <script src="js/app.js"></script>     <script>         function getBlogs() {             //构造ajax             $.ajax({                 type: 'get',                 //博客列表传来的                 url: 'blog' + location.search,                 success: function (body) {                     let container = document.querySelector('.container-right');                     //后端返回的是json数据                     //如果Content-Type是application/json,jquery ajax会把body转成js对象                     for (let blog of body) {                         //构造最外层的div                         let blogDiv = document.createElement('div');                         blogDiv.className = 'blog';                          //创建博客标题                         let titleDiv = document.createElement('div');                         titleDiv.className = 'title';                         //把后端传来的json，被jackson解析成blog对象，对象内的标题属性赋值                         titleDiv.innerHTML = blog.title;                         //把titleDiv添加在blogDiv内                         blogDiv.appendChild(titleDiv);                          //创建日期                         let dateDiv = document.createElement('div');                         dateDiv.className = 'date';                         //把后端传来的json，被jackson解析成blog对象 对象内的时间属性赋值                         dateDiv.innerHTML = blog.postTime;                         //把dateDiv添加到blogDiv内                         blogDiv.appendChild(dateDiv);                          //创建内容                         let descDiv = document.createElement('div');                         descDiv.className = 'desc';                         //把把后端传来的json，被jackson解析成blog对象 对象内的内容属性赋值                         descDiv.innerHTML = blog.content;                         //把descDiv添加到blogDiv内                         blogDiv.appendChild(descDiv);                          //把blogDiv添加到container内                         container.appendChild(blogDiv);                     }                 }             });         }          getBlogs();

判断用户是否登录

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

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

  1. 构造ajax的get方法，url传入博客列表传来的博客ID
  2. 获取数据后，将后端的数据写入昵称
  3. 判断isYourBlog是否为1 （1是说明当前登录用户的ID与博客ID相同（此篇博客是当前用户写的)，说明当前用户有支配此篇博客的权利，显示删除博客 0说明当前登录用户的ID与博客ID不同（此篇博客不是当前用户写的，没有支配全，不显示删除博客）
  4. 为1时，创建a标签，命名为删除博客，链接到删除博客的后端，并且传入博客ID
  5. 再放入原先的div
function GetUser(){                 $.ajax({                 type: 'get',                 url:'userInfo'+location.search,//加个博客ID 让后端查找这篇博客                 success:function (body){                     //将这篇作者的用户名替换上去                 let user=document.querySelector('.card h2');                 user.innerHTML=body.username;                 //当这篇博客是当前用户的 那么就显示删除按钮                 if(body.isYourBlog){                     let delet=document.createElement('a');                     delet.className="delete";                     delet.innerHTML="删除博客"                     delet.href='blogdelete'+location.search;                      let de=document.querySelector('.dete');                     de.appendChild(delet);                 }             }             });             }         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. 响应数据
else{               resp.setContentType("application/json;charset=utf8");             //如果获取到博客ID时，说明时获取博客详情页             //使用数据库查找这个博客ID             String blogId=req.getParameter("blogId");             Blog blog=blogDao.selectOne(Integer.parseInt(blogId));             //记住，传json格式，如果你要用for循环 那么你的对象一定要是可迭代的对象             //如果你单构造个类过去，你用for是肯定循环不了的，你必须使用List这种可以迭代的对象，才能使用这个迭代循环             List<Blog> blogs=new ArrayList<>();             blogs.add(blog);              //你也可以单传个对象 到前端那不用循环直接使用也可以 //            List<Blog> blogs=new ArrayList<>(); //            String jsonString=objectMapper.writeValueAsString(blog);               //转为json格式             String jsonString=objectMapper.writeValueAsString(blogs);             //响应             resp.getWriter().write(jsonString);         }

处理判断用户是否登录 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. 响应
//想要构造json 就要创建这个类         ObjectMapper objectMapper=new ObjectMapper();          String blogid=req.getParameter("blogId");          //直接取查找是否有cookie         HttpSession session=req.getSession(false);         if(session==null){             //后端查询失败时，发送状态码为403 403不会触发回调函数             resp.setStatus(403);             resp.setContentType("text/html;charset=utf8");             resp.getWriter().write("没有该用户");             return;         }         //获取当前登录用户         User user= (User) session.getAttribute("user");         if(user==null){             resp.setStatus(403);             resp.setContentType("text/html;charset=utf8");             resp.getWriter().write("没有该用户");             return;         }  else{             //查询这篇博客的作者             //如果有blogId时，说明是博客详情页发来的请求             BlogDao blogDao=new BlogDao();             Blog blog=blogDao.selectOne(Integer.parseInt(blogid));             if(blog==null){                 resp.setStatus(403);                 resp.setContentType("text/html;charset=utf8");                 resp.getWriter().write("没有该用户");                 return;             }             UserDao userDao=new UserDao();             //用博客类里的用户id 去用户类去查询  查询用户是否有这个博客作者             User author=userDao.selectById(blog.getUserId());             if(author==null){                 resp.setStatus(403);                 resp.setContentType("text/html;charset=utf8");                 resp.getWriter().write("没有该用户");                 return;             }              if(author.getUserId()== user.getUserId()){                 author.setIsYourBlog(1);             }else {                 author.setIsYourBlog(0);             }              //不用让密码在body中明文显示             user.setPassword("");             resp.setContentType("application/json;charset=utf8");             String jsonString=objectMapper.writeValueAsString(author);             //返回这篇博客的作者             resp.getWriter().write(jsonString);         }

博客编辑页

前端

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

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>博客编辑页</title>      <link rel="stylesheet" href="css/common.css">     <link rel="stylesheet" href="css/blog-edit-container.css">      <!-- 引入 editor.md 的依赖 -->     <link rel="stylesheet" href="editor.md/css/editormd.min.css" />     <script src="js/jquery.min.js"></script>     <script src="editor.md/lib/marked.min.js"></script>     <script src="editor.md/lib/prettify.min.js"></script>     <script src="editor.md/editormd.js"></script> </head> <body>     <!-- 导航栏 -->     <div class="nav">         <!-- logo图片 -->         <img src="image/logo.jpg" alt="" width="50px">          <span class="title">我的博客系统</span>         <span class="spacer"></span>          <!-- 导航栏 -->         <a href="blog_list.html">主页</a>         <a href="blog_edit.html">写博客</a>         <a href="logout">注销</a><!--        a会直接向对应路径发起get请求-->     </div>      <div class="blog-edit-container">         <form action="blog" method="post" style="height: 100%">             <!-- 标题编辑区 -->             <div class="title">                 <input type="text" id="title" placeholder="请输入文章标题" name="title">                 <input type="submit" id="submit" value="发布文章">             </div>             <!-- 博客编辑器标签 -->             <div id="editor">                 <!-- 需要在这里加上一个隐藏的 textarea -->                 <!-- 属于 editor.md 这个库要求的. -->                 <textarea name="content" style="display: none;" ></textarea>             </div>         </form>     </div>      <script>         // 初始化编辑器         var editor = editormd("editor", {             // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.             width: "100%",             // 设定编辑器高度             height: "calc(100% - 50px)",             // 编辑器中的初始内容             markdown: "# 在这里写下一篇博客",             // 指定 editor.md 依赖的插件路径             path: "editor.md/lib/",             // 加上这个属性, 效果就是把编辑器里的内容给自动保存到 textarea 里.             saveHTMLToTextArea: true,         });     </script> </body> </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跳转到博客列表
//提交博客     @Override     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {         req.setCharacterEncoding("utf8");         //判断会话是否存在和会话中的用户是否存在         HttpSession session=req.getSession(false);         if (session == null) {             resp.setStatus(400);             return;         }         User user= (User) session.getAttribute("user"); //        System.out.println(user.getUsername()); //        System.out.println(user.getUserId());         if(user==null){             resp.setStatus(400);             return;         }          //2.获取博客的标题和正文         String title=req.getParameter("title");         String content=req.getParameter("content"); //        System.out.println(title); //        System.out.println(content);         if(title==null||content==null||title.equals("")||content.equals("")){             resp.setStatus(400);             resp.setContentType("text/html;charset=utf8");             resp.getWriter().write("标题或正文不符合");             return;         }          //把数据写入一个对象         Blog blog=new Blog();         blog.setTitle(title);         blog.setContent(content);         //博客作者的ID就是当前登录用户的ID  所以直接从session拿出当前用户 再拿出当前用户的id         blog.setUserId(user.getUserId());         //创建博客写入数据库的对象         BlogDao blogDao=new BlogDao();         //把这个博客对象写入数据库         blogDao.insert(blog);          //响应         resp.sendRedirect("blog_list.html");     }

部署

准备工作

均在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

./即可启动

startup.sh是linux启动脚本  startup.bat是window启动脚本

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

安装mysql

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

使用maven打包

记得改包格式和包名

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

访问

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

相关阅读
  1. 如何查看和设置我的Android N设备的权限？
  2. 如何在安卓手机上自定义应用图标？
  3. 如何在安卓微信中同时听语音和查看图片？
  4. 华为哪些设备将支持升级至安卓7.0？
  5. 微信安卓软件中Q10功能有哪些独特之处？
  6. 安卓用户如何挑选最佳视频播放器应用？
  7. 安卓系统中用户文件目录的确切位置是什么？
  8. 小米4用户如何安全升级到安卓8.0系统？
  9. 如何成功将魅蓝5升级至安卓原生7.0版本？
  10. 16GB存储的安卓手机是否能满足日常需求？

广告一刻

为您即时展示最新活动产品广告消息，让您随时掌握产品活动新动态！