个人博客系统

酸奶柠檬

已于 2022-09-15 23:48:18 修改

阅读量1.4k

点赞数

文章标签： servlet 前端 java

于 2022-09-15 23:10:48 首次发布

本文链接：https://blog.csdn.net/m0_67463877/article/details/126881020

版权

（4）用户表和文章表的CRUD操作（Dao类）：

3.前端页面

（1）把之前写好的前端静态页面部署到webapp目录下

（2）封装ajax：

（3）设计一个类：用于返回给前端ajax回

4.实现前端匹配的Servlet所需功能

5.功能展示

设计思想

基于 HTML, CSS, JavaScript 实现了一个简单的博客系统的页面，然后基于博客系统页面来实现一个带服务器版本的博客程序，采用“前后端分离" 的方式，这种方式下服务器端不关注页面的内容, 而只是给网页端提供数据，网页端通过 ajax 的方式和服务器之间交互数据, 网页拿到数据之后再根据数据的内容渲染到页面上，从而实现个人博客系统。

一、项目流程

1.准备工作

（1）创建 web 项目

（2）创建目录结构

（3）配置 pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>myblog</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>

    <dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.49</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.12.3</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.24</version>
        </dependency>
        <!-- 引入单元测试框架：方便我们做测试， -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.13.1</version>
        </dependency>
    </dependencies>

    <build>
        <finalName>blog</finalName>
    </build>
</project>

2、数据库设计

（1）创建数据库

当前需要设计两张表, 文章表和用户表

-- 用户表
create table user(
    id int primary key auto_increment,
    username varchar(20) not null unique comment '账号',
    password varchar(256) not null comment '密码',
    nickname varchar(20) comment '昵称',
    head varchar(256) comment '头像路径',
    github varchar(256) comment 'github地址'
) comment '用户表';

-- 博客文章表
create table article(
    id int primary key auto_increment,
    title varchar(256) not null,
    content mediumtext not null,
    create_time datetime,
    user_id int,
    foreign key(user_id) references user(id)
);

（2）设计与之对应的数据库实体类：

public class Article {
    private Integer id;
    private String title;
    private String content;
    private java.util.Date createTime;
    private Integer userId;
}
public class User {
    private Integer id;
    private String username;
    private String password;
    private String nickname;
    private String head;
    private String github;
}

（3）数据库连接工具：

//数据库工具类：提供获取数据库连接，释放资源的统一代码
public class DBUtil {
    //静态变量，是类加载的时候初始化，只执行一次
    private static MysqlDataSource ds;
    //一个程序，连接一个数据库，只需要一个连接池，其中保存了多个数据库连接对象
    //1.获取连接池，内部使用，不开放
    private static DataSource getDataSource(){
        //ds类加载的时候，初始化为null，方法使用的时候，每次都判断一下
        if(ds==null){//判断为空，就创建及初始化属性
            ds=new MysqlDataSource();
            ds.setURL("jdbc:mysql://127.0.0.1:3306/blog");
            ds.setUser("root");
            ds.setPassword("010124");
            ds.setUseSSL(false);//不安全连接，如果不设置，也不影响，只是有警告
            ds.setCharacterEncoding("UTF-8");
        }
        return ds;
    }

    //2.获取数据库连接对象：开放给外部的jdbc代码使用
    public static Connection getConnection(){
        try {
            return getDataSource().getConnection();
        } catch (SQLException e) {
            throw new RuntimeException("获取数据库连接出错，可能是url，账号密码写错了",e);
        }
    }
    
    //3.释放资源
    //查询操作需要释放三个资源，更新操作（插入，修改，删除）只需要释放前两个资源
    public static void close(Connection c, Statement s, ResultSet r){
        try {
            if(r!=null) r.close();
            if(s!=null) s.close();
            if(c!=null) c.close();
        } catch (SQLException e) {
            throw new RuntimeException("释放数据库资源出错",e);
        }
    }

