10-Ajax&Vue

来源:https://www.cnblogs.com/OnlyOnYourself-lzw/archive/2022/08/03/16548136.html
-Advertisement-
Play Games

Ajax&Vue 1、Ajax 1.1、概述 AJAX(Asynchronous JavaScript And XML):非同步的JavaScript和XML 作用 1.與伺服器進行數據交換:通過ajax可以給伺服器發送請求,伺服器將數據直接響應回給瀏覽器。 如圖是沒使用Ajax的時候,各個請求之間的 ...


Ajax&Vue

1、Ajax

1.1、概述

  • AJAX(Asynchronous JavaScript And XML):非同步的JavaScript和XML
  • 作用
    • 1.與伺服器進行數據交換:通過ajax可以給伺服器發送請求,伺服器將數據直接響應回給瀏覽器。
      • 如圖是沒使用Ajax的時候,各個請求之間的流程
        • Servlet調用完業務邏輯層後將數據存儲到域對象中,然後跳轉到指定的JSP頁面,在頁面上使用EL表達式和JSTL標簽庫進行數據的展示
      • 在學習Ajax後,就可以使用Ajax和伺服器進行通信,以達到使用HTML+Ajax來替代JSP頁面
        • 在上圖中,瀏覽器發送請求給Servlet,Servlet調用完業務邏輯層後將數據直接響應回給瀏覽器頁面,頁面使用HTML來進行數據展示
    • 2.進行非同步交互:可以在不重新載入整個頁面的情況下(局部刷新),與伺服器交換數據並更新部分網頁的技術,如:搜索聯想、用戶名是否可用校驗,等等

1.2、同步和非同步的概念

  • 同步發送請求的過程如下所示
    • 瀏覽器頁面發送請求給伺服器,在伺服器處理請求的過程中,瀏覽器頁面不能做其他操作。只能等到伺服器響應結束之後,瀏覽器頁面才能繼續其他操作
  • 非同步發送請求的過程如下所示
    • 瀏覽器頁面發送請求給伺服器,在伺服器處理請求的過程中,瀏覽器頁面還可以做其他的操作

1.3、Ajax入門

1.3.1、客戶端代碼

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input><br>
        <input type="button" value="點我,我在睡覺" onclick="sendAjax()">
    </body>
    <script>
        function sendAjax() {
            //1.創建核心對象
            xmlhttp=null;
            if (window.XMLHttpRequest)
            {// code for IE7, Firefox, Opera, etc.
                xmlhttp=new XMLHttpRequest();
            }
            else if (window.ActiveXObject)
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
                //2.明確發送的請求方式和請求路徑
          xmlhttp.open("get","/day28/ajaxServlet?username=tom")
    
          //3.發送請求
          xmlhttp.send()
    
          //4.處理響應
          xmlhttp.onreadystatechange=function () {
              //當響應完成的時候且響應正常完成的時候
              if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                  alert(xmlhttp.responseText);
              }
          }
      }
        </script>
    
      </html>
    
    

1.3.2、服務端代碼

  • package com.itheima.web.servlet;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    @WebServlet(value = "/ajaxServlet")
    public class AjaxServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doGet(request, response);
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //獲取發送過來的參數
            String username = request.getParameter("username");
            System.out.println(username);
    
            //生成響應
            response.getWriter().print("ok~~~");
        }
    }
    

1.3.3、實現效果

  • 不難發現,點擊按鈕後,整個頁面並沒有發生跳轉,只是進行了局部的刷新

1.4、校驗用戶名是否存在案例(僅測試,不做過多的邏輯判斷)

1.4.1、需求

  • 在完成用戶註冊的時候,當用戶名輸入框失去焦點時,校驗用戶名是否在資料庫中存在

1.4.2、分析

  • 前端完成的邏輯
    • 1.給用戶名輸入框綁定游標失去焦點事件onblur
    • 2.發送ajax請求,攜帶username參數
    • 3.處理響應:是否顯示提示信息
  • 後端完成的邏輯
    • 1.接收用戶名
    • 2.調用service查詢User
    • 3.返回標記

1.4.3、整體流程圖

