书城项目第一阶段

第一节 事件驱动补充

1、取消控件的默认行为

①控件默认行为

• 点超链接会跳转页面
• 点表单提交按钮会提交表单

本来控件的默认行为是天经地义就该如此的，但是如果我们希望点击之后根据我们判断的结果再看是否要跳转，此时默认行为无脑跳转的做法就不符合我们的预期了。

②取消方式

调用事件对象的preventDefault()方法。

[1]超链接举例

HTML代码：

<a id="anchor" href="http://www.baidu.com">超链接</a>

JavaScript代码：

document.getElementById("anchor").onclick = function() {
    console.log("我点击了一个超链接");
    event.preventDefault();
}

[2]表单提交按钮举例

HTML代码：

<form action="http://www.baidu.com" method="post">
    <button id="submitBtn" type="submit">提交表单</button>
</form>

JavaScript代码：

document.getElementById("submitBtn").onclick = function() {
    console.log("我点击了一个表单提交按钮");
    event.preventDefault();
}

2、阻止事件冒泡

图中的两个div，他们的HTML标签是：

<div id="outterDiv">
    <div id="innerDiv"></div>
</div>

点击里面的div同时也等于点击了外层的div，此时如果两个div上都绑定了单击响应函数那么就都会被触发：

document.getElementById("outterDiv").onclick = function() {
    console.log("外层div的事件触发了");
}
document.getElementById("innerDiv").onclick = function() {
    console.log("内层div的事件触发了");
}

所以事件冒泡就是一个事件会不断向父元素传递，直到window对象。
如果这不是我们想要的效果那么可以使用事件对象的stopPropagation()函数阻止。

document.getElementById("innerDiv").onclick = function() {
    console.log("内层div的事件触发了");
    event.stopPropagation();
}

3、Vue事件修饰符

对于事件修饰符，Vue官网的描述是：

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

①取消控件的默认行为

控件的默认行为指的是：

• 点击超链接跳转页面
• 点击表单提交按钮提交表单

实现这个需求使用的Vue事件修饰符是：.prevent

<a href="http://www.baidu.com" @click.prevent="clickAnchor">超链接</a>
<form action="http://www.baidu.com" method="post">
    <button type="submit" @click.prevent="clickSubmitBtn">提交表单</button>
</form>

②取消事件冒泡

实现这个需求使用的Vue事件修饰符是：.stop

<div id="outterDiv" @click="clickOutterDiv">
    <div id="innerDiv" @click.stop="clickInnerDiv"></div>
</div>

第二节 正则表达式

1、从凤姐的择偶标准说起

本人对伴侣要求如下：

• 第一、必须为北京大学或清华大学硕士毕业生。必须本科硕士连读，中途无跳级，不留级，不转校。在外参加工作后再回校读书者免。
• 第二、必须为经济学专业毕业。非经济学专业毕业则必须精通经济学。或对经济学有浓厚的兴趣。
• 第三、必须具备国际视野，但是无长期定居国外甚至移民的打算。
• 第四、身高176—183左右。长得越帅越好。
• 第五、无生育史。过往所有女友均无因自身而致的堕胎史。
• 第六、东部户籍，即江、浙、沪三地户籍或黑龙江、广东、天津、山东、北京、吉林、辽宁等。
• 东北三省和内蒙古等地户籍，西南地区即重庆、贵州、云南、西藏和湖南、湖北等地籍贯者不予考虑。
• 第七、年龄25—28岁左右。即06届，07届，08届，09届毕业生。有一至两年的工作经验，06级毕业生需年龄在28岁左右，09级毕业生则需聪明过人。且具备丰富的社会实践经验。就职于国家机关，国有企事业单位者不愿考虑。但就职于中石油，中石化等世界顶尖型企业或银行者又比较喜欢。现自主创业者要商榷一番了。

  2、标准在手，世界我有

  ①模式验证

  使用标准衡量一位具体的男士，返回一个布尔值，从而知道这位男士是否满足自己的标准——相当于我们使用正则表达式验证一个字符串是否满足规则。比如验证一个字符串是否是一个身份证号。

  ②匹配读取

  对全中国的男士应用这个标准，返回一个数组，遍历这个数组，可以得到所有符合标准的男士——相当于我们使用正则表达式获取一段文本中匹配的子字符串。比如将一篇文章中的电子邮件地址读取出来。

  ③匹配替换

  对全中国的男士应用这个标准，把其中已婚的变成未婚，这样凤姐就有机会了——相当于我们使用正则表达式替换所有匹配的部分。比如将一段文字中的”HelloWorld”替换为”HelloJava”。

  花絮： 记者：封老师您好！由于您的名字『封捷』和『凤姐』谐音，同学们总是以此来调侃您，说您是尚硅谷『凤姐』，对此您有什么想说的吗？ 封老师：太过分了！我咋能和人家比！ 记者：呃……太意外了，您的意思是？ 封老师：虽然过气了，但人家好歹也是网红呀！

3、正则表达式的概念

使用一段字符串定义的一个规则，用以检测某个字符串是否满足这个规则，或将目标字符串中满足规则的部分读取出来，又或者将目标字符串中满足标准的部分替换为其他字符串。所以正则表达式有三个主要用途：

• 模式验证
• 匹配读取
• 匹配替换

4、正则表达式零起步

①创建正则表达式对象

[1]使用两个斜杠

// 类似创建数组时可以使用[]、创建对象可以使用{}
var reg = /a/;

[2]使用new关键字创建RegExp类型的对象

// 类似创建数组可以new Array()、创建对象可以使用new Object()
var reg = new RegExp("a");

