该博客系统基于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博客 ~~~