1.4.4、前端實現

  • Step1:給用戶名輸入框綁定游標失去焦點事件

    • //1. 給用戶名輸入框綁定 失去焦點事件
      document.getElementById("username").onblur = function () {
          
      }
      
  • Step2:發送ajax請求,攜帶username參數

    • //2. 發送ajax請求
      //2.1. 創建核心對象
      var xhttp;
      if (window.XMLHttpRequest) {
          xhttp = new XMLHttpRequest();
      } else {
          // code for IE6, IE5
          xhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      //2.2. 發送請求
      xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet);
      xhttp.send();
      
      //2.3. 獲取響應
      xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
              //處理響應的結果
          }
      };
      
    • 由於我們發送的是 GET 請求,所以需要在 URL 後拼接從輸入框獲取的用戶名數據。而我們在 第一步 綁定的匿名函數中通過以下代碼可以獲取用戶名數據

    • // 獲取用戶名的值
      var username = this.value;  //this : 給誰綁定的事件,this就代表誰
      
    • 而攜帶數據需要將 URL 修改為:

    • xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);
      
  • Step3:處理響應,根據響應判斷是否顯示提示信息

    • this.readyState == 4 && this.status == 200 條件滿足時,說明已經成功響應數據了

    • 此時需要判斷響應的數據是否是 "true" 字元串,如果是說明用戶名已經占用給出錯誤提示;如果不是說明用戶名未被占用清除錯誤提示。代碼如下

      • //判斷
        if(this.responseText == "true"){
            //用戶名存在,顯示提示信息
            document.getElementById("username_err").style.display = '';
        }else {
            //用戶名不存在 ,清楚提示信息
            document.getElementById("username_err").style.display = 'none';
        }
        
  • 完整JS代碼

    • //1. 給用戶名輸入框綁定 失去焦點事件
      document.getElementById("username").onblur = function () {
          //2. 發送ajax請求
          // 獲取用戶名的值
          var username = this.value;
      
          //2.1. 創建核心對象
          var xhttp;
          if (window.XMLHttpRequest) {
              xhttp = new XMLHttpRequest();
          } else {
              // code for IE6, IE5
              xhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          //2.2. 發送請求
          xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);
          xhttp.send();
      
          //2.3. 獲取響應
          xhttp.onreadystatechange = function() {
              if (this.readyState == 4 && this.status == 200) {
                  //alert(this.responseText);
                  //判斷
                  if(this.responseText == "true"){
                      //用戶名存在,顯示提示信息
                      document.getElementById("username_err").style.display = '';
                  }else {
                      //用戶名不存在 ,清楚提示信息
                      document.getElementById("username_err").style.display = 'none';
                  }
              }
          };
      }
      

1.4.5、後端實現

  • @WebServlet("/selectUserServlet")
    public class SelectUserServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //1. 接收用戶名
            String username = request.getParameter("username");
            //2. 調用service查詢User對象,此處不進行業務邏輯處理,直接給 flag 賦值為 true,表明用戶名占用
            boolean flag = true;
            //3. 響應標記
            response.getWriter().write("" + flag);
        }
    
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doGet(request, response);
        }
    }
    

1.4.6、實現效果

2、Axios

  • 概念
    • Axios是對原生的Ajax進行封裝,簡化書寫

2.1、基本使用

  • 1.引入axios的js文件

    • <script src="js/axios-0.18.0.js"></script>
      
  • 2.使用axios發送ajax請求

    • 發送get請求

      • axios({
            method:"get",
            url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
        }).then(function (resp){
            alert(resp.data);
        });
        
    • 發送post請求

      • axios({
            method:"post",
            url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
            data:"username=zhangsan"
        }).then(function (resp){
            alert(resp.data);
        });
        
  • 說明

    • axios()是用來發送非同步請求的,小括弧中使用js對象傳遞相關的參數
      • method屬性:用來設置請求方式的。取值為get或者post
      • url屬性:用來書寫請求的資源路徑。如果是get請求,需要將請求參數拼接到路徑的後面,格式為:url?參數名1=參數值1&參數名2=參數值2
      • data屬性:作為請求體被髮送的數據。也就是說如果是post請求的話。數據需要作為data屬性的值
    • then()需要傳遞一個匿名函數。then()中傳遞的匿名函數稱為回調函數,意思是該匿名函數在發送請求的時候不會被調用,而是在成功響應後調用的函數。
      • resp屬性是對響應的數據進行封裝的對象,通過resp.data可以獲取到響應的數據

2.2、基本使用

2.2.1、後端實現

  • @WebServlet("/axiosServlet")
    public class AxiosServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            System.out.println("get...");
            //1. 接收請求參數
            String username = request.getParameter("username");
            System.out.println(username);
            //2. 響應數據
            response.getWriter().write("hello Axios~");
        }
    
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            System.out.println("post...");
            this.doGet(request, response);
        }
    }
    

2.2.2、前端實現

  • 1.引入js文件

    • <script src="js/axios-0.18.0.js"></script>
      
  • 2.發送ajax請求

    • get請求

      • axios({
            method:"get",
            url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
        }).then(function (resp) {
            alert(resp.data);
        })
        
    • post請求

      • axios({
            method:"post",
            url:"http://localhost:8080/ajax-demo/axiosServlet",
            data:"username=zhangsan"
        }).then(function (resp) {
            alert(resp.data);
        })
        
  • 完整代碼

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>axios-demo</title>
      </head>
      <body>
          <input type="button" value="發送get請求" id="btn1">
          <input type="button" value="發送post請求" id="btn2">
      </body>
      <!--導入axios.js-->
      <script src="./js/axios-0.18.0.js"></script>
      <!--編寫axios的代碼-->
      <script>
          document.getElementById("btn1").onclick = function () {
            // axios({
            //     method: "get",
            //     url: "axiosServlet?username=tom"
            // }).then(function (response) {
            //     // console.log(response);
            //     // console.log(response.data);
            //     window.alert(response);
            //     window.alert(response.data);
            // });
      
            // axios更簡化的寫法
            axios.get("axiosServlet?username=tom").then(response => {
              console.log(response.data);
            });
          }
      
          document.getElementById("btn2").onclick = function () {
            // axios({
            //   method: "post",
            //   url: "axiosServlet",
            //   data: "username=tom"
            // }).then(function (response) {
            //   // console.log(response);
            //   // console.log(response.data);
            //     window.alert(response);
            //     window.alert(response.data);
            // });
      
            // axios更簡化的寫法
            axios.post("axiosServlet", "username=tom").then(response => {
              console.log(response.data);
            });
          }
      </script>
      </html>
      

