自己动手搭网站（六）：javaweb搭建一个简单的个人博客系统 |
您所在的位置：网站首页 › 个人博客开发计划 › 自己动手搭网站（六）：javaweb搭建一个简单的个人博客系统 |
自己动手搭网站（六）：javaweb搭建一个简单的个人博客系统
|
目录
前言一、一点建网站的背景知识二、个人博客系统介绍1、核心功能和数据库2、前端页面3、后端servletservice层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下的目录结构大概是这样子的 因为最上面部分和左侧导航栏重复使用，我把它们抽出来做为母版页header.jsp和left.jsp，之后在jsp里面用引入进来就行。页面相比于第四篇中介绍的几个页面有了一些改变。下面是部分前端页面的代码： header.jsp 欢迎来小尘空间 小站虽小，或有其妙 主页 美景分享 博客文章 关于本站 个人中心 发布文章 登录 退出 $(document).ready(function () { //console.log("changing active...") // each 是 为每一个匹配的元素 执行定义的方法 $("#navBar").find("li").each(function (){ var a = $(this).find("a:first")[0]; // location.pathname 获取当前浏览器上的url路径部分 if ( location.pathname.search($(a).attr("href")) !== -1) { $(a).addClass("active"); } else { $(a).removeClass("active"); } }); });left.jsp 个人中心 个人资料 博客管理 返回主页 $(document).ready(function () { //console.log("changing active...") // each 是 为每一个匹配的元素 执行定义的方法 $("#leftNav").find("li").each(function () { var a = $(this).find("a:first")[0]; // location.pathname 获取当前浏览器上的url路径部分 if ( location.pathname.search($(a).attr("href")) !== -1) { $(a).addClass("active"); } else { $(a).removeClass("active"); } }); });主页（index.jsp） DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 微光落尘的个人空间 给我留言 备案信息：暂无效果图如下 效果图如下： 效果图： 点击标题进入到博客内容展示页（showBlog.jsp），可以看到详细的博客内容 DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 微光落尘的个人空间 --%> hhh asdfuhiod fffff 这篇博客 var testEditor; //得到后端传来的md格式的文章 function getBlogContent(){ // 用=将路由参数分割成数组 let idArray = window.location.search.split('='); //console.log(idArray); // 获取路由的参数 var blogId = idArray[1]; $.ajax({ url:"${pageContext.request.contextPath}/blog",//这个url是处理请求的servlet的url type:"GET", data: { "method":"blogDisplay","blogId":blogId}, dataType:"json", success:function (data,status){ document.getElementById("title").innerText = data.title; document.getElementById("author").innerText = data.author; document.getElementById("time").innerText = data.createTime; //console.log("data"+ data.blogContent); var text = document.getElementById("test-editormd-markdown-doc"); text.innerHTML = data.blogContent;//不可用innerText showBlog(); },error:function (status){ console.log(status); } }); } //DOM加载完成后执行上面函数，将文章内容放到textarea内，并用editormd进行处理、展示 $(document).ready(getBlogContent()); function showBlog(){ testEditor = editormd.markdownToHTML("test-editormd", { htmlDecode: "style, script, iframe", //width:"90%", //preview:true, //watch:true, emoji: true, taskList: true, tex: true, // 默认不解析 flowChart: true, // 默认不解析 sequenceDiagram: true, // 默认不解析 }); }效果图如下： 关于本站页面就是个简单的静态页面，内容基本就第四篇博客中的那些，这里就不赘述了。 点击右上角圆形头像展开提示菜单，可以选择“个人中心”、“发布博客”、“登录”、“退出”，如下图效果： 点击“个人中心”，触发登录验证，若没有登录则转向登录页面（login.jsp），登录成功后转到个人中心（personalCenter.jsp) 登录页面： DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
博主在jsp页面插入了一些js脚本，用来和后端交互数据，其中最重要的函数是$.ajax()，关于此方法的详细介绍，参见ajax()方法详解，简单来说就是个用来向后端传递数据并接收后端传回参数的函数。
美景分享页（scenery.jsp）
博客列表展示页（blogListPage.jsp) 这里使用了jstl的一些标签来生成动态博客列表，并做了分页功能，分页功能的实现参见参考资料给的链接。
【本文地址】
今日新闻 |
推荐新闻 |