项目整体结构

项目整体结构

dao

DAO是Data Access Object的缩写,是一种设计模式,用于将应用程序的业务逻辑和数据库操作分离

entity

Entity包通常用于存储实体类(Entity Class)和它们的相关操作

service

service包可以包含各种服务类,用于处理数据逻辑、调用外部服务、执行业务规则等

utlil

utlil包是使用与连接数据库所使用

web

主要作用是进行网络通信以及处理网络请求和响应。它提供了一系列类和方法可以用于创建客户端和服务器端的网络应用程序,发送和接收数据,处理URL和HTTP请求等。通过web包,我们可以实现各种网络操作,例如创建HTTP服务器、发送HTTP请求、处理WebSocket连接等。其主要类包括http包、url包和websocket包等。通过这些类和方法,我们可以方便地构建和管理网络应用程序。

命名规范

  • 命名规范是编程中非常重要的一部分,它影响了代码的可读性、可维护性和可扩展性。虽然不同的编程语言和编程范式可能有不同的命名规范,但是一般来说,以下几个方面是需要考虑的:
    1. 可读性: 变量名、函数名和其他标识符应该具有清晰的含义,能够准确反映其所代表的内容或功能。使用有意义的单词或单词组合,避免使用缩写或简写,除非是广为认可的缩写。
    2. 一致性: 在整个项目或团队中保持一致的命名规范是非常重要的,这样可以减少混淆和提高代码的可维护性。在一个项目中最好遵循一种命名风格,如驼峰命名法或下划线命名法。
    3. 命名风格:
      • 驼峰命名法(Camel Case):第一个单词小写,后续单词首字母大写,如:myVariableName
      • 帕斯卡命名法(Pascal Case):所有单词的首字母都大写,如:MyClassName
      • 下划线命名法(Snake Case):单词之间用下划线分隔,所有字母通常小写,如:my_variable_name
      • 匈牙利命名法(Hungarian Notation):在变量名前加上表示数据类型或其他相关信息的前缀,例如strName表示字符串类型的变量。
    4. 避免保留字和关键字: 不要使用编程语言中的保留字或关键字作为标识符,因为这会导致语法错误或意外行为。
    5. 长度: 变量名和函数名不应该过长,也不应该过短。过长的命名会增加阅读和书写的难度,过短的命名可能会导致歧义。通常来说,应该足够长以清晰表达其含义,但又不至于过于冗长。
    6. 避免魔法数字和硬编码: 避免在代码中直接使用未解释的数字或固定的字符串,应该使用常量或者定义一个易于理解的名称来代替。
    7. 注释: 在某些情况下,可以通过注释来解释标识符的含义,特别是当名称本身无法充分表达意图时。

查询操作

流程

请求过来—》servlet—》(Service)业务类去处理—》dao去查询—》List<实体类>—》serAttribute()—》jsp

  • XxxListServlet
  • XxxServiceImpl
  • XxxDaoImpl
  • XxxEntity

删除操作

请求过来—》servlet—》业务类去处理—》dao去查询—》List<实体类>—》serAttribute()—》jsp

  • XxxListServlet
  • XxxServiceImpl
  • XxxDaoImpl
  • XxxEntity2

修改操作

请求过来—》servlet—》业务类去处理—》dao去查询—》List<实体类>—》serAttribute()—》jsp

  • XxxListServlet
  • XxxServiceImpl
  • XxxDaoImpl
  • XxxEntity

查询操作

请求过来—》servlet—》业务类去处理—》dao去查询—》List<实体类>—》serAttribute()—》jsp

  • XxxListServlet
  • XxxServiceImpl
  • XxxDaoImpl
  • XxxEntity

添加操作

请求过来—》servlet—》业务类去处理—》dao去查询—》List<实体类>—》serAttribute()—》jsp

  • XxxListServlet
  • XxxServiceImpl
  • XxxDaoImpl
  • XxxEntity