2.2.3、實現效果

2.3、Axios請求方法別名

  • get 請求 : axios.get(url[,config])
  • delete 請求 : axios.delete(url[,config])
  • head 請求 : axios.head(url[,config])
  • options 請求 : axios.option(url[,config])
  • post 請求:axios.post(url[,data[,config])
  • put 請求:axios.put(url[,data[,config])
  • patch 請求:axios.patch(url[,data[,config])

PS:

  • axios會自動對JSON串進行轉換
  • 發送非同步請求時,如果請求參數是JSON格式,那請求方式必須是POST。因為JSON串需要放在請求體中

2.4、使用Axios和JSON完成學生列表數據查詢

雖然實現的效果差不多,但是實際上免去了JSTL中複雜的編寫格式

2.4.1、前端實現

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>學生信息</title>
    </head>
    <body>
    <hr>
    <table id="studentTable" border="1" cellspacing="0" width="800" align="center">
    
    </table>
    <script src="./js/axios-0.18.0.js"></script>
    <!--<script>window.alert("等待頁面載入.....");</script>-->
    <script>
        // 在頁面載入完成的時候,展示數據
        console.log("等待頁面載入.....");
        window.alert("等待頁面載入.....");
    
        window.onload = function () {
            window.alert("頁面載入成功,正在發送ajax請求!");
            // 發送ajax的get請求,獲取所有學生的信息
            axios.get("selectAllStudentsServlet").then(response => {
                // console.log(response.data);
                // 定義表格中的首行信息
                let startTr = "<tr>\n" +
                    "        <th>序號</th>\n" +
                    "        <th>學號</th>\n" +
                    "        <th>姓名</th>\n" +
                    "        <th>年齡</th>\n" +
                    "        <th>性別</th>\n" +
                    "        <th>語文成績</th>\n" +
                    "        <th>數學成績</th>\n" +
                    "        <th>英語成績</th>\n" +
                    "        <th>操作</th>\n" +
                    "    </tr>";
    
                // 定義表格中的末尾信息
                let endTr = "<tr align=\"center\">\n" +
                    "        <td></td>\n" +
                    "        <td></td>\n" +
                    "        <td></td>\n" +
                    "        <td></td>\n" +
                    "        <td></td>\n" +
                    "        <td></td>\n" +
                    "        <td></td>\n" +
                    "        <td></td>\n" +
                    "        <td><input type=\"button\" value=\"新增學生信息\" onclick=\"location.href=('#')\"></td>\n" +
                    "    </tr>";
    
                let middleTr = "";
                // 遍歷json數組,獲取每個學生對象
                // 獲取返回的json數組
                let arr = response.data;
                for (let i = 0; i < arr.length; i++) {
                    // 將每個品牌封裝成tr標簽
                    middleTr += "<tr align=\"center\">\n" +
                        "        <td>" + (i + 1) + "</td>\n" +
                        "        <td>" + (arr[i].stuNumber) + "</td>\n" +
                        "        <td>" + (arr[i].name) + "</td>\n" +
                        "        <td>" + (arr[i].age) + "</td>\n" +
                        "        <td>" + (arr[i].sex) + "</td>\n" +
                        "        <td>" + (arr[i].chineseScore) + "</td>\n" +
                        "        <td>" + (arr[i].mathScore) + "</td>\n" +
                        "        <td>" + (arr[i].englishScore) + "</td>\n" +
                        "        <td>\n" +
                        "            <input type=\"button\" src=\"#\" value=\"修改\">\n" +
                        "            <input type=\"button\" src=\"#\" value=\"刪除\">\n" +
                        "        </td>\n" +
                        "    </tr>";
                }
    
                // 將所有的tr標簽放入table標簽終
                document.getElementById("studentTable").innerHTML = startTr + middleTr + endTr;
                window.alert(document.getElementById("studentTable").innerHTML);
            });
        }
    </script>
    </body>
    </html>
    

2.4.2、後端實現

  • package com.coolman.web.servlet;
    
    import com.alibaba.fastjson.JSON;
    import com.coolman.pojo.Student;
    import com.coolman.service.StudentService;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.util.List;
    
    @WebServlet("/selectAllStudentsServlet")
    public class SelectAllStudentsServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doGet(request, response);
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // 在這裡處理請求
    
            // 調用服務,查詢所有學生信息
            List<Student> students = new StudentService().selectAllStudent();
    
            // 將List對象轉換成JSON格式的字元串
            String str = JSON.toJSONString(students);
    
            // 處理中文亂碼問題
            // 方案1
    //        response.setContentType("text/html;charset=utf-8");
            // 方案2
            response.setContentType("application/json;charset=utf-8");
    
            // 返回字元串
            response.getWriter().print(str);
    
        }
    }
    

2.5、使用Axios和JSON完成新增學生信息

2.5.1、前端實現

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>添加學生信息</title>
    </head>
    <body>
    <h3 align="center" style="color: red">添加學生信息</h3>
    <form>
        <div align="center">
            <span>學號:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input name="stuNumber" id="stuNumber">
                <br/>
                <span style="color: red" id="stuNumber_err_msg"></span>
                <br/>
            </span>
            <span>姓名:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input name="name" id="name">
                <br>
                <span style="color: red" id="name_err_msg"></span>
                <br>
            </span>
            <span>年齡:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input name="age" id="age">
                <br>
                <span style="color: red" id="age_err_msg"></span>
                <br>
            </span>
            <span>性別:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input name="sex" id="sex">
                <br>
                <span style="color: red" id="sex_err_msg"></span>
                <br>
            </span>
            <span>語文成績:
                <input name="chineseScore" id="chineseScore">
                <br>
                <span style="color: red" id="chineseScore_err_msg"></span>
                <br>
            </span>
            <span>數學成績:
                <input name="mathScore" id="mathScore">
                <br>
                <span style="color: red" id="mathScore_err_msg"></span>
                <br>
            </span>
            <span>英語成績:
                <input name="englishScore" id="englishScore">
                <br>
                <span style="color: red" id="englishScore_err_msg"></span>
                <br>
            </span>
    
            <input id="commit" type="button" value="提交">
        </div>
    </form>
    <script src="./js/axios-0.18.0.js"></script>
    <script>
        // 定義一個對象,接收輸入框中的信息
        let studentFormData = {
            stuNumber: "",
            name: "",
            age: "",
            sex: "",
            chineseScore: "",
            mathScore: "",
            englishScore: "",
        }
        // 判斷輸入框是否為空
        document.getElementById("stuNumber").onblur = function () {
            let stuNumber = this.value;
            if (stuNumber != "") {
                studentFormData.stuNumber = stuNumber;
            } else {
                document.getElementById("stuNumber_err_msg").innerText = "學號不能為空";
            }
        };
        document.getElementById("name").onblur = function () {
            let name = this.value;
            if (name != "") {
                studentFormData.name = name;
            } else {
                document.getElementById("name_err_msg").innerText = "姓名不能為空";
            }
        };
        document.getElementById("age").onblur = function () {
            let age = this.value;
            if (age != "") {
                studentFormData.age = age;
            } else {
                document.getElementById("age_err_msg").innerText = "年齡不能為空";
            }
        };
        document.getElementById("sex").onblur = function () {
            let sex = this.value;
            if (sex != "") {
                studentFormData.sex = sex;
            } else {
                document.getElementById("sex_err_msg").innerText = "性別不能為空";
            }
        };
        document.getElementById("chineseScore").onblur = function () {
            let chineseScore = this.value;
            if (chineseScore != "") {
                studentFormData.chineseScore = chineseScore;
            } else {
                document.getElementById("chineseScore_err_msg").innerText = "語文成績不能為空";
            }
        };
        document.getElementById("mathScore").onblur = function () {
            let mathScore = this.value;
            if (mathScore != "") {
                studentFormData.mathScore = mathScore;
            } else {
                document.getElementById("mathScore_err_msg").innerText = "數學成績不能為空";
            }
        };
        document.getElementById("englishScore").onblur = function () {
            let englishScore = this.value;
            if (englishScore != "") {
                studentFormData.englishScore = englishScore;
            } else {
                document.getElementById("englishScore_err_msg").innerText = "英語成績不能為空";
            }
        };
    
        // 綁定提交事件
        document.getElementById("commit").onclick = function () {
            // 判斷對象是否存在數據
            // 不存在則不發送添加學生信息的請求
            if (studentFormData.name != "" && studentFormData.age != "" && studentFormData.sex != "" && studentFormData.stuNumber != ""
                && studentFormData.chineseScore != "" && studentFormData.mathScore != "" && studentFormData.englishScore != ""
            ) {
                // 發送ajax請求,添加學生數據
                axios.post("addStudentServlet", studentFormData).then(response => {
                    if (response.data == "ok") {
                        location.href = "studentList.html";
                    }
                });
            } else {
                window.alert("請補全信息!");
            }
        }
    </script>
    </body>
    </html>
    

2.5.2、後端實現

  • package com.coolman.web.servlet;
    
    import com.alibaba.fastjson.JSON;
    import com.coolman.pojo.Student;
    import com.coolman.service.StudentService;
    
    import javax.servlet.ServletException;
    import javax.servlet.ServletInputStream;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    @WebServlet("/addStudentServlet")
    public class AddStudentServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doGet(request, response);
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // 在這裡處理請求
    
            //1.獲取請求體中的流
            ServletInputStream is = request.getInputStream();
    
            //2.把流轉成java對象
            Student student = JSON.parseObject(is, Student.class);
    
            //3.調用service中保存方法
            new StudentService().addStudent(student);
    
            //4.通知前端保存成功
            response.getWriter().print("ok");
        }
    }
    

