12-使用Vue与axios改造jquery原页面

翁老师的教学团队

已于 2022-11-10 16:41:02 修改

阅读量429

点赞数

分类专栏： SpringBoot2.X整合文章标签： vue.js jquery javascript

于 2022-11-10 15:12:04 首次发布

本文链接：https://blog.csdn.net/u013621398/article/details/127789356

版权

SpringBoot2.X整合专栏收录该内容

21 篇文章 0 订阅

订阅专栏

改造List页面

1引入文件

  <!--  1引入vuejs axios文件-->
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>

2页面布局


<div  id="app">
        <div v-show='viewId=="add"' id="add"  style="display: none">
            <h1>添加</h1>
            <form id="add_form">

                <br/> name:<input type="text" name="name" >
                <br/> value:<input type="text" name="value" >
                <br/>
                <input id="add_save" type="button" value="保存" >
                <input id="add_cancle" type="button" value="取消" >
            </form>
        </div>
        <div v-show='viewId=="edit"' id="edit"  style="display: none">
            <h1>编辑</h1>
            <form id="form_edit">
               <input type="text" name="id" id="edit_form_id" hidden="hidden">
                <br/> name:<input type="text" id="edit_form_name" name="name" >
                <br/> value:<input type="text" id="edit_form_value" name="value" >
                <br/> <input id="edit_save" type="button" value="更新" > <input id="edit_cancle" type="button" value="取消" >
            </form>
        </div>
        <div v-show='viewId=="list"' id="list" style="display: none">
            <h1>列表</h1>
            <input type="button" value="添加" id="list_add">
            <input type="text" value="" name="searchword">
            <input type="button" value="查询">
            <table border="1" width="100%">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>余额</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tbody">

                </tbody>
            </table>
        </div>
</div>

3使用viewId控制视图

<script type="text/javascript">
    //2:创建一个vue对象
    var vue = new Vue({
        el:'#app',
        data:{
            viewId:'list'
        }
    })

</script>

4使用axios获取find数据


<script type="text/javascript">
    //2:创建一个vue对象
    var vue = new Vue({
        el:'#app',
        data:{
            viewId:'list',
            accountList:[]
        },
        methods:{//定义方法
            loadList:function () {
                console.log("methods里面的")
                console.log(this)

                //向后台接口发请求获取获表
                var url = "http://localhost:8002/day01/account/find"
                axios.get(url).then(
                    function (repsonse) {
                        console.log("axios里面的")
                        console.log(this)
                        if(200==repsonse.data.code){
                            //将json数组保存到vue的data的list
                            //不能使用this.accountList 实际是axios.accountList
                            //视图要显示出来，vue需要将数据保存到data
                            vue.accountList = repsonse.data.data

                        }
                       // console.log(vue.accountList)
                    }
                )
            }
        },
        created: function () {
            this.loadList()
        }
    })

</script>

5使用v-for显示列表

            <table border="1" width="100%">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>余额</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tbody">

                <tr v-for="(item,index) in accountList"  :key="index">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.value}}</td>
                    <td><a href="javascript:void(0);" >编辑</a>|<a>删除</a></td>
                </tr>

                </tbody>
            </table>

改造删除

1 使用@click调用删除方法

  <tr v-for="(item,index) in accountList"  :key="index">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.value}}</td>
                    <td><a href="javascript:void(0);" >编辑</a>|<a href="javascript:void(0);" @click="deleteById(item.id)">删除</a></td>
                </tr>

2在methods里面定义deleteById

 deleteById:function (id) {
                var url = "http://localhost:8002/day01/account/delete/"+id
                axios.get(url).then(function (resp) {
                    if(200 == resp.data.code){
                        vue.loadList()
                        alert(data.msg)
                    }
                })
            }

改造编辑页面

添加编辑的点击事件

 <tr v-for="(item,index) in accountList"  :key="index">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.value}}</td>
                    <td><a href="javascript:void(0);" @click="findById(item.id)" >编辑</a>|<a href="javascript:void(0);" @click="deleteById(item.id)">删除</a></td>
                </tr>

methods添加findById

   findById:function (id) {
                vue.viewId = 'edit'
                //为界面查询数据
                var url = "http://localhost:8002/day01/account/find/"+id
                axios.get(url).then(function (resp) {
                        if(200 == resp.data.code){
                            vue.accountEdit = resp.data.data
                        }
                })
            },

显示在界面

   <div v-show='viewId=="edit"' id="edit"  style="display: none">
            <h1>编辑</h1>
            <form id="form_edit">
                <input type="text" name="id" id="edit_form_id" hidden="hidden" v-model:text="accountEdit.id">
                <br/> name:<input type="text" id="edit_form_name" name="name" v-model:text="accountEdit.name">
                <br/> value:<input type="text" id="edit_form_value" name="value" v-model:text="accountEdit.value">
                <br/> <input id="edit_save" type="button" value="更新" @click="updateAccount()" > <input id="edit_cancle" type="button" value="取消" @click="loadList()" >
            </form>
        </div

注意看 v-model:text=

在methods再添加

 updateAccount:function () {
                var url = "http://localhost:8002/day01/account/update"
                axios.post(url,this.accountEdit).then(function(){
                    vue.loadList()
                })
            },

改造添加页面

给列表机部的添加按钮添加事件

  <input type="button" value="添加" id="list_add" @click="showAdd()">

methods里面添加

 showAdd:function(){
                vue.viewId = 'add'
            },

给更新按钮加点击事件

  <div v-show='viewId=="edit"' id="edit"  style="display: none">
            <h1>编辑</h1>
            <form id="form_edit">
                <input type="text" name="id" id="edit_form_id" hidden="hidden" v-model:text="accountEdit.id">
                <br/> name:<input type="text" id="edit_form_name" name="name" v-model:text="accountEdit.name">
                <br/> value:<input type="text" id="edit_form_value" name="value" v-model:text="accountEdit.value">
                <br/> <input id="edit_save" type="button" value="更新" @click="updateAccount()" > <input id="edit_cancle" type="button" value="取消" @click="loadList()" >
            </form>
        </div>

在methods添加提交方法

     addAccount:function () {

                var url = "http://localhost:8002/day01/account/add"
                axios.post(url,this.accountAdd).then(function(){
                    vue.loadList()
                })
            }