Vue和Element使用

最新推荐文章于 2024-08-07 18:21:52 发布

Blanklr

最新推荐文章于 2024-08-07 18:21:52 发布

阅读量527

点赞数

本文链接：https://blog.csdn.net/Blanklr/article/details/109007911

版权

Vue入门

3.0   2.0的区别
1.核心库体积更小 


MVVM MVC两者区别
MVVM 使前端模型的赶紧版 连接

冒泡事件
HTML中有父子元素的概念

含义

是一款轻量级的框架，更加的简便。

JQuery 与 VUE的区别

Jquery他操作数据时伴随着需要操作dom

Vue主要面向数据操作，不需要对dom进行操作

v-html（操作普通文本）
- 作用：解析标签，将变量内容存放到标签的文本处
- {{}}：直接绑定变量并将数据直接展示在符号出=处
v-bind（操作标签的属性值）【attr，prop，setAttribute】

格式

需要导包

定义模板

创建VUE对象指定Vue的作用域
el属性指定需要绑定的元素对象
编写对应的data
编写对应的methods

注意：由于Vue不需要对标签进行操作，所以使用{{Name}}进行自动替换 data中保存的数据值

 let vm = new Vue({
        el:"#div",   //获得作用域   
        data:{  	 //定义数据
            msg:"张三",
        }，
        methods：{
     		//没有就可以不写   可以使用this 来操作此作用域中的数据
 		}
    });

<body>
    <!-- 视图 -->
    <div id="div">  
        {{msg}}   //类似于html text 对标签的文本进行操作 Vue中的data属性的msg为什么值就自动显示什么值
    </div>
</body>

Vue方法是存在简化方法的

 第一种方式
methods:{
            study: function(){
                alert(this.name + "正在" + this.classRoom + "好好学习!");
            }
}
实际简化方式
methods:{
            study(){
                alert(this.name + "正在" + this.classRoom + "好好学习!");
            }
        }

指令

属性	作用
v-html	设置标签体带标签就会使用生效为标签体赋值{{}}
v-bind	为标签绑定属性值
v-if	设置标签是否出现，不出现不生成标签
v-else-if	设置标签是否出现，不出现不生成标签
v-else	设置标签是否出现，不出现不生成标签
v-show	设置标签是否隐藏标签，（会生成标签）
v-for	遍历数据，生成标签
v-on	为标签绑定事件
v-model	双向绑定数据值，不可与 v-bind:value 同时使用

v-html

作用：为标签的内容进行赋值，如果内容含有标签则显示对应标签效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门升级</title>
    <script src="../../../vue.js"></script>
</head>
<body>
    <!-- 视图 -->
    <div id="div">
        <div v-html="sign"></div>   -- 为标签体添加子标签
        <div >姓名：{{name}}</div>
        <div>班级：{{classRoom}}</div>
        <button onclick="hi()">打招呼</button>   -- 后面使用v-on进行绑定事件，此处是使用原生js的方式进行绑定
        <button onclick="update()">修改班级</button>
    </div>
</body>

<script>
    // 脚本
    let vm = new Vue({
        el:"#div",
        data:{
            sign:"<a href='www.baidu.com'>百度一下</a>",
            name:"张三",
            classRoom:"黑马程序员"
        },
        methods:{
            study(){
                alert(this.name + "正在" + this.classRoom + "好好学习!");   //this表示此Vue对象
            }
        }
    });

    //定义打招呼方法
    function hi(){
        vm.study();
    }

    //定义修改班级
    function update(){
        vm.classRoom = "传智播客";
    }
</script>
</html>

v-bind

作用：为某个标签添加属性值 有简化写法 可以直接赋值也可以使用data的数据进行赋值

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定属性</title>
 6   <style>
        .my{
            border: 1px solid red;   //类样式
        }
    </style>
</head>
<body>
    <div id="div">
         <a v-bind:href="www.baidu.com">百度一下</a>
        <a v-bind:href="url">百度一下</a>
        <br>
        <a :href="url">百度一下</a>    -- 简化写法 多数采用此类写法
        <br>
        <div :class="cls">我是div</div>   --  添加class属性  在此基础上为其追加类样式
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            url:"https://www.baidu.com",
            cls:"my"
        }
    });