附录

  • 表名:Xxx

  • 实体类:Xxx 或者 XxxEntity

  • dao:XxxDaoImpl

  • service:XxxServiceImpl

  • Web:XxxList Servlet(查询)

  • —XxxAddServlet(显示增加页面

  • XxxInsertServlet

  • –XxxDeleteServlet

  • XxxEditServlet(显示修改页面)

  • XxxUpdateServlet(修改保存)

  • entity dap servoce web,util

Mysql数据库连接

先进行Maven的导入驱动

可在Maven Repository: Search/Browse/Explore (mvnrepository.com)中找到Mysql的驱动,用使用次数最多的。

<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<version>8.0.33</version>
</dependency>

在Utlil中创建一个连接数据库

名字根据项目的名字加上Utlil,我是比较喜欢直接叫(ConnectionUtlil),

/**
* 数据库连接工具类。
*/
public class ConnectionUtils {

// 数据库 URL
private static final String URL= "jdbc:mysql://localhost:3306/java196";

// 数据库用户名
public static final String USERNAME = "root";

// 数据库密码
public static final String PASSWORD = "root";

// 静态块加载 MySQL JDBC 驱动程序
static {
try {
Class.forName("com.mysql.cj.jdbc.Driver");
} catch (ClassNotFoundException e) {
// 如果找不到 MySQL JDBC 驱动程序,则抛出运行时异常
throw new RuntimeException(e);
}
}

/**
* 获取数据库连接的方法。
*
* @return 表示数据库连接的 Connection 对象。
* @throws Exception 如果建立数据库连接时出现错误。
*/
public static Connection getConnection() throws Exception {
// 使用 DriverManager 建立连接
Connection connection = DriverManager.getConnection(URL, USERNAME, PASSWORD);
return connection;
}
}


数据库的增,删,改,查

根据客户需求查询

创建list.jsp文件

注意!在webapp文件夹下的WEB-INF中创建文件夹(t1随便起的名字)

创建list.jsp文件,这个文件和我们平常所写的html有相同之处,但它里面是可以写js的代码的

jsp的<%%>意思

在代码中的 <%%> 通常用于表示代码块,特别是在使用类似于JSP(JavaServer Pages)或ASP.NET这样的服务器端模板引擎时。在这些模板引擎中,<%%> 通常用于包裹服务器端的代码,例如Java代码或C#代码,以便在生成的HTML或其他文档中插入动态内容。在JSP中,<%%> 标记中的代码会被转换成Servlet代码,然后由服务器执行。

<html>
<head>
<title>Title</title>
</head>
<body>

<table style="border:1px solid red">
<tr>
<td>id</td>
<td>f1</td>
</tr>
<%-- 使用JSP标签内的Java代码来动态生成表格行 --%>
<%-- 从请求属性中获取名为 "list" 的对象,这里假设它是一个类型为 T1Entity 的列表 --%>
<%
List<T1Entity> list = (List<T1Entity>) request.getAttribute("list");
<%-- 遍历列表,为每个对象生成表格行 --%>
for (T1Entity t1 : list) {
%>
<tr>
<%-- 输出对象的id属性 --%>
<td><%= t1.getId()%>
</td>
<%-- 输出对象的f1属性 --%>
<td><%= t1.getF1()%>
</td>
</tr>
<%-- 循环结束 --%>
<%
}
%>
</table>
</body>
</html>

创建实体类(T1Entity<entity是实体的意思>)

public class T1entity {
//只需要写入数据有多少个类型就行了
//我这只写了两个所以说我只要写入id和f1
private int id;
private String f1;

//以下都是IDEA自动生成
public T1entity(int id) {
this.id = id;
}

public T1entity(String f1) {
this.f1 = f1;
}

public T1entity() {

}

public int getId() {
return id;
}

public String getF1() {
return f1;
}

public void setId(int id) {
this.id = id;
}

public void setF1(String f1) {
this.f1 = f1;
}

@Override
public String toString() {
return "T1entity{" +
"id=" + id +
", f1='" + f1 + '\'' +
'}';
}
}

查询sql语句(T1Daolmpl)

List<T1Entity> list = new ArrayList<>();
// 创建一个空列表用于存储T1Entity对象

// 通过ConnectionUtils类获取数据库连接
Connection connection = ConnectionUtils.getConnection();

// 构建SQL查询语句
String sql = "select id,f1 from t1";

// 创建PreparedStatement对象
PreparedStatement pstmt = connection.prepareStatement(sql);

// 执行SQL查询,获取结果集
ResultSet rs = pstmt.executeQuery();

// 遍历结果集,将数据添加到列表中
while (rs.next()){
T1Entity t1 = new T1Entity();
t1.setId(rs.getInt(1));
t1.setF1(rs.getString(2));
list.add(t1);
}

// 关闭数据库连接
connection.close();

// 返回结果列表
return list;

查询的业务类(Service

“业务”在软件开发中通常指的是一组与特定功能或目标相关的操作、处理或逻辑。这些操作可能涉及数据处理、交易、计算、规则应用等。在软件开发中,”业务”通常指代应用程序的核心功能或逻辑,与技术实现相对应。

例如这次项目的案例(因为没有业务所以说直接返回我们所需要的东西)

public List<T1Entity> getAll() throws Exception {
return new T1DaoImpl().getAll();
}

查询的Servlet类(T1ListServlet)

Servlet类用于处理来自客户端的HTTP请求并生成HTTP响应。Servlet通常用于构建Web应用程序的后端逻辑。它们可以执行各种任务,然后将请求转发到位于 “/WEB-INF/t1/list.jsp” 的 JSP 页面进行进一步处理和展示。

例如:

@WebServlet("/list")
public class T1ListServlet extends HttpServlet {
// service方法用于处理HTTP请求
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 创建T1Service对象
T1Service service = new T1Service();
try {
// 调用T1Service的getAll方法获取T1entity对象列表
List<T1entity> list = service.getAll();
// 将获取的对象列表设置为请求属性
req.setAttribute("list", list);
// 转发请求到"/WEB-INF/t1/list.jsp"页面
req.getRequestDispatcher("/WEB-INF/t1/list.jsp").forward(req, resp);
} catch (Exception e) {
// 捕获异常并抛出RuntimeException
throw new RuntimeException(e);
}
}
}

删除操作

显示页面

大概思路就是在list.jsp的页面在显示框后面添加一个删除操作,要先把list.jsp页面中的id给拿到detele的Servrlet中

我们可以这样写

<td>
<!-- 创建一个超链接,链接到指定的删除操作页面 -->
<!-- 在链接中通过参数传递 t1 对象的 id 属性,以便后台处理删除操作 -->
<a href="/Projact_war/detele?id=<%= t1.getId()%>">删除</a>
</td>

创建detele所需要的web(T1ListDetelelmpl)


java
Copy code
@WebServlet("/detele")
public class T1LsitDetelelmpl extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 从请求中获取名为 "id" 的参数,该参数包含待删除对象的标识符
String id = req.getParameter("id");
// 将获取的 id 参数转换为整数类型
int idVal = Integer.parseInt(id);
// 创建 T1Service 的实例
T1Service t1Service = new T1Service();
try {
// 调用 T1Service 的 delete 方法,删除指定 id 对应的对象
t1Service.delete(idVal);
// 将响应重定向到 "/Projact_war/list" 页面,以展示删除后的列表
resp.sendRedirect("/Projact_war/list");
} catch (Exception e) {
// 捕获可能抛出的异常,并将其包装成 RuntimeException 抛出
throw new RuntimeException(e);
}
}
}

