汉中公司做网站,公司网站后台,电商网站建设试题,app软件开发课程文章目录 一#xff0c; 使用逆向工程生成的代码二#xff0c;生成品牌管理菜单三#xff0c;几个小问题 在本次的技术实践中#xff0c;我们利用逆向工程的方法成功地为后台管理系统增加了品牌管理功能。这种开发方式不仅能快速地构建起功能模块#xff0c;还能在一定程度… 文章目录 一 使用逆向工程生成的代码二生成品牌管理菜单三几个小问题 在本次的技术实践中我们利用逆向工程的方法成功地为后台管理系统增加了品牌管理功能。这种开发方式不仅能快速地构建起功能模块还能在一定程度上减少编码工作量提高开发效率。下面我们将详细介绍整个过程及遇到的一些问题。 一 使用逆向工程生成的代码
品牌管理的代码使用逆向工程生成的代码再次基础上进行修改。
小细节使用逆向工程生成代码时要注意分页导致只生成部分代码可以调整每页显示的数据条数一次把所有的数据都显示出来。 我们从逆向工程中获得了两个核心的Vue组件文件——brand.vue 和 band-add-or-update.vue。这两个文件包含了品牌管理的主要逻辑和界面元素。我们随后将它们复制到了前端工程中以便进一步集成和测试。
拷贝到前端工程中。 二生成品牌管理菜单
在后台管理系统新增品牌管理菜单。 为了将新生成的品牌管理功能集成到现有的后台管理系统中我们需要在主菜单栏中添加一个新的菜单项——“品牌管理”。这一步骤非常直接只需在后台管理系统的配置文件中添加相应的路由信息即可。完成配置后刷新前端界面便能看到新增的“品牌管理”菜单项。 刷新后台管理系统前端界面可以看到品牌管理菜单。 点击该菜单项后我们可以看到完整的品牌管理界面整个过程十分快捷高效充分体现了逆向工程的价值所在。 三几个小问题
在使用逆向工程生成的代码时我们发现生成的界面中缺失了一些重要的功能例如新增和删除按钮的权限控制。为了解决这个问题我们暂时忽略了权限检查以便快速推进项目的开发进程。具体做法是找到负责权限控制的代码段并将其调整为总是返回true的状态这样就可以让所有用户都能访问这些功能了。 把控制权限的代码调整为返回true即暂时不考虑权限控制。
找到如下函数的定义。 把原来的函数定义注释掉改为返回true。 虽然暂时绕过了权限检查但长远来看我们需要重新考虑如何实现权限管理。毕竟一个安全稳定的系统应该具备完善的权限控制机制。为此我们可以在后续开发中引入更加精细的角色权限管理方案确保每个用户的操作权限与其职责相符。
总的来说通过逆向工程我们不仅能够快速搭建出功能完备的界面还能有效降低开发成本。当然为了确保系统的稳定性和安全性我们还需要不断地对生成的代码进行优化和完善。在未来的工作中我们将继续探索更多类似的技术手段以进一步提升开发效率。
brand.js代码如下。
templatediv classmod-configel-form :inlinetrue :modeldataForm keyup.enter.nativegetDataList()el-form-itemel-input v-modeldataForm.key placeholder参数名 clearable/el-input/el-form-itemel-form-itemel-button clickgetDataList()查询/el-buttonel-button v-ifisAuth(product:brand:save) typeprimary clickaddOrUpdateHandle()新增/el-buttonel-button v-ifisAuth(product:brand:delete) typedanger clickdeleteHandle() :disableddataListSelections.length 0批量删除/el-button/el-form-item/el-formel-table:datadataListborderv-loadingdataListLoadingselection-changeselectionChangeHandlestylewidth: 100%;el-table-columntypeselectionheader-aligncenteraligncenterwidth50/el-table-columnel-table-columnpropbrandIdheader-aligncenteraligncenterlabel品牌id/el-table-columnel-table-columnpropnameheader-aligncenteraligncenterlabel品牌名/el-table-columnel-table-columnproplogoheader-aligncenteraligncenterlabel品牌logo地址/el-table-columnel-table-columnpropdescriptheader-aligncenteraligncenterlabel介绍/el-table-columnel-table-columnpropshowStatusheader-aligncenteraligncenterlabel显示状态[0-不显示1-显示]/el-table-columnel-table-columnpropfirstLetterheader-aligncenteraligncenterlabel检索首字母/el-table-columnel-table-columnpropsortheader-aligncenteraligncenterlabel排序/el-table-columnel-table-columnfixedrightheader-aligncenteraligncenterwidth150label操作template slot-scopescopeel-button typetext sizesmall clickaddOrUpdateHandle(scope.row.brandId)修改/el-buttonel-button typetext sizesmall clickdeleteHandle(scope.row.brandId)删除/el-button/template/el-table-column/el-tableel-paginationsize-changesizeChangeHandlecurrent-changecurrentChangeHandle:current-pagepageIndex:page-sizes[10, 20, 50, 100]:page-sizepageSize:totaltotalPagelayouttotal, sizes, prev, pager, next, jumper/el-pagination!-- 弹窗, 新增 / 修改 --add-or-update v-ifaddOrUpdateVisible refaddOrUpdate refreshDataListgetDataList/add-or-update/div
/templatescriptimport AddOrUpdate from ./brand-add-or-updateexport default {data () {return {dataForm: {key: },dataList: [],pageIndex: 1,pageSize: 10,totalPage: 0,dataListLoading: false,dataListSelections: [],addOrUpdateVisible: false}},components: {AddOrUpdate},activated () {this.getDataList()},methods: {// 获取数据列表getDataList () {this.dataListLoading truethis.$http({url: this.$http.adornUrl(/product/brand/list),method: get,params: this.$http.adornParams({page: this.pageIndex,limit: this.pageSize,key: this.dataForm.key})}).then(({data}) {if (data data.code 0) {this.dataList data.page.listthis.totalPage data.page.totalCount} else {this.dataList []this.totalPage 0}this.dataListLoading false})},// 每页数sizeChangeHandle (val) {this.pageSize valthis.pageIndex 1this.getDataList()},// 当前页currentChangeHandle (val) {this.pageIndex valthis.getDataList()},// 多选selectionChangeHandle (val) {this.dataListSelections val},// 新增 / 修改addOrUpdateHandle (id) {this.addOrUpdateVisible truethis.$nextTick(() {this.$refs.addOrUpdate.init(id)})},// 删除deleteHandle (id) {var ids id ? [id] : this.dataListSelections.map(item {return item.brandId})this.$confirm(确定对[id${ids.join(,)}]进行[${id ? 删除 : 批量删除}]操作?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {this.$http({url: this.$http.adornUrl(/product/brand/delete),method: post,data: this.$http.adornData(ids, false)}).then(({data}) {if (data data.code 0) {this.$message({message: 操作成功,type: success,duration: 1500,onClose: () {this.getDataList()}})} else {this.$message.error(data.msg)}})})}}}
/script
brand-add-or-update.vue代码如下。
templateel-dialog:title!dataForm.brandId ? 新增 : 修改:close-on-click-modalfalse:visible.syncvisibleel-form :modeldataForm :rulesdataRule refdataForm keyup.enter.nativedataFormSubmit() label-width80pxel-form-item label品牌名 propnameel-input v-modeldataForm.name placeholder品牌名/el-input/el-form-itemel-form-item label品牌logo地址 proplogoel-input v-modeldataForm.logo placeholder品牌logo地址/el-input/el-form-itemel-form-item label介绍 propdescriptel-input v-modeldataForm.descript placeholder介绍/el-input/el-form-itemel-form-item label显示状态[0-不显示1-显示] propshowStatusel-input v-modeldataForm.showStatus placeholder显示状态[0-不显示1-显示]/el-input/el-form-itemel-form-item label检索首字母 propfirstLetterel-input v-modeldataForm.firstLetter placeholder检索首字母/el-input/el-form-itemel-form-item label排序 propsortel-input v-modeldataForm.sort placeholder排序/el-input/el-form-item/el-formspan slotfooter classdialog-footerel-button clickvisible false取消/el-buttonel-button typeprimary clickdataFormSubmit()确定/el-button/span/el-dialog
/templatescriptexport default {data () {return {visible: false,dataForm: {brandId: 0,name: ,logo: ,descript: ,showStatus: ,firstLetter: ,sort: },dataRule: {name: [{ required: true, message: 品牌名不能为空, trigger: blur }],logo: [{ required: true, message: 品牌logo地址不能为空, trigger: blur }],descript: [{ required: true, message: 介绍不能为空, trigger: blur }],showStatus: [{ required: true, message: 显示状态[0-不显示1-显示]不能为空, trigger: blur }],firstLetter: [{ required: true, message: 检索首字母不能为空, trigger: blur }],sort: [{ required: true, message: 排序不能为空, trigger: blur }]}}},methods: {init (id) {this.dataForm.brandId id || 0this.visible truethis.$nextTick(() {this.$refs[dataForm].resetFields()if (this.dataForm.brandId) {this.$http({url: this.$http.adornUrl(/product/brand/info/${this.dataForm.brandId}),method: get,params: this.$http.adornParams()}).then(({data}) {if (data data.code 0) {this.dataForm.name data.brand.namethis.dataForm.logo data.brand.logothis.dataForm.descript data.brand.descriptthis.dataForm.showStatus data.brand.showStatusthis.dataForm.firstLetter data.brand.firstLetterthis.dataForm.sort data.brand.sort}})}})},// 表单提交dataFormSubmit () {this.$refs[dataForm].validate((valid) {if (valid) {this.$http({url: this.$http.adornUrl(/product/brand/${!this.dataForm.brandId ? save : update}),method: post,data: this.$http.adornData({brandId: this.dataForm.brandId || undefined,name: this.dataForm.name,logo: this.dataForm.logo,descript: this.dataForm.descript,showStatus: this.dataForm.showStatus,firstLetter: this.dataForm.firstLetter,sort: this.dataForm.sort})}).then(({data}) {if (data data.code 0) {this.$message({message: 操作成功,type: success,duration: 1500,onClose: () {this.visible falsethis.$emit(refreshDataList)}})} else {this.$message.error(data.msg)}})}})}}}
/script
