项目整体结构
SilverCat项目整体结构
dao
DAO是Data Access Object的缩写,是一种设计模式,用于将应用程序的业务逻辑和数据库操作分离
entity
Entity包通常用于存储实体类(Entity Class)和它们的相关操作
service
service包可以包含各种服务类,用于处理数据逻辑、调用外部服务、执行业务规则等
utlil
utlil包是使用与连接数据库所使用
web
主要作用是进行网络通信以及处理网络请求和响应。它提供了一系列类和方法可以用于创建客户端和服务器端的网络应用程序,发送和接收数据,处理URL和HTTP请求等。通过web包,我们可以实现各种网络操作,例如创建HTTP服务器、发送HTTP请求、处理WebSocket连接等。其主要类包括http包、url包和websocket包等。通过这些类和方法,我们可以方便地构建和管理网络应用程序。
命名规范
- 命名规范是编程中非常重要的一部分,它影响了代码的可读性、可维护性和可扩展性。虽然不同的编程语言和编程范式可能有不同的命名规范,但是一般来说,以下几个方面是需要考虑的:
- 可读性: 变量名、函数名和其他标识符应该具有清晰的含义,能够准确反映其所代表的内容或功能。使用有意义的单词或单词组合,避免使用缩写或简写,除非是广为认可的缩写。
- 一致性: 在整个项目或团队中保持一致的命名规范是非常重要的,这样可以减少混淆和提高代码的可维护性。在一个项目中最好遵循一种命名风格,如驼峰命名法或下划线命名法。
- 命名风格:
- 驼峰命名法(Camel Case):第一个单词小写,后续单词首字母大写,如:
myVariableName。
- 帕斯卡命名法(Pascal Case):所有单词的首字母都大写,如:
MyClassName。
- 下划线命名法(Snake Case):单词之间用下划线分隔,所有字母通常小写,如:
my_variable_name。
- 匈牙利命名法(Hungarian Notation):在变量名前加上表示数据类型或其他相关信息的前缀,例如
strName表示字符串类型的变量。
- 避免保留字和关键字: 不要使用编程语言中的保留字或关键字作为标识符,因为这会导致语法错误或意外行为。
- 长度: 变量名和函数名不应该过长,也不应该过短。过长的命名会增加阅读和书写的难度,过短的命名可能会导致歧义。通常来说,应该足够长以清晰表达其含义,但又不至于过于冗长。
- 避免魔法数字和硬编码: 避免在代码中直接使用未解释的数字或固定的字符串,应该使用常量或者定义一个易于理解的名称来代替。
- 注释: 在某些情况下,可以通过注释来解释标识符的含义,特别是当名称本身无法充分表达意图时。
查询操作
流程
请求过来—》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
附录
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 {
private static final String URL= "jdbc:mysql://localhost:3306/java196"; public static final String USERNAME = "root"; public static final String PASSWORD = "root"; static { try { Class.forName("com.mysql.cj.jdbc.Driver"); } catch (ClassNotFoundException e) { throw new RuntimeException(e); } }
public static Connection getConnection() throws Exception { 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 { private int id; private String f1;
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<>();
Connection connection = ConnectionUtils.getConnection();
String sql = "select id,f1 from t1";
PreparedStatement pstmt = connection.prepareStatement(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 { protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { T1Service service = new T1Service(); try { List<T1entity> list = service.getAll(); req.setAttribute("list", list); req.getRequestDispatcher("/WEB-INF/t1/list.jsp").forward(req, resp); } catch (Exception e) { 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 { String id = req.getParameter("id"); int idVal = Integer.parseInt(id); T1Service t1Service = new T1Service(); try { t1Service.delete(idVal); resp.sendRedirect("/Projact_war/list"); } catch (Exception e) { throw new RuntimeException(e); } } }
|
再创建一个业务类(当然里面暂时先不做业务)
/** * 根据给定的 id 删除对应的数据项。 * * @param idVal 待删除数据项的标识符 * @throws Exception 如果删除操作失败,抛出异常 */ public void delete(int idVal) throws Exception { // 调用 dam 对象的 deleteById 方法执行删除操作 dam.deleteById(idVal); }
|
写删除SQL语句(T1Daolmpl)
public void deleteById(int idVal) throws Exception { String sql = "delete from test1 where id=?"; try ( Connection conn = ConnectionUtlil.getConnection(); PreparedStatement stmt = conn.prepareStatement(sql) ) { stmt.setInt(1, idVal); 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 { String t1 = req.getParameter("xxx");
T1Service t1Service = new T1Service(); try { t1Service.getAdd(t1); resp.sendRedirect("/Projact_war/list"); } catch (SQLException e) { throw new RuntimeException(e); } } }
|
然后继续添加业务类(当然里面暂时先不做业务)
public void getAdd(String t1) throws SQLException { dam.getAdd(t1); }
|
写添加的SQL语句(T1Daolmpl)
public void getAdd(String t1) throws SQLException {
String sql="Insert into test1(f1) values(?)";
try(Connection conn =ConnectionUtlil.getConnection();
PreparedStatement stmt = conn.prepareStatement(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 { int id = Integer.parseInt(req.getParameter("id"));
T1Service t1Service = new T1Service(); T1entity t1Entity = null;
try { t1Entity = t1Service.getById(id); req.setAttribute("t1", t1Entity); req.getRequestDispatcher("/WEB-INF/t1/edit.jsp").forward(req, resp); } catch (SQLException e) { throw new RuntimeException(e); } catch (Exception e) { throw new RuntimeException(e); } } }
|
然后在业务类里创建getById方法从(当然还是不做如何业务)
这个方法主要用id从数据库查询到那一行的所有数据
public T1entity getById(int id) throws Exception { return dam.getById(id); }
|
业务类到dao包(T1Daolmpl)
来写查询id的所有数据的sql语句
public T1entity getById(int id) throws SQLException { T1entity t1 = new T1entity(); String sql = "select id, f1 from test1 where id=?"; Connection conn = ConnectionUtlil.getConnection(); PreparedStatement pstmt = conn.prepareStatement(sql); pstmt.setInt(1, id); ResultSet rs = pstmt.executeQuery(); while (rs.next()) { t1.setId(rs.getInt(1)); t1.setF1(rs.getString(2)); } rs.close(); pstmt.close(); conn.close(); return t1; }
|
然后把所得到的数据传到(T1EditServlet)中
t1Entity = t1Service.getById(id); req.setAttribute("t1", t1Entity); 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 { int id = Integer.parseInt(req.getParameter("id")); String f1 = req.getParameter("f1");
T1entity t1entity = new T1entity(); t1entity.setId(id); t1entity.setF1(f1);
T1Service t1ServicE = new T1Service();
try { 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); }
|
业务到dao包中,做sql的修改操作
String sql = "update test1 set f1=? where id=?";
try ( Connection connection = ConnectionUtlil.getConnection(); PreparedStatement stmt = connection.prepareStatement(sql); ) { stmt.setString(1, t1entity.getF1()); stmt.setInt(2, t1entity.getId()); stmt.executeUpdate(); } catch (SQLException e) { 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){ 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是只读对象,子组件只能读取道具中的数据,不能直接进行修改,父组件的数据只能由父组件修改