再创建一个业务类(当然里面暂时先不做业务)

/**
* 根据给定的 id 删除对应的数据项。
*
* @param idVal 待删除数据项的标识符
* @throws Exception 如果删除操作失败,抛出异常
*/
public void delete(int idVal) throws Exception {
// 调用 dam 对象的 deleteById 方法执行删除操作
dam.deleteById(idVal);
}

写删除SQL语句(T1Daolmpl)

/**
* 根据给定的 id 删除数据库中的数据项。
*
* @param idVal 待删除数据项的标识符
* @throws Exception 如果删除操作失败,抛出异常
*/
public void deleteById(int idVal) throws Exception {
// 构建 SQL 删除语句
String sql = "delete from test1 where id=?";
try (
// 获取数据库连接
Connection conn = ConnectionUtlil.getConnection();
// 创建 PreparedStatement 对象,预编译 SQL 语句
PreparedStatement stmt = conn.prepareStatement(sql)
) {
// 设置 SQL 语句中的参数值
stmt.setInt(1, idVal);
// 执行 SQL 语句,删除数据项
stmt.executeUpdate();
}
}

添加操作

先在显示页面写一个连接,连接到添加页面方便操作(app.jsp)

然后用html写一点格式来进行添加使用,然后将用户输入的内容提交到 “/Projact_war/insert” 页面

html
Copy code
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<!-- 将用户输入的内容提交到 "/insert" 页面 -->
<form action="/Projact_war/insert">
<p>t1</p>
<!-- 用户填写内容的输入框 -->
<input type="text" name="xxx"/>
<!-- 提交按钮,点击后将用户输入的内容提交到指定的页面 -->
<input type="submit" value="添加">
</form>
</body>
</html>

