当前位置： 首页 > news >正文

html+css+JavaScript+json+servlet的社区系统（手把手教学）

news 文章来源：https://blog.csdn.net/qq_62958114/article/details/128982500 2025/5/25 10:24:04

目录

课前导读：

一、系统前期准备

二、前端代码的编写

三、登陆页面简介

四、注册页面

五、社区列表页

六、社区详情页

七、社区发帖页

八、注销

九、访问链接

登陆页面http://175.178.20.77:8080/java106_blog_system/login.html

总结：

课前导读：

你学完一篇，你就多会一项技能，多多少少对你还是有点帮助的不是吗？~~~

本章主要通过前端html搭建基础框架，css进行页面的渲染和布局，通过from表单和JavaScript和后端发送请求得到响应，后端通过servlet对得到的请求进行处理和写回响应给前端，通过json格式字符串化对象进行网络的传输，实现前后端交互的社区系统通信。

一、系统前期准备

1、创建maven项目

 2、导入项目所需要的pom依赖

    <dependencies>
<!--        servlet依赖--><!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api --><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.1.0</version><scope>provided</scope></dependency><!--        jackson依赖--><!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind --><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.14.2</version></dependency><!--        jdbc连接依赖--><!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.49</version></dependency></dependencies>
<!--    打包依赖--><packaging>war</packaging><build><finalName>java106_blog_system</finalName></build>

 3、数据库表的创建 

4、文章对象和用户对象的创建（与数据库创建的字段列表一一相对）

5、通过jdbc进行Java与数据库的连接（用静态方法封装便于后续调用）

package model;import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;public class DBUtil {private static DataSource dataSource=new MysqlDataSource();static {((MysqlDataSource)dataSource).setURL("jdbc:mysql://127.0.0.1:3306/java106_blog_system?characterEncoding=utf8&useSSL=false");((MysqlDataSource)dataSource).setUser("root");((MysqlDataSource)dataSource).setPassword("123456");}public static Connection getconnection() throws SQLException {return dataSource.getConnection();}public static void close(Connection connection, PreparedStatement statement, ResultSet resultSet){if(resultSet!=null){try {resultSet.close();} catch (SQLException throwables) {throwables.printStackTrace();}}if(statement!=null){try {statement.close();} catch (SQLException throwables) {throwables.printStackTrace();}}if(connection!=null){try {connection.close();} catch (SQLException throwables) {throwables.printStackTrace();}}}
}

6、针对各种功能创建对应的Java与数据库的操作

文章对象中：

  • 新增一篇文章
  • 根据文章id来进行指定文章的查询（在文章详情页中）
  • 查询数据库中的所有文章内容（文章列表页中）
  • 删除指定文章（通过文章id）

用户对象中：

  • 根据用户id来查询用户信息（登陆页面）
  • 根据用户名来查询用户信息（登陆页面）
  • 添加用户信息（注册页面）

二、前端代码的编写

1、根据html、css、JavaScript不同代码编写进行分包分类

 2、针对登陆页面进行举例

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登陆页面</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/login.css">
</head>
<body><!-- 贯穿整个页面的容器 --><div class="login-container"><!-- 垂直水平居中的对话框 --><div class="login-dialog"><form action="login" method="post"><h1>X社区系统登录</h1><div class="row"><span>用户名</span><input type="text" id="username" placeholder="手机号/邮箱" name="username"></div><div class="row"><span>密码</span><input type="password" id="password" name="password"></div><div class="row"><a href="regist.html">没有密码？点击注册</a></div><div class="row"><input type="submit" id="submit" value="登录"></div></form></div></div>
</body>
</html>

css