3、Vue

3.1、概念

  • Vue是一套前端框架,免除原生JavaScript中的DOM操作,簡化書寫。其基於MVVM(Model-View-ViewModel)思想,實現數據的雙向綁定,將編程的關註點放在數據上。
  • MVC思想圖解
    • MVC:只能實現模型到視圖的單向展示,無法實現雙向綁定。
    • 雙向綁定的概念
      • 指的是當數據模型的數據發生變化的時候,頁面展示也會隨之發生變化,而如果表單數據發生變化,綁定的模型數據也隨之發生變化。
  • MVVM思想圖解
    • 圖中的Model就是我們的數據,View是視圖,也就是頁面標簽,用戶可以通過瀏覽器看到的內容
    • Model和View是通過ViewModel對象進行雙向綁定的,而ViewModel對象是Vue提供的
  • MVVM簡單示例
    • 輸入框綁定username模型數據,頁面上使用{{}}綁定username模型數據
    • 通過瀏覽器打開該頁面可以看到如下頁面
    • 當我們在輸入框中輸入內容的同時,輸入框後面也隨之實時的展示我們輸入的內容,這就是雙向綁定的效果

3.2、Vue入門

  • Vue使用起來比較簡單,可以分為如下三步

    • 1.新建HTML頁面,引入Vue.js文件

      • <script src="js/vue.js"></script>
        
    • 2.在js代碼區域,創建Vue核心對象,進行數據綁定

      • new Vue({
            el: "#app",
            data() {
                return {
                    username: ""
                }
            }
        });
        
      • 創建Vue對象的時候,需要傳遞一個js對象,而該對象中需要如下屬性:

        • el:用來指定哪些標簽受Vue管理,該屬性取值#app中的app需要的是受管理的標簽的id屬性值
        • data:用來定義數據模型
        • methods:用來定義函數
    • 3.編寫視圖

      • <div id="app">
            <input name="username" v-model="username" >
            {{username}}
        </div>
        
      • {{}}是Vue中定義的插值表達式,在裡面寫數據模型,到時候會將該模型的數據值展示在這個位置

  • 整體代碼如下

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      </head>
      <body>
      <div id="app">
          <input v-model="username">
          <!--插值表達式-->
          {{username}}
      </div>
      <script src="js/vue.js"></script>
      <script>
          //1. 創建Vue核心對象
          new Vue({
              el:"#app",
              data(){  // data() 是 ECMAScript 6 版本的新的寫法
                  return {
                      username:""
                  }
              }
      
              /*data: function () {
                  return {
                      username:""
                  }
              }*/
          });
      
      </script>
      </body>
      </html>
      

