axios导入json vue vue 使用acios向后端传一个json

转载

mob64ca13fd163c 2023-09-19 21:00:08

文章标签 axios导入json vue vue.js 前端 javascript java 文章分类 iOS 移动开发

1.环境准备

2.正式编码

2-1单向绑定v-bind

2-2双向绑定v-model

2-3v-if / v-else

2-4v-show

2-5 v-for

2-6事件绑定v-on

2-7watch侦听属性

3.Axios

简单的前后端传输案例

4.JSON前后端传输数据

1.前端发送json对象给后端

2.后端发送json对象给前端

1.环境准备

项目结构

axios导入json vue vue 使用acios向后端传一个json_java

2.正式编码

1.引入vue.js, 文件路径默认从web文件夹开始

<script src="./js/vue.js"></script>

2.一个简单的vue程序

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

    <script src="./js/vue.js"></script>
    <script>
<!--        当页面加载完毕时自动调用此函数-->
        window.onload = function (){
            //1. new 一个vue对象
            var vue = new Vue({
                //el是element元素的意思, 和下面的id=div1相互绑定
                "el":"#div1",
                "data":{
                    msg:"Hello Vue!"
                }
            })
        }
    </script>
</head>
<body>
<!--引用的是data中的msg, {{}}相当于innerText-->
<div id="div1">{{msg}}</div>
</body>
</html>

运行结果

axios导入json vue vue 使用acios向后端传一个json_vue.js_02

2-1单向绑定v-bind

作用: 当data中的数据改变时, 对应引用也改变

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

    <script src="./js/vue.js"></script>
    <script>
        window.onload = function (){
            var vue = new Vue({
                "el":"#div1",
                "data":{
                    msg:"Hello Vue!"
                }
            })
        }
    </script>
</head>
<body>
<div id="div1">
    <span>{{msg}}</span>
<!--    v-bind绑定输入框的value属性-->
    <input type="text" v-bind:value="msg">

<!--    也可以省略为 :value-->
    <input type="text" :value="msg">
</div>
</body>
</html>

运行结果

axios导入json vue vue 使用acios向后端传一个json_axios导入json vue_03

修改data中msg的值

msg:"Hello Vue! x 2"

刷新页面, 结果如下

axios导入json vue vue 使用acios向后端传一个json_axios导入json vue_04

2-2双向绑定v-model

作用: data中的数据和页面中的数据相互绑定, 互相可以修改

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

    <script src="./js/vue.js"></script>
    <script>
        window.onload = function (){
            var vue = new Vue({
                "el":"#div1",
                "data":{
                    msg:"Hello Vue!"
                }
            })
        }
    </script>
</head>
<body>
<div id="div1">
    <span>{{msg}}</span>
<!--    v-model:value 绑定了data中的msg-->
    <input type="text" v-model:value="msg"> <br>

<!--    :value可以省略-->
    <input type="text" v-model="msg">
</div>
</body>
</html>

效果

axios导入json vue vue 使用acios向后端传一个json_前端_05

双向绑定输入框中的值传入到data中, 然后data的值又被更新到了span标签中

trim修饰符- 去除首尾空格

<input type="text" v-model.trim:value="msg">

2-3v-if / v-else

案例: 使用双向绑定使元素改变颜色

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

    <script src="./js/vue.js"></script>
    <script>
        window.onload = function (){
            var vue = new Vue({
                "el":"#div1",
                "data":{
                    msg:"Hello Vue!",
                    num:0
                }
            })
        }
    </script>
</head>
<body>
<div id="div1">
    <span>{{msg}}</span><br>
    <input type="text" v-model:value="num">
    <!--如果num是偶数, 则此div改为天蓝色-->
    <div v-if="num%2==0" style="width: 200px; height: 200px; background-color: skyblue;"> </div>
    <!--否则num是技术, 则此div改为绿色 此处不能有其它如<br>等节点-->
    <div v-else="num%2==0" style="width: 200px; height: 200px; background-color: green;"> </div>
</div>
</body>
</html>

效果图

axios导入json vue vue 使用acios向后端传一个json_vue.js_06

注意:

v-if 和 v-else中间不能有其它节点 , 如<br>换行等
此时的dom结构中, 是直接删除了此dom

2-4v-show

案例: num是偶数时, 方块显示天蓝色, 是奇数时, 直接消失

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

    <script src="./js/vue.js"></script>
    <script>
        window.onload = function (){
            var vue = new Vue({
                "el":"#div1",
                "data":{
                    num:0
                }
            })
        }
    </script>
</head>
<body>
<div id="div1">
    <span>{{msg}}</span><br>
    <input type="text" v-model:value="num">
<!--    如果num是偶数, 则div显示为天蓝色, 如果num是技术, 则div消失-->
    <div v-show="num%2==0" style="width: 200px; height: 200px; background-color: skyblue;"> </div>

</div>
</body>
</html>

效果图

axios导入json vue vue 使用acios向后端传一个json_javascript_07

注意:

此时删除的元素,只是设置了样式display:none; 与v-if/else直接删除dom不同