②正则表达式的组成

正则表达式本身也是一个字符串，它由两种字符组成：

• 普通字符，例如大、小写英文字母；数字等。
• 元字符：被系统赋予特殊含义的字符。例如：^表示以某个字符串开始，$表示以某个字符串结束。

  ③正则表达式初体验

  [1]模式验证

  注意：这里是使用正则表达式对象来调用方法。 ```javascript // 创建一个最简单的正则表达式对象 var reg = /o/;

// 创建一个字符串对象作为目标字符串 var str = ‘Hello World!’;

// 调用正则表达式对象的test()方法验证目标字符串是否满足我们指定的这个模式，返回结果true console.log(“/o/.test(‘Hello World!’)=”+reg.test(str));

<a name="bOwl9"></a>
##### [2]匹配读取
**注意**：这里是使用**字符串对象**来**调用**方法。
```javascript
// 在目标字符串中查找匹配的字符，返回匹配结果组成的数组
var resultArr = str.match(reg);
// 数组长度为1
console.log("resultArr.length="+resultArr.length);
// 数组内容是o
console.log("resultArr[0]="+resultArr[0]);

[3]替换

注意：这里是使用字符串对象来调用方法。

var newStr = str.replace(reg,'@');
// 只有第一个o被替换了，说明我们这个正则表达式只能匹配第一个满足的字符串
console.log("str.replace(reg)="+newStr);//Hell@ World!
// 原字符串并没有变化，只是返回了一个新字符串
console.log("str="+str);//str=Hello World!

④匹配方式

[1]全文查找

如果不使用g对正则表达式对象进行修饰，则使用正则表达式进行查找时，仅返回第一个匹配；使用g后，返回所有匹配。

// 目标字符串
var targetStr = 'Hello World!';
// 没有使用全局匹配的正则表达式
var reg = /[A-Z]/;
// 获取全部匹配
var resultArr = targetStr.match(reg);
// 数组长度为1
console.log("resultArr.length="+resultArr.length);
// 遍历数组，发现只能得到'H'
for(var i = 0; i < resultArr.length; i++){
    console.log("resultArr["+i+"]="+resultArr[i]);
}

对比代码：

// 目标字符串
var targetStr = 'Hello World!';
// 使用了全局匹配的正则表达式
var reg = /[A-Z]/g;
// 获取全部匹配
var resultArr = targetStr.match(reg);
// 数组长度为2
console.log("resultArr.length="+resultArr.length);
// 遍历数组，发现可以获取到“H”和“W”
for(var i = 0; i < resultArr.length; i++){
    console.log("resultArr["+i+"]="+resultArr[i]);
}

[2]忽略大小写

//目标字符串
var targetStr = 'Hello WORLD!';
//没有使用忽略大小写的正则表达式
var reg = /o/g;
//获取全部匹配
var resultArr = targetStr.match(reg);
//数组长度为1
console.log("resultArr.length="+resultArr.length);
//遍历数组，仅得到'o'
for(var i = 0; i < resultArr.length; i++){
    console.log("resultArr["+i+"]="+resultArr[i]);
}

对比代码：

//目标字符串
var targetStr = 'Hello WORLD!';
//使用了忽略大小写的正则表达式
var reg = /o/gi;
//获取全部匹配
var resultArr = targetStr.match(reg);
//数组长度为2
console.log("resultArr.length="+resultArr.length);
//遍历数组，得到'o'和'O'
for(var i = 0; i < resultArr.length; i++){
    console.log("resultArr["+i+"]="+resultArr[i]);
}

[3]多行查找

不使用多行查找模式，目标字符串中不管有没有换行符都会被当作一行。

//目标字符串1
var targetStr01 = 'Hello\nWorld!';
//目标字符串2
var targetStr02 = 'Hello';
//匹配以'Hello'结尾的正则表达式，没有使用多行匹配
var reg = /Hello$/;
console.log(reg.test(targetStr01));//false
console.log(reg.test(targetStr02));//true

对比代码：

//目标字符串1
var targetStr01 = 'Hello\nWorld!';
//目标字符串2
var targetStr02 = 'Hello';
//匹配以'Hello'结尾的正则表达式，使用了多行匹配
var reg = /Hello$/m;
console.log(reg.test(targetStr01));//true
console.log(reg.test(targetStr02));//true

5、元字符

①概念

在正则表达式中被赋予特殊含义的字符，不能被直接当做普通字符使用。如果要匹配元字符本身，需要对元字符进行转义，转义的方式是在元字符前面加上“\”，例如：^

②常用元字符

[1]例1

var str = 'one two three four';
// 匹配全部空格
var reg = /\s/g;
// 将空格替换为@
var newStr = str.replace(reg,'@'); // one@two@three@four
console.log("newStr="+newStr);

[2]例2

var str = '今年是2014年';
// 匹配至少一个数字
var reg = /\d+/g;
str = str.replace(reg,'abcd');
console.log('str='+str); // 今年是abcd年

[3]例3

var str01 = 'I love Java';
var str02 = 'Java love me';
// 匹配以Java开头
var reg = /^Java/g;
console.log('reg.test(str01)='+reg.test(str01)); // flase
console.log("<br />");
console.log('reg.test(str02)='+reg.test(str02)); // true

[4]例4

var str01 = 'I love Java';
var str02 = 'Java love me';
// 匹配以Java结尾
var reg = /Java$/g;
console.log('reg.test(str01)='+reg.test(str01)); // true
console.log("<br />");
console.log('reg.test(str02)='+reg.test(str02)); // flase

6、字符集合

