奉节网站建设,dw做aspx网站,用wordpress建站难吗,成都专业网站建设Vue.js 从入门到实战#xff1a;用户管理分页表格项目详解 本文适合 Vue 初学者#xff0c;带你从 Vue 基础语法开始#xff0c;逐步深入到分页表格项目实战#xff0c;手把手教你用 Vue Element UI Axios 打造一个可增删改查的用户管理界面。 一、什么是 Vue.js#xf…Vue.js 从入门到实战用户管理分页表格项目详解 本文适合 Vue 初学者带你从 Vue 基础语法开始逐步深入到分页表格项目实战手把手教你用 Vue Element UI Axios 打造一个可增删改查的用户管理界面。 一、什么是 Vue.js
Vue.js 是一套构建用户界面的渐进式 JavaScript 框架具有以下特点
轻量级仅关注视图层体积小响应式数据变动会自动更新视图易上手语法简单、逻辑清晰组件化适合构建大型单页应用SPA。
Vue 非常适合初学者入门前端框架也是市面上广泛使用的三大主流框架之一Vue、React、Angular。 二、Vue 基础知识详解
1. Vue 实例
Vue 应用的核心就是 new Vue({...})用来创建一个 Vue 实例
new Vue({el: #app, // Vue 实例挂载的元素data: {message: Hello Vue!},methods: {sayHi() {alert(this.message)}}
})所有绑定在页面上的内容插值、事件、属性都来源于 data 和 methods。 2. 数据绑定单向绑定
Vue 通过插值语法 {{ 变量名 }} 实现数据绑定。
p{{ message }}/p只要 message 在 data 中发生改变页面内容会自动更新。 3. 事件绑定
使用 v-on 或简写 来绑定事件
button clicksayHi点我提示/button绑定的事件定义在 methods 中点击按钮时会调用 sayHi 方法。 三、Vue 的双向绑定重点
1. 什么是双向绑定
双向绑定意味着
数据变化会更新视图用户输入也能修改数据。
Vue 使用 v-model 指令实现这种双向绑定尤其常用于表单元素中。 2. 基本用法
input v-modelusername placeholder请输入用户名
p你输入的是{{ username }}/p
new Vue({el: #app,data: {username: }
})当你在输入框中输入时username 的值自动更新反之username 变量变化也会同步更新输入框的内容。 3. 表单双向绑定适配列表
元素说明数据类型input typetext文本输入Stringtextarea多行输入Stringinput typecheckbox多选/布尔值Boolean/Arrayinput typeradio单选Stringselect下拉框String/Array 4. 修饰符Modifers
修饰符功能.lazy在 change 事件触发时更新数据失焦后.number将输入转为数字.trim自动去除首尾空格
示例
input v-model.lazyname
input v-model.numberage
input v-model.trimemail四、项目实战分页用户信息表格管理系统
我们使用 Vue Element UI Axios 实现一个从后端分页获取用户数据并显示到前端表格的项目。 1. 引入依赖
link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css
script srcjs/vue.js/script
script srcjs/elementui.js/script
script srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/script2. HTML 页面结构
div idappel-table :dataarray border stripeel-table-column fixed propid labelID width260 /el-table-column propusername label用户名 width320 /el-table-column proppassword label密码 width320 /el-table-column proprole label角色 width320 /el-table-column label操作template slot-scopescopeel-button sizemini typeinfo iconel-icon-edit clickedit(scope.row)修改/el-buttonel-button sizemini typedanger iconel-icon-delete clickdel(scope.row)删除/el-button/template/el-table-column/el-tableel-paginationstylemargin-top: 20px; float: right;backgroundlayoutprev, pager, next:page-sizesize:totaltotal:current-page.syncpagecurrent-changechange/el-pagination
/div3. Vue 实例与分页请求逻辑
new Vue({el: #app,data() {return {array: [], // 表格数据page: 1, // 当前页码size: 2, // 每页显示条数total: 0 // 数据总数后端返回}},mounted() {this.loadData(this.page)},methods: {loadData(currentPage) {axios.get(http://localhost:8080/account/list?page${currentPage}size${this.size}).then(resp {this.array resp.data.recordsthis.total resp.data.totalthis.page resp.data.currentthis.size resp.data.size})},change(currentPage) {this.loadData(currentPage)},edit(row) {alert(修改用户 JSON.stringify(row))},del(row) {alert(删除用户 JSON.stringify(row))}}
})五、分页功能详解
分页由 Element UI 的 el-pagination 实现核心是监听 current-change 事件并传入当前页码更新后重新调用后端接口。
el-pagination:current-page.syncpagecurrent-changechange:page-sizesize:totaltotallayoutprev, pager, next /六、后端接口格式说明配合使用
后端接口建议返回以下格式 JSON 数据
{records: [{ id: 1, username: 张三, password: 123456, role: 管理员 },{ id: 2, username: 李四, password: abcdef, role: 普通用户 }],total: 11,current: 1,size: 2
}七、项目总结与扩展思路
学到了 Vue 的数据绑定、事件处理、生命周期函数 熟悉了 v-model 的双向绑定机制 掌握了 Element UI 表格与分页控件的基本用法 学会了通过 Axios 获取后端数据并绑定到视图
可扩展功能
添加用户表单弹窗编辑用户信息双向绑定表单删除用户确认弹窗多条件搜索过滤使用组件化方式优化结构
