Ajax+Vue+ElementUI-Toy模板网

这篇具有很好参考价值的文章主要介绍了Ajax+Vue+ElementUI。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.Ajax

1.1 介绍

Ajax（Asynchronous JavaScript and XML）异步的 JavaScript 和 XML。
是一种用于在浏览器和服务器之间进行异步数据交互的技术。

它允许在不刷新整个页面的情况下，通过 JavaScript 发送 HTTP 请求并接收服务器返回的数据。

在后台进行数据交换，更新页面的部分内容，而不会造成页面的重载

AJAX 作用

与服务器进行数据交换：
通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器。

异步交互：
可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等

1.2 Ajax快速入门

服务端实现
在项目的创建 com.itheima.web.servlet ，并在该包下创建名为 AjaxServlet的servlet

package com.web;

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("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       //响应数据
        resp.getWriter().write("hello ajax~~~~");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req, resp);
    }
}

客户端实现
在 webapp 下创建名为 ajax-demo1.html 的页面，在该页面书写 ajax 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hell</h1>
<script>
    //1. 创建核心对象
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    //2. 发送请求
    xhttp.open("GET", "http://localhost:81/ajaxServlet");
    xhttp.send();

    //3. 获取响应
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            alert(this.responseText);
        }
    };
</script>
</body>
</html>

Ajax+Vue+ElementUI,ajax,vue.js,elementui

1.3 案例-用户注册时，检测用户名是否数据库已经存在

Ajax+Vue+ElementUI,ajax,vue.js,elementui

前端完成的逻辑

给用户名输入框绑定光标失去焦点事件 onblur

发送 ajax请求，携带username参数

处理响应：是否显示提示信息

后端完成的逻辑

接收用户名

调用service查询User。此案例是为了演示前后端异步交互，所以此处我们不做业务逻辑处理

返回标记

前端实现

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


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>
<div class="form-div">

    <div class="reg-content" id="errorMsg">${login_msg} ${register_msg}
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.jsp">登录</a>
    </div>
    <form id="reg-form" action="/registerServlet" method="post">
        <table>
            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display:none">用户名已经存在</span>
                </td>
            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>
            <tr>
                <td>验证码</td>
                <td class="inputs">
                    <input name="checkCode" type="text" id="checkCode">
<%--                    <img src="imgs/a.jpg">--%>
                    <img id="checkCodeImg" src="/checkCodeServlet">
                    <a href="#" id="changeImg" >看不清？</a>
                </td>
            </tr>
            <script>
                document.getElementById("changeImg").onclick = function () {
                    //路径后面添加时间戳的目的是避免浏览器进行缓存静态资源
                    document.getElementById("checkCodeImg").src = "/checkCodeServlet?"+new Date().getMilliseconds();
                }
            </script>

        </table>
        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>
</div>

<script>
    //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:81/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';
                }
            }
        };

    }
</script>
</body>
</html>

后端实现

定义名为 SelectUserServlet 的servlet。代码如下：

package com.web;

import com.pojo.User;
import com.service.UserService;

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 javax.servlet.http.HttpSession;
import java.io.IOException;

@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {
    private UserService service = new UserService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 接收用户名
        String username = request.getParameter("username");
        System.out.println(username);
        //2. 调用service查询User对象，此处不进行业务逻辑处理，直接给 flag 赋值为 true，表明用户名占用
        User user = service.selectByUserName(username);
        boolean flag = false;
        if(user!=null){
            flag = true;
        }

        //3. 响应标记
        response.getWriter().write("" + flag);


    }

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

测试
Ajax+Vue+ElementUI,ajax,vue.js,elementui

1.4 Axios

官方文档：https://www.axios-http.cn/

Axios是对原生的AJAX进行封装，用于简化书写
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

1.4.1 Axios快速入门

引入 axios 的 js 文件

<script src="js/axios-0.18.0.js"></script>

Ajax+Vue+ElementUI,ajax,vue.js,elementui

使用axios 发送请求，并获取响应结果

发送 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?参数名=参数值&参数名2=参数值2。
data 属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

1.4.2 请求别名

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])

入门案例中的 get 请求代码可以改为如下：

axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {
    alert(resp.data);
});

入门案例中的 post 请求代码可以改为如下：

axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (resp) {
    alert(resp.data);
})

1.5 JSON

概念：JavaScript Object Notation：JavaScript 对象表示法
作用：json 格式数据的简单，以及所占的字节数少等优点。作为数据的载体在网络中进行数据传输

如下是 JavaScript 对象的定义格式：

{
	name:"zhangsan",
	age:23,
	city:"北京"
}

AJAX 的格式：

<student>
    <name>张三</name>
    <age>23</age>
    <city>北京</city>
</student>

JSON 的格式：

{
	"name":"zhangsan",
	"age":23,
	"city":"北京"
}

1.5.1 Json的基础语法

JSON 本质就是一个字符串，但是该字符串内容是有一定的格式要求的。

var 变量名 = '{"key":value,"key":value,...}';

JSON 串的键要求必须使用双引号括起来，而值根据要表示的类型确定。value 的数据类型分为如下

数字（整数或浮点数）

字符串（使用双引号括起来）

逻辑值（true或者false）

数组（在方括号中）

对象（在花括号中）

null
示例：

var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'

创建一个页面，在该页面的 <script> 标签中定义json字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //1. 定义JSON字符串
    var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'
    alert(jsonStr);

</script>
</body>
</html>

获取该 JSON 中的值
如果它是一个 js 对象，我们就可以通过 js对象.属性名 的方式来获取数据。JS 提供了一个对象 JSON ，该对象有如下两个方法：

parse(str) ：将 JSON串转换为 js 对象。
使用方式是： var jsObject = JSON.parse(jsonStr);

stringify(obj) ：将 js 对象转换为 JSON 串。
使用方式是：var jsonStr = JSON.stringify(jsObject)

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //1. 定义JSON字符串
    var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'
    alert(jsonStr);

    //2. 将 JSON 字符串转为 JS 对象
    let jsObject = JSON.parse(jsonStr);
    alert(jsObject)
    alert(jsObject.name)
    //3. 将 JS 对象转换为 JSON 字符串
    let jsonStr2 = JSON.stringify(jsObject);
    alert(jsonStr2)
</script>
</body>
</html>

应用

使用 axios 发送请求时，如果要携带复杂的数据时都会以 JSON 格式进行传递，如下

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

JS对象的封装

var jsObject = {name:"张三"};

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo/axiosServlet",
    data:jsObject  //这里 axios 会将该js对象转换为 json 串的
}).then(function (resp) {
    alert(resp.data);
})

1.5.2 FastJson的使用

Fastjson 是阿里巴巴提供的一个Java语言编写的高性能功能完善的 JSON 库，是目前Java语言中最快的 JSON 库，可以实现 Java 对象和 JSON 字符串的相互转换。

5.3.2 Fastjson 使用

Fastjson 使用也是比较简单的，分为以下三步完成

导入坐标

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.62</version>
</dependency>

Java对象转JSON
```
String jsonStr = JSON.toJSONString(obj);
```
将 Java 对象转换为 JSON 串，只需要使用 Fastjson 提供的 JSON 类中的 toJSONString() 静态方法即可。
JSON字符串转Java对象
```
User user = JSON.parseObject(jsonStr, User.class);
```
将 json 转换为 Java 对象，只需要使用 Fastjson 提供的 JSON 类中的 parseObject() 静态方法即可。

测试

```java
  public class FastJsonDemo {
  
      public static void main(String[] args) {
          //1. 将Java对象转为JSON字符串
          User user = new User();
          user.setId(1);
          user.setUsername("zhangsan");
          user.setPassword("123");
  
          String jsonString = JSON.toJSONString(user);
          System.out.println(jsonString);//{"id":1,"password":"123","username":"zhangsan"}
  
  
          //2. 将JSON字符串转为Java对象
          User u = JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}", User.class);
          System.out.println(u);
      }
  }

2. Vue

2.1 介绍

官网：

Vue 是一款流行的前端 JavaScript 框架，用于构建用户界面。

免除原生JavaScript中的DOM操作，简化书写
DOM 操作指的是使用 JavaScript 来访问、修改和操作文档对象模型（DOM）中的元素、属性和内容的过程。

基于MVVM思想，实现数据的双向绑定

2.2 Vue快速入门

https://cn.vuejs.org/

步骤：

新建 HTML 页面，引入 Vue.js文件
```
<script src="js/vue.js"></script>
```

Ajax+Vue+ElementUI,ajax,vue.js,elementui

在JS代码区域，创建Vue核心对象，进行数据绑定
```
new Vue({
    el: "#app",
    data() {
        return {
            username: ""
        }
    }
});
```
创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：
- el ：用来指定哪儿些标签受 Vue 管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值
- data ：用来定义数据模型
- methods ：用来定义函数。这个我们在后面就会用到
编写视图
```
<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>

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello vue</h1>