var str01 = 'Hello World';
var str02 = 'I am Tom';
//匹配abc中的任何一个
var reg = /[abc]/g;
console.log('reg.test(str01)='+reg.test(str01));//flase
console.log('reg.test(str02)='+reg.test(str02));//true

7、重复

console.log("/[a]{3}/.test('aa')="+/[a]{3}/g.test('aa')); // flase
console.log("/[a]{3}/.test('aaa')="+/[a]{3}/g.test('aaa')); // true
console.log("/[a]{3}/.test('aaaa')="+/[a]{3}/g.test('aaaa')); // true

8、在正则表达式中表达『或者』

使用符号：|

// 目标字符串
var str01 = 'Hello World!';
var str02 = 'I love Java';
// 匹配'World'或'Java'
var reg = /World|Java/g;
console.log("str01.match(reg)[0]="+str01.match(reg)[0]);//World
console.log("str02.match(reg)[0]="+str02.match(reg)[0]);//Java

9、常用正则表达式

第三节 第一阶段要实现的功能

0、准备工作

创建目录后，把一整套现成的前端页面复制到新建的目录下，然后用HBuilderX打开这个目录。然后把vue.js文件复制到script目录下。

1、登录页面的表单验证

①规则设定

• 用户名非空

• 密码非空

  ②在login.html页面中加入Vue的环境

    </body>
    <script src="/bookstoreV01/static/script/vue.js" type="text/javascript" charset="utf-8"></script>
  </html>

  

  ③思路

  

  ④代码实现

  [1]HTML代码

  <form id="loginForm" action="login_success.html">
    <label>用户名称：</label>
    <input class="itxt" type="text" v-model:value="username" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" id="username" />
    <br />
    <br />
    <label>用户密码：</label>
    <input class="itxt" type="password" v-model:value="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" id="password" />
    <br />
    <br />
    <button type="submit" id="sub_btn" @click="loginCheck">登录</button>
  </form>

  [2]Vue代码

  new Vue({
    "el":"#loginForm",
    "data":{
        "username":"",
        "password":""
    },
    "methods":{
        "loginCheck":function(){
            // 判断用户名或密码是否为空
            if(this.username == "" || this.password == "") {
                // 如果不满足验证条件，那么阻止表单提交
                event.preventDefault();
            }
        }
    }
  });

  2、注册页面的表单验证

  ①HTML代码

  <form id="registerForm" action="regist_success.html">
    <div class="form-item">
        <div>
            <label>用户名称:</label>
            <input v-model:value="username" type="text" placeholder="请输入用户名" />
            <span></span>
        </div>
        <span>{{usernameCheckMessage}}</span>
    </div>
    <div class="form-item">
        <div>
            <label>用户密码:</label>
            <input v-model:value="password" type="password" placeholder="请输入密码" />
        </div>
        <span class="errMess">密码的长度至少为8位</span>
    </div>
    <div class="form-item">
        <div>
            <label>确认密码:</label>
            <input v-model:value="passwordConfirm" type="password" placeholder="请输入确认密码" />
        </div>
        <span class="errMess">密码两次输入不一致</span>
    </div>
    <div class="form-item">
        <div>
            <label>用户邮箱:</label>
            <input v-model:value="email" type="text" placeholder="请输入邮箱" />
        </div>
        <span class="errMess">请输入正确的邮箱格式</span>
    </div>
    <div class="form-item">
        <div>
            <label>验证码:</label>
            <div class="verify">
                <input v-model:value="code" type="text" placeholder="" />
                <img src="../../static/img/code.bmp" alt="" />
            </div>
        </div>
        <span class="errMess">请输入正确的验证码</span>
    </div>
    <button type="submit" @click="registerCheck" class="btn">注册</button>
  </form>

  ②Vue代码

  new Vue({
    "el":"#registerForm",
    "data":{
        "username":"",
        "password":"",
        "passwordConfirm":"",
        "email":"",
        "code":"",
        "usernameCheckMessage":""
    },
    "watch":{
        "username":function(inputValue){
            var usernameRegExp = /^[A-Z,a-z,0-9,_]{5,8}$/;
            if (usernameRegExp.test(this.username)) {
                this.usernameCheckMessage = "";                        
            }else{
                this.usernameCheckMessage = "用户名不符合规则";
            }
        }
    },
    "methods":{
        "registerCheck":function(){
            // 1.检查用户名
            var usernameRegExp = /^[A-Z,a-z,0-9,_]{5,8}$/;
            if (!usernameRegExp.test(this.username)) {
                // 如果不满足条件，则阻止表单提交
                event.preventDefault();
                // 有任何一个条件不满足，后面就没必要检查了，所以函数可以停止执行
                return ;
            }
            // 2.检查密码
            var passwordRegExp = /^[A-Z,a-z,0-9,_]{5,8}$/;
            if (!passwordRegExp.test(this.password)) {
                // 如果不满足条件，则阻止表单提交
                event.preventDefault();
                // 有任何一个条件不满足，后面就没必要检查了，所以函数可以停止执行
                return ;
            }
            // 3.检查确认密码是否和密码一致
            if (this.password != this.passwordConfirm) {
                // 如果不满足条件，则阻止表单提交
                event.preventDefault();
                // 有任何一个条件不满足，后面就没必要检查了，所以函数可以停止执行
                return ;
            }
            // 4.检查电子邮件
            var emailRegExp = /^[a-zA-Z0-9_\.-]+@([a-zA-Z0-9-]+[\.]{1})+[a-zA-Z]+$/;
            if (!emailRegExp.test(this.email)) {
                // 如果不满足条件，则阻止表单提交
                event.preventDefault();
                // 有任何一个条件不满足，后面就没必要检查了，所以函数可以停止执行
                return ;
            }
            // 5.检查验证码
            var codeRegExp = /[A-Z,a-z,0-9]{5}/;
            if(!codeRegExp.test(this.code)) {
                // 如果不满足条件，则阻止表单提交
                event.preventDefault();
                // 有任何一个条件不满足，后面就没必要检查了，所以函数可以停止执行
                return ;
            }
        }
    }
  });

  书城项目第二阶段

  第一节 不带数据库的登录注册

  1、创建动态Web工程

  

  2、把V1中的页面粘贴过来

  

  3、使用base标签统一设置路径基准

  ①base标签的语法规则

