11.Java Web之Vue和Axios

最新推荐文章于 2022-12-10 14:53:19 发布

hutc_Alan

最新推荐文章于 2022-12-10 14:53:19 发布

阅读量503

点赞数

文章标签： java 前端 mvc

本文链接：https://blog.csdn.net/hutc_Alan/article/details/124873209

版权

vue.js、axios.js、gson-2.2.4.jar(链接：https://pan.baidu.com/s/197Up14ZJjJU2YPU_HS__5g 提取码：uvej)

1.vue快速入门

1.1 准备Vue.js环境

java语言的程序包：jar包
或
JavaScript语言的程序包：外部js文件

在webapp下创建script文件夹，然后将vue.js导入

在html中导入vue.js

<script type="text/javascript" src="script/vue.js"></script>

{{}} - 相当于innerText
v-bind:attr 绑定属性值。例如，v-bind:value - 绑定value值
简写： :value
v-model 双向绑定
v-model:value , 简写 v-model
v-if , v-else , v-show
v-if和v-else之间不能有其他的节点
v-show是通过样式表display来控制节点是否显示
v-for 迭代
v-for={fruit in fruitList}
v-on 绑定事件
其他：
- trim:去除首尾空格 , split() , join()
- watch表示侦听属性
- 生命周期

1.2 声明式渲染

对id="div0"的标签进行渲染

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/vue.js"></script>
    <script type="text/javascript">
        window.onload=function (){
            var vue = new Vue({
                el:"#div0",
                data:{
                    msg:"hello world!"
                }
            });

        }
    </script>
</head>
<body>
    <div id="div0">
        <span>{{msg}}</span>
    </div>
</body>
</html>

1.3 绑定元素属性

基本语法
v-bind:HTML标签的原始属性名

Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/vue.js"></script>
    <script type="text/javascript">
        window.onload=function (){
            var vue = new Vue({
                el:"#div0",
                data:{
                    msg:"hello world!",
                    uname:"张三丰"
                }
            });

        }
    </script>
</head>
<body>
    <div id="div0">
        <span>{{msg}}</span>
        <!-- v-bind:value表示绑定value属性，v-bind可以省略,也就是:value -->
<!--        <input type="text" v-bind:value="uname"/>-->
        <input type="text" :value="uname"/>
    </div>
</body>
</html>

1.4 双向数据绑定

使用了双向绑定后，就可以实现：页面上数据被修改后，Vue对象中的数据属性也跟着被修改。

Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/vue.js"></script>
    <script type="text/javascript">
        window.onload=function (){
            var vue = new Vue({
                el:"#div0",
                data:{
                    msg:"hello world!"
                }
            });

        }
    </script>
</head>
<body>
    <div id="div0">
        <span>{{msg}}</span>
        <!--
            v-model指的是双向绑定，
            也就是说之前的v-bind是通过msg这个变量的值来控制input输入框
            现在v-model不仅msg来控制input输入框，反过来input输入框的内容也会改变msg的值
        -->
<!--        <input type="text" v-model:value="msg"/>-->
        <!-- v-model:valuie 中 :value可以省略，直接携程v-model -->
        <!-- trim可以去除首尾空格 -->
        <input type="text" v-model.trim="msg"/>
    </div>
</body>
</html>

在text文本框中修改内容，span中的结果也会跟着改变

1.5 条件渲染

根据Vue对象中，数据属性的值来判断是否对HTML页面内容进行渲染。
v-if
v-if和v-else
v-show

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/vue.js"></script>
    <script type="text/javascript">
        window.onload=function (){
            var vue = new Vue({
                el:"#div0",
                data:{
                    num:1
                }
            });

        }
    </script>
</head>
<body>
<div id="div0">
    <input type="text" v-model="num">
    <!-- v-if和v-else之间不能有其他节点-->
    <div v-if="num%2==0" style="width:200px;height: 200px;background-color: chartreuse;">&nbsp;</div>
<!--    <br>-->
    <div v-else="num%2==0" style="width:200px;height: 200px;background-color: coral;">&nbsp;</div>

    <!-- v-show -->
    <!-- v-show是通过display属性来控制设个div是否显示-->
    <div v-show="num%2==0" style="width:200px;height: 200px;background-color: blueviolet;">&nbsp;</div>
</div>
</body>
</html>

改变文本框的数值时显示颜色会发生改变

1.5 列表渲染

迭代一个简单的数组

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/vue.js"></script>
    <script type="text/javascript">
        window.onload=function (){
            var vue = new Vue({
                el:"#div0",
                data:{
                    fruitList:[
                        {fname:"苹果",price:5,fcount:100,remark:"苹果好吃"},
                        {fname:"菠萝",price:5,fcount:100,remark:"菠萝好吃"},
                        {fname:"香蕉",price:5,fcount:100,remark:"香蕉好吃"},
                        {fname:"西瓜",price:5,fcount:100,remark:"西瓜好吃"}
                    ]
                }
            });

        }
    </script>
</head>
<body>
<div id="div0">
   <table border="1" width="400" cellpadding="4" cellspacing="0">
       <tr>
           <th>名称</th>
           <th>单价</th>
           <th>库存</th>
           <th>备注</th>
       </tr>
       <!-- v-for表示迭代 -->
       <tr v-for="fruit in fruitList">
           <td>{{fruit.fname}}</td>
           <td>{{fruit.price}}</td>
           <td>{{fruit.fcount}}</td>
           <td>{{fruit.remark}}</td>
       </tr>
   </table>
</div>
</body>
</html>

1.6 事件驱动

demo：字符串顺序反转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/vue.js"></script>
    <script type="text/javascript">
        window.onload=function (){
            var vue = new Vue({
                el:"#div0",
                data:{
                    msg:"hello world"
                },
                methods:{
                    myReverse:function (){
                        this.msg = this.msg.split("").reverse().join("");
                    }
                }
            });

        }
    </script>
</head>
<body>
<div id="div0">
    <span>{{msg}}</span>
    <!-- v-on:click 表示绑定点击事件 -->
    <!-- v-on可以省略，变成 @click -->
<!--    <input type="button" value="反转" v-on:click="myReverse()"/>-->
    <input type="button" value="反转" @click="myReverse()"/>
</div>
</body>
</html>

1.7 监听属性

监听就是对某个属性进行监控，当其发生变化时调用对应的函数

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/vue.js"></script>
    <script type="text/javascript">
        window.onload=function (){
            var vue = new Vue({
                el:"#div0",
                data:{
                    num1:0,
                    num2:0,
                    num3:0
                },
                watch:{
                    //监听属性num1和num2
                    //当num1的值有改动时，name需要调用后面定义的方法，numValue值得就是num1的新值
                    num1:function(newValue){
                        this.num3 = parseInt(newValue) + parseInt(this.num2);
                    },
                    num2:function(newValue){
                        this.num3 = parseInt(this.num1) + parseInt(newValue);
                    }
                }
            });

        }
    </script>
</head>
<body>
<div id="div0">
    <input type="text" v-model="num1" size="2">
    +
    <input type="text" v-model="num2" size="2">
    =
    <span>{{num3}}</span>
</div>
</body>
</html>

1.7 vue的生命周期

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/vue.js"></script>
    <script type="text/javascript">
        window.onload=function (){
            var vue = new Vue({
                el:"#div0",
                data:{
                    msg:"hello"
                },
                methods:{
                    changeMsg:function (){
                        this.msg = "你好";
                    }
                },
                /*vue对象创建之前*/
                beforeCreate:function (){
                    console.log("beforeCreate:vue对象创建之前...");
                    console.log(msg);
                },
                /*vue对象创建之后*/
                created:function (){
                    console.log("created:vue对象创建之后...");
                    console.log(msg);
                },
                /*数据装载之前*/
                beforeMount:function (){
                    console.log("beforeMount:数据装载之前...");
                    console.log("span:"+document.getElementById("span").innerText);
                },
                /*数据装载之后*/
                mounted:function (){
                    console.log("mounted:数据装载之后...");
                    console.log("span:"+document.getElementById("span").innerText);
                },
                /*数据更新之前*/
                beforeUpdate:function (){
                    console.log("beforeUpdate:数据更新之前...");
                    console.log("msg:"+this.msg);
                    console.log("span:"+document.getElementById("span").innerText);
                },
                /*数据更新之后*/
                updated:function (){
                    console.log("updated:数据更新之后...");
                    console.log("msg:"+this.msg);
                    console.log("sapn:"+document.getElementById("span").innerText);

                }
            });

        }
    </script>
</head>
<body>
<div id="div0">
    <span id="span">{{msg}}</span>
    <input type="button" value="改变msg的值" @click="changeMsg">
</div>
</body>
</html>

2.Ajax

Ajax : 异步的JavaScript and XML
目的：用来发送异步的请求，然后当服务器给我响应的时候再进行回调操作
好处：提高用户体验；局部刷新：降低服务器负担、减轻浏览器压力、减轻网络带宽压力
使用Axios和使用Vue一样，导入对应的*.js文件即可。
官方提供的script标签引入方式为：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

基本用法：https://heavy_code_industry.gitee.io/code_heavy_industry/pro001-javaweb/lecture/chapter12/verse02.html

开发步骤：

创建XMLHttpRequest
调用open进行设置：“GET” , URL , true
绑定状态改变时执行的回调函数 - onreadystatechange
发送请求 - send()
编写回调函数，在回调函数中，我们只对XMLHttpRequest的readystate为4的时候感兴趣
我们只对XMLHttpRequest的status为200的时候感兴趣

XMLHttpRequest的readystate
0: (Uninitialized) the send( ) method has not yet been invoked.
1: (Loading) the send( ) method has been invoked, request in progress.
2: (Loaded) the send( ) method has completed, entire response received.
3: (Interactive) the response is being parsed.
4: (Completed) the response has been parsed, is ready for harvesting.

0 －（未初始化）还没有调用send()方法
1 －（载入）已调用send()方法，正在发送请求
2 －（载入完成）send()方法执行完成，已经接收到全部响应内容
3 －（交互）正在解析响应内容
4 －（完成）响应内容解析完成，可以在客户端调用了

3.Axios

Axios是Ajax的一个框架，简化Ajax操作
Axios执行Ajax操作的步骤：
1.添加并引入axios的js文件
2-1.客户端向服务器端异步发送服务请求
基本格式：axios().then().catch()
示例：

axios({
    method:"POST",
    url:"...",
    params:{
        uname:"lina",
        pwd:"ok"
    }
})
.then(function(response){}) //成功响应时的回调 response.data可以获取到服务器响应的内容
.catch(function(error){})   //有异常时执行的回调 error.response.data可以获取到响应的内容
                            //reson.message / reason.stack 可以查看错误的信息

2-2.客户端想服务器发送JSON格式的数据
什么是JSON
JSON是一种数据格式
XML也是一种数据格式

XML格式表示两个学员信息的代码如下：

<students>
    <student sid="s001">
        <sname>jim</sname>
        <age>18</age>
    </student>
    <student sid="s002">
        <sname>tom</sname>
        <age>19</age>
    </student>
</students>

JSON格式表示两个学员信息的代码如下：

[{sid:"s001",sname:"jim",age:10},{sid:"s002",sname:"tom",age:19}]

JSON表达数据更简洁，更能节约网络带宽

客户端发送json格式的数据给服务器端
1）客户端中params需要修改成：data
2）服务器获取参数值不再是request.getParameter()…
而是：

        StringBuffer stringBuffer = new StringBuffer("");
        BufferedReader bufferedReader = request.getReader();
        String str = null;
        while((str=bufferedReader.readLine())!=null){
            stringBuffer.append(str);
        }
        str = stringBuffer.toString();

3)我们发现str的内容如下
{“uname”:“lina”,“pwd”:“ok”}