</script>
</html>

v-if/else/else-if/show

v-if/else/else-if 作用：对条件进行判定，为true则生成标签。

show 作用：对其进行判断，为true 就将display修改为显示，否则不显示

区别

使用if判定为假不生成标签

show 不管判定为真或假都会生成标签，只是判定会不会显示

<div id="d">
    <div v-if="login">center</div>   //真生成标签   假不生成
    <div v-else-if="!login" :class="cls">  
        <div>zhuce</div>
        <div>denglu</div>
    </div>
</div>
<script>
   let v = new Vue({
        el:"#d",
        data:{
            login:true
        }
    });
</script>

v-for

作用：可以循环生成数据生成的每一个数据都是一个元素

   可以对数组进行遍历，也可以对{}对象进行遍历。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
    <script src="../../../vue.js"></script>

</head>
<body>
    <div id="div">
        <ul>
            <li v-for="name in names">
                {{name}}
            </li>
            <li v-for="value in student">    //  student 为data中的key  value 为遍历出来的每一个值
                {{value}}
            </li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            names:["张三","李四","王五"],
            student:{
                name:"张三",
                age:23
            }
        }
    });
</script>
</html>

v-on

作用：为某一标签绑定事件

有简写：

@事件名=“ 方法名（）/ 方法名”

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
</head>
<body>
    <div id="div">
        <div>{{name}}</div>
        <button v-on:click="change()">改变div的内容</button>
        <button v-on:dblclick="change()">改变div的内容</button>

        <button @click="change()">改变div的内容</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"黑马程序员"
        },
        methods:{
            change(){
                this.name = "传智播客"
            }
        }
    });
</script>
</html>

v-model

作用：双向赋值，每当有一端的值被修改，另一端自动修改。

：model=“ ” 简化写法双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单绑定</title>
</head>
<body>
    <div id="div">
        <form autocomplete="off">
            姓名：<input type="text" name="username" v-model="username">  //表单项中刷新页面时会出现张三
            																一旦被修改，则data的数据也被修改
            <br>
            年龄：<input type="number" name="age" v-model="age">
        </form>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            username:"张三",
            age:23
        }
    });
</script>
</html>

Element-UI入门

Element 官网：https://element.eleme.cn/#/zh-CN

Element-UI 使用

element的核心使用就是

导包

核心css文件导入 index.css
先导入vue的js文件 vue.js
导入element-ui自己的index.js
到官网中找到合适的标签，进行复制粘贴

注意：

Element-ui是依赖于Vue的，所有的element标签都要定义在Vue的容器中比如：div等

在官网中找到的代码，标签部分可以直接拖出，script标签中的数据则只需要拖入return{}中的部分，注意观察是否需要

在这里插入图片描述

在使用container标签的时候要注意布局

 **使用 header或者footer则是竖向排列 ，否则横向排列**

 **使用aside标签的时候 是在侧面布局**

使用main标签的时候是在主区域布局

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生列表</title>
    //以下是三个需要导入的核心文件
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>  
    <script src="element-ui/lib/index.js"></script>
    
    <style>
      .el-header{
        background-color: #545c64;
      }
      .header-img{
        width: 100px;
        margin-top: 20px;
      }
    </style>