3.3、Vue指令

  • 指令:HTML標簽上帶有v-首碼的特殊屬性,不同指令具有不同含義。例如:v-if,v-for....

  • 常用的指令如下所示

    • 指令 作用
      v-bind 為HTML標簽綁定屬性值,如設置href,css樣式等等
      v-model 在表單元素上創建雙向數據綁定
      v-on 為HTML標簽綁定事件
      v-if 條件性的渲染某元素,判定為true的時候渲染,否則不渲染
      v-else 同if-else
      v-else-if 同if-else if-else
      v-show 根據條件展示某元素,區別在於切換的是display屬性的值
      v-for 列表渲染,遍歷容器的元素或者對象的屬性

3.3.1、v-bind示例

  • <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--
                v-bind  該指令可以給標簽原有屬性綁定模型數據
                v-bind  可以簡化寫成 :
             -->
            <a v-bind:href="url">點我一下</a><br/>
            <a :href="url">點我一下</a><br/>
        </div>
    </body>
    <!--導入vue.js-->
    <script src="../js/vue.js"></script>
    <!--定義vue對象-->
    <script>
        new Vue({
            el: "#app",
            data: {
                url: "https://www.baidu.com"
            }
        })
    </script>
    </html>
    
    • 通過瀏覽器打開該頁面,可以發現,鏈接標簽就綁定了data中的url數據模型

3.3.2、v-model示例

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <a :href="url">點我一下</a><br/>
            <!--
                 v-model 指令可以給表單項標簽綁定模型數據,這樣就能實現雙向綁定效果
            -->
            <input v-model="url"/>
        </div>
    </body>
    <!--導入vue.js-->
    <script src="../js/vue.js"></script>
    
    <!--定義vue對象-->
    <script>
        new Vue({
            el:"#app",
            data:{
                url:"https://www.bing.com"
            }
        });
    </script>
    </html>
    
    • 通過瀏覽器打開該頁面,發現a標簽的href屬性會隨著輸入框輸入的路徑變化而變化,這是因為超鏈接和輸入框綁定的是同一個數據模型

3.3.3、v-on示例

  • <!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--
                 v-on 指令用於綁定事件,具體方法邏輯需要在vue的methods屬性中體現
                 v-on 可以簡寫為 @
            -->
            <input type="button" value="點我44" v-on:click="show1()"/>
            <input type="button" value="點我44" v-on:click="show2"/>
            <input type="button" value="點我44" @click="show3()"/>
        </div>
    </body>
    <!--導入vue.js-->
    <script src="../js/vue.js"></script>
    
    <!--定義vue對象-->
    <script>
        new Vue({
            el:"#app",
            data:{
            },
            methods: {
                show1() {
                    alert("我被點了,嚶嚶嚶");
                },
                show2() {
                    alert("我又被點了,嚶嚶嚶");
                },
                show3() {
                    alert("我又又被點了,嚶嚶嚶");
                }
            }
        });
    </script>
    </html>
    
    • v-on:後面的事件名稱是之前原生事件屬性名去掉on
    • 例如
      • 單擊事件:事件屬性名是onclick,而在vue中使用的是:v-on:onclick
      • 失去焦點事件:事件屬性名是onblur,而在vue中使用的是:v-on:blur