在Servlet中创建添加(T1insertlmpl)

@WebServlet("/insert")
public class T1insertlmpl extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 从请求中获取名为 "xxx" 的参数,即用户输入的内容
String t1 = req.getParameter("xxx");

// 创建 T1Service 的实例
T1Service t1Service = new T1Service();
try {
// 调用服务类的 getAdd 方法,将用户输入的内容添加到相应的数据集中
t1Service.getAdd(t1);
// 将响应重定向到展示类,以便展示更新后的数据
resp.sendRedirect("/Projact_war/list");
} catch (SQLException e) {
// 捕获可能的 SQL 异常并抛出 RuntimeException
throw new RuntimeException(e);
}
}
}

然后继续添加业务类(当然里面暂时先不做业务)

/**
* 将给定的内容添加到数据集中。
*
* @param t1 待添加的内容
* @throws SQLException 如果添加操作失败,抛出 SQLException 异常
*/
public void getAdd(String t1) throws SQLException {
// 将 t1 的内容传递给 dam 类的 getAdd 方法进行处理
dam.getAdd(t1);
}

写添加的SQL语句(T1Daolmpl)

    public void getAdd(String t1) throws SQLException {
// //写添加的sql语句
String sql="Insert into test1(f1) values(?)";
// //连接数据库
try(Connection conn =ConnectionUtlil.getConnection();
// //访问数据库
PreparedStatement stmt = conn.prepareStatement(sql)){
// //将t1放到sql语句中的问号(?)
stmt.setString(1,t1);
// //返回的一个集合
stmt.executeUpdate();
}
}

修改操作

请求过来—》servlet—》业务类去处理—》dao去查询—》List<实体类>—》serAttribute()—》jsp

修改操作我们在jsp展示页面中表格后面再加一个编辑操作

 <!--getId(id的值)传入edit中-->
<td><a href="/Projact_war/edit?id=<%=t1.getId()%>">编辑</a></td>

在web包中创建(T1EditServlet)把id传入

@WebServlet("/edit")
public class T1EditServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 从请求参数中获取ID值,并转换为整数类型
int id = Integer.parseInt(req.getParameter("id"));

// 创建T1Service对象
T1Service t1Service = new T1Service();
T1entity t1Entity = null;

try {
// 根据ID从数据库中获取T1entity对象
t1Entity = t1Service.getById(id);
// 将获取的T1entity对象设置为请求属性
req.setAttribute("t1", t1Entity);
// 转发请求到"/WEB-INF/t1/edit.jsp"页面
req.getRequestDispatcher("/WEB-INF/t1/edit.jsp").forward(req, resp);
} catch (SQLException e) {
// 捕获SQLException异常并抛出RuntimeException
throw new RuntimeException(e);
} catch (Exception e) {
// 捕获其他异常并抛出RuntimeException
throw new RuntimeException(e);
}
}
}

然后在业务类里创建getById方法从(当然还是不做如何业务)

这个方法主要用id从数据库查询到那一行的所有数据

/**
* 根据ID从数据库中获取T1entity对象
* @param id 要获取的T1entity对象的ID
* @return 返回获取到的T1entity对象
* @throws Exception 如果获取过程中发生异常,则抛出异常
*/
public T1entity getById(int id) throws Exception {
// 调用数据访问层(DAO)的getById方法,根据ID从数据库中获取T1entity对象并返回
return dam.getById(id);
}

业务类到dao包(T1Daolmpl)

来写查询id的所有数据的sql语句

public T1entity getById(int id) throws SQLException {
// 创建一个新的 T1entity 对象
T1entity t1 = new T1entity();

// 准备 SQL 查询语句,查询指定 ID 和字段 f1 的数据
String sql = "select id, f1 from test1 where id=?";

// 获取数据库连接
Connection conn = ConnectionUtlil.getConnection();

// 创建 PreparedStatement 对象,用于执行带参数的 SQL 语句
PreparedStatement pstmt = conn.prepareStatement(sql);

// 设置查询参数为传入的 ID
pstmt.setInt(1, id);

// 执行查询,获取结果集
ResultSet rs = pstmt.executeQuery();

// 遍历结果集,将查询到的数据设置到 T1entity 对象中
while (rs.next()) {
// 通过结果集获取 ID 并设置到 T1entity 对象中
t1.setId(rs.getInt(1));

// 通过结果集获取字段 f1 的值并设置到 T1entity 对象中
t1.setF1(rs.getString(2));
}

// 关闭结果集、PreparedStatement 和连接
rs.close();
pstmt.close();
conn.close();

// 返回获取到的 T1entity 对象
return t1;
}