2-5 v-for

要求: 遍历一个水果集合, 并展示到表格中

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

    <script src="./js/vue.js"></script>
    <script>
        window.onload = function (){
            var vue = new Vue({
                "el":"#div1",
                "data":{
                    //新建一个水果集合
                    fruitList:[
                        {fname:"苹果1",price:100,fnumber:50,remark:"good"},
                        {fname:"苹果2",price:100,fnumber:50,remark:"good"},
                        {fname:"苹果3",price:100,fnumber:50,remark:"good"},
                        {fname:"苹果4",price:100,fnumber:50,remark:"good"},
                    ]
                }
            })
        }
    </script>
</head>
<body>
<div id="div1">
    <table border="1" width="400" cellpadding="4" cellspacing="0">
<!--        遍历水果列表 fruit in fruitList 此处的fruit代表fruitList中单个fruit-->
        <tr v-for="fruit in fruitList">
            <td>{{fruit.fname}}</td>
            <td>{{fruit.price}}</td>
            <td>{{fruit.fnumber}}</td>
            <td>{{fruit.remark}}</td>
        </tr>
    </table>
</div>
</body>
</html>

效果

axios导入json vue vue 使用acios向后端传一个json_vue.js_08

2-6事件绑定v-on

作用: 绑定vue对象中的一个方法
案例: 点击按钮调用反转方法, 反转字符串

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

    <script src="./js/vue.js"></script>
    <script>
        window.onload = function (){
            var vue = new Vue({
                "el":"#div1",
                "data":{
                    str : "Hello Vue!"
                },
                //vue中有methods属性
                methods : {
                    //声明一个方法
                    myReverse:function (){
                        this.str = this.str.split("").reverse().join("");
                    }
                }

            })
        }

    </script>
</head>
<body>
<div id="div1">
    <span>{{str}}</span> <br>
<!--    调用myReverse方法, 此时引用不带()-->
    <input type="button" value="点我反转字符串" v-on:click="myReverse"> <br>

<!--    可以省略为 @click-->
    <input type="button" value="点我反转字符串" @click="myReverse"> <br>
</div>
</body>
</html>

效果图

axios导入json vue vue 使用acios向后端传一个json_vue.js_09

注意:

此时引用不带()

2-7watch侦听属性

作用: 侦测一个属性的变动, 并调用对应的方法
案例: 简易计算器

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

    <script src="./js/vue.js"></script>
    <script>
        window.onload = function (){
            var vue = new Vue({
                "el":"#div1",
                "data":{
                    num1 : 0,
                    num2 : 0,
                    num3 : 0
                },
                watch:{
                    //当侦测到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="div1">
<!--    双向绑定值, 通过input输入框改变data中num的值, 然后触发侦测, 调用对应的函数-->
    <input type="text" v-model:value="num1">
    +
    <input type="text" v-model="num2">
    =
    <span>{{num3}}</span>
</div>
</body>
</html>

效果图

axios导入json vue vue 使用acios向后端传一个json_axios导入json vue_10

3.Axios

简单的前后端传输案例

作用: 简化了ajax步骤
要求: 向后端发送用户名和密码, 后端响应ok
注意: 前端使用的post请求, 发送的数据名为data的时候, 后面使用 @RequestBody进行获取请求, 此注解只能使用一次 , 如果参数类型是params, 后端使用@RequestParam进行接收

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="./js/vue.js"></script>
  <script src="./js/axios.min.js"></script>
    <script>
        window.onload=function (){
            var vue = new Vue({
                el:"#div1",
                data:{
                    uname:"周粥",
                    pwd:"123456"
                },
                methods:{
                    //声明axios01方法
                    axios01:function (){
                        axios({
                            method:"POST",
                            //向后端axios01.do组件发送
                            url:"axios01.do",
                            //指明要携带的参数 params是拼接url的方式发送, data是通过POST携带参数
                            data:{
                                uname:vue.uname,
                                pwd:vue.pwd
                            }
                        })  //执行成功时接收后端返回的所有数据, 并打印查看
                            .then(function (value){
                                //打印返回的所有数据
                                console.log(value);
                            //    查看value 可以看到有一个data属性, 里面就是后端所返回的内容
                                console.log(value.data);
                            })
                            //如果捕捉到错误就打印错误的原因
                            .catch(function (reason){
                                console.log(reason);
                            })
                    }
                }
            })
        }
    </script>
</head>
<body>
<div id="div1">
    <input type="text" v-model:value="uname">
    <input type="text" v-model="pwd">
    <input type="button" v-on:click="axios01" value="点我发送数据">
</div>
</body>
</html>

后端代码

package com.atguigu.Servlets;

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 Axios01 extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String uname = request.getParameter("uname");
        String pwd = request.getParameter("pwd");
        System.out.println(uname+"-"+pwd);

        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write("OK");
    }
}

前端控制台打印的结果

axios导入json vue vue 使用acios向后端传一个json_axios导入json vue_11

后端控制台打印的结果

axios导入json vue vue 使用acios向后端传一个json_axios导入json vue_12

前端代码成功传递给后端, 后端响应也成功被前端接收

4.JSON前后端传输数据

在实际开发中, 都是前端将收集到的数据通过ajax将数据转换成JSON字符串格式, 发送给后端
后端接收到JSON字符串后, 使用gson类库, 对json字符串进行解析, 然后转换成Java对象,存入数据库中

1.前端发送json对象给后端

前端将一个对象转换成json数据或者直接发送json数据, 传送到后端, 后端将json解析为Java对象, 然后存入数据库中

引入gson依赖, 用来将Java对象和json字符串互转

<dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.9</version>
        </dependency>

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="./js/vue.js"></script>
  <script src="./js/axios.min.js"></script>
    <script>
        window.onload=function (){
            var vue = new Vue({
                el:"#div1",
                data:{
                    uname:"周粥",
                    pwd:"123456"
                },
                methods:{
                    axios02:function (){
                        axios({
                            method:"POST",
                            url:"axios02.do",
                            data:{
                                uname:vue.uname,
                                pwd:vue.pwd
                            }
                        })
                            .then(function (value){
                                console.log(value);
                                //里面有一条config{url: 'axios02.do', method: 'post', data: '{"uname":"周粥222","pwd":"123456"}'...
                                console.log(value.data);
                            })
                            .catch(function (reason){
                                console.log(reason);
                            })
                    }
                }
            })
        }
    </script>
</head>
<body>
<div id="div1">
    <input type="text" v-model:value="uname">
    <input type="text" v-model="pwd">
    <input type="button" v-on:click="axios02" value="点我发送数据">
</div>
</body>
</html>

后端代码

package com.atguigu.Servlets;

import com.atguigu.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;

@WebServlet("/axios02.do")
public class Axios02 extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");

        StringBuffer stringBuffer = new StringBuffer("");
        BufferedReader bufferedReader = request.getReader(); //通过请求的getReader方法获取一个缓冲字符输入流, 其中的内容就是json数据
        String str = null;
        while ((str=bufferedReader.readLine())!=null){
            stringBuffer.append(str);
        }
        str = stringBuffer.toString();
        System.out.println(str);  //{"uname":"周粥222","pwd":"123456"} 成功读取到json字符串

//        将json字符串转换成Java对象通过持久层存入数据库中
//        此时要使用到第三方的gson类库
        Gson gson = new Gson();
//        调用gson的静态方法fromJson, 将json转换成Java对象
        User user = gson.fromJson(str, User.class);
        System.out.println(user);

    }
}

