目录

• 前言
• 一、一点建网站的背景知识
• 二、个人博客系统介绍
• • 1、核心功能和数据库
  • 2、前端页面
  • 3、后端
  • • servlet
    • service层
    • dao层
    • 配置文件
    • 参考资料

      前言

      这篇博主会介绍下我用javaweb搭建的个人博客系统，源码也会打包放到gitee上，需要的朋友可以自取，大家互相学习，请不要直接CV。

      tip：本篇承上篇，许多基本内容在上篇谈到，建议看之前先浏览下上篇博客。

      上篇：自己动手搭网站（五）：javaweb基础：登录功能

      系列总目录：自己动手搭建网站系列总目录

      gitee仓库链接

      一、一点建网站的背景知识

      在正式介绍代码前，博主先谈谈个人了解的一点web背景知识，也是博主接触web后“东拼西凑”来的，若有不当之处，希望大家指正。

      最早的网站是非常简单的，基本就是用html和css写的一些静态页面，几乎没有什么交互能力，只是用来展示某些信息的。这个时期的web技术也常被称为web1.0

      后来，随着技术的不断发展，C#、php、java等语言逐渐扩展到web领域，或者说，它们本来便是“应运而生”的。这些高级语言的加入使得网站渐渐有了交互能力，不再是只能看的页面了。也被称为web2.0时代，这个时期出现了许多经典的web建站技术栈，比如下面几个：

      javaweb系列 (j2EE /javaweb,前端jsp，后端java执行各种复杂操作；最先由sun公司提出，后来sun公司被oracle收购，现在oracle的网站可能还是用j2ee这套，j2ee比较适合大型网站，但是原生的j2ee真的很复杂，现在发展简化到了“spring（boot)+前端”的模式，方便多了，也是目前比较主流的网站开发技术栈）、

      asp.net系列（感觉是微软仿照jsp那套做得，前端asp，后端C#执行各种复杂操作，顺便一说，C#和Java据说有90%的相似度）、

      php（这个博主没怎么用过，不过听说php可以嵌入html中，导致前后端的界限模糊消失，增加了中小型网站开发效率的同时也使得其很难用于大型网站的开发并且维护也变得更加困难，但目前似乎仍有不少网站用着这套技术栈）

      当然，上述还称不上web技术栈，一般还要加上数据库（mysql)、操作系统（centos）、服务器（tomcat、Nginx等）…形成从开发到部署的一整套技术，便可称之为web技术栈了。

      web技术博大精深，近年来web3.0的概念也逐渐产生，涉及更复杂的用户交互体验，甚至渗透到生活的方方面面，已经渐渐超脱网站的限制而走向更多元的发展方向。入坑的朋友们，有没有觉得“任重而道远”呢？

      二、个人博客系统介绍

      闲话少说，咱们步入正题，这次博主采用的技术栈为javaweb(jsp、servlet、jdbc、mysql、tomcat)，jsp主要是写前端页面、servlet和jdbc后端操作和连接数据库、tomcat是web服务器、mysql就不必多说了，吾等开发者最青睐的开源数据库。关于jsp、servlet、jdbc大家有疑问的话可以看参考资料中狂神的相关视频，博主主要也是跟着这视频学的。这次用的集成开发环境是idea2022.1

      关于用idea新建一个简单的web项目在我放到另外一篇博客

      idea基本web开发环境配置及新建javaweb项目

      1、核心功能和数据库

      系统非常简单，核心功能就两个：登录和博客管理（发布、编辑、修改、展示）

      数据库表我也就建了两个，一个user表，一个blog表，分别服务于上面两个功能。登录方面，就简单的登录，甚至没有注册和找回密码等功能，因为是个人博客系统，注册什么的没太大必要（绝对不是因为偷懒，确信！）

      -- 创建数据库
      create database if not exists blog_system; 
      use blog_system;
      -- 创建用户表
      create table user(
          user_id     varchar(20) primary key,
          password    varchar(20)
      );
      -- 创建博客表，主键为blog_id，无符号int,自增
      create table blog(
          blog_id     int     unsigned auto_increment primary key,
          author      varchar(20)  not null,
          title       varchar(40)  not null,
          content     text     not null,
          create_time datetime not null,
          update_time datetime not null,
          is_deleted   tinyint  unsigned not null
      );
      -- 向用户表中插入一条数据
      insert into user(user_id,password) values('admin','test@123');
      -- 向博客表中插入一条数据
      insert into blog(author,title,content,create_time,update_time,is_deleted) values("微光落尘","###测试文章","嘻嘻哈哈","2022-08-31 20:36:08","2022-08-31 20:36:08",0);
      

      2、前端页面

      这次博主用的前端框架为bootstrap5，其实和bootstrap3也差不了多少，当初只是想了解下最新的bootstrap。涉及到博客功能，还引入了一个开源项目editor.md ，引入后webapp下的目录结构大概是这样子的

      

      博主在jsp页面插入了一些js脚本，用来和后端交互数据，其中最重要的函数是$.ajax()，关于此方法的详细介绍，参见ajax()方法详解，简单来说就是个用来向后端传递数据并接收后端传回参数的函数。

      因为最上面部分和左侧导航栏重复使用，我把它们抽出来做为母版页header.jsp和left.jsp，之后在jsp里面用<%@ include file=“header.jsp”%>引入进来就行。页面相比于第四篇中介绍的几个页面有了一些改变。下面是部分前端页面的代码：

      header.jsp

      <%--网站头部母版页--%>
      <%@ page language="java" contentType="text/html; charset=UTF-8"
               pageEncoding="UTF-8"%>
      
      
          
      欢迎来小尘空间
          
      小站虽小，或有其妙
      
          
      
      

      left.jsp

      <%--网站个人中心侧边栏--%>
      <%@ page language="java" contentType="text/html; charset=UTF-8"
               pageEncoding="UTF-8"%>
      
          
              
              个人中心
          
          
      
          
      
              
      
                  
                      
                      个人资料
                  
              
              
      
                  
                      
                      博客管理
                  
              
              
      
                  
                      
                      返回主页
                  
              
          
      
      

      主页（https://blog.csdn.net/m0_51566872/article/details/index.jsp）

      <%@ page language="java" contentType="text/html; charset=UTF-8"
               pageEncoding="UTF-8"%>
      
      
      
          
          
          
          
          
          
          
      
      
      
          <%@ include file="left.jsp"%>
      
          
          
              
      
                  
      昵称:
                  
                  
      
                      
                  
              
              
      
                  
      个性签名:
                  
                  
      
                      
                  
              
              
      
                  
      邮箱:
                  
                  
      
                      
                  
              
          
      
      
      
      
      

      

      点击左侧导航栏“博客管理”，进入博客管理页面（https://blog.csdn.net/m0_51566872/article/details/blogManagement.jsp），可以选择修改和删除博客，也是本系统的核心，这里的动态列表使用js动态生成的（别问我这里为什么不用jstl，jstl真的简单些…）

      <%@ page language="java" contentType="text/html; charset=UTF-8"
               pageEncoding="UTF-8"%>