[JavaScript知识库]【Java从零到架构师第二季】【10】JavaScript_jQuery_Bootstrap

持续学习&持续更新中…

学习态度：守破离

整合该项目的添加客户和更新客户数据业务

为什么要整合这两个业务

该项目的edit.jsp和save.html中的内容结构大体相似，只有几处略微不同的地方。

CustomerServlet代码中这两处业务也有很多相似之处。

实现

CustomerServlet

只留一个save方法，统一处理添加客户和更新客户数据操作。

@WebServlet("/customer/*")
public class CustomerServlet extends HttpServlet {

    private CustomerDao customerDao;

    @Override
    public void init() {
        customerDao = new CustomerDao();
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        request.setCharacterEncoding("utf-8");

        final String[] split = request.getRequestURI().split("/");
        final String methodName = split[split.length - 1];
        try {
            Method method = CustomerServlet.class.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
            method.invoke(this, request, response);
        } catch (Exception e) {
            try {
                Method method = CustomerServlet.class.getMethod("error", String.class, HttpServletRequest.class, HttpServletResponse.class);
                method.invoke(this, "不存在该页面", request, response);
            } catch (Exception exception) {
                exception.printStackTrace();
            }
            e.printStackTrace();
        }
    }

    public void list(HttpServletRequest request, HttpServletResponse response) {
        try {
            final List<Customer> list = customerDao.list();
            request.setAttribute("customerSize", list.size());
            request.setAttribute("customers", list);
            request.getRequestDispatcher("../pages/list.jsp").forward(request, response);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public void save(HttpServletRequest request, HttpServletResponse response) {
        try {
            Customer customer = newCustomer(request);
            if (null != customer) {
                if (customer.getId() != null) {
                    // update
                    if (customerDao.update(customer)) {
                        response.sendRedirect("/eight_javascript/customer/list");
                    } else {
                        error("数据更新失败", request, response);
                    }
                } else {
                    // save
                    if (customerDao.save(customer)) {
                        response.sendRedirect("/eight_javascript/customer/list");
                    } else {
                        error("客户添加失败", request, response);
                    }
                }
            } else {
                error("用户非法输入", request, response);
            }
        } catch (Exception e) {
            error("数据保存失败", request, response);
            e.printStackTrace();
        }
    }

    public void edit(HttpServletRequest request, HttpServletResponse response) {
        try {
            String customerId = request.getParameter("id");
            if (customerId != null && !"".equals(customerId)) {
                final Integer id = Integer.valueOf(customerId);
                final Customer customer = customerDao.edit(id);

                try {
                    request.setAttribute("customer", customer);
                    request.getRequestDispatcher("../pages/save.jsp").forward(request, response);
                } catch (Exception e) {
                    e.printStackTrace();
                    error("数据编辑失败", request, response);
                }
            }
        } catch (Exception e) {
            error("数据编辑失败", request, response);
            e.printStackTrace();
        }
    }

    public void remove(HttpServletRequest request, HttpServletResponse response) {
        try {
            String customerId = request.getParameter("id");
            if (customerId != null && !"".equals(customerId)) {
                final Integer id = Integer.valueOf(customerId);
                if (customerDao.remove(id)) {
                    response.sendRedirect("/eight_javascript/customer/list");
                } else {
                    error("数据删除失败", request, response);
                }
            }
        } catch (Exception e) {
            error("数据删除失败", request, response);
            e.printStackTrace();
        }
    }

    private void error(String error, HttpServletRequest request, HttpServletResponse response) {
        try {
            request.setAttribute("error", error);
            request.getRequestDispatcher("../pages/error.jsp").forward(request, response);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    private Customer newCustomer(HttpServletRequest request) {
        String customerName = request.getParameter("customer_name");
        String customerAge = request.getParameter("customer_age");
        String customerHeight = request.getParameter("customer_height");
        String customerId = request.getParameter("customer_id");
        if (
                customerName != null && customerAge != null && customerHeight != null &&
                        !"".equals(customerName) && !"".equals(customerAge) && !"".equals(customerHeight)
        ) {
            Customer customer = new Customer(
                    customerName, Integer.valueOf(customerAge), Double.valueOf(customerHeight)
            );
            if (customerId != null && !customerId.equals("")) {
                customer.setId(Integer.valueOf(customerId));
            }
            return customer;
        }
        return null;
    }

}

list.jsp

修改a标签让其直接跳转到save.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>list</title>
    <style>
        table, tr, th, td {
            border: 1px solid black;
            width: 500px;
            text-align: center;
        }
    </style>
</head>
<body>
<h1 style="color: green">总共有${customerSize}个客户</h1>
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>身高</th>
    </tr>

    <c:forEach items="${customers}" var="customer">
        <tr>
            <td>${customer.name}</td>
            <td>${customer.age}</td>
            <td>${customer.height}</td>
            <td><a href="/eight_javascript/customer/edit?id=${customer.id}">编辑</a></td>
            <td><a href="/eight_javascript/customer/remove?id=${customer.id}">删除</a></td>
        </tr>
    </c:forEach>

</table>

<br>
<a href="/eight_javascript/pages/save.jsp">添加客户</a>

</body>
</html>

save.jsp

使用JSTL和EL表达式来重构该页面，使得无论是更新客户数据还是添加客户，都使用该页面。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>
        <c:choose>
            <c:when test="${empty customer}">
                add-customer
            </c:when>
            <c:otherwise>
                edit-customer
            </c:otherwise>
        </c:choose>
    </title>
</head>
<body>
<form action="/eight_javascript/customer/save" method="post">
    <c:if test="${not empty customer}">
        <div><input type="hidden" name="customer_id" value="${customer.id}"></div>
    </c:if>
    <div>姓名：<input type="text" name="customer_name" value="${customer.name}"></div>
    <div>年龄：<input type="number" name="customer_age" value="${customer.age}"></div>
    <div>身高：<input type="text" name="customer_height" value="${customer.height}"></div>
    <div>
        <button type="submit">
            <c:if test="${empty customer}">
                添加
            </c:if>
            <c:if test="${not empty customer}">
                更新
            </c:if>
        </button>
    </div>
</form>
</body>
</html>

修改之后的项目结构图

JavaScript

为什么需要JavaScript

• CustomerServlet中，有很多判断用户输入的代码（表单验证），这些操作不应该在服务器进行。

• 应该在前端页面（浏览器/客户端）来判断用户是否有非法输入等问题（专业术语：客户端的表单验证），不应该提交到服务器让服务器先去进行表单验证然后再去执行业务代码。

• 如果客户端的表单验证通过，才应该发请求给服务器。

• 这时就需要使用JavaScript在前端进行表单验证了。

什么是JavaScript

JS常见用途

JS参考资料

https://zh.javascript.info/
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

JS编码规范

• 不写分号;

• 字符串使用单引号''

• 使用let定义变量 const定义常量

JS——基本知识

Script标签

JS基础语法

typeof运算符

JS——数据类型

• function、数组、null是object类型

        console.log(typeof 5) // number
        console.log(typeof '') // string
        console.log(typeof 2n) // bigint
        console.log(typeof undefined) // undefined
        console.log(typeof null) // object
        console.log(typeof {}) // object
        console.log(typeof []) // object
        console.log(typeof function(){}) // function 是 object ；typeof这块不对 ；JS规定中没有function类型

• 判断某个变量是否是function类型

        // 判断某个变量是否是function
        let v = function() {}
        if((typeof v) == 'function') {
            console.log('v是function')
        }else {
            console.log('v不是function')
        }

数字类型

数字类型：https://zh.javascript.info/number

字符串

https://zh.javascript.info/string

没有字符类型

在 JavaScript 中，文本数据被以字符串形式存储，单个字符没有单独的类型。

三种引号

• "" （双引号）

let double = "double-quoted"

• ''（单引号）

let single = 'single-quoted'

• ``（反引号）

let backticks = `backticks`

三种引号的区别：

        let vs = 'liupeng'
        let vi = 100
        console.log("my name is ${vs}, my age is ${vi}") // my name is ${vs}, my age is ${vi}
        console.log('my name is ${vs}, my age is ${vi}') // my name is ${vs}, my age is ${vi}
        console.log(`my name is ${vs}, my age is ${vi}`) // my name is liupeng, my age is 100

拼接

遍历

JS中没有字符类型，所以遍历出的结果 c a t 都是一个个的字符串子串。

数组的遍历

数组：https://zh.javascript.info/array
数组方法：https://zh.javascript.info/array-methods

对象的遍历

JS——函数

函数的常见用法

监听标签的点击事件

onclick的属性值是JS代码

JS——DOM操作

https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model

jQuery

https://jquery.com
https://api.jquery.com
https://www.jquery123.com/

参考

李明杰: Java从0到架构师②JavaEE技术基石.

本文完，感谢您的关注支持！