</head>
<body>
  <div id="div">
    <el-container>
      <!-- 头部 -->
      <el-header class="el-header">
        <el-container>
          <div>
            <el-image src="img/export.png" class="header-img"></el-image>
          </div>
          <el-menu
            :default-active="activeIndex2"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="white"
            active-text-color="#ffd04b"
            style="margin-left: auto;">
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
              <template slot="title">我的工作台</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu>
            <el-menu-item index="3"><a href="学生列表.html" target="_self">首页</a></el-menu-item>
          </el-menu>
        </el-container>
      </el-header>

      <!-- 侧边栏区域 -->
      <el-container style="height: 580px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-menu"></i>学工部</template>
              <el-menu-item-group>
                <el-menu-item index="1-1"><i class="el-icon-help"></i>在校学生管理</el-menu-item>
                <el-menu-item index="1-2"><i class="el-icon-help"></i>学生升级/留级</el-menu-item>
                <el-menu-item index="1-3"><i class="el-icon-help"></i>学生就业情况</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-menu"></i>咨询部</template>
              <el-menu-item-group>
                <el-menu-item index="2-1"><i class="el-icon-help"></i>意向学生管理</el-menu-item>
                <el-menu-item index="2-2"><i class="el-icon-help"></i>未报名学生管理</el-menu-item>
                <el-menu-item index="2-3"><i class="el-icon-help"></i>已报名学生管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title"><i class="el-icon-menu"></i>教研部</template>
              <el-menu-item-group>
                <el-menu-item index="3-1"><i class="el-icon-help"></i>已有课程管理</el-menu-item>
                <el-menu-item index="3-2"><i class="el-icon-help"></i>正在研发课程管理</el-menu-item>
                <el-menu-item index="3-3"><i class="el-icon-help"></i>新技术课程管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        
        <!-- 主区域 -->
        <el-container>
          <el-main>
            <b style="color: red;font-size: 20px;">学生列表</b>
            <div style="float:right">
              <el-button type="primary">添加学生</el-button>
            </div>
            <el-table :data="tableData">
              <el-table-column prop="date" label="日期" width="140">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="120">
              </el-table-column>
              <el-table-column prop="address" label="地址">
              </el-table-column>
              <el-table-column
                label="操作"
                width="180">
                <el-button type="warning">编辑</el-button> 	//添加的按钮样式        
                <el-button type="danger">删除</el-button>     //添加的按钮样式        
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
          tableData:[
            {
              date:"2088-08-08",
              name:"张三",
              address:"北京市昌平区"
            },{
              date:"2088-08-08",
              name:"李四",
              address:"北京市昌平区"
            },{
              date:"2088-08-08",
              name:"王五",
              address:"北京市昌平区"
            },
          ]
        }
    });
</script>
</html>

Vue进阶部分

自定义组件

在Element-UI里面所有的标签都是自动以标签

自定义标签的格式

Vue.component(组件名称, {
	props:组件的属性,
	data: 组件的数据函数,
	template: 组件解析的标签模板 
						})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义组件</title>
    <script src="vue/vue.js"></script>
</head>
<body>
    <div id="div">
        <my-button>我的按钮</my-button>
    </div>
</body>
<script>
    Vue.component("my-button",{
        // 属性
        props:["name","style"],
        // 数据函数
        data: function(){
            return{
                msg:"我的按钮"
            }
        },
        //解析标签模板
        template:"<div>
        <button style='color:red'>{{msg}}</button>  //此处的msg 是编码时已经指定好了
        <button >{{props.name}}</button>   //此处的name 由用户输入
   				 </div>"
    });

    new Vue({
        el:"#div"
    });
   
</script>
</html>

注意：定义格式也是要写在Vue容器中。

在template中仅可以定义一个，所以要用div装起来。在props里面定义的元素可以用到模板中。

生命周期方法（钩子函数）

是存在于methods{}方法之外的独立函数。还有另外四个，分别是beforeCreated 等。

mounted函数可以当做全局刷新函数使用。

created（vue实列创建完成，页面还没有加载也没有解析）
mounted（此时的功能是完成模板的解析）
updated
destroyed

Vue的异步请求

使用Vue的异步请求需要导入axios包

注意：此处异步请求的方法只有 get. post 两种。

只有两种回调函数，成功响应和失败响应。.then() .catch()

回调函数中的resp需要.data才是回调函数的对象。

在异步中的this表示当前的这个Vue对象，可以使用this找到所有的属性，如：data中的变量名，methods中的方法名。