/* 这个文件专门放登陆页面的样式 */.login-container{width: 100%;/* 用整个高度-导航栏高度 */height: calc(100% - 50px);/* 让对话框垂直水平居中，使用弹性布局 */display: flex;justify-content: center;align-items: center;
}.login-dialog{width: 400px;height: 400px;background-color: rgba(255,255,255,0.8);border-radius: 10px;
}.login-dialog h1{text-align: center;padding: 50px 0;
}.login-dialog .row{height: 50px;display: flex;justify-content: center;align-items: center;font-size: 20px;
}.login-dialog .row span{width: 100px;
}#username, #password{width: 200px;height: 40px;border-radius: 5px;border: none;font-size: 15px;padding: 5px;
}#submit{width: 300px;height: 40px;color: white;background-color: orange;border: none;border-radius: 10px;
}#submit:active{background-color: #666;
}
  • 通过div标签进行整个页面的选择，再通过css类选择器和id选择器针对html中的内容进行渲染
  • 通过弹性布局进行登陆页面的整体布局
  • 通过form表单进行输入框内容的写入和提交，实现前后端交互

                由于前端代码过多，所以博主这里只能用登陆页面进行举例。

三、登陆页面简介

本页面主要用于用户进行登陆X社区进行操作的登陆页面。

基本步骤：

1、用户通过在此页面输入用户名和密码，点击登陆后，此页面就会把输入框中的内容通过http请求向后端名为login的servlet发送post请求，通过键值对的形式传输输入框中的内容传输到后端进行处理。 

2、后端通过HttpServlet中的方法创建dopost方法接受前端发送的请求

  • 通过设置请求格式防止中文乱码导致后续判断失误
  • 通过getParameter方法解析通过键找到值的方式解析键值对，将值转为String类型的字符串进行存储。
  • 通过对用户名和密码是否为空的判定，如果为空则把登陆失败的响应通过resp方法写回前端页面对用户进行提醒。

  • 将用户名和密码通过userDao中的方法通过username查找user对象，将用户名和密码与数据库中的数据进行比对。
  • 如果数据不匹配就返回提示到页面
  • 如果数据匹配我们就通过session对象创建会话信息，通过用户名来保存用户的登陆信息
  • 最后登陆成功后我们直接将页面重定向到文章列表页进行展示。

四、注册页面

本页面主要是用于新用户进行X社区系统的注册（前端代码与登录页进本一致）

 基本步骤：

1、用户通过在此页面输入用户名和密码，点击注册后，此页面就会把输入框中的内容通过http请求向后端名为regist的servlet发送post请求，通过键值对的形式传输输入框中的内容传输到后端进行处理。 

 2、后端通过HttpServlet中的方法创建dopost方法接受前端发送的请求

  • 先设置请求格式，防止中文乱码
  • 通过getParameter方法解析前端传输的键值对，用字符串接收
  •  对接收的用户名和密码是否为空进行判定，出现了空字符就讲相应提示返回给前端页面进行显示

  •  针对密码长度进行校验，如果不是5-12的长度则会进行相应的前端提示
  • 如果用户名和密码输入正确，我们就会通过user对象进行存储，用userdao的add方法将对象内容写入到数据库中，最后跳转到登陆页面进行用户登陆。

  •  数据库中的用户注册信息的添加

五、社区列表页

本页面主要是用于展示各个用户发表的文章的一个概况，我们选择的是截取文章的前一百个字截取到本页面上来显示，而且左边边框内还包含登陆人的一个基本信息，右上角有三个指定栏可以进行相应页面的跳转

基本步骤：

  • 首先我们进来这个页面一进来会先发送一个checklogin的登陆验证请求，通过ajax发送get请求的方式向后端login获取session登陆状态，然后通过返回的用户响应进行判断，如果是未登陆状态则直接跳转到登陆页面进行登陆（防止直接从url访问文章列表页）。
  • 后端获取到前端发送的get请求，通过session对象去获取当前页面的user对象，然后通过user对象与session对象中进行比对，如果user对象不为空则证明用户已经登陆，直接将user对象转成字符串写回给前端
  • 如果发现user对象为空，我们就将空字符串写回给前端，前端就会通过判断，知道此时为未登陆状态，就会强制跳转到登陆页面进行登陆。
  • 确认用户已经登陆了，前端就会把后端发送会的user对象中的username写回到头像下方，进行不同用户的识别
  • 然后前端再次通过get请求访问后端的blog的servlet，请求获取数据库中的相关信息。
  • 最后后端的servlet通过数据库的jdbc操作，获取存储在数据库中的内容，通过json格式的字符串返回到前端，然后前端对这组数据信息js操作构造div对象，重新写回到前端页面上，这样我们就完成了社区列表页的编写

