MySql基礎使用「增刪改查」20211221

. 安裝 msi版本

2. 添加刪除數據庫(DB)

	`create database database_name;` 	建立`database_name`數據庫  
	`show databases;`   顯示當前所有的數據庫  
	`drop database database_name;`	刪除database_name數據庫  
	`use database_name;`使用`database_name`數據庫

3. mysql的數據類型

**數值類型文本類型時間類型**

https://www.cnblogs.com/-xlp/p/8617760.html

4. 添加和刪除數據表（table）

https://www.cnblogs.com/whgk/p/6158107.html

 ```sql
 create table table_name(
 		id bigint(20),
 		..
 		.．）;
 drop table table_name(
```

5. 給數據表添加或者刪除列'

  ```sql
  alter table table_name add column_name;'添加表'
  alter table table_name drop column_name;'刪除表'
  alter table table_name rename new_table_name;'重命名表'
  ```

6. 修改某個數據列的名字或者數據類型

  ```sql
  alter table table_name change old_table_name new_table_name data type
  alter table account change city newcity varchar(255);'修改列的名字，但不修改數據類型'
  alter table account change newcity newcity text;'修改數據類型'
  alter table account change newcity city varchat;'列的名字和數據類型同時修改；'
  ```

7. 查看或者插入表格

 ```sql
  select * from tabel_name;查看所有表內容
  select col_name1,col_name2,....from table_name;'查看表內某幾列的內容；'
  insert into table_name values (值1，值2)
  insert into table_name values（列1，列2...）values （值1，值2...）
 ```

8. wherer 查詢條件

  ```sql
  select * form table_name 
  where col_name 運算符 ；
  = ,！,=,  >, <, <=, >=,between, like '通過 and   or 多個條件篩選'
  ex:  
  select *form table_name where col1=xxx and col2 = xx or col3>xxx;
  ```

9. null 的判斷

  ```sql 
  ' 對于null的判讀不能用= 或者！=來判斷 需要用  is  或者is not '
  select * form  table_name where col_name is null;
  ```

10. select distinct去掉重復查詢結果

 ```sql
	 select distinct col_name from table_name;'將重復的結果篩選掉。多次只輸出一次。'
 ```

11. 使用order by對查詢結果排序

```sql
	'按照單一列名排序'
	select *form table_name [where 子句] order by col_name[asc/desc] 
	'where 子句不能與order by子句置換'
	'按照多列排序'
	select *form table_name [where 子句] order by col_name[asc/desc] ，col2[asc/desc]
 ```

12. 使用limit截取查詢結果

只顯示前三行

`select * form table_name [where 子句][order by 子句]limit[offset，]rowcount`

`offset` 表示記錄從第一行 0開始要開始截取的位置比如從第三行開始 offset =2,

`rowcount` 是從 `offset` 開始獲取截取的在那個條數

舉例 `limit 1,2` 是從第二條開始截取兩條結果輸出第二第三行記錄。

13. 插入命令`insert`和查詢命令`select`的組合使用

-將一個表格內的數據插入到另一個表格。-

``` 
insert into table_name values (值1，值2)
insert into table_name values（列1，列2...）values （值1，值2...）
'組合用法'
insert into table_name1 select col1,col2 from table_name2
insert into table_name1 (col1,col2) select col3,col4 from table_name2
```

14. 更新表的數據

修改單列

 `updata table_name set col_name=xxx[where 字句]`

修改多列

`updata table_name set col_name=xxx，col2_name=xxx[where 字句]`

15. where語句中in操作符使用

 ```sql
  select * form tabel_name [where col_name in(value1,value2...)]
  select * from table_name [where col_name in(select篩選語句)]
 ```

16. where語句中between操作符使用

```sql
 select * form tabel_name [where col_name between value1 and value2]
 select * from table_name[where col_name not between value1 and value2]
```

17. where語句中like操作符使用

、系統結構：

① B/S架構：Browser/Server（瀏覽器/服務器的交互形式。）

Browser支持的語言：HTML、CSS、JavaScript；S是服務器端Server支持的語言有：C、C++、Java等
B/S架構系統有什么優點和缺點？ 優點：升級方便，只升級服務器代碼即可，維護成本低。缺點：速度慢、體驗不好、界面不炫酷
企業大部分使用B/S架構
B/S架構的系統代表有：京東、百度、天貓等

② C/S架構：Client/Server（客戶端/服務器的交互形式。）

C/S架構的優點和缺點？
優點：速度快、體驗好、界面炫酷（娛樂性多數是C/S架構）
缺點：升級麻煩、維護成本較高。
C/S架構的系統代表有：QQ、微信、支付寶等

2、 HTML概述

① 什么是HTML？② 怎么開發HTML？③ 怎么運行HTML?

① HTML：Hyper Text Markup Language（超文本標記語言）

?由大量的標簽組成，每一個標簽都有開始標簽和結束標簽。

?超文本：圖片、聲音、視頻等

② HTML開發使用普通的文本編輯器就行，創建擴展名是.html或.htm

?編輯器有：HBuilder、vscode等

③ 直接采用瀏覽器打開HTML文件就能運行

④ HTML是誰制定的？

④ W3C：世界萬維網聯盟