服务器端给客户端响应JSON格式的字符串，然后客户端需要讲字符串转化成js Object

3.1 实验：发送一个带普通请求参数值的异步请求

① demo07.html（发送异步请求）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/vue.js"></script>
    <script type="text/javascript" src="script/axios.min.js"></script>
    <script type="text/javascript">
        window.onload=function (){
            var vue = new Vue({
                el:"#div0",
                data:{
                    uname:"lina",
                    pwd:"ok"
                },
                methods:{
                    axios01:function (){
                        axios({
                            method:"POST",
                            url:"axios01.do",
                            params:{
                                uname: vue.uname,
                                pwd: vue.pwd
                            }
                        })
                            .then(function(response){
                                console.log(response);
                            })
                            .catch(function (error) {
                                console.log(error);
                            })
                    }
                }
            });

        }
    </script>
</head>
<body>
<div id="div0">
    uname:<input type="text" v-model="uname"/><br/>
    pwd:<input type="text" v-model="pwd" /><br/>
    <input type="button" @click="axios01" value="发送一个带普通请求参数值的异步请求"/>
</div>
</body>
</html>

② 创建Axios01Servlet接收请求

package com.example.axios;

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("/axios01.do")
public class Axios01Servlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String uname = request.getParameter("uname");
        String pwd = request.getParameter("pwd");

        System.out.println("uname = " + uname);
        System.out.println("pwd = " + pwd);
    }
}