3.3.4、v-if示例

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--
            語法:
                 v-if="布爾表達式"  v-else-if="布爾表達式"   v-else
            註意:
                當得到結果為true時,所在的元素才會被渲染
                v-else-if或v-else元素必須跟在v-if的元素的後面,否則它將不會被識別
            -->
            <!--從文本框輸入成績, 然後判斷成績是否及格  >=60:及格  <60:不及格  其他數字:超出範圍 非數字:數據非法-->
            <h3>考試成績練習</h3>
            請輸入成績:<input type="text" v-model="score"><br>
            你本次考試成績:
            <div v-if="score == ''"></div>
            <div v-else-if="score > 100 || score < 0">超出範圍</div>
            <div v-else-if="score >= 60">及格</div>
            <div v-else-if="score < 60">不及格</div>
            <div v-else>數據非法</div>
    
            <hr>
            <div v-show="score==100">滿分</div>
        </div>
    </body>
    <!--導入vue.js-->
    <script src="../js/vue.js"></script>
    
    <!--定義vue對象-->
    <script>
        new Vue({
            el:"#app",
            data:{
                score:"",
            },
        });
    </script>
    </html>
    

3.3.5、v-for示例

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--
            語法:
                <標簽 v-for="(變數名,索引) in 集合模型數據">
                    {{變數名}}
                </標簽>
            註意:
                遍歷那個標簽就把v-for寫在那個標簽中
                不需要索引時可以不寫,這時候小括弧也可以省略
            -->
            <ul>
                <li v-for="city in cities">{{city}}</li>
            </ul>
            <hr/>
            <ul>
                <li v-for="(city, index) in cities">
                    {{index + 1}}   :   {{city}}
                </li>
            </ul>
        </div>
    </body>
    <!--導入vue.js-->
    <script src="../js/vue.js"></script>
    
    <!--定義vue對象-->
    <script>
        new Vue({
            el:"#app",
            data:{
                cities:["北京", "上海", "廣州", "深圳"]
            }
        });
    </script>
    </html>
    

3.3.6、生命周期

  • 聲明周期的八個階段,每觸發一個生命周期事件,會自動執行一個生命周期方法,這些生命周期方法也被稱為鉤子方法

    • 狀態 階段周期
      beforeCreate 創建前
      created 創建後
      beforeMount 載入前
      mounted 掛載完成
      beforeUpdate 更新前
      updated 更新後
      beforeDestory 銷毀前
      destoryed 銷毀後
  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--
            -->
        </div>
    </body>
    <!--導入vue.js-->
    <script src="../js/vue.js"></script>
    
    <!--定義vue對象-->
    <script>
        new Vue({
            el:"#app",
            mounted() {
                console.log("I am mounted method");
            },
            created() {
                console.log("I am create method");
            }
        });
    </script>
    </html>
    

3.4、使用Vue簡化基於ajax做的查詢所有和添加功能

3.4.1、學生列表信息頁面

  • 前端實現

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>學生信息</title>
      </head>
      <body>
      <hr>
      <table id="studentTable" border="1" cellspacing="0" width="800" align="center">
          <tr>
              <th>序號</th>
              <th>學號</th>
              <th>姓名</th>
              <th>年齡</th>
              <th>性別</th>
              <th>語文成績</th>
              <th>數學成績</th>
              <th>英語成績</th>
              <th>操作</th>
          </tr>
      
          <tr align="center" v-for="(student, index) in students">
              <td>{{index + 1}}</td>
              <td>{{student.stuNumber}}</td>
              <td>{{student.name}}</td>
              <td>{{student.age}}</td>
              <td>{{student.sex}}</td>
              <td>{{student.chineseScore}}</td>
              <td>{{student.mathScore}}</td>
              <td>{{student.englishScore}}</td>
              <td><a href="#">修改</a> <a href="#">刪除</a></td>
          </tr>
      
          <tr align="center">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td><input type="button" value="新增學生信息" onclick="location.href=('addStudent.html')"></td>
          </tr>
      </table>
      <script src="./js/axios-0.18.0.js"></script>
      <!--導入vue.js-->
      <script src="./js/vue.js"></script>
      <script>
          new Vue({
              el: "#studentTable",
              data: {
                  students: []
              },
              created(){
                  axios.get("selectAllStudentsServlet").then(response => {
                      this.students = response.data;
                  })
              }
          });
      </script>
      </body>
      </html>
      
  • 後端實現

    • package com.coolman.web.servlet;
      
      import com.alibaba.fastjson.JSON;
      import com.coolman.pojo.Student;
      import com.coolman.service.StudentService;
      
      import javax.servlet.ServletException;
      import javax.servlet.annotation.WebServlet;
      import javax.servlet.http.HttpServlet;
      import javax.servlet.http.HttpServletRequest;
      import javax.servlet.http.HttpServletResponse;
      import java.io.IOException;
      import java.util.List;
      
      @WebServlet("/selectAllStudentsServlet")
      public class SelectAllStudentsServlet extends HttpServlet {
          protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
              doGet(request, response);
          }
      
          protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
              // 在這裡處理請求
      
              // 調用服務,查詢所有學生信息
              List<Student> students = new StudentService().selectAllStudent();
      
              // 將List對象轉換成JSON格式的字元串
              String str = JSON.toJSONString(students);
      
              // 處理中文亂碼問題
              // 方案1
      //        response.setContentType("text/html;charset=utf-8");
              // 方案2
              response.setContentType("application/json;charset=utf-8");
      
              // 返回字元串
              response.getWriter().print(str);
      
          }
      }
      
      

