【博客系统】 一

该博客系统基于servlet和mysql数据库 , 并且通过xshell终端工具部署至云服务器. 实现的功能包括:

1.博客列表页

2.博客详情页

3.登陆页面

4.强制登陆检查

5.获取用户信息

6.退出登陆

7.发布博客

一.系统展示

登陆页面

博客列表页

博客详情页

博客编辑页


下面就开始编写代码了. (前端代码不提供) 接下来的操作主要是两个大的方面 . 

1.前端和服务器的交互

2.服务器和数据库的交互

二.服务器和数据库的交互

该系统涉及的表包括blog博客表和用户登陆的user表. 

一般需要把建库建表的操作,写成sql文件保留下来 , 后续如果把程序部署到别的机器上,建库操作直接赋值sql,然后执行就可以完全服务器数据库的建库建表操作.

dao层

Data Acess Object 数据访问对象 , 写一些类,通过这些类里的方法封装了数据库操作,此时数据库就是通过这样的对象来访问的

1.设计数据库

  • 根据需求,找出需要有哪些实体
  • 梳理清楚实体和实体之间的关系 一对一/一对多/多对多

2.封装DBUtil 实现建立连接和断开连接

package dao;import com.mysql.cj.jdbc.MysqlDataSource;import javax.sql.DataSource;
import javax.xml.transform.Result;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;/*** 通过这个类,把数据库建立连接的逻辑封装好*/public class DBUtil {//使用单例模式创建(懒汉模式线程不安全)private static volatile DataSource dataSource=null;//私有,只在类内使用private static DataSource getDataSource() {if (dataSource == null) {synchronized (DBUtil.class) {if (dataSource == null) {dataSource = new MysqlDataSource();((MysqlDataSource) dataSource).setUrl("jdbc:mysql://127.0.0.1:13306/blogsystem?characterEncoding=utf8&useSSL=false");((MysqlDataSource) dataSource).setUser("root");
//                    ((MysqlDataSource) dataSource).setPassword("chenyafen");((MysqlDataSource) dataSource).setPassword("123456");}}}return dataSource;}//提供方法,和数据库建立连接public static Connection getConnection() throws SQLException {return getDataSource().getConnection();}//提供方法,和数据库断开连接public static void close(Connection connection, PreparedStatement statement, ResultSet resultSet) throws SQLException {if(resultSet!=null){resultSet.close();}if(statement!=null){statement.close();}if(connection!=null){connection.close();}}}

3.创建实体类 后续数据库操作是围绕实体类展开的

三.服务器和数据库的交互

实现前后端交互逻辑 , 针对每个功能点的步骤都是一样的. 

1.设计前后端交互接口

2.开发后端代码

3.开发前端代码

4.调试

1.博客列表页

让博客列表页再加载的时候,发起一个ajax的http 请求,请求发送到服务器上,就能获取博客列表数据. 进一步的把博客数据展示到页面上 (拼接成一些html片段)

1.前端发起一个http请求,向后端索要博客列表数据

2.后端收到请求之后查询数据库获取到数据库中的博客列表,返回给前端

3.前端拿到响应之后,就依据这里的内容,构造出html片段,最终显示出来

在进行这三个操作之前,还需要约定前后端交互接口,后续前端和后端要进行很多不同的数据交互.每一种数据交互,都需要发送不同的请求,返回不同的响应 .

此处就需要把请求具体什么样? 响应具体什么样? 都约定好 !

约定前后端交互接口

以下是一种典型的约定方式

请求:

GET blog

响应:

HTTP/1.1 200 OK

Content-Type:application/json ( 返回的是json数据)

[{blodId:1,title:"第一篇",content:"dddd",userId:1,posttime:"ddddd"} ,{blodId:1,title:"第一篇",content:"dddd",userId:1,posttime:"ddddd"}]

前端负责构造请求 , 解析响应 ;

后端负责解析请求, 构造响应 ;

编写后端代码

api应用编程接口

博客系统后续还会写一些servlet给前端提供功能的支持. 这些都可以理解成服务器给前端提供的api (或者也可以叫做Controller )

说明:

jackson看到blogs是一个list,就会构造出一个json数组; 针对list中每一个blog对象,分别构造出json对象 , 具体构造过程,就是根据Blog属性:属性的名字就是json的key,属性的值就是json的值

 

编写前端代码

让页面通过js ajax的方式发起http请求 . 

说明:

1.定义了一个函数,并调用这个函数 (不需要返回值)

2.构造这个html片段

相当于

<div> </div>

<div class="blog"> <div>

blog就是服务器返回的json数组里的一个元素 (这一个元素有五个属性)

浏览器访问该页面

 Fiddler抓包

上面的请求是获取列表页这个静态页面的

下面的请求是获取博客数据的

如果出现灰色的是因为触发了浏览器自带的缓存;

浏览器为了提高页面加载速度,就会把静态的资源在本地硬盘缓存一份,后续再访问统一资源,直接从本地获取 .

前后端交互过程:

当浏览器发起一个形如blog的http请求时,服务器就会调用查询数据库,并获取到数据库中的数据,然后转换为json格式的字符串,再返回给前端,前端拿到数据之后,回调函数进行遍历数据,依据返回的数据构造出html片段

问题:

1.更早发布的博文应该在下面 .

解决方法:给查询语句加上order by ,按照时间降序排序(大的在前, 小的在后)即可

2.时间格式不对

针对这个问题,要先明确问题出在前端还是后端 , 抓包查看后端返回的响应 , 发现是后端的问题

后端将从数据库读取到的对象转换为json字符串,转成的json字符串就是根据Blog对象的getter方法来完成的 ,jackson会自动调用getter方法把得到的结果作为json字符串中属性的值.  因此问题出在posttime的getter方法上,

使用simpleDateFormat方法:

2.博客详情页

2.1.约定前后端交互接口

请求:

GET  /blog?blodId=1     

如果是请求中不带query string, 此时就是查询博客列表

如果带有query string (blogId) , 此时就是查询指定博客的详细情况

响应:

HTTP/1.1 200 OK

Content-Typea:application/json

{blogId:1,title:"dfljf",content:"gjdsf",userId:1,posttime:"2023-12-4"}

2.2实现后端代码

2.3实现前端代码

注意:

1.这里需要让博客详情页,把数据库的中的原始数据,渲染成md渲染后的数据

使用editor.md的线程的方法即可(阅读文档)

2.editor.md也依赖jquery,注意引入的顺序

3.登陆页面

3.1前后端交互接口

请求:

POST /login

Content-type:aaplication/x-www-form-urlencoded

使用form表单提交 使用ajax也可以

响应:

HTTP/1.1 302

Location:blog_list.html

3.2编写后端代码

注意:

1.不要对用户名和密码分别提示,容易造成不安全

2.创建会话,参数设为true.

不存在会话就创建,存在就查询 ;  并且会生成键值对 (sesesionid : httpsession对象 ), 并且会把session通过set-cookie返回到浏览器

3.3编写前端代码

注意:

1.构造sql语句的时候 , 先用preparestatement创建statement . 再设置占位符的值

否则会出现空指针异常

4.实现强制登陆

使得网站登陆后才能使用, 此处咱们要求我们的博客系统,必须登陆才能使用 ;

如果用户在未登陆情况下,访问博客列表页/详情页/编辑页,都会自动跳转到登录页

4.1约定前后端交互接口

在博客列表页/详情页/编辑页,再发起一个get的ajax请求,询问服务器时候登陆

4.2编写前后端代码


5.实现显示用户信息

在列表页,显示当前登陆用户的个人信息 ; 在详情页,显示这个文章的作者信息

实现方法:

在博客列表页和详情页分别发起ajax请求

列表页,就需要获取到当前登陆用户的信息 ; 详情页,就需要获取到文章作者的信息.

5.1约定前后端交互接口

列表页

请求:

GET /user

响应:

HTTP/1.1 200 ok

{userId:1,username:'zhangsan'}

详情页

请求:

GET /user?blogId=1

响应:

HTTP/1.1 200 OK

{userId:1,username:'zhangsan'}

注意:

对于登陆功能来说,依赖了session机制,tomcat是在内存中存储session的.

当重启了tomcat服务器之后,之前的session就没了,下一次访问就需要重新登陆

但是有些smart tomcat会把session放到硬盘中持久化存储 , 重启服务器也不需要重新登陆 ;

6.退出登陆(注销)

判定登陆状态逻辑中

1.会话存在

2.会话中存储的user对象存在

两个条件同时满足,才认为用户是已经登陆了

破坏上述任何一个条件都可以实现注销

但是servlet中,并没有提供一个api来直接删除会话,但是有api可以删除会话中的user

(Attribute)

6.1约定前后端交互接口

请求:

GET /logout 

响应:

HTTP/1.1 302

Location :login.html

6.2后端

6.3前端

点击页面的注销,实质上是一个a标签,通过a标签的href属性,指定要访问的请求路径即可 .

点击a标签,自然就能触发http get请求了

7.发布博客

本质上和登陆差不多, 核心都是通过form表单,把页面中用户输入的内容提高到服务器,服务器就会内容保存到数据库中.

7.1约定前后端交互接口

使用form提交数据到服务器

请求:

POST /blog

Conten-type:application/x-www-form-urlencoded (form表单格式)

body内容:

title=***&content=***** 

响应:

HTTP/1.1 302

Location:blog_list.html

提交成功跳转到博客列表页,来到页表页之后,就能够看到刚才新发布的博客了 .

7.2后端

7.3前端

把form表单补齐

注意:

md编辑器怎么添加name属性呢?

在此处写一个隐藏的textarea,就可以实现form表单提交的效果,就可以指定name的值.


部署请看这篇 【博客系统】 二-CSDN博客 ~~~ 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/193585.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java 进阶篇】JQuery 案例:下拉列表选中条目左右移动,打破选择的边界

在前端的舞台上&#xff0c;下拉列表是常见的用户交互元素&#xff0c;但有时候我们想要更多的交互体验。通过巧妙运用 JQuery&#xff0c;我们可以实现下拉列表中选中条目的左右移动功能&#xff0c;为用户提供更加灵活的选择方式。本篇博客将深入研究 JQuery 中实现这一功能的…

基于安卓android微信小程序的师生答疑交流平app

项目介绍 本课题研究的是基于HBuilder X系统平台的师生答疑交流APP&#xff0c;开发这款师生答疑交流APP主要是为了帮助用户可以不用约束时间与地点进行所需信息。本文详细讲述了师生答疑交流APP的界面设计及使用&#xff0c;主要包括界面的实现、控件的使用、界面的布局和异常…

C语言从入门到精通之【基本运算符】

赋值运算符 在C语言中&#xff0c;并不意味着“相等”&#xff0c;而是一个赋值运算符。下面的赋值表达式语句&#xff1a; bmw 2002; 把值2002赋给变量bmw。也就是说&#xff0c;号左侧是一个变量名&#xff0c;右侧是赋给该变量的值。符号被称为赋值运算符。另外&#xff0…

【数电】IEEE754浮点数

IEEE754浮点数 1.组成及分类2.计算(1)符号位(2)阶码(3)尾码(4)实际计算公式 1.组成及分类 &#xff08;1&#xff09;组成 IEEE754浮点数由三部分组成&#xff1a;符号位、阶码和尾码。 &#xff08;2&#xff09;分类 根据数据位宽分为三类&#xff1a;短浮点数、长浮点数和…

54. 螺旋矩阵

给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;[1,2,3,6,9,8,7,4,5]示例 2&#xff1a; 输入&#xff1a;matrix [[1,2,3,…

【Android】配置Gradle打包apk的环境

目录 生成jks签名文件 配置build.gradle&#xff08;app&#xff09; 打包 生成jks签名文件 Java 密钥库&#xff08;.jks 或 .keystore&#xff09;是用作证书和私钥存储库的二进制文件。用于为用户设备上安装的 APK 签名的密钥。 详细解释请看官方文档&#xff1a; 为应用…

Zookeeper Java SDK 开发入门

文章目录 一、概述二、导入依赖包三、与 Zookeeper 建立连接四、判断 ZooKeeper 节点是否存在四、创建 ZooKeeper 节点数据五、获取 ZooKeeper 节点数据六、修改 ZooKeeper 节点数据七、异步获取 ZooKeeper 节点数据八、完整示例 如果您还没有安装Zookeeper请看ZooKeeper 安装说…

如何调整图片尺寸:简单实用的教程分享

报名事业编考试的时候&#xff0c;会发现上传照片时会提示图片大小尺寸应该为多少&#xff0c;如果不符合规定就无法提交报名&#xff0c;那么怎么才能修改图片大小呢&#xff1f;最简单的方法就是利用调整照片大小工具来对图片尺寸修改&#xff0c;本文分享一个在线图片处理工…

【软考篇】中级软件设计师 第四部分(一)

中级软件设计师 第四部分&#xff08;一&#xff09; 二十九. 程序设计语言概述29.1 解释、编译29.3 编译程序29.4 后缀式29.5 文法定义29.6 正规式29.7 有限自动机29.8 语法分析方法 三十. 法律法规30.1 作品所属权30.2 商标有效期30.3 职务作品所属权30.4 单位与委托30.5 商标…

【开源】基于Vue.js的校园二手交易系统的设计和实现

目录 一、摘要1.1 项目介绍1.2 项目详细录屏 二、功能模块2.1 数据中心模块2.2 二手商品档案管理模块2.3 商品预约管理模块2.4 商品预定管理模块2.5 商品留言板管理模块2.6 商品资讯管理模块 三、实体类设计3.1 用户表3.2 二手商品表3.3 商品预约表3.4 商品预定表3.5 留言表3.6…

SharePoint-连接Excel

Power Automate和Power Apps想要连接Excel表格的话&#xff0c;可以在OneDrive或SharePoint网站的文档中创建Excel文件&#xff0c;然后把Excel转换成table表格 以SharePoint为例&#xff0c;在文档中点击新建&#xff0c;选择Excel工作簿 填写内容&#xff0c;然后全选选中 在…

CRM系统对科技企业有哪些帮助

随着国家政策的倾斜和5G等相关基础技术的发展&#xff0c;中国人工智能产业在各方的共同推动下进入爆发式增长阶段&#xff0c;市场发展潜力巨大。CRM客户管理系统作为当下最热门的企业应用&#xff0c;同样市场前景广阔。那么&#xff0c;CRM系统对科技企业有哪些帮助&#xf…

2023年 华为杯数学建模 E题

本科大三的时候&#xff0c;打过一次美赛&#xff0c;当时租了一个民宿&#xff0c;和队友一起度过了专注的四天。当时比赛结束之后&#xff0c;拿着手机&#xff0c;看到四天没回的消息&#xff0c;四天没刷过的朋友圈&#xff0c;有种很新奇的感觉&#xff0c;谢谢美赛给了我…

MySQL数据库清理Relay_Log_File日志

背景 “Relay_Log_File” 是 MySQL 中用于复制的参数之一。在 MySQL 复制中&#xff0c;当一个服务器作为主服务器&#xff08;master&#xff09;时&#xff0c;它会将其更改写入二进制日志文件&#xff08;binary log file&#xff09;。而另一个服务器作为从服务器&#xf…

买台灯看什么参数?考公必备护眼台灯推荐

说到台灯相信大家都不陌生&#xff0c;不管是平时间休闲看书、办公&#xff0c;还是孩子学习阅读时都会用的上。不过台灯还是不能随便乱买的&#xff0c;因为如果买的台灯品质不合格&#xff0c;光源质量太差&#xff0c;使用久了还会对眼睛带来不好的影响。 所以我们在挑选台灯…

flutter下拉列表

下拉列表 内容和下拉列表的标题均可滑动 Expanded&#xff1a; 内容限制组件&#xff0c;将其子类中的无限扩展的界面限制在一定范围中。在此使用&#xff0c;是为了防止下拉列表中的内容超过了屏幕限制。 SingleChildScrollView&#xff1a; 这个组件&#xff0c;从名字中可…

idea查看UML类图

idea查看UML类图 一、如何查看UML类图 1.1 选择需要查看的类或者包&#xff0c;鼠标右键&#xff0c;选择Diagrams->Show Diagram 1.2 对于UML类图中的包&#xff0c;选中后点击鼠标右键-> Expand Nodes(展开节点) 展开前 展开后 1.3 展开后分布比较凌乱&#xff…

北大腾讯打造多模态15边形战士!语言作“纽带”,拳打脚踢各模态,超越Imagebind

AI4Happiness 投稿 量子位 | 公众号 QbitAI 北大联合腾讯打造了一个多模态15边形战士&#xff01; 以语言为中心&#xff0c;“拳打脚踢”视频、音频、深度、红外理解等各模态。 具体来说&#xff0c;研究人员提出了一个叫做LanguageBind的多模态预训练框架。 用语言作为与其…

手写LASSO回归python实现

import numpy as np from matplotlib.font_manager import FontProperties from sklearn.datasets import make_regression from sklearn.model_selection import train_test_split import matplotlib.pyplot as pltclass Lasso():def __init__(self):pass# 数据准备def prepar…

Hoppscotch:开源 API 开发工具,快捷实用 | 开源日报 No.77

hoppscotch/hoppscotch Stars: 56.1k License: MIT Hoppscotch 是一个开源的 API 开发生态系统&#xff0c;主要功能包括发送请求和获取实时响应。该项目具有以下核心优势&#xff1a; 轻量级&#xff1a;采用简约的 UI 设计。快速&#xff1a;实时发送请求并获得响应。支持多…