③ 访问：http://localhost:8080/demo07.html
然后点击按钮，查看idea是否收到请求

3.1 实验2：服务端返回数据

package com.example.axios;

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.io.PrintWriter;

@WebServlet("/axios01.do")
public class Axios01Servlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String uname = request.getParameter("uname");
        String pwd = request.getParameter("pwd");

        System.out.println("uname = " + uname);
        System.out.println("pwd = " + pwd);

        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.write(uname+"_"+pwd);
    }
}

3.3 实验：发送JSON格式的参数值给服务器端

①demo08.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/vue.js"></script>
    <script type="text/javascript" src="script/axios.min.js"></script>
    <script type="text/javascript">
        window.onload=function (){
            var vue = new Vue({
                el:"#div0",
                data:{
                    uname:"lina",
                    pwd:"ok"
                },
                methods:{
                    axios01:function (){
                        axios({
                            method:"POST",
                            url:"axios02.do",
                            data:{
                                uname: vue.uname,
                                pwd: vue.pwd
                            }
                        })
                            .then(function(response){
                                console.log(response);
                            })
                            .catch(function (error) {
                                console.log(error);
                            })
                    }
                }
            });

        }
    </script>
</head>
<body>
<div id="div0">
    uname:<input type="text" v-model="uname"/><br/>
    pwd:<input type="text" v-model="pwd" /><br/>
    <input type="button" @click="axios01" value="发送JSON格式数据"/>
