Vue模板

<script src="/js/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script type="text/javascript">
      new Vue({
         el:'#app',
         data:{
            userList : null,
            respCode : null,
            code: null,
            user: {
                userId: "",
                username: "",
            },
            ok : true,
            showLogin:true,
            itemlist:[]
         },
          mounted(){
              let user=JSON.parse(sessionStorage.getItem("user"))
              if(user!=null && user!=undefined){
                  this.showLogin=false
                  this.user={
                      username:user.username,
                      userId:user.id,
                  }
              }else{
                  this.showLogin=true
              }
          },
         methods:{
            //查询所有用户
            showAllUser:function () {
                var ul = this;
                axios.get('http://localhost/user/showAllUser')
                    .then(function (response) {
                        ul.userList = response.data;
                    })
                    .catch(function (err) {
                        console.log(err);
                    });
            },
            //删除用户根据id
            removeUserById:function (id) {
                            var ul = this;
                            axios.get('http://localhost/user/removeUserById?id='+id)
                                .then(function (response) {
                                    ul.respCode = response.data;
                                    ul.userList = ul.respCode.msg;
                                    ul.code = ul.respCode.code;
                                })
                                .catch(function (err) {
                                    console.log(err);
                                })
                        },
            //添加用户
            addUser:function (username,userage) {
                var ul = this;
                axios.post('http://localhost/user/addUser',{
                            username:username,
                            userage:userage
                        }
                    )
                    .then(function (response) {
                        ul.respCode = response.data;
                        ul.userList = ul.respCode.msg;
                        ul.code = ul.respCode.code;
                    })
                    .catch(function (err) {
                        console.log(err);
                    })
            },
            //查询单个用户
            selectUserById: function(id){
                this.ok = false;
                var ul = this;
                axios.get('http://localhost/user/selectUserById?id='+id)
                    .then(function (response) {
                        ul.user = response.data;
                    })
                    .catch(function (err) {
                        console.log(err);
                    })
            },
            //根据用户id修改用户
            modifyUserById:function (id,username,userage) {
                var ul = this;
                axios.post('http://localhost/user/modifyUserById',
                        {
                            id:id,
                            username:username,
                            userage:userage
                        }
                    )
                    .then(function (response) {
                        ul.respCode = response.data;
                        ul.userList = ul.respCode.msg;
                        ul.code = ul.respCode.code;
                    })
                    .catch(function (err) {
                        console.log(err);
                    })
            }
        }
    })
</script>