【Javaweb】基础开发流程与介绍

本文档写于2022年7月29日，由于个人水平有限，可能存在一些问题，因此仅供参考 @萌狼蓝天

JavaWeb基础开发流程

1.确定系统和功能

在此以“宠物管理系统”为例，要开发一个简单的宠物管理系统，功能如下：

(1)管理员需要通过登陆进入系统

(2)支持宠物信息的增加、查询、修改、删除

2.设计数据库

根据功能，分析应该存在两个数据表：一个用户信息表(此处的用户，指的是系统的使用者，也就是管理员)、一个宠物信息表

3.在IDEA中创建项目，导入所需Jar包

可以手动导入Jar包，如果使用了Maven管理工具的可以编辑pom.xml

我使用的Maven，需要添加

<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.28</version>
</dependency>

4.使用IDEA自带数据库工具的自带扩展脚本自动生成对象代码

https://www.bilibili.com/video/BV1od4y1m7vh

5.编辑配置文件，连接数据库

(1)在resource下创建jdbc.properties，内容如下

driverClass=com.mysql.cj.jdbc.Driver
jdbcUrl=jdbc:mysql://域名:3306/数据库名?zeroDateTimeBehavior=convertToNull
user=用户名
password=密码

zeroDateTimeBehavior=convertToNull是为了处理Date数据无效时产生的错误，写了这个之后，无效Date数据会自动转为Null

(2)创建JDBC工具类，用于连接数据库

package cc.mllt.jdbc;


import java.sql.*;
import java.util.ResourceBundle;

public class JDBCUtils {
    //私有化构造函数
    //防止外界直接创建对象
    private JDBCUtils(){}
    //提供静态方法getConnection
    //用来对外提供数据库连接对象

    /**
     *Connection 用来对外提供数据库连接对象
     * @return
     */
    public static Connection getConnection(){
        try{
            //0.读取文件属性
            ResourceBundle conf = ResourceBundle.getBundle("jdbc");
            //1.注册驱动
            Class.forName(conf.getString("driverClass"));
            //2.获取数据库连接
            String url = conf.getString("jdbcUrl");
            String user = conf.getString("user");
            String password = conf.getString("password");
            Connection conn = DriverManager.getConnection(url,user,password);
            return conn;
        }catch (Exception e){
            e.printStackTrace();
        }
        return null;
    }
    //提供静态方法close，用来释放资源

    /**
     *close 用来释放资源
     * @param rs
     * @param st
     * @param conn
     */
    public static void close(ResultSet rs, Statement st,Connection conn){
        //关闭结果资源集
        if(rs!=null){
            //防止空指针异常
            try{
                rs.close();
            }catch (SQLException e){
                e.printStackTrace();
            }finally {
                rs=null;//手动置空，等待GC回收
            }
        }
        //关闭传输器资源
        if(st!=null){
            //防止空指针异常
            try {
                st.close();
            }catch (SQLException e){
                e.printStackTrace();
            }finally {
                st = null;//手动置空，等待GC回收
            }
        }
        //关闭数据库连接资源
        if(conn!=null){
            //防止空指针异常
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }finally {
                conn=null;//手动置空，等待GC回收
            }
        }
    }

}

6.编写功能模块

在此以查询为例，编写查询数据的代码

/**
 * 获取所有宠物信息
 * @return List<Pet> 成功返回以宠物对象构成的列表，失败返回null
 */
public static List<Pet> getPetInfo(){
    Connection connection = null;
    PreparedStatement ps = null;
    ResultSet rs =null;
    List<Pet> list = new ArrayList<Pet>() {
    };
    try {
        connection = JDBCUtils.getConnection();
        String sql = "select * from pet";
        ps = connection.prepareStatement(sql);
        rs = ps.executeQuery();
        while (rs.next()){
            Pet pet = new Pet();
            pet.setCode(rs.getString(1));
            //1对应的是数据表中第一列的数据
            pet.setType(rs.getString(2));
            //1对应的是数据表中第二列的数据
            pet.setName(rs.getString(3));
            pet.setKind(rs.getString(4));
            pet.setGender(rs.getLong(5));
            pet.setCharacter(rs.getString(6));
            pet.setHealth(rs.getString(7));
            pet.setBirth(rs.getDate(8));
            pet.setPic(rs.getString(9));
            pet.setState(rs.getLong(10));
            list.add(pet);
        }
    } catch (SQLException e) {
        System.out.println(e);
        return null;
    }
    return list;
}

7.编写前端页面

可以先使用HTML写好模板，再迁移入JSP

8.前端获取后端数据并显示

<%@ page import="cc.mllt.Util.PetUtil" %>
<%@ page import="java.util.List" %>
<%@ page import="cc.mllt.dao.Pet" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
  <title>宠物管理系统</title>
  <!-- 新 Bootstrap5 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

  <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <style>
    img{
      width:200px;
      height: auto;
      margin: 0 auto;
    }
    .control{
      margin:5px;
    }
  </style>
</head>
<body>
<%
  List<Pet> pets = PetUtil.getPetInfo();
  System.out.println(pets);
%>
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  <h2>宠物管理系统</h2>
</nav>
<div class="control">
<button type="button" class="btn btn-success">刷新</button>
<button type="button" class="btn btn-success">新增</button>
</div>
<table class="table table-striped table-bordered table-hover">
  <thead>

    <th>编号</th>
    <th>类别</th>
    <th>品种</th>
    <th>姓名</th>
    <th>性别</th>
    <th>性格</th>
    <th>健康状况</th>
    <th>生日</th>
    <th>领养状态</th>
    <th>照片</th>
    <th>操作</th>
  </thead>
<%
  for (Pet pet : pets) {
%>
  <tr>

    <td><%=pet.getCode()%>
    </td>
    <td><%=pet.getType()%>
    </td>
    <td><%=pet.getKind()%>
    </td>
    <td><%=pet.getName()%>
    </td>
    <td>
      <%
        String gender="";
        if(pet.getGender()==0){
          gender="雌";
        }
        if(pet.getGender()==1){
          gender="雄";
        }
        if(pet.getGender()==2){
          gender="雌雄共同";
        }
        if(pet.getGender()==3){
          gender="雌雄不分";
        }
      %>
      <%=gender%>
    </td>
    <td><%=pet.getCharacter()%>
    </td>
    <td><%=pet.getHealth()%>
    </td>
    <td><%=pet.getBirth()%>
    </td>
    <td>
      <%
        String state="";
        if(pet.getState()==0){
        state="未被领养";
      }
        if(pet.getState()==1){
          state="已被领养";
        }

      %>
      <%=state%>
    </td>
    <td><img src=<%=pet.getPic()%> >
    </td>
    <td>
      <button type="button" class="btn btn-success">编辑</button>
      <button type="button" class="btn btn-warning">删除</button>
    </td>
  </tr>
  <%
    }
  %>
</table>
</body>
</html>

9.美化前端

可以使用Bootstrap或者自己编写样式美化前端。

10.优化后端代码(逻辑算法等)