?W3C制定了HTML的規范：每個瀏覽器生產廠家都會遵守規范。HTML也會按照規范去寫代碼

?HTML規范目前最高的版本是：HTML5.0，簡稱H5

?我們現在主要學的HTML4.0（基本用法）

為了方便中國Web前端程序員開發，提供了大量幫助文檔。為開發提供方便。

?w3school：先出現的，和W3C無關

?w3cschool：后出現的，和W3C無關

?W3C制定了很多規范：HTML/XML/http協議/https協議……

3、第一個HTML

4、基本標簽

p：段落標記
h1~h6：標題字，與word的標題字相同
br：換行標記（獨目標記）
hr：橫線（獨目標記）
color：橫線顏色
width：橫線寬度（可以px和%）
pre：預留格式
del：刪除字
ins：插入字（有下劃線）
b：粗體字
i：斜體字
sup：上標
sub：下標
font：字體標簽
color：字體顏色
size：字體大小（1~7）

頁面效果圖：

5、實體符號：為了避免和標簽沖突，所以需要使用實體符號

<：<
>：>
空格：
注：html中按多個空格鍵，在網頁中只顯示一個空格。

6、HTML表格

table：表格
tr：行
td：列
th：列（比td加粗居中）
合并行：rowspan（一個格占兩個位置）
注：row合并的時候，刪除下面的單元格
合并列：colspan（一個格占兩個位置）
注：col合并的時候，刪除哪個沒有要求

7、thead、tbody、tfoot標簽

thead、tbody、tfoot不是必須的，便于后期JS編寫。

8、body的背景顏色和背景圖片

bgcolor：背景色
background：背景圖片
背景圖片在背景色的上面

9、img標簽

src：圖片的路徑
只設置width，height會等比例縮放
只設置height，不起作用
title：鼠標懸停時顯示的信息
alt：設置圖片加載失敗時顯示的提示信息

10、超鏈接或熱鏈接

href：hot references 熱引用；
后面一定是一個資源的地址。
后面的路徑可以是絕對路徑也可以是相對路徑，可以是網絡某個資源的路徑。
target：
_blank：新窗口
_self：當前窗口（默認）
_top：頂級窗口
_parent：父級窗口

超鏈接的作用：

通過超鏈接可以從瀏覽器向服務器發送請求。

11、request與response的概念

request：瀏覽器向服務器發送數據（請求）
B --》S
response：服務器向瀏覽器發送數據（響應）
S--》B

12、列表

有序列表：ol
type：1、A、a、I、i
無序列表：ul
type：circle（○）、square（□）、disc（●）

13、表單（重點）

action：寫提交的URL地址
method：默認get；還有post
表單有什么用？
答：收集用戶的信息。表單展現之后，用戶填寫表單，點擊提交。（submit）
怎么畫一個表單？
答：用form標簽
一個網頁可以有多個表單form
表單最終是需要提交數據給服務器的，form標簽有一個action屬性，這個屬性用來指定服務器地址。
action屬性用來指定數據提交給哪個服務器
action屬性和超鏈接中的href屬性一樣。都可以向服務器發送請求（request）
http://192.168.111.3:8080/oa/save 這是請求路徑，
表單提交數據最終提交給192.168.111.3機器上的8080端口對應的軟件。
input中的type取值:
radio：單選控件
checkbox：多選控件
submit：提交控件
reset：重置控件
button：普通控件
text：文本控件
password：密碼控
file：文件控件
上傳文件專用
hidden：隱藏域
網頁上看不到，但是表單提交的時候數據會自動提交給服務器。
input中的value屬性用來指定按鈕上顯示的文本信息。
超鏈接a與表單form的區別？
答：表達form可以收集信息，而超鏈接a無法收集信息。
表單提交里面的按鈕input中屬性必須定義name，不然提交不了。
表單是以什么格式提交數據給服務器的？
格式：action?name=value&name=value&name=value..
HTTP協議規定的，必須以這種格式提交給服務器
java中String split('&');
重點強調：表單項寫了name屬性的，一律會提交給服務器。不想提交就不要寫name屬性。
文本框和密碼框的value不需要程序員指定，用戶輸入什么value就是什么。
當name沒有寫的時候，該項不會提交給服務器
但是當value沒有寫的時候，value的默認值是空字符串"",將空字符串提交給服務器。java代碼得到的是：String s = "";

效果圖：

地址欄提交的信息：

?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我沒有value屬性；&position=ln&myFile=&myHidden=

14、表單的說明：

① 用戶手動輸入的文本框，都不需要給value賦值
② textarea沒有value屬性
③ radio、checkbox默認選項需要使用，checked="checked"（簡寫：checked）
④ select中的option屬性：? selected="selected" 為默認選中 ?size：顯示條目數量
multiple="multiple" 支持多選(select的屬性)
⑤ input的屬性
readonly和disabled：
都是只讀不能修改
數據不會提交
maxlength：設置文本框中輸入的字符數量。

15、HTML中的結點

在HTML文檔中，任何元素（結點）都有id屬性，id屬性是該節點的唯一標識。所以在同一個HTML文檔中id值不能重復。
注意：表單提交數據的時候，只和name有關系，和id無關
id有什么作用？
javascript語言：可以對HTML文檔中的任何節點進行增刪改操作。
獲取節點時，通常通過id來獲取節點
HTML文檔是一棵樹，樹上有很多節點，每一個節點都有唯一的id（DOM樹）

