【Java从零到架构师第二季】【10】JavaScript

持续学习&持续更新中…

学习态度：守破离

Javascript_jQuery_Bootstrap

- 整合该项目的添加客户和更新客户数据业务
- - - 为什么要整合这两个业务
    - 实现
    - - CustomerServlet
        list.jsp
        save.jsp
    - 修改之后的项目结构图
- Javascript
- - - 为什么需要Javascript
    - 什么是Javascript
    - JS常见用途
    - JS参考资料
    - JS编码规范
- JS——基本知识
- - - script标签
    - JS基础语法
    - typeof运算符
- JS——数据类型
- - - 数字类型
    - 字符串
    - - 没有字符类型
        三种引号
        拼接
        遍历
    - 数组的遍历
    - 对象的遍历
- JS——函数
- - - 函数的常见用法
    - 监听标签的点击事件
- JS——DOM操作
- jQuery
- - - 什么是jQuery
    - jQuery如何使用
    - jQuery的强大之处
    - 绑定点击事件
    - jQuery的一些细节
- 基于jQuery的几个插件
- - - jQuery-UI的一个demo
    - jQuery Validation的一个demo
- Bootstrap
- - - 栅格系统例子：
    - Bootstrap js的引入
- 参考

整合该项目的添加客户和更新客户数据业务为什么要整合这两个业务

该项目的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 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" %>


    list
    


总共有${customerSize}个客户

        
    
        姓名
        年龄
        身高
    

    
            ${customer.name}
            ${customer.age}
            ${customer.height}
            编辑
            删除
        
    





添加客户

姓名	年龄	身高
${customer.name}	${customer.age}	${customer.height}	编辑	删除

save.jsp

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

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


    
    
        <c:choose>
            <c:when test="${empty customer}">
                add-customer
            </c:when>
            <c:otherwise>
                edit-customer
            </c:otherwise>
        </c:choose>
    



    
        
    
    姓名：
    年龄：
    身高：

修改之后的项目结构图

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/

什么是jQuery

jQuery如何使用

jQuery的强大之处

利用jQuery找到的节点，是jQuery包装后的节点，并非JS原生的节点。
原因是DOM操作，在有些时候，不同浏览器有不同的规范。
在使用某个jQuery的API时，jQuery内部会帮助我们在不同的浏览器上执行不同的代码，以此达到我们想要的效果，jQuery内部帮助我们处理了这些适配代码，统一了所有的操作。
浏览器兼容方面，jQuery也做得非常出色。

        $(function(){
            // $("ul>li:nth-child(2)").remove()
            // document.querySelector("ul>li:nth-child(2)").remove()

            console.log($("ul>li:nth-child(2)") == document.querySelector("ul>li:nth-child(2)"))
        })

绑定点击事件

        $(function () {
            $("ul>li").click(function () {
                console.log(this)
            })
        })

jQuery的一些细节

使用append方法，jQuery会将传入的字符串转成一个dom对象添加至调用节点上。

$("ul>li").append('百度')

基于jQuery的几个插件

网上有很多基于jQuery的框架，这儿只举几个例子。

jQuery UI

https://jqueryui.com/
https://www.jqueryui.org.cn/

jQuery Validation（表单验证）

https://jqueryvalidation.org

jQuery-UI的一个demo




    
    jQuery-UI
    
    
    
    


    
        I am draggable.

jQuery Validation的一个demo





    
    jQuery-Validation
    
    
    
    



    
        用户名
        密码

但是直接这样，提示信息是英文，需要再引入一个script：

引入messages_zh.js文件后，提示信息就会是中文。

可以自己更改messages_zh.js中的提示信息：

{
	required: "这是必填字段",
	remote: "请修正此字段",
	email: "请输入有效的电子邮件地址",
	url: "请输入有效的网址",
	date: "请输入有效的日期",
	dateISO: "请输入有效的日期 (YYYY-MM-DD)",
	number: "请输入有效的数字",
	digits: "只能输入数字",
	creditcard: "请输入有效的信用卡号码",
	equalTo: "你的输入不相同",
	extension: "请输入有效的后缀",
	maxlength: $.validator.format( "最多可以输入 {0} 个字符" ),
	minlength: $.validator.format( "最少要输入 {0} 个字符" ),
	rangelength: $.validator.format( "请输入长度在 {0} 到 {1} 之间的字符串" ),
	range: $.validator.format( "请输入范围在 {0} 到 {1} 之间的数值" ),
	step: $.validator.format( "请输入 {0} 的整数倍值" ),
	max: $.validator.format( "请输入不大于 {0} 的数值" ),
	min: $.validator.format( "请输入不小于 {0} 的数值" )
}

Bootstrap

https://www.bootcss.com/
https://getbootstrap.com

栅格系统例子：

Bootstrap js的引入

Bootstrap依赖jQuery、Popper这两个js文件

引入方式一：首先需要引入jQuery，其次是 Popper（如果你使用工具提示和弹出框的话），最后是bootstrap的js文件。
引入方式二：首先引入jQuery，然后引入Bootstrap Javascript bundle.（bundle中整合了Popper）

参考

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

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

【Java从零到架构师第二季】【10】JavaScript

总共有${customerSize}个客户

Java相关栏目本月热门文章