当在使用事件的时候，可以传入props.row 表示将本行的所有数据一同发送。

  updateStu() {
      			//定义参数
                let param = "method=updateStu&number=" + this.editFormData.number + "&name=" + this.editFormData.name +"&birthday=" + this.editFormData.birthday + "&address=" + this.editFormData.address;
    			  //开始异步请求
                axios.post("studentServlet",param)	  //使用post。因为在请求体中，所以单独写。
   			    axios.get("studentServlet?"+param)	  //使用get方法，因为在地址栏所以？后跟参数
                    .then(resp => {
                        if(resp.data == true) {
                            this.selectByPage()   //收到后重新查询页面
                        }
                    })
                //关闭编辑窗口 
                this.dialogTableVisible4edit = false;   //显示页面
            }

iframe的使用

作用：他可以在当前页面中嵌入其他页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello world</h1>
<iframe src="login.html" frameborder="false" style="top:80px;left: 120px; width: 100%;height:500px"></iframe>
</body>
</html>

异步请求案例

前段

此案例中使用了分页插件。

当在使用事件的时候，可以传入props.row 表示将本行的所有数据一同发送。具体如下

注意：

在点开编辑框的时候，如果showEditStu方法中不可以直接对未定义的属性值进行赋值，虽然可以回显数据，但是会导致页面卡死。因为直到在点开的那一刻editFormData{}里面的各项数据都还没有进行定义。故如果要进行赋值只能对editFormData进行整体赋值，或者使用this.$set(this.editFormData,“内置属性名”, “属性值”)的方式进行逐一赋值。