16、div和span

div和span有什么用？
div和span都可以稱為圖層。
有什么用？
圖層的作用為了保證頁面可以靈活的布局。
div和span是可以定位的，只要定下div的左上角的x軸和y軸坐標即可。
div和span的區別？
di獨占一行
span不會獨占一行

?有用嗎？對于學完Spring、SpringMVC、Mybatis還無從下手的同學來說這是一個很好引子。對于正在學習同一個案例的同學，可能解決一些問題。對于需要這個案例的同學可以直接獲取。
??有什么？：xml配置文件編寫，引入一個簡單的前端框架，使用MyBatis Generator逆向工程生成一些代碼，使用框架簡單快速搭建一個頁面，好用的分頁工具PageHelper，簡單的前后端分離，發送ajax請求，利用json傳遞數據，增、刪、改、查的簡單實現。
??簡單嗎？內容很簡單，涉及Java代碼不多，但是對于新手來說，最困難的部分是各種環境搭建、配置文件、版本沖突，如果能夠根據錯誤提示動手解決，那就是一大進步。
??怎么學？如果有時間可以在B站搜索：ssm整合crud，雷豐陽講的。如果想看到每個功能的實現過程和源碼，可以在這里學習，每個步驟都有注釋。也可以作為復習快速瀏覽。

3、新增

前端格式校驗、用戶名校驗、后端校驗、JSR303校驗，效果如圖

1. 員工新增模態框

使用彈出模態框作為新增模塊，參考Bootstrap代碼

在index.jsp添加新增模態框代碼

 <!-- 為新增按鈕增加模態框 ，利用按鈕綁定單擊事件-->
    <!-- Modal -->
    <div class="modal fade" id="empAddModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">員工添加</h4>
                </div>
                <div class="modal-body">
                    <!-- 添加表單 -->
                    <form class="form-horizontal" id="model-form">
                        <!-- 姓名 -->
                        <div class="form-group">
                            <label for="empName_add_input" class="col-sm-2 control-label">EmpName</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="empName" id="empName_add_input"
                                       placeholder="empName">
                                <!-- 用來顯示錯誤提示 -->
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <!-- 郵箱 -->
                        <div class="form-group">
                            <label for="email_add_input" class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" name="email" id="email_add_input"
                                       placeholder="empName@123.com">
                                <!-- 用來顯示錯誤提示 -->
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <!-- 性別 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Gender</label>
                            <div class="col-sm-10">
                                <!-- 單選 -->
                                <label for="gender1_add_input"> <input type="radio"
                                                                       name="gender" id="gender1_add_input"
                                                                       name="gender" value="M" checked>
                                    男
                                </label>
                                <label for="gender2_add_input"> <input type="radio"
                                                                       name="gender" id="gender2_add_input"
                                                                       name="gender" value="F">
                                    女
                                </label>
                            </div>
                        </div>
                        <!-- 部門下拉框 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">DeptName</label>
                            <div class="col-sm-10">
                                <!-- 部門下拉列表使用ajax查詢出來的動態拼接，值為部門id --> 
                                <select class="form-control" name="dId" id="deptName_add_select"></select>
                            </div>
                        </div>

                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                    <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
                </div>
            </div>
        </div>
    </div>

綁定單擊事件

    //添加模態欄    $("#emp_add_modal_btn").click(function() {
		//顯示模態框
        $("#empAddModal").modal({
            //模態框參數，點擊背景不關閉
            backdrop : "static"
        });
    });

創建一個查詢部門的方法

   //新增模態框    $("#emp_add_modal_btn").click(function() {
        //添加模態欄之前將所表單信息清空，包括兩項驗證的css樣式，顯示模態欄之后就是空的
        //reset()方法是dom下的，使用[0]
        $("#empAddModal form")[0].reset();
        //清空輸入格式、重名校驗的css樣式
        reset_form("#empAddModal form");
        //獲取所有部門信息
        getDepts("#deptName_add_select");
        //添加模態框，在模態框中需要所有部門，所以需要查詢所有部門信息
        $("#empAddModal").modal({
         //模態框參數，點擊背景不關閉
            backdrop : "static"
     });
    });
  	//后面用
    //新增模態框--清除表單數據，樣式
    function reset_form(ele) {
        $(ele)[0].reset();
        //該元素下所有css清除
        $(ele).find("*").removeClass("has-error has-success");
        //顯示警告信息部分清空
        $(ele).find(".help-block").text("");
    }

發送查詢部門的ajax請求

    //新增模態框--請求所有部門信息 function getDepts(ele){

     //---注意這里要清空---
        $(ele).empty();
        $.ajax({
            url:"${PATH}/depts",
            type:"GET",
            success:function(result){
                //console.log(result);
                //動態拼接
            }
        });
    }

創建DepartmentController

package com.ssm.controller;

import com.ssm.bean.Department;
import com.ssm.bean.Msg;
import com.ssm.service.DepartmentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

/**
 * 部門信息
 */
@Controller
public class DepartmentController {

    @Autowired
 private DepartmentService departmentService;