<div id="app">
<!--    使用了 v-model 指令来实现双向数据绑定-->
    <input v-model:id="username">
<!--    插值表达式，它会将 username 的值动态地显示在页面上-->
    {{username}}}
</div>



<!--引入vue文件-->
<script src = "js/vue.js"></script>
<script>
    //1.创建vue核心对象，并将其绑定到id为”app“的元素上
    //这个vue实例包括名为username的数据属性，初始值为空
    new vue({
        el:"#app",
        data:function (){
            return{
                username:""
            }
        }
    });

</script>

</body>>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>hello vue</h1>
<div id = "app">
    <input v-model="username">
    {{username}}
</div>

<script src = "js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                username:""
            }
        }
    });
</script>

</body>
</html>

Ajax+Vue+ElementUI,ajax,vue.js,elementui

2.3 Vue常用指令和生命周期

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-else-if
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

v-bind

该指令可以给标签原有属性绑定模型数据。这样模型数据发生变化，标签属性值也随之发生变化

例如：
```
<a v-bind:href="url">百度一下</a>
```
上面的 v-bind:" 可以简化写成 : ，如下：
```

<a :href="url">百度一下</a>
```

v-model

该指令可以给表单项标签绑定模型数据。这样就能实现双向绑定效果。例如：
```
<input name="username" v-model="username">
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <a v-bind:href="url">点击一下</a>
    <a :href="url">点击一下</a>
    <input v-model="url">
</div>

<script src="js/vue.js"></script>
<script>
    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                url:"https://www.baidu.com"
            }
        }
    });
</script>
</body>
</html>

Ajax+Vue+ElementUI,ajax,vue.js,elementui

3. ElementUI

Element UI 是一个基于 Vue 的前端 UI 框架，提供了丰富的可复用的 UI 组件，可用于快速构建漂亮和功能丰富的用户界面

Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。

Element 提供了很多组件（组成网页的部件）供我们使用。例如超链接、按钮、图片、表格等等

3.1 快速入门

将资源 element-ui 文件夹直接拷贝到项目的 webapp 下。

创建页面，并在页面引入Element 的css、js文件和 Vue.js

<script src="vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

.创建Vue核心对象

Element 是基于 Vue 的，所以使用Element时必须要创建 Vue 对象
```
<script>
    new Vue({
        el:"#app"
    })
</script>
```
官网复制Element组件代码

在左菜单栏找到 Button 按钮 ，然后找到自己喜欢的按钮样式，点击 显示代码 ，在下面就会展示出对应的代码，将这些代码拷贝到我们自己的页面即可。

整体页面代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">


    <el-row>
     	<el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">删除</el-button>
    </el-row>
    <el-row>
        <el-button plain>朴素按钮</el-button>
        <el-button type="primary" plain>主要按钮</el-button>
        <el-button type="success" plain>成功按钮</el-button>
        <el-button type="info" plain>信息按钮</el-button>
        <el-button type="warning" plain>警告按钮</el-button>
        <el-button type="danger" plain>危险按钮</el-button>
    </el-row>

    <el-row>
        <el-button round>圆角按钮</el-button>
        <el-button type="primary" round>主要按钮</el-button>
        <el-button type="success" round>成功按钮</el-button>
        <el-button type="info" round>信息按钮</el-button>
        <el-button type="warning" round>警告按钮</el-button>
        <el-button type="danger" round>危险按钮</el-button>
    </el-row>

    <el-row>
        <el-button icon="el-icon-search" circle></el-button>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="success" icon="el-icon-check" circle></el-button>
        <el-button type="info" icon="el-icon-message" circle></el-button>
        <el-button type="warning" icon="el-icon-star-off" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>
</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#app"
    })
</script>

</body>
</html>