</div>
</body>
</html>

② 服务端接受JSON格式数据

package com.example.axios;

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.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/axios02.do")
public class Axios02Servlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        StringBuffer stringBuffer = new StringBuffer("");
        BufferedReader bufferedReader = request.getReader();
        String str = null;
        while((str=bufferedReader.readLine())!=null){
            stringBuffer.append(str);
        }
        str = stringBuffer.toString();
        System.out.println(str);
    }
}

3.4 实验：服务器端将接收到的JSON数据转化为JavaObject

导入gson的jar包

修改Axios02Servlet

package com.example.axios;

import com.example.pojo.User;
import com.google.gson.Gson;

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.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/axios02.do")
public class Axios02Servlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        StringBuffer stringBuffer = new StringBuffer("");
        BufferedReader bufferedReader = request.getReader();
        String str = null;
        while((str=bufferedReader.readLine())!=null){
            stringBuffer.append(str);
        }
        str = stringBuffer.toString();
//        System.out.println(str);

        //已知String
        //需要转化成 JavaObject
        Gson gson = new Gson();
        //Gson有两个API
        //1.fromJson(String,T) 将字符串转化为java object
        //2.toJson(java Object) 将javaobject转化成json字符串，这样才能响应给客户端
        User user = gson.fromJson(str, User.class);
        System.out.println(user);
    }
}