 /**
     * 獲取所有部門信息
     * @return
     */
    @ResponseBody
    @RequestMapping("/depts")
    public Msg getDepts() {
        List<Department> depts = departmentService.getDepts();
        return Msg.success().add("depts", depts);
    }
}

創建DepartmentService

package com.ssm.service;

import com.ssm.bean.Department;
import com.ssm.dao.DepartmentMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * 部門信息
 */
@Service
public class DepartmentService {

    @Autowired
 DepartmentMapper departmentMapper;

    /**
     * 查詢所有部門
     */
    public List<Department> getDepts(){
        //方法本身可以添加查詢條件，如果為null代表查所有
        List<Department> list = departmentMapper.selectByExample(null);
        return list;
    }
}

動態拼接

   //新增模態框--請求所有部門信息    function getDepts(ele){

        //---注意這里要清空---
        $(ele).empty();
        $.ajax({
        url:"${PATH}/depts",
        type:"GET",
            success:function(result){
                //console.log(result);
                $.each(result.extend.depts,function(index,item){
                    //創建出option并添加到select中
                    var optionEle = $("<option></option>").append(item.deptName).attr("value",item.deptId);
                    optionEle.appendTo(ele);
                });
            }
        });
    }

效果

2. 基本員工新增

綁定保存按鈕

 //------------------增刪改查都使用REST風格-------------------    //新增保存信息 
    $("#emp_save_btn").click(function(){
        //1、模態框中填寫的表單數據提交給服務器進行保存
        //2、發送ajax請求保存員工
        $.ajax({
            url:"${PATH}/saveemp",
            type:"POST",
            data:$("#empAddModal form").serialize(),
            //.serialize()方法能將表單中數據序列化，直接發送給controll封裝成Bean
            //console.log($("#empAddModal form").serialize());
            //empName=Tom&email=Tom%40123.com&gender=M&dId=1
            success:function(result){
                //1.添加成功，關閉模態框
                $("#empAddModal").modal("hide");
                //2.來到最后一頁，顯示插入的數據，可以直接跳到一個很大的頁數，因為
                //合理性，所以不會超出，這里使用全局參數，數據總條數
                to_page(totalRecord+1);
            }
        });

EmployeeController

  @ResponseBody    @RequestMapping(value = "/saveemp",method = RequestMethod.POST)
    public Msg saveEmp(Employee employee, BindingResult result) {
        employeeService.saveEmp(employee);
        return Msg.success();
    }

EmployeeService

    /**
     * 保存emp員工，insert
     * @param employee
     */
    public void saveEmp(Employee employee) {
        //這個是有選擇插入，insert()全插入，包括id
        employeeMapper.insertSelective(employee);
    }

前端校驗

一共有兩種驗證方式 1.輸入框焦點單獨驗證 2.提交按鈕總驗證，為了不兩種方式的css樣式相互覆蓋，每種方式都驗兩遍，格式在前，用戶名在后

（內部Java格式驗證）+ ajax用戶名驗證（實現方法看下一小節）

   //1.（內部Java格式驗證）+ ajax用戶名驗證    //新增保存信息--ajax用戶名校驗
    //由于在java內又做了一次格式驗證，所以這個方法相當于即驗證了格式，又驗證了重名
    $("#empName_add_input").blur(function () {

        //發送ajax請求，驗證用戶名是否可用
        var empName = this.value;
        $.ajax({
            url: "${PATH}/checkname",
            data: "empName=" + empName,
            type: "POST",
            success: function (result) {
                console.log(result);
                //獲取到返回值，Msg中的狀態碼
                if (result.code == 2333) {
                    show_validate_msg("#empName_add_input", "success", "用戶名可用");
                    //因為使用了兩種方式驗證，格式和重名，會有css樣式沖突覆蓋，所以再加一次驗證
                    //自定義屬性，或全局變量
                    //給添加按鈕添加自定義屬性，在提交時判斷是否通過兩項驗證。
                    $("#emp_save_btn").attr("ajax-vl", "success");


                } else if (result.code == 5555) {
                    show_validate_msg("#empName_add_input", "error", result.extend.msg);

                    $("#emp_save_btn").attr("ajax-vl", "error");

                }
            }
        });
    });

郵箱格式獨立校驗

 //2. 郵箱獨立驗證    //新增保存信息--獨立郵箱格式驗證
    $("#email_add_input").blur(function () {
        var email = $("#email_add_input").val();
        var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if (!regEmail.test(email)) {
            //alert("郵箱格式不正確");
            show_validate_msg("#email_add_input", "error", "郵箱格式不正確");
            //return false;
        } else {
            show_validate_msg("#email_add_input", "success", "");
        }
        //最后方法通過
        //return true;
    })

格式+用戶名驗證+提交保存請求

    //3. 格式+用戶名驗證+提交保存請求，一共有兩種驗證方式 1.輸入框焦點單獨驗證 2.提交按鈕總驗證，    //為了不兩種方式的css樣式相互覆蓋，每種方式都驗兩遍，格式在前，用戶名在后
    //新增保存信息--請求
    $("#emp_save_btn").click(function () {
        //點擊就發送請求，保存使用POST請求


        //1.先驗證ajax重名校驗，防止用戶輸入重復用戶名之后，直接輸入正確的郵箱，點擊提交，重名的驗證提示會被覆蓋
        //ajax-vl是ajax重名校驗之后添加的自定義屬性，用于表示提交按鈕是否可用
        if ($(this).attr("ajax-vl") == "error") {
            return false;
        }
        //2.點擊保存按鈕請求之前完整驗證一遍輸入格式
        //JQuery格式總驗證
        if (!validate_add_form()) {
            return false;
        }
        //3.重名驗證
        //ajax重名校驗
        if ($(this).attr("ajax-vl") == "error") {
            return false;
        }
        //1、模態框中填寫的表單數據提交給服務器進行保存
        //2、發送ajax請求保存員工
        $.ajax({
            url: "${PATH}/saveemp",
            type: "POST",
            data: $("#empAddModal form").serialize(),
            //.serialize()方法能將表單中數據序列化，直接發送給controll封裝成Bean
            //console.log($("#empAddModal form").serialize());
            //empName=Tom&email=Tom%40123.com&gender=M&dId=1
            success: function (result) {
                //1.添加成功，關閉模態框
                $("#empAddModal").modal("hide");
                //2.來到最后一頁，顯示插入的數據，可以直接跳到一個很大的頁數，因為
                //合理性，所以不會超出，這里使用全局參數，參數值在上面分頁時獲取的，數據總條數+1保證不出現極端情況
                to_page(totalRecord + 1);
            }
        });
    });

請求按鈕JQuery格式總校驗方法

  //新增保存信息--請求按鈕JQuery格式總校驗方法    function validate_add_form() {
        console.log("validate_add_form()")
        //1.拿到校驗的數據，使用正則表達式
        //根據bootstrap提供的組件
        //校驗用戶名
        var empName = $("#empName_add_input").val();
        var regName = /(^[a-zA-Z0-9_-]{2,8}$)|(^[\u2E80-\u9FFF]{2,5})/;
        if (!regName.test(empName)) {
            //alert("用戶名可以是2-5位中文或者2-8位英文和數字的組合");
            show_validate_msg("#empName_add_input", "error", "用戶名可以是2-5位中文或者2-8位英文和數字的組合");
            return false;
        } else {
            show_validate_msg("#empName_add_input", "success", "");
        }
        //2、校驗郵箱信息
        var email = $("#email_add_input").val();
        var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if (!regEmail.test(email)) {
            //alert("郵箱格式不正確");
            show_validate_msg("#email_add_input", "error", "郵箱格式不正確");
            return false;
        } else {
            show_validate_msg("#email_add_input", "success", "");
        }
        //最后方法通過
        return true;
    }

添加樣式方法

   //新增保存信息--添加css樣式    //show_validate_msg顯示校驗狀態，通過添加樣式，ele表示被選擇元素，status狀態
    //用來判斷是用什么樣式，綠色、紅色，msg提示信息
    function show_validate_msg(ele, status, msg) {
        //判斷之前先清空之前樣式
        $(ele).parent().removeClass("has-success has-error");
        $(ele).next("span").text("");
        if ("success" == status) {
            $(ele).parent().addClass("has-success");
            $(ele).next("span").text(msg)
        } else if ("error" == status) {
            $(ele).parent().addClass("has-error");
            $(ele).next("span").text(msg)
        }
    }

4. ajax用戶名校驗

如果添加相同的用戶名會造成混淆，所以在輸入用戶名之后立即進行校驗

發送ajax請求（與上一節相同）

   $("#empName_add_input").blur(function () {

        //發送ajax請求，驗證用戶名是否可用
        var empName = this.value;
        $.ajax({
            url: "${PATH}/checkname",
            data: "empName=" + empName,
            type: "POST",
            success: function (result) {
                console.log(result);
                //獲取到返回值，Msg中的狀態碼
                if (result.code == 2333) {
                    show_validate_msg("#empName_add_input", "success", "用戶名可用");
                    //因為使用了兩種方式驗證，格式和重名，會有css樣式沖突覆蓋，所以再加一次驗證
                    //自定義屬性，或全局變量
                    //給添加按鈕添加自定義屬性，在提交時判斷是否通過兩項驗證。
                    $("#emp_save_btn").attr("ajax-vl", "success");


                } else if (result.code == 5555) {
                    show_validate_msg("#empName_add_input", "error", result.extend.msg);
                    $("#emp_save_btn").attr("ajax-vl", "error");

                }
            }
        });
    });

EmployeeController

   /**
     * 用戶名查重
     * 前端校驗，在失去焦點，保存之前都校驗
     * @param empName
     * @return
     */
    @ResponseBody
    @RequestMapping("/checkname")
    public Msg checkEmpName(@RequestParam("empName")String empName) {

        //用戶名格式校驗
        String regx = "(^[a-zA-Z0-9_-]{2,8}$)|(^[\\u2E80-\\u9FFF]{2,5})";
        if(!empName.matches(regx)){
            return Msg.fail().add("msg", "用戶名可以是2-5位中文或者2-8位英文和數字的組合");
        }
        //返回查詢統計結果，true說明沒有重名
        boolean b = employeeService.checkEmpName(empName);
        if(b) {
            return Msg.success();
        }else {
            return Msg.fail().add("msg", "用戶名已存在");
        }
    }

EmployeeService

   /**
     * 查詢用戶是否存在
     * 使用Example復雜查詢
     *
     * @param name
     * @return
     */
    public boolean checkEmpName(String name) {
        //Example用法
        EmployeeExample example = new EmployeeExample();
        //創建查詢條件
        EmployeeExample.Criteria criteria = example.createCriteria();
        //我的理解：這一句相當于添加了一個條件 where empName=name
        criteria.andEmpNameEqualTo(name);
        //統計查詢結構
        long count = employeeMapper.countByExample(example);
        //返回true(0)說明沒有重復用戶名
        return count == 0;
    }

5. JSR303校驗

前面是前端校驗，現在是后端校驗，針對Java

添加JSR303依賴

	<!-- JSR303校驗 -->
		<!-- https://mvnrepository.com/artifact/org.hibernate.validator/hibernate-validator -->
		<dependency>
			<groupId>org.hibernate.validator</groupId>
			<artifactId>hibernate-validator</artifactId>
			<version>6.1.0.Final</version>
		</dependency>

在JavaBean上添加注解


public class Employee {
    private Integer empId;

    //JSR303自定義校驗規則
    @Pattern(regexp = "(^[a-zA-Z0-9_-]{2,8}$)|(^[\\u2E80-\\u9FFF]{2,5})", message = "用戶名可以是2-5位中文或者2-8位英文和數字的組合")
    private String empName;

    private String gender;

    @Pattern(regexp = "^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$",message = "郵箱格式不正確")
    private String email;
    
    //...

在Controller方法中使用，在參數前添加注解，在參數后面添加結果參數

   /**
     * 新增，保存用戶,并驗證
     *
     * 添加JSR303校驗
     * @Valid表示校驗下一個對象
     * BindingResult緊跟被校驗對象，接收結果
     *
     * @param employee
     * @return
     */
    @ResponseBody
    @RequestMapping(value = "/saveemp",method = RequestMethod.POST)
    public Msg saveEmp(@Valid Employee employee, BindingResult result) {

        if(result.hasErrors()) {
            //格式校驗失敗，返回信息
            Map<String ,Object> map = new HashMap<>();
            List<FieldError> fieldErrors = result.getFieldErrors();
            for(FieldError error : fieldErrors) {
                System.out.println("錯誤的字段名:" + error.getField());
                System.out.println("錯誤信息:" + error.getDefaultMessage());
                //將錯誤信息放到map中
                map.put(error.getField(), error.getDefaultMessage());
            }
            return Msg.fail().add("errorFields", map);

        }else if(!employeeService.checkEmpName(employee.getEmpName())){
            //后端在保存的時候再次驗證是否存在用戶名---有點 重復的感覺？？？
            //因為是在一起接收所以錯誤信息一定要一樣，empName手動寫上
            return Msg.fail().add("empName", "用戶名已存在");
        }else {

            employeeService.saveEmp(employee);
            //不用這種：獲取總頁數，用在新增完之后跳轉到最后一頁，不過這樣就會多查一次數據庫
            //PageInfo<Employee> pageInfo = employeeService.getPage(null);
            //return Msg.success().add("pageInfo", pageInfo);
            return Msg.success();
        }
    }

在index.jsp提交按鈕中處理返回結果

   //3. 格式+用戶名驗證+提交保存請求，一共有兩種驗證方式 1.輸入框焦點單獨驗證 2.提交按鈕總驗證，    //為了不兩種方式的css樣式相互覆蓋，每種方式都驗兩遍，格式在前，用戶名在后
    //新增保存信息--請求
    $("#emp_save_btn").click(function () {
        //點擊就發送請求，保存使用POST請求

        //1.先驗證ajax重名校驗，防止用戶輸入重復用戶名之后，直接輸入正確的郵箱，點擊提交，重名的驗證提示會被覆蓋
        if ($(this).attr("ajax-vl") == "error") {
            return false;
        }
        //2.點擊保存按鈕請求之前完整驗證一遍輸入格式
        console.log("JQuery格式總驗證")
        //方法一：JQuery格式總驗證
        if (!validate_add_form()) {
            return false;
        }
        //3.重名驗證
        console.log("ajax重名校驗")
        //ajax重名校驗
        if ($(this).attr("ajax-vl") == "error") {
            return false;
        }
        //1、模態框中填寫的表單數據提交給服務器進行保存
        //2、發送ajax請求保存員工
        $.ajax({
            url: "${PATH}/saveemp",
            type: "POST",
            data: $("#empAddModal form").serialize(),
            //.serialize()方法能將表單中數據序列化，直接發送給controll封裝成Bean
            //console.log($("#empAddModal form").serialize());
            //empName=Tom&email=Tom%40123.com&gender=M&dId=1
            success: function (result) {

                //清除模態框和提示信息
                $("#empAddModal form").find("*").removeClass("has-error has-success");
                $("#empAddModal form").find(".help-block").text("");

                //在這里判斷后端JSR303校驗結果，最后一次！！！！！！！！！真的
                //前后端驗證可以獨立運行，注釋前端后端也能實現一樣效果
                if(result.code == 2333){

                    //alert(result.msg);
                    //1.添加成功，關閉模態框
                    $("#empAddModal").modal("hide");
                    //2.來到最后一頁，顯示插入的數據，可以直接跳到一個很大的頁數，因為
                    //合理性，所以不會超出，這里使用全局參數，數據總條數+1保證不出現極端情況
                    to_page(totalRecord + 1);
                }else{
                    //失敗，顯示信息，有幾個就顯示幾個
                    //undefined 就是沒找到這個錯誤，說明正確，可用alert(result.extend.errorFields.empName)驗證
                    //用戶名格式
                    //alert(result.extend.errorFields.empName)

                    //用戶名格式和查重，因為查重的屬性格式和格式驗證不同，所以不能分開
                    //result.extend.errorFields.empName 格式驗證
                    //result.extend.empName 查重驗證
                    if(undefined != result.extend.errorFields ){
                        //格式錯誤
                        if(undefined != result.extend.errorFields.empName){
                            show_validate_msg("#empName_add_input","error",result.extend.errorFields.empName);
                        }
                    }else{
                        if(undefined != result.extend.empName){
                            //查重錯誤
                            show_validate_msg("#empName_add_input","error",result.extend.empName);
                        }
                    }
                    //郵箱格式判斷
                    if(undefined != result.extend.errorFields){
                        if(undefined != result.extend.errorFields.email){
                            show_validate_msg("#email_add_input","error",result.extend.errorFields.email);
                        }
                    }
                }
            }
        });
    });

6. 完整代碼

模態框

    <!-- 為新增按鈕增加模態框 ，利用按鈕綁定單擊事件-->
    <!-- Modal -->
    <div class="modal fade" id="empAddModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">員工添加</h4>
                </div>
                <div class="modal-body">
                    <!-- 添加表單 -->
                    <form class="form-horizontal" id="model-form">
                        <!-- 姓名 -->
                        <div class="form-group">
                            <label for="empName_add_input" class="col-sm-2 control-label">EmpName</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="empName" id="empName_add_input"
                                       placeholder="empName">
                                <!-- 用來顯示錯誤提示 -->
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <!-- 郵箱 -->
                        <div class="form-group">
                            <label for="email_add_input" class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" name="email" id="email_add_input"
                                       placeholder="empName@123.com">
                                <!-- 用來顯示錯誤提示 -->
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <!-- 性別 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Gender</label>
                            <div class="col-sm-10">
                                <!-- 單選 -->
                                <label for="gender1_add_input"> <input type="radio"
                                                                       name="gender" id="gender1_add_input"
                                                                       name="gender" value="M" checked>
                                    男
                                </label>
                                <label for="gender2_add_input"> <input type="radio"
                                                                       name="gender" id="gender2_add_input"
                                                                       name="gender" value="F">
                                    女
                                </label>
                            </div>
                        </div>
                        <!-- 部門下拉框 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">DeptName</label>
                            <div class="col-sm-10">
                                <!-- 部門下拉列表使用ajax查詢出來的動態拼接，值為部門id -->
                                <select class="form-control" name="dId" id="deptName_add_select"></select>
                            </div>
                        </div>

                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                    <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
                </div>
            </div>
        </div>
    </div>

請求和方法

<script type="text/javascript">
    //------------------增刪改查都使用REST風格-------------------

    //1.（內部Java格式驗證）+ ajax用戶名驗證
    //新增保存信息--ajax用戶名校驗
    //由于在java內又做了一次格式驗證，所以這個方法相當于即驗證了格式，又驗證了重名
    $("#empName_add_input").blur(function () {

        //發送ajax請求，驗證用戶名是否可用
        var empName = this.value;
        $.ajax({
            url: "${PATH}/checkname",
            data: "empName=" + empName,
            type: "POST",
            success: function (result) {
                console.log(result);
                //獲取到返回值，Msg中的狀態碼
                if (result.code == 2333) {
                    show_validate_msg("#empName_add_input", "success", "用戶名可用");
                    //因為使用了兩種方式驗證，格式和重名，會有css樣式沖突覆蓋，所以再加一次驗證
                    //自定義屬性，或全局變量
                    //給添加按鈕添加自定義屬性，在提交時判斷是否通過兩項驗證。
                    $("#emp_save_btn").attr("ajax-vl", "success");

                } else if (result.code == 5555) {
                    show_validate_msg("#empName_add_input", "error", result.extend.msg);
                    $("#emp_save_btn").attr("ajax-vl", "error");

                }
            }
        });
    });

    //2. 郵箱獨立驗證
    //新增保存信息--獨立郵箱格式驗證
    $("#email_add_input").blur(function () {
        var email = $("#email_add_input").val();
        var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if (!regEmail.test(email)) {
            //alert("郵箱格式不正確");
            show_validate_msg("#email_add_input", "error", "郵箱格式不正確");
            //return false;
        } else {
            show_validate_msg("#email_add_input", "success", "");
        }
        //最后方法通過
        //return true;
    })

    //3. 格式+用戶名驗證+提交保存請求，一共有兩種驗證方式 1.輸入框焦點單獨驗證 2.提交按鈕總驗證，
    //為了不兩種方式的css樣式相互覆蓋，每種方式都驗兩遍，格式在前，用戶名在后
    //新增保存信息--請求
    $("#emp_save_btn").click(function () {
        //點擊就發送請求，保存使用POST請求

        //1.先驗證ajax重名校驗，防止用戶輸入重復用戶名之后，直接輸入正確的郵箱，點擊提交，重名的驗證提示會被覆蓋
        if ($(this).attr("ajax-vl") == "error") {
            return false;
        }
        //2.點擊保存按鈕請求之前完整驗證一遍輸入格式
        console.log("JQuery格式總驗證")
        //方法一：JQuery格式總驗證
        if (!validate_add_form()) {
            return false;
        }
        //3.重名驗證
        console.log("ajax重名校驗")
        //ajax重名校驗
        if ($(this).attr("ajax-vl") == "error") {
            return false;
        }
        //1、模態框中填寫的表單數據提交給服務器進行保存
        //2、發送ajax請求保存員工
        $.ajax({
            url: "${PATH}/saveemp",
            type: "POST",
            data: $("#empAddModal form").serialize(),
            //.serialize()方法能將表單中數據序列化，直接發送給controll封裝成Bean
            //console.log($("#empAddModal form").serialize());
            //empName=Tom&email=Tom%40123.com&gender=M&dId=1
            success: function (result) {

                //清除模態框和提示信息
                $("#empAddModal form").find("*").removeClass("has-error has-success");
                $("#empAddModal form").find(".help-block").text("");

                //在這里判斷后端JSR303校驗結果，最后一次！！！！！！！！！真的
                //前后端驗證可以獨立運行，注釋前端后端也能實現一樣效果
                if(result.code == 2333){

                    //alert(result.msg);
                    //1.添加成功，關閉模態框
                    $("#empAddModal").modal("hide");
                    //2.來到最后一頁，顯示插入的數據，可以直接跳到一個很大的頁數，因為
                    //合理性，所以不會超出，這里使用全局參數，數據總條數+1保證不出現極端情況
                    to_page(totalRecord + 1);
                }else{
                    //失敗，顯示信息，有幾個就顯示幾個
                    //undefined 就是沒找到這個錯誤，說明正確，可用alert(result.extend.errorFields.empName)驗證
                    //用戶名格式
                    //alert(result.extend.errorFields.empName)

                    //用戶名格式和查重，因為查重的屬性格式和格式驗證不同，所以不能分開
                    //result.extend.errorFields.empName 格式驗證
                    //result.extend.empName 查重驗證
                    if(undefined != result.extend.errorFields ){
                        //格式錯誤
                        if(undefined != result.extend.errorFields.empName){
                            show_validate_msg("#empName_add_input","error",result.extend.errorFields.empName);
                        }
                    }else{
                        if(undefined != result.extend.empName){
                            //查重錯誤
                            show_validate_msg("#empName_add_input","error",result.extend.empName);
                        }
                    }
                    //郵箱格式判斷
                    if(undefined != result.extend.errorFields){
                        if(undefined != result.extend.errorFields.email){
                            show_validate_msg("#email_add_input","error",result.extend.errorFields.email);
                        }
                    }
                }
            }
        });
    });

    //新增保存信息--請求按鈕JQuery格式總校驗方法
    function validate_add_form() {
        console.log("validate_add_form()")
        //1.拿到校驗的數據，使用正則表達式
        //根據bootstrap提供的組件
        //校驗用戶名
        var empName = $("#empName_add_input").val();
        var regName = /(^[a-zA-Z0-9_-]{2,8}$)|(^[\u2E80-\u9FFF]{2,5})/;
        if (!regName.test(empName)) {
            //alert("用戶名可以是2-5位中文或者2-8位英文和數字的組合");
            show_validate_msg("#empName_add_input", "error", "用戶名可以是2-5位中文或者2-8位英文和數字的組合");
            return false;
        } else {
            show_validate_msg("#empName_add_input", "success", "");
        }
        //2、校驗郵箱信息
        var email = $("#email_add_input").val();
        var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if (!regEmail.test(email)) {
            //alert("郵箱格式不正確");
            show_validate_msg("#email_add_input", "error", "郵箱格式不正確");
            return false;
        } else {
            show_validate_msg("#email_add_input", "success", "");
        }
        //最后方法通過
        return true;
    }

    //新增保存信息--添加css樣式
    //show_validate_msg顯示校驗狀態，通過添加樣式，ele表示被選擇元素，status狀態
    //用來判斷是用什么樣式，綠色、紅色，msg提示信息
    function show_validate_msg(ele, status, msg) {
        //判斷之前先清空之前樣式
        $(ele).parent().removeClass("has-success has-error");
        $(ele).next("span").text("");
        if ("success" == status) {
            $(ele).parent().addClass("has-success");
            $(ele).next("span").text(msg)
        } else if ("error" == status) {
            $(ele).parent().addClass("has-error");
            $(ele).next("span").text(msg)
        }
    }
</script>

__EOF__

本文作者：蔚然丶丶
本文鏈接： https://www.cnblogs.com/wei-ran/p/16131419.html

在線咨詢

上一篇：有關微信小程序你想知道的都在這里
下一篇：PHP獲取指定網頁的HTML代碼并執行輸出

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商