3.4.2、添加學生信息

  • 前端實現

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>添加學生信息</title>
      </head>
      <body>
      <h3 align="center" style="color: red">添加學生信息</h3>
      <form>
          <div align="center" id="addStudent">
              <span>學號:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <input name="stuNumber" id="stuNumber" v-model="student.stuNumber">
                  <br/>
                  <span style="color: red" id="stuNumber_err_msg"></span>
                  <br/>
              </span>
              <span>姓名:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <input name="name" id="name" v-model="student.name">
                  <br>
                  <span style="color: red" id="name_err_msg"></span>
                  <br>
              </span>
              <span>年齡:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <input name="age" id="age" v-model="student.age">
                  <br>
                  <span style="color: red" id="age_err_msg"></span>
                  <br>
              </span>
              <span>性別:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <input name="sex" id="sex" v-model="student.sex">
                  <br>
                  <span style="color: red" id="sex_err_msg"></span>
                  <br>
              </span>
              <span>語文成績:
                  <input name="chineseScore" id="chineseScore" v-model="student.chineseScore">
                  <br>
                  <span style="color: red" id="chineseScore_err_msg"></span>
                  <br>
              </span>
              <span>數學成績:
                  <input name="mathScore" id="mathScore" v-model="student.mathScore">
                  <br>
                  <span style="color: red" id="mathScore_err_msg"></span>
                  <br>
              </span>
              <span>英語成績:
                  <input name="englishScore" id="englishScore" v-model="student.englishScore">
                  <br>
                  <span style="color: red" id="englishScore_err_msg"></span>
                  <br>
              </span>
      
              <input id="commit" type="button" value="提交" v-on:click="add()">
          </div>
      </form>
      <script src="./js/axios-0.18.0.js"></script>
      <script src="./js/vue.js"></script>
      <script>
          new Vue({
              el: "#addStudent",
              data: {
                  student: {
                      stuNumber: "",
                      name: "",
                      age: "",
                      sex: "",
                      chineseScore: "",
                      mathScore: "",
                      englishScore: "",
                  }
              },
              methods: {
                  add() {
                      axios.post("addStudentServlet", this.student).then(response =>{
                          if (response.data == "ok") {
                              window.location.href = "studentList.html";
                          }
                      })
                  }
              }
          })
      </script>
      </body>
      </html>
      
  • 後端實現

    • package com.coolman.web.servlet;
      
      import com.alibaba.fastjson.JSON;
      import com.coolman.pojo.Student;
      import com.coolman.service.StudentService;
      
      import javax.servlet.ServletException;
      import javax.servlet.ServletInputStream;
      import javax.servlet.annotation.WebServlet;
      import javax.servlet.http.HttpServlet;
      import javax.servlet.http.HttpServletRequest;
      import javax.servlet.http.HttpServletResponse;
      import java.io.IOException;
      
      @WebServlet("/addStudentServlet")
      public class AddStudentServlet extends HttpServlet {
          protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
              doGet(request, response);
          }
      
          protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
              // 在這裡處理請求
      
              //1.獲取請求體中的流
              ServletInputStream is = request.getInputStream();
      
              //2.把流轉成java對象
              Student student = JSON.parseObject(is, Student.class);
      
              //3.調用service中保存方法
              new StudentService().addStudent(student);
      
              //4.通知前端保存成功
              response.getWriter().print("ok");
          }
      }
      

4、總結

導入axios的js文件

axios.get("url?key=value").then(r=>{ r.data });

axios.post("url","key=value").then(r=>{ r.data });

導入vue的js文件

在script標簽中定義vue變數

new Vue({
	el:"#id值",//指定渲染的標簽
	data:{},//聲明數據
	methods:{},//聲明vue綁定的事件方法
	created(){},//頁面載入成功
	mounted(){}//也可以認為是頁面載入成功
});

指令:

  • v-bind
  • v-model
  • v-on
  • v-if v-else-if v-else
  • v-show
  • v-for