    //提供更新操作方便的释放资源功能
    public static void close(Connection c, Statement s){
        close(c,s,null);
    }

    public static void main(String[] args) {
        System.out.println(getConnection());
    }
}

（4）用户表和文章表的CRUD操作（Dao类）：

public class ArticleDao {

    //根据用户查询关联的文章列表
    public static List<Article> queryBlogList(Integer userId) {
        Connection c = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        try{
            //1.获取连接
            c = DBUtil.getConnection();
            String sql = "select * from article where user_id=?";
            //2.创建操作命令对象
            ps = c.prepareStatement(sql);
            //替换占位符
            ps.setInt(1, userId);
            //3.执行sql
            rs = ps.executeQuery();
            //4.处理结果集
            List<Article> articles = new ArrayList<>();
            while (rs.next()){
                //每一行数据，都是一个Article对象、
                Article a = new Article();
                a.setId(rs.getInt("id"));
                a.setTitle(rs.getString("title"));
                a.setContent(rs.getString("content"));
                java.sql.Timestamp createTime = rs.getTimestamp("create_time");
                a.setCreateTime(new java.util.Date(createTime.getTime()));
                a.setUserId(userId);
                articles.add(a);
            }
            return articles;
        }catch (Exception e){
            throw new RuntimeException("查询博客列表出错", e);
        }finally {
            DBUtil.close(c, ps, rs);
        }
    }

   public class UserDao {

    //根据账号查询用户信息
    public static User queryByUsername(String username) {
        Connection c = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        try{
            //1.获取数据库连接
            c = DBUtil.getConnection();
            String sql = "select * from user where username=?";
            //2.创建操作命令对象
            ps = c.prepareStatement(sql);
            //替换占位符: 第一个参数是占位符的索引（从1开始）
            ps.setString(1, username);
            //3.执行sql：查询是executeQuery方法，返回结果集
            rs = ps.executeQuery();
            //4.处理结果集
            while(rs.next()){
                User user = new User();
                //转换一行数据为一个用户对象，返回
                user.setId(rs.getInt("id"));
                user.setUsername(username);//结果集账号和传入的是一样的
                user.setPassword(rs.getString("password"));
                user.setNickname(rs.getString("nickname"));
                user.setHead(rs.getString("head"));
                user.setGithub(rs.getString("github"));
                return user;
            }
            return null;
        }catch (Exception e){
            //捕获到异常，应该如何做？
            //打印异常，返回null：不合适，我们返回null是表示账号不存在，这里出异常是程序出错
//            e.printStackTrace();
//            return null;
            throw new RuntimeException("根据账号查询用户出错", e);
        }finally {
            DBUtil.close(c, ps, rs);
        }
    }

3.前端页面

（1）把之前写好的前端静态页面部署到webapp目录下

（2）封装ajax：

在前后端交互中我们需要用到ajax进行数据交互
把之前封装好的ajax函数拷贝过来，放到一个单独的js文件中，方便后续使用

function ajax(args){//var ajax = function(){}
    let xhr = new XMLHttpRequest();
    // 设置回调函数
    xhr.onreadystatechange = function(){
        // 4: 客户端接收到响应后回调
        if(xhr.readyState == 4){
            // 回调函数可能需要使用响应的内容，作为传入参数
            args.callback(xhr.status, xhr.responseText);
        }
    }
    xhr.open(args.method, args.url);
    //如果args中，contentType属性有内容，就设置Content-Type请求头
    if(args.contentType){//js中，if判断，除了判断boolean值，还可以判断字符串，对象等，有值就为true
        xhr.setRequestHeader("Content-Type", args.contentType);
    }
    //如果args中，设置了body请求正文，调用send(body)
    if(args.body){
        xhr.send(args.body);
    }else{//如果没有设置，调用send()
        xhr.send();
    }
}

（3）设计一个类：用于返回给前端ajax回调

//设计一个类，用于返回给前端ajax回调
public class JsonResult {
    private boolean ok;//表示执行一个操作是否成功
    private Object data;//操作成功，且是一个查询操作，需要返回一些数据给前端