在前端网页中进行调试的时候可以使用 ctrl+shift+C 点击对应元素，可以直接跳转到对应前端代码处

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    </head>
    <body>
    <div id="div">
    <b style="color: red; font-size: 20px;">学生列表</b>
    <div style="float: right;">
        <el-button type="primary" @click="showAddStu">添加学生</el-button>
    </div>
    <el-table :data="tableData">
        <el-table-column prop="number" label="学号" width="120">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="birthday" label="生日" width="140">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="props">
		<el-button type="warning" @click="showEditStu(props.row)">编辑</el-button>    //注意此处props.row的使用
              <el-button type="danger" @click="deleteStu(props.row)">删除</el-button>
          </template>
        </el-table-column>
    </el-table>

    <!--
        分页组件
          @size-change： 当改变每页条数时触发的函数
          @current-change：当改变页码时触发的函数
          current-page ：默认的页码
          :page-sizes：每页条数选择框中显示的值
          :page-size : 默认的每页条数
          layout： 分页组件的布局
              total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
          :total: 总条数
    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[3,5,8]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>

    <el-dialog title="添加学生信息" :visible.sync="dialogTableVisible4add" @close="resetForm('addForm')">
        <!--
            :model="formData": 关联数据
            :rules: 关联校验规则
            ref： 在获取表单对象时使用
        -->
        <el-form :model="formData" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="学生学号" prop="number">
                <el-input v-model="formData.number"></el-input>
            </el-form-item>
            <el-form-item label="学生姓名" prop="name">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="学生生日" prop="birthday">
                <!--v-model : 双向绑定 -->
                <el-input v-model="formData.birthday" type="date"></el-input>
            </el-form-item>
            <el-form-item label="学生地址" prop="address">
                <el-input v-model="formData.address"></el-input>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="primary" @click="addStu()">添加</el-button>
                <el-button @click="resetForm('addForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog title="编辑学生信息" :visible.sync="dialogTableVisible4edit" @close="resetForm('editForm')" >
        <!--
            :model="formData": 关联数据
            :rules: 关联校验规则
            ref： 在获取表单对象时使用
        -->
        <el-form :model="editFormData" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="学生学号" prop="number">
                <el-input v-model="editFormData.number"></el-input>
            </el-form-item>
            <el-form-item label="学生姓名" prop="name">
                <el-input v-model="editFormData.name"></el-input>
            </el-form-item>
            <el-form-item label="学生生日" prop="birthday">
                <!--v-model : 双向绑定 -->
                <el-input v-model="editFormData.birthday" type="date"></el-input>
            </el-form-item>
            <el-form-item label="学生地址" prop="address">
                <el-input v-model="editFormData.address"></el-input>
            </el-form-item>

            <el-form-item align="right">
                <el-button type="warning" @click="updateStu()">修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            dialogTableVisible4add: false,  //添加窗口显示状态
            dialogTableVisible4edit: false, //编辑窗口显示状态
            formData:{},//添加表单的数据
            editFormData: {},//编辑表单的数据
            tableData:[],//表格数据
            pagination: {
                currentPage: 1, //当前页
                pageSize: 5,    //每页显示条数
                total: 0        //总条数
            },
            rules: {
                number: [
                    {required: true, message: '请输入学号', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                ],
                name: [
                    {required: true, message: '请输入姓名', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                ],
                birthday: [
                    {required: true, message: '请选择日期', trigger: 'change'}
                ],
                address: [
                    {required: true, message: '请输入地址', trigger: 'blur'},
                    {min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur'}
                ],
            }
        },
        methods:{
            //
            showEditStu(row){
                this.dialogTableVisible4edit=true;
                // 将显示的数据 都显示在这里;
                this.editFormData.number=row.number;
                this.editFormData.name=row.name;
                this.editFormData.birthday=row.birthday;    //此处不能使用这种方式，会导致页面卡死不能输入
                this.editFormData.address=row.address;		//原因：当对editFormData赋值时，还未创建。
                //
                // this.editFormData = {
                //     number:row.number,
                //     name:row.name,
                //     birthday:row.birthday,
                //     address:row.address,
                // }
            },
            //更新
            updateStu(){
                //由于双向绑定过 所以会自动更新
                let parm="method=updateStu&number="+this.editFormData.number+"&name=" + this.editFormData.name +
                    "&birthday=" + this.editFormData.birthday + "&address=" + this.editFormData.address;
                //异步请求
                axios.post("/studentServlet",parm)
                    .then(resp =>{
                        //判断是否更新成功
                        if(resp.data==true){
                        //如果成功再次查询
                            this.selectByPage();
                        }
                    });
                //隐藏更新窗口
                this.dialogTableVisible4edit=false;
            },
            deleteStu(props){
               if (confirm("真的要删除"+props.number+"这条记录嘛")){
                axios.post("/studentServlet","method=deleteStu&id="+props.number)
                    .then(resp => {
                        //判断真假
                        if(resp.data == true){
                            //为真重新查询一次
                            this.selectByPage();
                        }else {
                            alert("出问题了，请稍后重试");
                        }
                    })}
            },
            //分页查询功能
            selectByPage(){
                axios.post("/studentServlet","method=selectByPage&currentPage="+this.pagination.currentPage
                    +"&pageSize="+this.pagination.pageSize)
                    .then(resp =>{
                         this.tableData= resp.data.list;
                         this.pagination.currentPage=resp.data.pageNum;
                         this.pagination.total=resp.data.total;
                    })
            },
            addStu(){
                    //异步请求添加学生
                let parm="method=addStu&number="+this.formData.number+"&name=" + this.formData.name +
                    "&birthday=" + this.formData.birthday + "&address=" + this.formData.address;

                axios.post("/studentServlet",parm)
                    .then(resp =>{
                       //判断真假
                        if(resp.data == true){
                        //为真重新查询一次
                            this.selectByPage();
                        }else {
                            alert("出问题了，请稍后重试");
                        }
                    });
                //将添加框隐藏
                this.dialogTableVisible4add=false;
            },
            showAddStu(){
                //将添加框显示
                this.dialogTableVisible4add=true;
            },
            resetForm(addForm) {
                //双向绑定，输入的数据都赋值给了formData， 清空formData数据
                this.formData = {};
                //清除表单的校验数据
                this.$refs[addForm].resetFields();
            },
            //改变每页条数时执行的函数
            handleSizeChange(pageSize) {
                //修改分页查询的参数
                this.pagination.pageSize = pageSize;
                //重新执行查询
                this.selectByPage();
            },
            //改变页码时执行的函数
            handleCurrentChange(pageNum) {
                //修改分页查询的参数
                this.pagination.currentPage = pageNum;
                //重新执行查询
                this.selectByPage();
            },
        },
        mounted(){
            //调用分页查询功能
            this.selectByPage();
        }
    })
</script>
</html>

后端

