登录页Vue实例

<script>
    // 创建Vue对象
    new Vue({
        el:'#app', // 将id=app的div管理权交给vue
        data:{  // 需要绑定的数据
            userName:null,
            passwd:null
        },
        methods:{   // 所有的声明函数
            doLogin(){  // 点击登录按钮执行

                // 通过axios发送请求到UserServlet
                var url = "http://localhost:8080/login?user_name="+this.userName+"&passwd="+this.passwd;
                axios.get(url).then(response => {
                    if(response.data == '成功'){   // 登录成功
                        window.location.href='index.html';    // 跳转到主页index.html
                    }else {
                        alert("用户名或密码错误");  // 弹窗警告
                    }
                });
            },
            doReset(){
              this.userName = null;
                this.passwd = null;
            }
        },

        created:function (){    // 页面加载完成后执行

        }
    })
</script>

登录页给文本框绑定v-model,给button绑定点击事件

用户添加页Vue对象实例

<script>
    // 创建Vue实例
    new Vue({
        el:'#app',
        data:{
            userName:null,
            nickName: null,
            sex: null,
            phone: null,
            birth: null
        },
        methods:{

            doAdd(){
                var url = "user_add?user_name="+this.userName+"&nick_name="+this.nickName+"&sex="+this.sex
                    +"&phone="+this.phone+"&birth="+this.birth;
                // 通过axios发送请求到UserServlet
                axios.get(url).then(responce =>{
                    if(responce.data == '添加成功'){
                        window.location.href = 'UserList.html';
                    }else {
                        alert("添加失败")
                    }
                })
            },
                doClear(){  // 重置按钮事件
                this.userName = null;
                this.nickName = null;
                this.sex = null;
                this.phone = null;
                this.birth = null;
            }
        }
    });
</script>

用户添加页v-model绑定,添加按钮点击事件

用户查询及修改Vue实例(重难点)

查询(页面的刷新方法)

<script>
    new Vue({
       el:'#app',
       data:{
           users:null
       },
        created:function (){
           // 调用刷新列表方法
            this.requestUserList();
        },
        methods:{
           doDelete(id){
               console.log("要删除的id:"+id);
               // 请求Servlet删除用户
               axios.get("delete_user?id="+id).then(response =>{
                   if(response.data == '删除成功'){
                       // 调用刷新列表方法
                       this.requestUserList();
                   }else {
                       alert("删除失败!!!!!")
                   }
               });
           },
            doUpdate(id){ // 点击修改按钮后触发
               window.location.href = "User_update.html?id="+id;
               // 跳转到User_update.html页面 并且传递id值在url
            },
            // 刷新用户列表方法
            requestUserList(){
               // 发送请求获取用户列表
                axios.get("user_list").then(response =>{
                    this.users = response.data;
                })
            },
        },
    });
</script>

修改(页面的刷新方法)

<script>
    // 创建Vue实例
    new Vue({
        el:'#app',
        data:{
            id:null,
            userName:null,
            nickName: null,
            sex: null,
            phone: null,
            birth: null
        },
        methods:{

            doUpdate() {
                // 通过axios发送请求到servlet修改用户信息
                var url = "user_update?user_name="+this.userName+"&nick_name="+this.nickName+"&sex="+this.sex+"&phone="+this.phone+"&birth="+this.birth+"&id="+this.id;
                axios.get(url).then(response => {
                    if (response.data == '修改成功'){
                        console.log("修改成功")
                        window.location.href = "UserList.html";
                    }else {
                        alert("修改失败,请重试!!!")
                    }
                })
            },
            doExit(){
                window.location.href = 'UserList.html';
            },
        },
        created:function (){    // 页面加载完成后触发
            var url = window.location.href; // 获取网页地址
            console.log(url);
            // substring(url.indexOf("=")+1)字符串截取
            var id = url.substring(url.indexOf("=")+1);
            console.log(id);
            this.id = id;
            // 通过axios传递用户id到UserGetServlet页面
            axios.get("user_info?id="+id).then(response =>{
                console.log(response.data);
                this.userName = response.data.userName;
                this.nickName = response.data.nickName;
                this.sex = response.data.sex;
                this.phone = response.data.phone;
                this.birth = response.data.birth;
            });
        }
    });
</script>

v-model绑定,添加按钮点击事件