• base标签要写在head标签内

• base标签必须写在所有其他有路径的标签的前面
• base标签使用href属性设置路径的基准
• base标签生效的机制是：最终的访问地址=base标签href属性设置的基准+具体标签内的路径
• 对于想要参考base标签的具体标签，如果路径是以斜杠开头，那么它将不参考base标签

  ②base标签使用举例

  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>书城首页</title>
    <base href="/bookstore/"/>
    <link rel="stylesheet" href="static/css/minireset.css"/>
    <link rel="stylesheet" href="static/css/common.css"/>
    <link rel="stylesheet" href="static/css/iconfont.css"/>
    <link rel="stylesheet" href="static/css/index.css"/>
    <link rel="stylesheet" href="static/css/swiper.min.css"/>
  </head>

  4、基于base标签调整整个页面的路径

  ①base标签的代码

  在需要的页面把下面的base标签代码粘贴到head标签内、需要路径的标签前即可

  <base href="/bookstore/"/>

  ②对需要统一调整的路径执行替换

  Ctrl+r调出替换操作窗口
  
  具体操作时请参考页面的实际情况进行替换。

  5、基本假设

  为了实现『不带数据库』的登录注册，我们需要假设：系统中目前已有用户：

6、登录功能

①明确目标

在服务器端检查用户通过表单提交的用户名、密码是否正确。

• 成功：跳转到login_success.html页面
• 失败：返回错误消息

  ②思路

  友情提示：分析业务功能，捋清思路最好的办法就是画流程图
  

  ③代码

  [1]创建LoginServlet

  

  创建Packages时的规范： 公司或组织域名倒序.项目名.模块名.具体包名 或 公司或组织域名倒序.项目名.具体包名

下面是完整的Servlet配置信息：

<servlet>
    <servlet-name>LoginServlet</servlet-name>
    <servlet-class>com.atguigu.bookstore.servlet.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>LoginServlet</servlet-name>
    <url-pattern>/LoginServlet</url-pattern>
</servlet-mapping>

[2]完成doPost()方法中的代码

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 1.声明两个变量，用于存储假设的用户名、密码
    String usernameSystem = "tom";
    String passwordSystem = "123456";
    // 2.获取请求参数中的用户名、密码
    String usernameForm = request.getParameter("username");
    String passwordForm = request.getParameter("password");
    // 3.执行判断
    if(usernameSystem.equals(usernameForm) && passwordSystem.equals(passwordForm)) {
        // 4.登录成功：重定向到登录成功页面
        response.sendRedirect(request.getContextPath() + "/pages/user/login_success.html");
    }else{
        // 5.登录失败
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write("抱歉！用户名或密码不正确，请重新输入！");
    }
}

[3]HTML页面设置表单提交地址

<form id="loginForm" action="LoginServlet" method="post">
    <label>用户名称：</label>
    <input class="itxt" type="text" v-model:value="username" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" id="username" />
    <br />
    <br />
    <label>用户密码：</label>
    <input class="itxt" type="password" v-model:value="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" id="password" />
    <br />
    <br />
    <button type="submit" id="sub_btn" @click="loginCheck">登录</button>
</form>

④提示消息改进探索

以下代码仅供参考：

// 5.登录失败
// 返回提示消息方案一：过于简陋
// response.setContentType("text/html;charset=UTF-8");
// response.getWriter().write("抱歉！用户名或密码不正确，请重新输入！");
// 返回提示消息方案二：没有提示消息，让用户非常困惑
// request.getRequestDispatcher("/pages/user/login.html").forward(request, response);
// 返回提示消息方案三：确实能在登录页面显示提示消息，但是实现的方式让我想骂人
response.setContentType("text/html;charset=UTF-8");
PrintWriter writer = response.getWriter();
writer.write("<!DOCTYPE html>");
writer.write("<html>");
writer.write("    <head>");
writer.write("        <base href='/bookstore/' />");

7、注册功能

①明确目标

用户提交注册表单后，检查用户名是否被占用

• 没有被占用：注册成功