	//同样省略getter、setter和toString
}

4.实现前端匹配的Servlet所需功能

public class BlogAddServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取请求数据：json格式通过request输入流来反序列化为Article对象
        Article a = WebUtil.deserialize(req, Article.class);
        //以上文章对象，包含请求传入的标题和内容，插入文章还需要user_id字段
        //获取session中的用户信息
        User user = WebUtil.validateLogin(req);
        if(user == null){
            //没有登录，返回401
            resp.setStatus(401);
            return;
        }
        //登录，插入文章操作
        a.setUserId(user.getId());
        int n = ArticleDao.insert(a);
        Map<String, Object> map = new HashMap<>();
        map.put("ok", true);
        WebUtil.serialize(resp, map);
    }
}
public class BlogDetailServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取请求数据：文章id
        String id = req.getParameter("id");
        //通过文章id查询文章信息
        Article a = ArticleDao.queryBlogDetail(Integer.parseInt(id));
        WebUtil.serialize(resp, a);
    }
}
public class BlogListServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //没有请求数据，但需要根据用户查询关联的文章
        //先从session获取用户
        User user = WebUtil.validateLogin(req);
        //没有登录，返回401
        if(user == null){
            resp.setStatus(401);
            return;
        }
        //登录，查询文章列表，并返回: 根据用户id查询多篇文章
        List<Article> articles = ArticleDao.queryBlogList(user.getId());
        WebUtil.serialize(resp, articles);
    }
}
public class GetUserInfoServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取session中的用户
        User user = WebUtil.validateLogin(req);
        //没有登录，不允许访问：返回401状态码
        if(user == null){
            resp.setStatus(401);
            return;
        }
        //已经登录，返回用户信息
        WebUtil.serialize(resp, user);
    }
}
public class LoginServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //构造一个返回数据(ok: boolean, error: String)
        Map<String, Object> body = new HashMap<>();

        //处理请求：json数据转为Java对象(请求正文包含中文，记得设置编码)
        req.setCharacterEncoding("UTF-8");
        //json转Java对象
        User user = WebUtil.deserialize(req, User.class);

        //验证账号密码：先根据账号查询，结果是一条或没有数据
        User query = UserDao.queryByUsername(user.getUsername());
        //根据账号查不到数据，说明账号不存在
        if(query == null){
            body.put("ok", false);
            body.put("error", "账号不存在");
            //用户输入的密码和查询的用户密码不一样
        }else if(!query.getPassword().equals(user.getPassword())){
            body.put("ok", false);
            body.put("error", "账号或密码错误");
            //验证通过
        }else{
            body.put("ok", true);
            //登录成功，创建session，并保存用户信息
            HttpSession session = req.getSession();//创建session
            //在session中保存用户信息：保存数据库查询的用户，信息比较全
            session.setAttribute("user", query);
        }
        //返回响应：Java对象序列化为json字符串，写入响应正文
        WebUtil.serialize(resp, body);
    }
}
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){
            session.invalidate();
        }
        //重定向到登录页面
        resp.sendRedirect("login.html");
    }
}

5.功能展示

（1）用户登录：

（2）用户主页：

（3）查看原文：

（4）写文章：

（5) 注销页面:

酸奶柠檬

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
个人博客系统

基于实现了一个简单的博客系统的页面，然后基于博客系统页面来实现一个带服务器版本的博客程序，采用“前后端分离"的方式，这种方式下服务器端不关注页面的内容,而只是给网页端提供数据，网页端通过ajax的方式和服务器之间交互数据,网页拿到数据之后再根据数据的内容渲染到页面上，从而实现个人博客系统。（1）创建web项目（2）创建目录结构（3）配置pom.xml。
复制链接

扫一扫