@WebServlet("/studentServlet")
public class StudentServlet extends HttpServlet {
    private  Service service = new Service();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求和响应编码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        //获取method
        String method = req.getParameter("method");
        //判断是什么名字，执行对应方法
        if("selectByPage".equals(method)){
            selectByPage(req, resp);
        }else if("addStu".equals(method)){
            addStu(req, resp);
        }else if("deleteStu".equals(method)){
            deleteStu(req, resp);
        }else if("updateStu".equals(method)){
            updateStu(req, resp);
        }

    }

    /*
        删除数据功能
     */
    private void deleteStu(HttpServletRequest req, HttpServletResponse resp) {
        String id = req.getParameter("id");
//        int i = Integer.parseInt(id);
        Boolean aBoolean = service.deleteStu(id);
        if(aBoolean){
            try {
                resp.getWriter().write("true");
            } catch (IOException e) {
                e.printStackTrace();
            }
        }else {
            try {
                resp.getWriter().write("false");
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    /*
        修改数据功能
     */
    private void updateStu(HttpServletRequest req, HttpServletResponse resp) {
        Map<String, String[]> parameterMap = req.getParameterMap();
        Student student = new Student();
        try {
            BeanUtils.populate(student,parameterMap);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }

        int i = service.updateStu(student);
        if(i==1){
            try {
                resp.getWriter().write("true");
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    /*
        添加数据功能
     */
    private void addStu(HttpServletRequest req, HttpServletResponse resp) {
        //获取号码
        String id = req.getParameter("number");
        //获取姓名
        String name = req.getParameter("name");
        //获取生日
        String birthday = req.getParameter("birthday");
        //获取地址
        String address = req.getParameter("address");

        //调用业务层  ，实例化对象传入
        Boolean aBoolean = service.addStu(new Student(id, name, java.sql.Date.valueOf(birthday), address));

        PrintWriter writer=null;;
        try {
             writer = resp.getWriter();
        } catch (IOException e) {
            e.printStackTrace();
        }
        //判断是否添加成功
        if(aBoolean){
             //返回前端对应结果
            try {
                resp.getWriter().write("true");
            } catch (IOException e) {
                e.printStackTrace();
            }

        }else {
            //返回前端对应结果
            writer.write("false");
        }
    }

    /*
        分页查询功能
     */
    private void selectByPage(HttpServletRequest req, HttpServletResponse resp) {
        //获取当前页数
        String currentPage = req.getParameter("currentPage");
        //获取页面显示大小
        String pageSize = req.getParameter("pageSize");

        //调用业务层方法，传入参数
        Page page = service.selectByPage(Integer.parseInt(currentPage), Integer.parseInt(pageSize));

        //封装为PageInfo
        PageInfo pageInfo = new PageInfo(page);

        try {
        //将返回的page对象进行转换为json
        ObjectMapper objectMapper = new ObjectMapper();
            String s = objectMapper.writeValueAsString(pageInfo);
        //返回给前端
            resp.getWriter().write(s);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }


    /*
        日期转换
     */
    private void dateConvert() {
        ConvertUtils.register(new Converter() {
            public Object convert(Class type, Object value) {
                SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
                try {
                    return simpleDateFormat.parse(value.toString());
                } catch (ParseException e) {
                    e.printStackTrace();
                }
                return null;
            }
        }, Date.class);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}

   //封装为PageInfo
    PageInfo pageInfo = new PageInfo(page);

    try {
    //将返回的page对象进行转换为json
    ObjectMapper objectMapper = new ObjectMapper();
        String s = objectMapper.writeValueAsString(pageInfo);
    //返回给前端
        resp.getWriter().write(s);
    } catch (Exception e) {
        e.printStackTrace();
    }
}


/*
    日期转换
 */
private void dateConvert() {
    ConvertUtils.register(new Converter() {
        public Object convert(Class type, Object value) {
            SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
            try {
                return simpleDateFormat.parse(value.toString());
            } catch (ParseException e) {
                e.printStackTrace();
            }
            return null;
        }
    }, Date.class);
}

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    doGet(req,resp);
}

}