• 已经被占用：注册失败

  ②思路

  

  ③代码

  [1]创建RegisterServlet

  
  完整配置信息：

  <servlet>
    <servlet-name>RegisterServlet</servlet-name>
    <servlet-class>com.atguigu.bookstore.servlet.RegisterServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>RegisterServlet</servlet-name>
    <url-pattern>/RegisterServlet</url-pattern>
  </servlet-mapping>

  [2]完成doPost()方法中的代码

  ```java protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

  // 1.声明变量保存系统内置的用户名 String usernameSystem = “jerry”;

  // 2.获取请求参数 String usernameForm = request.getParameter(“username”);

  // 3.比较 if (usernameSystem.equals(usernameForm)) {

    // 4.说明用户名已经被占用，需要提示错误消息
    response.setContentType("text/html;charset=UTF-8");
    PrintWriter writer = response.getWriter();
    writer.write("抱歉！用户名已经被占用，请重新输入！");

  }else{

    // 5.说明用户名可用，跳转到注册成功页面
    response.sendRedirect(request.getContextPath() + "/pages/user/regist_success.html");

  }

}

<a name="Uqlc4"></a>
##### [3]HTML页面调整表单中的设置
```html
<form id="registerForm" action="RegisterServlet" method="post">
    <div class="form-item">
        <div>
            <label>用户名称:</label>
            <input v-model:value="username" type="text" name="username" placeholder="请输入用户名" />
            <span></span>
        </div>
        <span>{{usernameCheckMessage}}</span>
    </div>
    <div class="form-item">
        <div>
            <label>用户密码:</label>
            <input v-model:value="password" type="password" name="password" placeholder="请输入密码" />
        </div>
        <span class="errMess">密码的长度至少为8位</span>
    </div>
    <div class="form-item">
        <div>
            <label>确认密码:</label>
            <input v-model:value="passwordConfirm" type="password" placeholder="请输入确认密码" />
        </div>
        <span class="errMess">密码两次输入不一致</span>
    </div>
    <div class="form-item">
        <div>
            <label>用户邮箱:</label>
            <input v-model:value="email" type="text" name="email" placeholder="请输入邮箱" />
        </div>
        <span class="errMess">请输入正确的邮箱格式</span>
    </div>
    <div class="form-item">
        <div>
            <label>验证码:</label>
            <div class="verify">
                <input v-model:value="code" type="text" name="code" placeholder="" />
                <img src="static/img/code.bmp" alt="" />
            </div>
        </div>
        <span class="errMess">请输入正确的验证码</span>
    </div>
    <button type="submit" @click="registerCheck" class="btn">注册</button>
</form>

第二节 三层架构

1、三层架构划分

• 表述层：负责处理浏览器请求、返回响应、页面调度
• 业务逻辑层：负责处理业务逻辑，根据业务逻辑把持久化层从数据库查询出来的数据进行运算、组装，封装好后返回给表述层，也可以根据业务功能的需要调用持久化层把数据保存到数据库、修改数据库中的数据、删除数据库中的数据
• 持久化层：根据上一层的调用对数据库中的数据执行增删改查的操作

  2、三层架构好处

  如果不做三层架构形式的拆分：
  
  所有和当前业务功能需求相关的代码全部耦合在一起，如果其中有任何一个部分出现了问题，牵一发而动全身，导致其他无关代码也要进行相应的修改。这样的话代码会非常难以维护。
  所以为了提高开发效率，需要对代码进行模块化的拆分。整个项目模块化、组件化程度越高，越容易管理和维护，出现问题更容易排查。

  3、三层架构和模型的关系

  
  模型对整个项目中三层架构的每一层都提供支持，具体体现是使用模型对象封装业务功能数据。

  Java实体类有很多不同名称：

  • POJO：Plain old Java Object，传统的普通的Java对象
  • entity：实体类
  • bean或Java bean
  • domain：领域模型

4、模型开发的要求

①ORM

ORM：Object Relative Mapping对象关系映射
对象：Java对象
关系：关系型数据库
映射：Java对象和数据库表之间的对应关系

②Java实体类的要求

• 必须有一个无参构造器将来使用框架后，大量的对象都是框架通过反射来创建的。Class clazz = Class.forName(“全类名”);clazz.newInstance();

• 通过getXxx()、setXxx()方法定义属性：getXxx()或setXxx()方法去掉get或set后，Xxx把首字母小写，得到的xxx就是属性名。 ```java public class User {

  private String safeUserName;

  public String getUserName(){

    return this.safeUserName;

  }

  public void setUserName(String userName){

    this.safeUserName = userName;

  }

}

在上面例子中，getXxx()、setXxx()方法定义的属性是userName，不是safeUserName。
<a name="o7ovt"></a>
## 第三节 建模
<a name="NR3kL"></a>
### 1、创建数据库
```sql
CREATE DATABASE bookstore210107 CHARACTER SET utf8;
USE `bookstore210107`;

2、创建数据库表

物理建模的思路参考这里。

CREATE TABLE t_user(
    user_id INT PRIMARY KEY AUTO_INCREMENT,
    user_name CHAR(100),
    user_pwd CHAR(100),
    email CHAR(100)
);

3、创建Java实体类