创建User类

package com.example.pojo;

public class User {
    private String uname;
    private String pwd;

    public User(){}

    public User(String uname, String pwd) {
        this.uname = uname;
        this.pwd = pwd;
    }

    public String getUname() {
        return uname;
    }

    public void setUname(String uname) {
        this.uname = uname;
    }

    public String getPwd() {
        return pwd;
    }

    public void setPwd(String pwd) {
        this.pwd = pwd;
    }

    @Override
    public String toString() {
        return "User{" +
                "uname='" + uname + '\'' +
                ", pwd='" + pwd + '\'' +
                '}';
    }
}

打印到的结果：User{uname=‘lina’, pwd=‘ok’}

3.4 实验：服务器端将javaobject转化为json格式数据返回给客户端

服务器端将javaobject转化为json格式数据发送给客户端

package com.example.axios;

import com.example.pojo.User;
import com.google.gson.Gson;

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.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/axios02.do")
public class Axios02Servlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        StringBuffer stringBuffer = new StringBuffer("");
        BufferedReader bufferedReader = request.getReader();
        String str = null;
        while((str=bufferedReader.readLine())!=null){
            stringBuffer.append(str);
        }
        str = stringBuffer.toString();
//        System.out.println(str);

        //已知String
        //需要转化成 JavaObject
        Gson gson = new Gson();
        //Gson有两个API
        //1.fromJson(String,T) 将字符串转化为java object
        //2.toJson(java Object) 将javaobject转化成json字符串，这样才能响应给客户端
        User user = gson.fromJson(str, User.class);
//        System.out.println(user);
        user.setUname("小王");
        user.setPwd("123456");

        //假设User是从数据库查询出来的，现在需要讲起转化成json格式的字符串，然后响应给客户端
        String userJsonStr = gson.toJson(user);
        response.setCharacterEncoding("utf-8");
        //MIME-TYPE
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(userJsonStr);
    }
}

添加家客户端接受到json数据的处理

axios01:function (){
    axios({
        method:"POST",
        url:"axios02.do",
        data:{
            uname: vue.uname,
            pwd: vue.pwd
        }
    })
        .then(function(response){
            console.log(response);
            var data = response.data;
            //data对应的数据
            //{uname: '小王', pwd: '123456'}
            vue.uname=data.uname;
            vue.pwd=data.pwd;

            //此处value中的data返回的是js object 因此可以直接点出属性
            //如果我们获取的是一个字符串：“{uname: '小王', pwd: '123456'}”
            //js语言中也有字符串和js对象之间互转的API
            //String JSON.stringify(obj)
            //object JSON.parse(String)


        })
        .catch(function (error) {
            console.log(error);
        })
}

hutc_Alan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
11.Java Web之Vue和Axios

vue.js、axios.js、gson-2.2.4.jar(链接：https://pan.baidu.com/s/197Up14ZJjJU2YPU_HS__5g 提取码：uvej)1.vue快速入门1.1 准备Vue.js环境java语言的程序包：jar包或JavaScript语言的程序包：外部js文件在webapp下创建script文件夹，然后将vue.js导入在html中导入vue.js<script type="text/javascript" src="script/vue.
复制链接

扫一扫