用.net做的网站,网站推广的方式包括,新网网站制作,中国建设银行官网站和字币预约vueelement-ui通用后台管理系统#xff08;适合新手#xff09;
1、使用到的技术
使用vue2element-uiaxiosjs-cookielessecharts实现的一个简易的通用后台管理系统#xff0c;具有很强的可扩展性#xff0c;修改简单#xff0c;只要有点前端基础就能看懂#xff1b;
2…vueelement-ui通用后台管理系统适合新手
1、使用到的技术
使用vue2element-uiaxiosjs-cookielessecharts实现的一个简易的通用后台管理系统具有很强的可扩展性修改简单只要有点前端基础就能看懂
2、登录页部分代码以及预览图
templatediv classlogin-wrapel-form label-positionleft :modelruleForm :rulesrules refruleForm classdemo-ruleForm login-containerh3 classtitle欢迎使用通用后台管理系统/h3el-alerttitle用户名或密码错误typeerror v-iferror/el-alertel-form-item propusername label用户账号el-input typetext v-modelruleForm.client_id auto-completeoff placeholder账号/el-input/el-form-itemel-form-item proppassword label用户密码el-input typepassword v-modelruleForm.client_secret auto-completeoff placeholder密码/el-input/el-form-itemel-checkbox classremember v-modelrememberpwd记住密码/el-checkboxel-form-item stylewidth:100%;el-button typeprimary stylewidth:100%; clicksubmitForm(ruleForm) :loadinglogining登录/el-button/el-form-item/el-form/div
/template3、首页部分代码以及预览图
templateel-rowel-col :span8 stylepadding-right: 10pxel-card classbox-carddiv classuserimg src../assets/images/user.png altdiv classuserinfop classnameAdmin/pp classaccess超级管理员/p/div/divdiv classlogin-infop上次登录的时间span2023-07-10/span/pp上次登录的地点span成都/span/p/div/el-cardel-card stylemargin-top: 20px;height: 460px;el-table:datatableDatastylewidth: 100%el-table-column v-for(val, key) in tableLabel :propkey :labelval :keykey//el-table/el-card/el-colel-col :span16 stylepadding-left: 10pxdiv classnumel-card v-foritem in countData :keyitem.name :body-style{ display: flex,padding:0}i classicon :classel-icon-${item.icon} :style{background:item.color}/idiv classdetailp classprice{{item.value}}/pp classdesc{{item.name}}/p/div/el-card/div
!-- el-card styleheight: 280px--
!-- 折线图--div classgraph styleheight: 260pxel-carddiv refecharts2 styleheight: 260px清开系统状态el-result iconsuccess title连接正常 subTitle请根据提示进行操作template slotextrael-button typeprimary sizemedium刷新/el-button/template/el-result/div/el-cardel-carddiv refecharts3清开系统数据库状态el-result iconsuccess title连接正常 subTitle请根据提示进行操作template slotextrael-button typeprimary sizemedium刷新/el-button/template/el-result/div/el-card/div
!-- /el-card--div classgraphel-carddiv refecharts2 styleheight: 260px医养平台状态el-result iconsuccess title连接正常 subTitle请根据提示进行操作template slotextrael-button typeprimary sizemedium刷新/el-button/template/el-result/div/el-cardel-carddiv refecharts3银行状态el-result iconsuccess title连接正常 subTitle请根据提示进行操作template slotextrael-button typeprimary sizemedium刷新/el-button/template/el-result/div/el-card/div/el-col/el-row
/template4、用户列表页部分代码以及预览图
templatediv classmanagediv classmanage-headerel-button typeprimary clickhandleAdd sizemini 新增/el-button
!-- 搜索区--div classsearchel-input placeholder请输入内容 sizesmall v-modelinput1 changesearch classinput-with-selectel-select v-modelselect slotprepend placeholder请选择el-option label编号 valueyyptddbh/el-optionel-option label姓名 valuelryhmc/el-optionel-option label机构编码 valuelrgsjg/el-option/el-select
!-- el-button slotappend typeprimary iconel-icon-search stylebackground-color: #42b983/el-button--el-button slotappendtypeprimaryiconel-icon-searchclicksearch sizesamll搜索/el-button/el-input/div/divel-dialog:titlemodalType0?新增用户:修改用户:visible.syncdialogVisible:before-closehandleClosewidth50%el-form refform :inlinetrue :modelform :rulesrules label-width80pxel-form-item label编号 propyyptddbhel-input placeholder请输入编号 v-modelform.yyptddbh/el-input/el-form-itemel-form-item label姓名 proplryhmcel-input placeholder请输入姓名 v-modelform.lryhmc/el-input/el-form-itemel-form-item label归属机构 proplrgsjgel-input placeholder请输入归属机构 v-modelform.lrgsjg/el-input/el-form-itemel-form-item label状态 label-width65px propddztel-select v-modelform.ddzt placeholder请选择el-option label创建 value1/el-optionel-option label失败 value2/el-optionel-option label成功 value3/el-option/el-select/el-form-itemel-form-item label日期 propyyptxdsjel-date-pickerv-modelform.yyptxdsjtypedateplaceholder选择日期/el-date-picker/el-form-item/el-formspan slotfooter classdialog-footerel-button clickcancel取 消/el-buttonel-button typeprimary clicksubmit确 定/el-button/span/el-dialogdiv classcommon-tableel-table:datatableDatastylewidth: 100%height90%stripeel-table-columnfixedpropyyptddbhlabel编号width200/el-table-columnel-table-columnproplryhmclabel姓名width180/el-table-columnel-table-columnproplrgsjglabel机构编号/el-table-columnel-table-columnpropyyptxdsjsortablelabel时间/el-table-columnel-table-columnpropddztlabel状态template slot-scopescopespan stylemargin-left: 10px{{ scope.row.ddzt 1 ? 创建: scope.row.ddzt 3 ? 成功:失败}}/span/template/el-table-columnel-table-columnpropddztlabel操作template slot-scopescopeel-button sizemini clickhandleEdit(scope.row)编辑/el-buttonel-button typedanger sizemini clickhandleDel(scope.row)删除/el-button/template/el-table-column/el-tablediv classpagerel-paginationlayoutprev, pager, next:totaltotalcurrent-changehandlePage/el-pagination/div/div/div
/template