六、社区详情页

点击社区列表页中的查看全文我们就可以跳转到对应文章的详情页中了。 

基本步骤：

  • 首先还是和上面一样的登陆验证，然后没有登陆的用户信息则直接返回登陆页面
  • 前端通过get请求访问后端的blog的servlet来获取响应的数据，比如标题、时间、正文等，然后通过js方法创建div对象写回到前端页面上
  • 这里注意需要通过markdown的语法进行格式的转换，否则会有特殊符号的残存。
  • 通过blogId进行数据库的搜索，找到了对应的博客id就将其中的内容写到博客对象中去，然后通过json字符串的格式写回到前端页面进行解析操作。

七、社区发帖页

点击右上角写文章即可进入文章编辑页，进行新的文章的撰写。

基本步骤：

  • 首先还是和上面一样的登陆验证，如果没有登陆信息则直接返回到登陆页面
  • 前端通过引入外接的开源markdown格式进行页面文章的填写，通过几个js的连接的引用和一些前端页面的基本布局就可以把markdown格式的方法映入到本页面中了。
  • 前端这里主要通过form表单的格式发送post请求给后端的blog的servlet发送数据。
  • 后端通过getParameter解析前端post请求发送的数据，然后将其解析为字符串，通过创建blog对象将字符串内容写入到对象中，然后将这个对象通过add方法写回到数据库中，这样就把用户写入的文章发送到数据库中进行存储了起来。
  • 如果数据提交的符合格式且正确写入到数据库中了，就会立即跳转到社区详情页进行展示。
  •  

八、注销

点击右上角的注销按钮即可注销登陆信息返回登陆页面

基本步骤：

  • 前端主要是一个超链接的形式发送请求后端的logout，点击即可直接跳转到登录页。
  • 后端主要是将session登陆信息进行删除会话，然后重定向到登录页面。

九、访问链接

登陆页面icon-default.png?t=N2N8http://175.178.20.77:8080/java106_blog_system/login.html

总结：

本篇文章主要从前后端交互的方式讲解了前端如何发送请求，通过form表单和ajax如何发送请求，后端如何通过servlet接受请求并写回响应，梳理出了具体步骤，可能对编码的角度没有那么详细，所以有写的不好的地方烦请指正。

所有成功的开始还得基于牢靠的基础，努力学习，坚持编码，编程伴随每一天！

相关文章：

html+css+JavaScript+json+servlet的社区系统（手把手教学）

目录 课前导读&#xff1a; 一、系统前期准备 二、前端代码的编写 三、登陆页面简介 四、注册页面 五、社区列表页 六、社区详情页 七、社区发帖页 八、注销 九、访问链接 登陆页面http://175.178.20.77:8080/java106_blog_system/login.html 总结&#xff1a; 课前…...

编程日记 2023/4/16 10:21:02

UI Toolkit（1）

UI ToolkitUI Toolkit界面画布设置背景制作UI布局UI Toolkit界面 在Unity 2021LTS版本之后UI Toolkit也被内置在Unity中&#xff0c;Unity有意的想让UI Toolkit 成为UI的主要搭建方式&#xff0c;当然与UGUI相比还是有一定的差别。他们各有有点&#xff0c;这次我们就开始介绍…...

编程日记 2023/4/16 10:16:01

vLive带你走进虚拟直播世界

虚拟直播是什么&#xff1f; 虚拟直播是基于5G实时渲染技术&#xff0c;在绿幕环境下拍摄画面&#xff0c;通过实时抠像、渲染与合成&#xff0c;再推流到直播平台的一种直播技术。尽管这种技术早已被影视工业所采用&#xff0c;但在全民化进程中却是困难重重&#xff0c;面临…...