然后把所得到的数据传到(T1EditServlet)中

// 根据ID从数据库中获取T1entity对象
t1Entity = t1Service.getById(id);
// 将获取的T1entity对象设置为请求属性
req.setAttribute("t1", t1Entity);
// 转发请求到"/WEB-INF/t1/edit.jsp"页面
req.getRequestDispatcher("/WEB-INF/t1/edit.jsp").forward(req, resp);

创建一个edit.jsp页面来进行修改

<!-- 表单开始,提交到 "/Projact_war/update" 路径 -->
<form action="/Projact_war/update">

<!-- 隐藏域,用于传递 T1entity 对象的 ID 值 -->
<input type="hidden" name="id" value="<%=((T1entity)request.getAttribute("t1")).getId()%>">

<!-- 文本框,用于显示和编辑 T1entity 对象的 f1 属性值 -->
<input type="text" name="f1" value="<%=((T1entity)request.getAttribute("t1")).getF1()%>">

<!-- 提交按钮,用于保存用户对 f1 属性的修改 -->
<input type="submit" value="保存">

</form>

下面就是所展现的页面,在网址中我们可以看到edit?id=8,就是说明我们所按编辑的连接传过来的数据

把所要修改的内容提交到提交到 “/update” 路径

在服务类(web )中创建用来进行修改的服务(T1UpdateServlet)

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/update")
public class T1Updatelmpl extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 从请求参数中获取 ID 和字段 f1 的值
int id = Integer.parseInt(req.getParameter("id"));
String f1 = req.getParameter("f1");

// 创建一个新的 T1entity 对象,并设置 ID 和字段 f1 的值
T1entity t1entity = new T1entity();
t1entity.setId(id);
t1entity.setF1(f1);

// 创建 T1Service 实例用于执行更新操作
T1Service t1ServicE = new T1Service();

try {
// 调用 T1Service 的更新方法,传入 T1entity 对象
t1ServicE.update(t1entity);

// 更新成功后重定向到列表页面
resp.sendRedirect("/Projact_war/list");
} catch (SQLException e) {
// 捕获并抛出运行时异常
throw new RuntimeException(e);
}

}
}

t1entity里已经有我们所需要修改的内容然后传到业务类(当然还是不做如何业务)

public void update(T1entity t1entity) throws SQLException {
// 调用 dam 的 update 方法来更新传入的 T1entity 对象
dam.update(t1entity);
}

业务到dao包中,做sql的修改操作

// 定义 SQL 更新语句,设置字段 f1 为指定值,根据 ID 进行更新
String sql = "update test1 set f1=? where id=?";

try (
// 获取数据库连接
Connection connection = ConnectionUtlil.getConnection();
// 创建 PreparedStatement 对象,用于执行带参数的 SQL 更新语句
PreparedStatement stmt = connection.prepareStatement(sql);
) {
// 设置 SQL 语句中的参数,第一个参数为字段 f1 的值,第二个参数为 ID 的值
stmt.setString(1, t1entity.getF1());
stmt.setInt(2, t1entity.getId());

// 执行更新操作
stmt.executeUpdate();
} catch (SQLException e) {
// 捕获并处理 SQL 异常
e.printStackTrace();
}

时间组件库(dayjs)

地址Day.js中文网 (fenxianglu.cn)

终端安装:npm install dayjs

ctime: dayjs(new Date()).format('MM-DD hh:mm'),

父传子

1父组件传递数据 子组件标签身上绑定属性

2子组件接收数据 props的参数

function Son(props){
//props:对象里包含了父组件传递过来的所有数据
console.log(props)
return <div>this is mo||{props.name}</div>
}
function App() {
const name='this fk'
return (
<div>
<Son name={name}/>
</div>
);
}

props说明

props可传任意的数据

数字,字符串,布尔值,数组,对象,函数,JSX都可以

<Son
name={name}
age={18}
isTrue={false}
list={['vue','react']}
obj={{name:'jack'}}
cb={()=>console.log(123)}
child={<span>this is span</span>}
/>

但props是只读对象,子组件只能读取道具中的数据,不能直接进行修改,父组件的数据只能由父组件修改