vue生命周期函數

  • created或者mounted均可替代頁面載入成功

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • likeshop回收租賃系統適用於物品回收、物品租賃、二手買賣交易等三大場景。 系統支持智能評估回收價格,後臺調整最終回收價,用戶同意回收後系統即刻放款,用戶微信零錢提現。支持線上生成租賃合同,交付租賃押金,生成分期付款合約,逾期自動計算滯納金。 功能強大,流程嚴謹,無論運營還是二開都是性價比極高的 ...
  • 1 屏幕共用功能介紹 屏幕共用是指在視頻通話或互動直播過程中將屏幕內容以視頻的方式分享給其他的觀眾,以增強互動體驗,提高溝通效率。屏幕共用解決方案提升了用戶實時視頻通話的溝通效率。 屏幕共用在如下場景中應用廣泛: 視頻會議場景中,屏幕共用可以將講話者本地的文件、數據、網頁、PPT 等畫面分享給其他與 ...
  • 一.WXML模板語法 1.1 數據綁定 綁定內容 跟vue差不多,在頁面的js文件定義到data裡面 然後通過插值語法用在wxml中即可 綁定屬性 直接寫上插值語法,沒有: 三元運算 生成一個十以內的隨機數 算數運算 1.2 事件綁定 小程式常用事件 小程式事件對象常用屬性 target和curre ...
  • 七夕情人節到了,各種App都要忙著上新,抓住互聯網產品的節日熱點,結合應用的類別進行活動營銷。比如購物類App會在節日進行大促;旅游類App會推出各種優惠活動;短視頻和拍照App會推出各種節日限定特效、專屬貼紙等。 尤其是游戲類App,具有較強的社交屬性,在節日熱點一般都會進行版本更新,上線新皮膚新 ...
  • 接上一篇 V8 中的快慢屬性,本篇分析V8 中的快慢數組,瞭解數組全填充還是帶孔、快慢數組、快慢轉化、動態擴縮容等等。 ...
  • BOM的概述: bom 稱為瀏覽器對象模型(bowser object model),也就意味他可以獲取瀏覽器上的所有內容以及相關的操作。BOM缺乏規範的,存在共有對象來解決這個問題,但是共有對象也存在相容問題(ie10以後) window 概述: window是頂層對象 屬於golbal對象。他是 ...
  • 對象及日期定時器 Date日期 日期對象的定義(使用new關鍵詞) 1.獲取當前的時間(本地的時間)!!! var date = new Date() //不傳參就是獲取當前時間 2.獲取指定的時間 var date = new Date(123456) //一個參數毫秒值 將這個毫秒值去加上對應的 ...
  • 1、Element簡介 Element是餓了麽公司前端開發團隊提供的一套基於Vue的網站組件庫,用於快速構建網頁 Element提供了很多組件(組成網頁的部件)供我們使用。 官方網站 https://element.eleme.cn/#/zh-CN 2、快速入門 2.1、將相關的element-ui ...
一周排行
    -Advertisement-
    Play Games
  • Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 視頻教學 介紹 MiniWord .NET Word模板引擎,藉由Word模板和數據簡單、快速生成文件。 Getting Started 安裝 nuget link : https:// ...
  • Array.Sort Array類中相當實用的我認為是Sort方法,相比起冗長的冒泡排序,它的出現讓排序更加的簡化 結果如下: 還可以聲明一個靜態方法用來專門調用指定數組排序,從名為 array 的一維數組中 a 索引處開始,到 b 元素 從小到大排序。 註意: a + b 不能大於 array 的 ...
  • 前言 在上一篇文章CLR類型系統概述里提到,當運行時掛起時, 垃圾回收會執行堆棧遍歷器(stack walker)去拿到堆棧上值類型的大小和堆棧根。這裡我們來翻譯BotR里一篇專門介紹Stackwalking的文章,希望能加深理解。 順便說一句,StackWalker在中文里似乎還沒有統一的翻譯,J ...
  • 使用過 nginx 的小伙伴應該都知道,這個中間件是可以設置跨域的,作為今天的主角,同樣的 反向代理中間件的 YARP 毫無意外也支持了跨域請求設置。 有些小伙伴可能會問了,怎樣才算是跨域呢? 在 HTML 中,一些標簽,例如 img、a 等,還有我們非常熟悉的 Ajax,都是可以指向非本站的資源的 ...
  • 什麼是Git Git 是一個開源的分散式版本控制系統,用於敏捷高效地處理任何或小或大的項目。 Git 是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟體。 Git 與常用的版本控制工具 CVS, Subversion 等不同,它採用了分散式版本庫的 ...
  • 首先CR3是什麼,CR3是一個寄存器,該寄存器內保存有頁目錄表物理地址(PDBR地址),其實CR3內部存放的就是頁目錄表的記憶體基地址,運用CR3切換可實現對特定進程記憶體地址的強制讀寫操作,此類讀寫屬於有痕讀寫,多數驅動保護都會將這個地址改為無效,此時CR3讀寫就失效了,當然如果能找到CR3的正確地址... ...
  • 說明 onlyoffice為一款開源的office線上編輯組件,提供word/excel/ppt編輯保存操作 以下操作均基於centos8系統,officeonly鏡像版本7.1.2.23 鏡像下載地址:https://yunpan.360.cn/surl_y87CKKcPdY4 (提取碼:1f92 ...
  • 二叉樹查找指定的節點 前序查找的思路 1.先判斷當前節點的no是否等於要查找的 2.如果是相等,則返回當前節點 3.如果不等,則判斷當前節點的左子節點是否為空,如果不為空,則遞歸前序查找 4.如果左遞歸前序查找,找到節點,則返回,否繼續判斷,當前的節點的右子節點是否為空,如果不為空,則繼續向右遞歸前 ...
  • ##Invalid bound statement (not found)出現原因和解決方法 ###前言: 想必各位小伙伴在碼路上經常會碰到奇奇怪怪的事情,比如出現Invalid bound statement (not found),那今天我就來分析以下出現此問題的原因。 其實出現這個問題實質就是 ...
  • ###一、背景知識 爬蟲的本質就是一個socket客戶端與服務端的通信過程,如果我們有多個url待爬取,只用一個線程且採用串列的方式執行,那隻能等待爬取一個結束後才能繼續下一個,效率會非常低。 需要強調的是:對於單線程下串列N個任務,並不完全等同於低效,如果這N個任務都是純計算的任務,那麼該線程對c ...