编程日记 2023/4/16 10:11:00

初谈 ChatGPT

引子 最近&#xff0c;小编发现互联网中的大 V 突然都在用 ChatGPT 做宣传&#xff1a;“ChatGPT不会淘汰你&#xff0c;能驾驭ChatGPT的人会淘汰你”、“带领一小部分人先驾驭ChatGPT”。 确实&#xff0c;ChatGPT这个新生事物&#xff0c;如今被视为蒸汽机、电脑、iPhone 般的…...

编程日记 2023/4/16 10:05:58

JAVA练习103-螺旋矩阵

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 4月9日练习内容 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、题目-螺…...

编程日记 2023/4/16 10:00:56

RecvByteBufAllocator内存分配计算

虽然了解了整个内存池管理的细节&#xff0c;包括它的内存分配的具体逻辑&#xff0c;但是每次从NioSocketChannel中读取数据时&#xff0c;应该分配多少内存去读呢&#xff1f; 例如&#xff0c;客户端发送的数据为1KB , 应该分配多少内存去读呢&#xff1f; 例如&#xff1a;…...

编程日记 2023/4/16 9:55:55

图数据结构与算法

什么是图数据的结构 图是由顶点和边组成的非线性数据结构。顶点有时也称为节点，边是连接图中任意两个节点的线或弧。更正式地说，图由一组顶点 ( V ) 和一组边 ( E ) 组成。该图由 G(E, V) 表示。 图的组成部分 顶点：顶点是图的基本单位。有时，顶点也称为顶点或节点。每个节…...

编程日记 2023/4/16 9:50:53

科普:c语言与C++的区别

C语言和C语言是两种广泛使用的编程语言&#xff0c;尽管它们非常相似&#xff0c;但它们在某些方面也存在不同之处。本文将详细介绍C语言和C语言的区别。 1. 编程范式 C语言是一种过程式编程语言&#xff0c;它的设计目标是为了编写操作系统和其他系统级编程。C语言是一种面向…...

编程日记 2023/4/16 9:45:52

流量整形（GTS和LR）

Generic Traffic Shaping通用流量整形 通用流量整形（简称GTS）可以对不规则或不符合预定流量特性的流量进行整形，以保证网络上下游之间的带宽匹配，避免拥塞发生。 GTS与CAR一样，都采用了令牌桶技术来控制流量。GTS与CAR的主要区别在于：利用CAR进行报文流量控制时，…...

编程日记 2023/4/16 9:40:50

Java接口详细讲解

目录 Java接口概念 Java接口主要有以下特点 Java接口的具体作用 定义接口 实现接口 接口继承 默认方法 静态方法 Java接口概念 Java编程语言中是一个抽象类型，是抽象方法的集合，接口通常以interface来声明。一个类通过继承接口的方式，从而来继承接口的抽象方法。 …...

编程日记 2023/4/16 9:35:49

元宇宙地产暴跌，林俊杰亏麻了

文/章鱼哥出品/陀螺财经随着元宇宙的兴起&#xff0c;元宇宙地产曾一度被寄予厚望&#xff0c;成为各大投资者追捧的对象。然而&#xff0c;最近的一次元宇宙地产价值暴跌再次提醒我们&#xff0c;高收益背后可能伴随着高风险。根据元宇宙分析平台WeMeta的数据显示&#xff0c;…...

编程日记 2023/4/16 9:30:48

什么是瀑布流布局？瀑布流式布局的优缺点

瀑布流又称瀑布流式布局&#xff0c;是一种多列等宽不等高的一种页面布局方式。 视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动&#xff0c;这种布局会不断加载数据并附加至当前的尾部。 是一种多列等宽不等高的一种页面布局方式&#xff0c;用于图片比较复杂&#…...

编程日记 2023/4/16 9:25:46

给您的 MongoDB 定期做个体检：MongoDB 诊断

