房产中介网站建设模板,绵阳新农网的网站是哪个公司做的,上海 房地产网站建设,做设计必须知道的几个网站从0开始写Vue项目-环境和项目搭建_慕言要努力的博客-CSDN博客从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建_慕言要努力的博客-CSDN博客从0开始写Vue项目-Vue页面主体布局和登录、注册页面_慕言要努力的博客-CSDN博客从0开始写Vue项目-SpringBoot整合Mybatis-plus实现…从0开始写Vue项目-环境和项目搭建_慕言要努力的博客-CSDN博客从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建_慕言要努力的博客-CSDN博客从0开始写Vue项目-Vue页面主体布局和登录、注册页面_慕言要努力的博客-CSDN博客从0开始写Vue项目-SpringBoot整合Mybatis-plus实现登录、注册功能_慕言要努力的博客-CSDN博客_mybatisplus登陆 从0开始写Vue项目-SpringBoot整合Mybatis-plus实现登录、注册功能_慕言要努力的博客-CSDN博客_mybatisplus登陆
一、前言 在我们之前我们已经实现了我们项目的登录、注册功能然后我们也获取了我们数据库的数据也写好了我们数据的增删改查那么我们现在就来在我们的前端进行数据渲染然后实现我们前端Vue的增删改查。 我这里就拿用户数据来进行演示
二、数据渲染
可以发现我们已经渲染出来我们数据库里面用户表所有的数据了。
那么我们怎么来实现用户渲染呢以及我们渲染出来的数据放在哪里存放我们依然进行组件调用我们可以在Element-ui里面找到我们的 el-table 来存放我们查找出来的数据。 其实在我们之前进行页面布局的时候我们就已经进行了 el-table 的引用只不过里面的数据全是静态的而已。那么我们现在就来将我们的静态数据来变成动态的数据。
然后我们要对数据进行存放在一个大的属性里面然后通过属性来进行数据渲染。
我们将数据存放在我们的 tableData 里面然后进行调用就可以了。重点我们渲染数据的名称必须跟我们后端类里面的方法命名一致。 !-- 数据渲染表单--el-table :datatableData border stripe :header-cell-class-nameheaderBgselection-changehandleSelectionChangeel-table-column typeselection width55/el-table-columnel-table-column propusername label用户名 /el-table-columnel-table-column propnickname label昵称 /el-table-columnel-table-column propemail label邮箱 /el-table-columnel-table-column propphone label联系方式 /el-table-columnel-table-column propaddress label地址/el-table-columnel-table-column label操作template slot-scopescopeel-button typesuccess clickhandleEdit(scope.row)i classel-icon-edit-outline /编辑/el-button/template/el-table-column/el-table data() {return {tableData: [],total: 0,pageNum: 1,pageSize: 5,username: ,form: {},dialogFormVisible: false,multipleSelection: [],headerBg: headerBg,roles: []}}, 三、数据增删改查
我们分别命名2个方法分别是新增 handleAdd 和删除 delBatch然后我们进行我们接口的调用来实现我们的功能。 !-- 新增和删除--div stylemargin: 10px 0el-button typeprimary clickhandleAdd classml-10i classel-icon-circle-plus-outline /新增/el-buttonel-popconfirmclassml-5confirm-button-text确认cancel-button-text取消iconel-icon-infoicon-colorredtitle确定批量删除这些信息吗confirmdelBatchel-button typedanger slotreference i classel-icon-remove-outline /删除/el-button/el-popconfirm/div 1.新增和编辑 我们在新增的时候会打开一个空的表单然后在表单上面填写我们新增的数据最后我们在点击确认按钮的时候我们的表单会自己进行关闭。我们在编辑的时候会自动获取用户数据渲染在我们的表单里面。
我们先来写我们的新增表单 el-dialog
!-- 新增或编辑的表单--el-dialog title用户信息 :visible.syncdialogFormVisible width30%el-form :modelform label-width100px sizesmallel-form-item label用户名 el-input v-modelform.username autocompleteoff/el-input/el-form-itemel-form-item label昵称 el-input v-modelform.nickname autocompleteoff/el-input/el-form-itemel-form-item label邮箱 el-input v-modelform.email autocompleteoff/el-input/el-form-itemel-form-item label联系方式 el-input v-modelform.phone autocompleteoff/el-input/el-form-itemel-form-item label地址 el-input v-modelform.address autocompleteoff/el-input/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickdialogFormVisible false取 消/el-buttonel-button typeprimary clicksave确 定/el-button/div/el-dialog 然后填入我们的信息点击确认关闭我们的保单存放我们的数据在我们的数据库里面。
// 保存信息save() {this.request.post(/user, this.form).then(res {if (res.code 200) {this.$message.success(保存成功)this.dialogFormVisible falsethis.load()} else {this.$message.error(保存失败)}})}, 打开我们的表单
// 新增handleAdd() {this.dialogFormVisible truethis.form {}},// 编辑handleEdit(row) {this.form rowthis.dialogFormVisible true}, 2.分页设置 分页功能我们依然是进行组建的调用 !-- 分页查询--div stylepadding: 10px 0el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagepageNum:page-sizes[ 5, 10, 15]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/div
然后我们要自定义我们的分页数据 return {tableData: [],total: 0,pageNum: 1,pageSize: 5,username: ,form: {},dialogFormVisible: false,multipleSelection: [],headerBg: headerBg,roles: []}
3.数据删除 我们在删除的时候进行二次确认进行删除提示看是否真的需要删除该数据。
el-popconfirmclassml-5confirm-button-text确认cancel-button-text取消iconel-icon-infoicon-colorredtitle确定批量删除这些信息吗confirmdelBatchel-button typedanger slotreference i classel-icon-remove-outline /删除/el-button/el-popconfirm
我们进行调用后端的多选删除接口来进行单个或多个数据的删除。 // 多选删除delBatch() {let ids this.multipleSelection.map(v v.id) //[{}, {}, {}] [1,2,3]this.request.post(/user/del/batch, ids).then(res {if (res.code 200) {this.$message.success(删除用户成功)this.load()} else {this.$message.error(删除用户失败)}})}, 当然我们进行多个删除必然少不了我们的多选框了所以我们在我们的数据渲染表格里面已经加上了多选框的方法。 // 多选框handleSelectionChange(val) {console.log(val)this.multipleSelection val;},
4.数据查询
我们在这里是通过搜索用户的用户名进行查询当然还可以有其他的条件进行数据查询。 !-- 搜索--div stylemargin: 10px 0el-button classml-5 typeprimary clickloadi classel-icon-search /搜索/el-button/div 我们在这里进行调用后端的page接口就能查询所有的数据且能通过username来进行用户信息的查询。
// 获取用户信息load: function () {this.request.get(/user/page, {params: {pageNum: this.pageNum,pageSize: this.pageSize,username: this.username,}}).then(res {this.tableData res.data.recordsthis.total res.data.total})this.request.get(/role).then(res {this.roles res.data})}, 功能展示 ⛵小结 以上就是对从0开始写Vue项目-Vue实现数据渲染和数据的增删改查简单的概述之后会陆续更新后面的模块包括后端代码带大家手码项目提升自己的编码能力。 如果这篇文章有帮助到你希望可以给作者点个赞创作不易如果有对后端技术、前端领域感兴趣的也欢迎关注 我将会给你带来巨大的收获与惊喜