2.后端发送json对象给前端

后端获取到一个Java对象后, 将此对象转换成json格式字符串, 然后返回给前端
此处是模拟查询数据库中的对象, 前端发送一个id, 后端通过在数据库中查询此id, 返回一个对象并转换成json格式发送给前端, 前端展示到页面上

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script>
        window.onload=function (){
            //这里的Vue的V大写
            var vue = new Vue({
                el:"#div1",
                data:{
                    uname:"周粥",
                    pwd:"123"
                },
                methods:{
                    axios03:function (){
                        axios({
                            //修改为get请求
                            method:"GET",
                            url:"axios03.do",
                            params:{
                                id : 1
                            }
                        })
                            .then(function (value){
                                console.log(value);
                                //通过响应回来的数据修改data中的值
                                vue.uname = value.data.uname;
                                vue.pwd = value.data.pwd;
                            })
                            .catch(function (reason){
                                console.log(reason);
                            })
                    }
                }
            })
        }
    </script>
</head>
<body>
<div id="div1">
    <span>{{uname}}</span><br>
    <span>{{pwd}}</span> <br>
    <input type="text" v-model:value="id"> 请输入要查询的id
    <input type="button" v-on:click="axios03" value="点我查询数据">
</div>
</body>
</html>

后端代码

package com.atguigu.Servlets;

import com.atguigu.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;

@WebServlet("/axios03.do")
public class Axios03 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");

        String id = request.getParameter("id");
        System.out.println(id); //在数据库中查询id为此的数据
        User user = new User("周粥","123456"); //模拟查询到的数据

//        将此user转换成json格式并返回给前端
        Gson gson = new Gson();
//        调用gson的toJson静态方法
        String UserJsonStr = gson.toJson(user);
        System.out.println(UserJsonStr);

//        将此json字符串返回给前端
//        1.设置响应的编码和字符串
        response.setContentType("application/json;charset=utf-8");
//        2.在流中直接写入数据
        response.getWriter().write(UserJsonStr);



    }
}

小bug-gson实例化出错,

java.lang.NoClassDefFoundError: com/google/gson/Gson

解决方式: tomcat和工程lib包下都放入gson的jar包

//如果后端返回的是字符串, JS中也有内置的字符串和js对象之间的互转的API, json属于字符串对象
String JSON.stringify(object/json)
object JSON.parse(String)

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：JAVA if跳出执行else java跳出if判断

下一篇：bash启动mysql bash启动cshell

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