新钛云服已累计为您分享739篇技术干货接下来的一些列文章会为大家介绍日常工作中常用的 NoSQL 产品 MongoDB。主要涉及到&#xff1a;MongoDB 的安装及基本使用 MongoDB 文档查询 MongoDB 复制集 MongoDB 分片集群的介绍及搭建 MongoDB 安全加密 MongoDB 诊断我们会用…...

编程日记 2023/4/16 9:20:45

【云原生进阶之容器】第五章容器运行时5.8--容器热迁移

《云原生进阶之容器》专题索引： 第一章Docker核心技术1.1节——Docker综述第一章Docker核心技术1.2节——Linux容器LXC第一章Docker核心技术1.3节——命名空间Namespace第一章Docker核心技术1.4节——chroot技术第一章Docker核心技术1.5.1节——cgroup综述...

编程日记 2023/5/31 21:20:11

react框架的简单认识

React框架 众所周知&#xff0c;React与Vue&#xff0c;Angular被前端开发人员称为前端的三大框架。在如今&#xff0c;React和Vue相对于老牌的Angular&#xff0c;它们的表现更为出色&#xff0c;常常被各大公司使用。但其中React的技术难度要稍稍大于Vue&#xff0c;不过为了…...

编程日记 2023/4/16 9:10:43

IDEA的基本使用

IDEA的基本使用IDEA的基本使用1 IDEA概述2 IDEA的下载和安装2.1 下载2.2 安装3 IDEA中层级结构介绍3.1 结构分类3.2 结构介绍project&#xff08;项目、工程&#xff09;module&#xff08;模块&#xff09;package&#xff08;包&#xff09;class&#xff08;类&#xff09;3…...

编程日记 2023/4/16 9:05:42

【MySQL】实验八 触发器与存储过程

文章目录 1. 创建商品价格修改记录表2. 创建触发器，当更改商品价格(price列)时，记录价格3. SQL触发器：插入新员工时，同步更新部门表相应人数4. SQL触发器：删除学生数据5. SQL触发器：创建成绩表插入触发器6. SQL存储过程：查询订单7. SQL存储过程：建立存储过程，查询课程…...

编程日记 2023/6/1 13:00:54

Mockito5.2.0学习

Mockito是mocking框架&#xff0c;它让你用简洁的API做测试。而且Mockito简单易学&#xff0c;它可读性强和验证语法简洁。 Mockito 是一个针对 Java 的单元测试模拟框架&#xff0c;它与 EasyMock 和 jMock 很相似&#xff0c;都是为了简化单元测试过程中测试上下文 ( 或者称之…...

编程日记 2023/4/16 8:55:39

用指针实现内存动态分配

导引&#xff1a;已知&#xff1a;变量在使用前必须被定义且安排好存储空间。且变量有这么一些分类&#xff1a;全局变量、静态局部变量【它们的储存一般是在编译时确定&#xff0c;在程序开始执行前完成。】自动变量【在执行进入变量定义所在的复合语句时为它们分配存储&#…...

编程日记 2023/4/16 8:50:37

DBSCAN聚类算法及Python实现

DBSCAN聚类算法 DBSCAN&#xff08;Density-Based Spatial Clustering of Applications with Noise&#xff09;是一种基于密度的聚类算法&#xff0c;可以将数据点分成不同的簇&#xff0c;并且能够识别噪声点&#xff08;不属于任何簇的点&#xff09;。 DBSCAN聚类算法的基…...

编程日记 2023/4/16 8:45:36

风光及负荷多场景随机生成与缩减

目录 1 主要内容 计算模型 场景生成与聚类方法应用 2 部分程序 3 程序结果 4 程序链接 1 主要内容 该程序方法复现了《融合多场景分析的交直流混合微电网多时间尺度随机优化调度策略》3.1节基于多场景技术的随机性建模部分&#xff0c;该部分是随机优化调度的重要组成部分…...

编程日记 2023/5/29 21:59:03

lamda表达式

lamda表达式一. lamda表达式的特性二.常用匿名函数式接口2.1 Supplier接口2.2 Consumer接口2.3 Predicate接口2.4 Function接口2.5 BiFunction接口三.stream流传递先后顺序四.表达式4.1 ForEach4.2 Collect4.3 Filter4.4 Map4.5 MapToInt4.6 Distinct4.7 Sorted4.8 groupingBy4…...

