Vue+axios

最新推荐文章于 2024-09-20 10:38:19 发布

二十多岁想退休

最新推荐文章于 2024-09-20 10:38:19 发布

阅读量1k

点赞数

文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_53203951/article/details/129113693

版权

一、Vue

vue是一种双向绑定的机制，通过标签<div id="">中设置的id可以对标签进行一些操作。

1.1操作过程

1.1.1导入Vue的js库

<script src="assets/vue.min-v2.5.16.js"></script>

1.1.2创建js代码段写Vue代码

<script>
        //创建vue实例
        new Vue({
            el: '#app', //将id为app的div的管理权交给vue
            data: { //用户共享的数据
                msg: null
            }
        });
    </script>

1.1.3添加网页内容，把管理权限交给Vue管理

    <div id="app">
        <input type="text" v-model="msg"/>
        <p>{{msg}}</p><!--插值表达式-->
    </div>

1.1.4实例

在文本框中输入内容并展示出来

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="assets/vue.min-v2.5.16.js"></script>

    <title>Document</title>

</head>

<body>

    <div id="app">

        <h1>用户登录</h1>

        用户名：<input type="text" v-model="username"/><br/>

        密码：<input type="password" v-model="passwd"/><br/>

        <button>登录</button>

        <hr/>

        用户名：{{username}}，密码：{{passwd}}

    </div>

    <script>

        //创建vue实例

        new Vue({

            el: '#app', //将id为app的div的管理权交给vue对象

            data: { //要绑定的数据

                username: null,

                passwd: null

            }

        });

    </script>

</body>

</html>

1.2事件绑定

我们通过v-on属性绑定事件，比如按钮点击事件可以用v-on:click表示

v-on可以用@来代替，所以按钮点击事件也可以用@click来表示。

扩展上一个案例，如果用户输入的用户名是admin，密码是123则提示登录成功，否则弹出对话框提示登录失败，这里我们就需要给按钮绑定点击事件

1.3循环指令

二、axios

axios是与后台serblet交互的一种技术，可以将前端的数据信息与后端servlet的数据进行交互。

1.2操作过程

1.1导包

因为axios是依赖于vue的技术，所以我们需要先导入vue的包再导入axios的包

1.2创建代码块

login(){
        url = "http://localhost:8080/UserLogin?u_name=" + this.u_name+"&u_passwd=" + this.u_passwd
        axios.get(url).then(res =>{
            console.log(res.data.data)
          if(res.data.code == 200){
            localStorage.setItem("uid",res.data.data.id);
            window.location.href="Demo.html"
          }else{
            alert("登录失败")
          }

其中，res是我自定义的一个变量名，基本过程是我的axios将我vue中的data属性通过url的路径交给httpservlet处理，然猴servlet将处理后的结果通过JSON发送到我的前端，其中res负责接受，并且通过data可以得到其中的内容