public class User {
    private Integer userId;// user_id
    private String userName;// user_name
    private String userPwd;// user_pwd
    private String email;// email
    ……

第四节 持久化层

1、加入所需jar包

2、创建连接数据库的工具类

3、创建外部属性文件

driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql://192.168.198.100:3306/bookstore210107
username=root
password=atguigu
initialSize=10
maxActive=20
maxWait=10000

注意：这里是上课演示时使用的参数，大家操作时要改成自己的。

4、在JDBCUtils类中创建数据源对象

private static DataSource dataSource;
static {
    // 1.创建一个用于存储外部属性文件信息的Properties对象
    Properties properties = new Properties();
    // 2.使用当前类的类加载器加载外部属性文件：jdbc.properties
    InputStream inputStream = JDBCUtils.class.getClassLoader().getResourceAsStream("jdbc.properties");
    try {
        // 3.将外部属性文件jdbc.properties中的数据加载到properties对象中
        properties.load(inputStream);
        // 4.创建数据源对象
        dataSource = DruidDataSourceFactory.createDataSource(properties);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

5、声明工具方法操作数据库连接

    /**
     * 从数据源中获取数据库连接
     * @return 数据库连接对象
     */
    public static Connection getConnection() {
        Connection connection = null;
        try {
            connection = dataSource.getConnection();
        } catch (SQLException e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        }
        return connection;
    }
    /**
     * 释放数据库连接
     * @param connection 要执行释放操作的连接对象
     */
    public static void releaseConnection(Connection connection) {
        if (connection != null) {
            try {
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
                throw new RuntimeException(e);
            }
        }
    }

测试代码如下：

public class BookstoreTest {
    @Test
    public void testConnection() {
        Connection connection = JDBCUtils.getConnection();
        System.out.println("connection = " + connection);
    }
}

6、创建BaseDao

①DAO概念

DAO：Data Access Object数据访问对象
DAL：Data Access Layer数据访问层

②创建Java类

③编写通用方法

/**
 * 各个具体Dao类的基类，泛型T对应具体实体类类型
 * @param <T>
 */
public class BaseDao<T> {
    private QueryRunner queryRunner = new QueryRunner();
    /**
     * 通用的增删改方法
     * @param sql 要执行的SQL语句
     * @param param 为SQL语句准备好的参数
     * @return 受影响的行数
     */
    public int update(String sql, Object ... param) {
        int updatedRowCount = 0;
        Connection connection = JDBCUtils.getConnection();
        try {
            updatedRowCount = queryRunner.update(connection, sql, param);
        }
        // 为了让上层方法调用方便，将编译时异常捕获
        catch (SQLException e) {
            e.printStackTrace();
            // 为了不掩盖问题，将编译时异常封装为运行时异常抛出
            throw new RuntimeException(e);
        } finally {
            // 关闭数据库连接
            JDBCUtils.releaseConnection(connection);
        }
        return updatedRowCount;
    }
    /**
     * 查询单个对象
     * @param clazz 单个对象所对应的实体类类型
     * @param sql   查询单个对象所需要的SQL语句
     * @param param SQL语句的参数
     * @return      查询到的单个对象
     */
    public T getBean(Class<T> clazz, String sql, Object ... param) {
        Connection connection = JDBCUtils.getConnection();
        T t = null;
        try {
            t = queryRunner.query(connection, sql, new BeanHandler<>(clazz), param);
        } catch (SQLException e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        } finally {
            // 关闭数据库连接
            JDBCUtils.releaseConnection(connection);
        }
        return t;
    }
    /**
     * 查询集合对象
     * @param clazz 集合中单个对象所对应的实体类类型
     * @param sql   查询集合所需要的SQL语句
     * @param param SQL语句的参数
     * @return      查询到的集合对象
     */
    public List<T> getBeanList(Class<T> clazz, String sql, Object ... param) {
        Connection connection = JDBCUtils.getConnection();
        List<T> list = null;
        try {
            list = queryRunner.query(connection, sql, new BeanListHandler<>(clazz), param);
        } catch (SQLException e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        } finally {
            // 关闭数据库连接
            JDBCUtils.releaseConnection(connection);
        }
        return list;
    }
}

测试方法：

@Test
public void testUpdate() {
    BaseDao<Object> baseDao = new BaseDao<>();
    String sql = "insert into t_user(user_name,user_pwd) values(?,?)";
    int count = baseDao.update(sql, "罗志祥", "789456");
    System.out.println("count = " + count);
}
@Test
public void testGetBean() {
    BaseDao<User> baseDao = new BaseDao<>();
    // user_id userId
    // user_name userName
    // user_pwd userPwd
    String sql = "select user_id userId,user_name userName,user_pwd userPwd from t_user where user_id=?";
    User user = baseDao.getBean(User.class, sql, 2);
    System.out.println("user = " + user);
}
@Test
public void testGetBeanList() {
    BaseDao<User> baseDao = new BaseDao<>();
    String sql = "select user_id userId,user_name userName,user_pwd userPwd from t_user";
    List<User> userList = baseDao.getBeanList(User.class, sql);
    for (User user : userList) {
        System.out.println("user = " + user);
    }
}

7、创建UserDao

①用户登录注册功能中的组件关系图

②声明UserDao接口

public interface UserDao {
    /**
     * 根据用户名查询User对象
     * @param username 用户名
     * @return 查询到的User对象
     */
    User selectUserByName(String username);
    /**
     * 将User对象保存到数据库
     * @param user 要保存的User对象
     * @return 受影响的行数
     */
    int insertUser(User user);
}

③声明UserDaoImpl实现类

public class UserDaoImpl extends BaseDao<User> implements UserDao {
    @Override
    public User selectUserByName(String username) {
        String sql = "select user_id userId,user_name userName,user_pwd userPwd,email from t_user where user_name=?";
        return super.getBean(User.class, sql, username);
    }
    @Override
    public int insertUser(User user) {
        String sql = "insert into t_user(user_name,user_pwd,email) values(?,?,?)";
        return super.update(sql, user.getUserName(), user.getUserPwd(), user.getEmail());
    }
}

④测试方法

@Test
public void testUserDaoGetUserByName() {
    UserDao userDao = new UserDaoImpl();
    User user = userDao.selectUserByName("陈冠希");
    System.out.println("user = " + user);
}
@Test
public void testUserDaoSaveUser() {
    UserDao userDao = new UserDaoImpl();
    User user = new User(null, "陈冠希", "666666", "aaa@qq.com");
    int count = userDao.insertUser(user);
    System.out.println("count = " + count);
}

第五节 完成带数据库的登录注册

1、密码加密

①加密方式介绍

• 对称加密：在知道密文和加密算法的情况下，能够反推回明文

• 非对称加密：

  • 加密：使用私钥加密
  • 解密：使用公钥解密

    ②加密算法：HASH

• 特点1：不可逆

• 特点2：加密后，密文长度固定
• 特点3：输入数据不变，输出数据也保证不变；输入数据变化，输出数据一定变化

常见的HASH算法举例：

• MD5
• SHA1
• SHA512

• CRC32

  ③执行加密的工具方法

  ```java public class MD5Util {

  /**

  • 针对明文字符串执行MD5加密
  • @param source

  • @return */ public static String encode(String source) {

    // 1.判断明文字符串是否有效 if (source == null || “”.equals(source)) {

     throw new RuntimeException("用于加密的明文不可为空");

    }

    // 2.声明算法名称 String algorithm = “md5”;

    // 3.获取MessageDigest对象 MessageDigest messageDigest = null; try {

     messageDigest = MessageDigest.getInstance(algorithm);

    } catch (NoSuchAlgorithmException e) {

     e.printStackTrace();

    }

    // 4.获取明文字符串对应的字节数组 byte[] input = source.getBytes();

    // 5.执行加密 byte[] output = messageDigest.digest(input);

    // 6.创建BigInteger对象 int signum = 1; BigInteger bigInteger = new BigInteger(signum, output);

    // 7.按照16进制将bigInteger的值转换为字符串 int radix = 16; String encoded = bigInteger.toString(radix).toUpperCase();

    return encoded; }

}

<a name="KGVII"></a>
### 2、注册功能
<a name="HIaT5"></a>
#### ①目标
检查用户名是否可用，如果用户名可用则保存User对象
<a name="w2IoO"></a>
#### ②思路
![image.png](https://cdn.nlark.com/yuque/0/2022/png/26803611/1652806855025-a4ffa837-3b39-4e19-9ed2-85abfecdfec8.png#clientId=ub2b562d0-41b8-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=ucfc1cb58&margin=%5Bobject%20Object%5D&name=image.png&originHeight=853&originWidth=789&originalType=url&ratio=1&rotation=0&showTitle=false&size=58905&status=done&style=none&taskId=uf084cbc4-dfbd-435c-8f81-6e76feb261c&title=)
<a name="F8n9k"></a>
#### ③代码
<a name="hEx1n"></a>
##### [1]创建UserService
![image.png](https://cdn.nlark.com/yuque/0/2022/png/26803611/1652806853278-8874adfc-4eb4-42ba-a1a1-5c09bf087673.png#clientId=ub2b562d0-41b8-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u6d196cb5&margin=%5Bobject%20Object%5D&name=image.png&originHeight=133&originWidth=350&originalType=url&ratio=1&rotation=0&showTitle=false&size=4243&status=done&style=none&taskId=ucc23f19e-2ec3-4f48-8594-c3d78394a50&title=)
```java
public interface UserService {
    void doRegister(User userForm);
    User doLogin(User userForm);
}

开发中，接口设计和接口中方式定义的理念：

• 方法的返回值应该对应这个方法本身的业务功能
  • 写操作：没有返回值
  • 读操作：有返回值，返回值就是查询的结果
• 方法执行是否成功
  • 成功：不抛异常
  • 失败：抛异常

启发：
上层方法向下层方法布置任务：方法名、方法的参数
下层方法向上层方法反馈结果：返回值、是否抛异常

#[2]实现UserService接口

(1)UserDao声明为成员变量

说明：将来在Servlet中使用Service的时候，也是同样声明为成员变量，那么从Servlet、Service到Dao就都是『单实例，多线程』方式运行。

public class UserServiceImpl implements UserService {
    private UserDao userDao = new UserDaoImpl();
    @Override
    public void doRegister(User userForm) {
    }
    @Override
    public User doLogin(User userForm) {
        return null;
    }
}

理由：

• 创建对象的操作只执行一次

• 对象在内存中只保存一份，不会过多占用内存空间

  (2)实现注册功能

  @Override
  public void doRegister(User userForm) {
    // 1.从userForm对象中获取用户通过表单提交的用户名
    String userName = userForm.getUserName();
    // 2.根据用户名调用UserDao方法查询对应的User对象
    User userDB = userDao.selectUserByName(userName);
    // 3.检查User对象是否为空
    if (userDB != null) {
        // 4.如果User对象不为空，则抛出异常，通知上层调用方法：用户名已经被占用
        throw new RuntimeException("用户名已经被占用");
    }
    // 5.对表单提交的密码执行MD5加密
    // ①取出表单的密码
    String userPwd = userForm.getUserPwd();
    // ②执行加密
    String encode = MD5Util.encode(userPwd);
    // ③将加密得到的密文字符串设置回userForm对象
    userForm.setUserPwd(encode);
    // 6.调用UserDao方法将userForm对象保存到数据库
    userDao.insertUser(userForm);
  }

  [3]修改RegisterServlet

  ```java protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

  // 1.从请求参数中获取数据封装为User对象 String username = request.getParameter(“username”); String password = request.getParameter(“password”); String email = request.getParameter(“email”);

  User userForm = new User(null, username, password, email);

  // 2.调用UserService的方法执行注册 try {

    userService.doRegister(userForm);
    // 3.如果没有抛出异常那么就跳转到注册成功的页面
    // 选择重定向的原因：跳转到regist_success.html页面后，用户刷新浏览器不会重复提交注册表单
    response.sendRedirect(request.getContextPath()+"/pages/user/regist_success.html");

  } catch (Exception e) {

    e.printStackTrace();
    // 4.如果抛出了异常
    response.setContentType("text/html;charset=UTF-8");
    response.getWriter().write("注册失败：" + e.getMessage());

  }

}

<a name="is5SF"></a>
### 3、登录功能
<a name="Sxudq"></a>
#### ①关键点提示
对用户密码进行验证时，无法将密文解密为明文，只能将明文再次加密为密文，**『比较密文是否一致』**。
<a name="zCBq9"></a>
#### ②思路
![image.png](https://cdn.nlark.com/yuque/0/2022/png/26803611/1652806855019-5a584506-d322-410e-a309-9cf1a9c5fa94.png#clientId=ub2b562d0-41b8-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u896a42a6&margin=%5Bobject%20Object%5D&name=image.png&originHeight=909&originWidth=690&originalType=url&ratio=1&rotation=0&showTitle=false&size=51747&status=done&style=none&taskId=u836ad0ed-1da9-4d29-8ad9-6c8bdc0434c&title=)
<a name="VX6Hl"></a>
#### ③代码
<a name="BYgkZ"></a>
##### [1]UserService接口的doLogin()
```java
@Override
public User doLogin(User userForm) {
    // 1.获取表单提交的用户名
    String userName = userForm.getUserName();
    // 2.根据用户名调用UserDao方法查询User对象
    User userDB = userDao.selectUserByName(userName);
    // 3.检查数据库查询的User对象是否为null
    if (userDB == null) {
        // 4.如果数据库查询的User对象为null，说明用户名不正确，抛出异常：登录失败
        throw new RuntimeException("用户名或密码不正确");
    }
    // 5.密码验证
    // ①获取表单提交的密码
    String userPwdForm = userForm.getUserPwd();
    // ②对表单提交的密码进行加密
    String encode = MD5Util.encode(userPwdForm);
    // ③获取数据库查询到的密码
    String userPwdDB = userDB.getUserPwd();
    // ④比较表单密码和数据库密码
    if (Objects.equals(encode, userPwdDB)) {
        // 6.如果密码验证成功，则将从数据库查询出来的User对象返回
        return userDB;
    }else{
        // 7.如果密码验证失败，说明密码不正确，抛出异常：登录失败
        throw new RuntimeException("用户名或密码不正确");
    }
}

[2]LoginServlet的doPost()方法

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 1.从请求参数中获取用户名和密码
    String username = request.getParameter("username");
    String password = request.getParameter("password");
    // 2.封装为User对象
    User userForm = new User(null, username, password, null);
    // 3.调用UserService的方法执行登录验证
    try {
        User userDB = userService.doLogin(userForm);
        // 4.登录成功后跳转到登录成功页面
        response.sendRedirect(request.getContextPath() + "/pages/user/login_success.html");
    } catch (Exception e) {
        e.printStackTrace();
        // 5.登录失败则显示提示消息
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write("登录失败：" + e.getMessage());
    }
}

书城项目第三阶段

第一节 创建module，迁移代码

1、创建module

把index.jsp删除

2、加入jar包

attoparser-2.0.5.RELEASE.jar commons-dbutils-1.6.jar druid-1.1.9.jar hamcrest-core-1.3.jar javassist-3.20.0-GA.jar junit-4.12.jar log4j-1.2.15.jar mysql-connector-java-5.1.37-bin.jar ognl-3.1.26.jar slf4j-api-1.7.25.jar slf4j-log4j12-1.7.25.jar thymeleaf-3.0.12.RELEASE.jar unbescape-1.1.6.RELEASE.jar

3、从V02迁移代码

①src目录下的Java源代码

• 在V02的module中的src目录上点右键
• show in explorer在操作系统的窗口内打开
• 在操作系统的窗口内复制package目录和jdbc.properties
• 在操作系统的窗口内粘贴到V03的module中的src目录下
• 在V03的src目录下，找到上一个版本的Servlet，全部删除
• 创建两个子包
  • 存放Servlet基类：com.atguigu.bookstore.servlet.base
  • 存放Servlet子类：com.atguigu.bookstore.servlet.model

• 从view-demo中，将两个基类迁移过来

  • 视图基类：ViewBaseServlet
  • 方法分发基类：ModelBaseServlet

    ②前端页面

• 将V02中的pages目录整体复制到V03 module的WEB-INF目录下

• 将V02中的static目录整体复制到V03 module的web目录下

• 将V02中的index.html复制到V03 module的WEB-INF/pages目录下，将来通过Servlet访问

  4、显示首页

  ①配置web.xml

  <!-- 在上下文参数中配置视图前缀和视图后缀 -->
  <context-param>
    <param-name>view-prefix</param-name>
    <param-value>/WEB-INF/pages/</param-value>
  </context-param>
  <context-param>
    <param-name>view-suffix</param-name>
    <param-value>.html</param-value>
  </context-param>

  注意：这里需要将WEB-INF下的view改成pages，和当前项目环境的目录结构一致。

  ②创建PortalServlet

  注意：这个PortalServlet映射的地址是/index.html，这样才能保证访问首页时访问它。

  <servlet>
    <servlet-name>PortalServlet</servlet-name>
    <servlet-class>com.atguigu.bookstore.servlet.model.PortalServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>PortalServlet</servlet-name>
    <url-pattern>/index.html</url-pattern>
  </servlet-mapping>

  注意：PortalServlet服务于首页的显示，为了降低用户访问首页的门槛，不能附加任何请求参数，所以不能继承ModelBaseServlet，只能继承ViewBaseServlet。 ```java public class PortalServlet extends ViewBaseServlet {

  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    // 将两种请求方式的处理逻辑合并到一个方法
    doPost(request, response);

  }

  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    // 声明视图名称
    String viewName = "index";
    // 解析模板视图
    processTemplate(viewName, request, response);

  }