编程日记 2023/4/16 8:35:34

MobTech 秒验|极速验证，拉新无忧

一、运营拓展新用户的难题 运营拓展新用户是每个应用都需要面对的问题&#xff0c;但是在实际操作中&#xff0c;往往会遇到一些困难。其中一个主要的难题就是注册和登录的繁琐性。用户在使用一个新的应用时&#xff0c;通常需要填写手机号、获取验证码、输入验证码等步骤&…...

编程日记 2023/4/16 8:30:33

大模型混战，阿里百度华为谁将成就AI时代的“新地基”？

从算力基础到用户生态&#xff0c;群雄逐鹿大模型 自2022年stable diffusion模型的进步推动AIGC的快速发展后&#xff0c;年底&#xff0c;ChatGPT以“破圈者”的姿态&#xff0c;快速“吸粉”亿万&#xff0c;在全球范围内掀起了一股AI浪潮&#xff0c;也促使了众多海外巨头竞…...

编程日记 2023/4/16 8:25:31

干翻Hadoop系列之：Hadoop前瞻之分布式知识

前言 一&#xff1a;海量数据价值 二&#xff1a;海量数据两个棘手问题 1&#xff1a;海量数据如何存储&#xff1f; 掌握分布式存储数据的思想。 A&#xff1a;方案1&#xff1a;单机存储磁盘不够加磁盘 限制问题&#xff1a; 1&#xff1a;一台计算机不能无限制拓充 2&a…...

编程日记 2023/5/31 3:37:04

MAE论文阅读《Masked Autoencoders Are Scalable Vision Learners》

文章目录动机方法写作方面参考Paper: https://arxiv.org/pdf/2111.06377.pdf 动机 首先简要介绍下BERT&#xff0c;NLP领域的BERT是基于Transformer架构&#xff0c;并采取无监督预训练的方式去训练模型。它提出的预训练方法在本质上是一种masked autoencoding&#xff0c;也就…...

编程日记 2023/4/16 8:15:29

代码随想录算法训练营第三十四天-贪心算法3｜ 1005.K次取反后最大化的数组和 134. 加油站 135. 分发糖果

1005. Maximize Sum Of Array After K Negations 参考视频&#xff1a;贪心算法&#xff0c;这不就是常识&#xff1f;还能叫贪心&#xff1f;LeetCode&#xff1a;1005.K次取反后最大化的数组和_哔哩哔哩_bilibili 贪心&#x1f50d; 的思路&#xff0c;局部最优&#xff…...

编程日记 2023/4/16 8:10:28

比较系统的学习 pandas （2）

pandas 数据读取与输出方法和常用参数 1、读取 CSV文件 pd.read_csv("pathname",step,encoding"gbk",header"infer"&#xff0c;name[],skip_blank_linesTrue,commentNone) path : 文件路径 step : 指定分隔符&#xff0c;默认为 逗号 enco…...

编程日记 2023/4/16 8:05:27

怎么查看电脑主板最大支持多少内存？

很多电脑&#xff0c;内存不够用&#xff0c;但应速度慢&#xff1b;还有一些就是买了很大的内存条&#xff0c;但是还是反应慢&#xff1b;这是为什么呢&#xff1f;我今天明白了&#xff0c;原来每个电脑都有自己的适配内存&#xff0c;就是每个电脑能支持多大的内存&#xf…...

编程日记 2023/4/16 8:00:27

数据结构——线段树

线段树的结构 线段树是一棵二叉树&#xff0c;其结点是一条“线段”——[a,b]&#xff0c;它的左儿子和右儿子分别是这条线段的左半段和右半段&#xff0c;即[a, (ab)/2 ]和[(ab)/2 ,b]。线段树的叶子结点是长度为1的单位线段[a,a1]。下图就是一棵根为[1,10]的线段树&#xff1…...

编程日记 2023/4/16 7:55:25