商城后台管理系统学习日志-01

总体图片（有待完善）

目前在做的是用户列表，下一步做的是权限管理
用户列表包括：用户查询、添加用户、删除用户、修改用户、以及数据分页
用户查询(这里使用的是模糊查询)

源码：

 listQuery: {query: '',pagesize: 2,pagenum: 1,},
async getList() {await this.$http.get('users', { params: this.listQuery }).then((resp) => {if (resp.data.meta.status != 200) {this.$message.error({message: resp.data.meta.msg,})} else {this.list = resp.data.data.usersthis.total = resp.data.data.total}})},

添加用户：

这里使用了form表单提交加入了规则验证

源码：

//表单区域
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close='addDialogClosed'><!-- 内容主体区域 --><el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px" ><el-form-item label="用户名" v-model="addForm.username" prop="username"><el-input v-model="addForm.username"></el-input></el-form-item> <el-form-item label="密码"  prop="password"><el-input v-model="addForm.password"></el-input></el-form-item><el-form-item label="验证密码"  prop="passwordState"><el-input v-model="addForm.passwordState"></el-input></el-form-item> <el-form-item label="邮箱"  prop="email"><el-input v-model="addForm.email"></el-input></el-form-item> <el-form-item label="电话"  prop="mobile"><el-input v-model.number="addForm.mobile"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="addDialogVisible = false">取 消</el-button><el-button type="primary" @click="adduser">确 定</el-button></span></el-dialog>
//表单验证区域
addFormRules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 10, message: '长度在3~10个字符之间', trigger: 'blur' },],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 3, max: 15, message: '长度在3~15个字符之间', trigger: 'blur' },],passwordState: [{required: true,trigger: 'blur',validator: passwordState,},],
//添加区域//增加用户adduser() {this.$refs.addFormRef.validate(async (valid) => {if (valid) {await this.$http.post('users', this.addForm).then((resp) => {if (resp.data.meta.status != 201) {this.$message.error({message: resp.data.meta.msg,duration: 2000,})} else {this.$message.success({message: resp.data.meta.msg,duration: 2000,})this.getList()}})} else {return this.$message.error({message: '请校验数据',duration: 2000,})}})},// 监听增加对话框关闭addDialogClosed() {this.$refs.addFormRef.resetFields()},

修改用户（首先要获取该用户的信息，然后渲染到修改界面上面，同样使用了form表单验证）

代码：

<el-dialogtitle="修改信息":visible.sync="editdialogVisible"width="50%"@close="editDialogClosed"><el-form ref="editForm" :model="editForm" :rules="editFormRules" ><el-form-item label="用户名" prop="username"><el-input disabled v-model="editForm.username" ></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="editForm.email"></el-input></el-form-item><el-form-item label="手机" prop="mobile"><el-input v-model.number="editForm.mobile"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="editdialogVisible = false">取 消</el-button><el-button type="primary" @click="editUser">确 定</el-button></span></el-dialog>
editForm: {username: '',email: '',mobile: null,id: null,},editFormRules: {email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },{type: 'email',message: '请输入正确的邮箱地址',trigger: ['blur', 'change'],},],mobile: [{required: true,message: '电话不能为空',trigger: 'blur',},{type: 'number',message: '电话必须是数字',trigger: 'blur',},],},editUser() {this.$refs.editForm.validate(async (valid) => {if (valid) {await this.$http.put(`users/${this.editForm.id}`, this.editForm).then((resp) => {if (resp.data.meta.status != 200) {this.$message.error({message: resp.data.meta.msg,duration: 2000,})} else {this.$message.success({message: resp.data.meta.msg,duration: 2000,})this.getList()}})} else {this.$message.error({message: '请检查数据类型',duration: 2000,})}})},

删除用户（这里的this.$confirm是引入了elementUI里面的组件）

 deletedUser(row) {this.$confirm('你确定删除吗？', {confirmButtonText: '确定',cancelButtonText: '取消',}).then(async () => {await this.$http.delete(`users/${row.id}`).then((resp) => {if (resp.data.meta.status != 200) {this.$message.error({message: resp.data.meta.msg,duration: 2000,})} else {this.$message.success({message: resp.data.meta.msg,duration: 2000,})this.getList()}})})},

如何引入请看下图

$message是弹窗
$confirm是弹框
总结一下第一个模块的，简单的来说就是接口的调用，数据的渲染以及逻辑的处理，没有什么难度，只是本人对于画页面也不是很熟悉，所以使用这个项目来熟悉element组件以及api一些其他没有注意到的细节。

商城后台管理系统学习日志-01相关推荐

商城后台管理系统学习日志-03
系统的话写到后面基本上接口不是很全了,所以在前几天写的时候就差不多已经完成了,较为重要的模块就是商品管理模块了,所涉及到的组件的应用是这几个组件中最为多的了先统一展示界面商品列表商品列表主要是对 ...
商城后台管理系统学习日志-02
** 权限管理 ** 一共包括两个子功能角色列表和权限列表角色列表界面一共包括了四个子功能:添加角色.修改角色.删除角色.分配权限添加角色界面及代码修改角色界面及代码删除角色界面及代码(调用 ...
SSM项目-商城后台管理系统
SSM项目-商城后台管理系统开发说明开发环境项目界面演示项目功能具体的技术指标开发过程 1.搭建SSM框架 1.1.建库建表 1.2.新建Maven工程 1.3.配置pom.xml 1.4 ...
基于java的商城后台管理系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署
基于java的商城后台管理系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署基于java的商城后台管理系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署本源码技术栈 ...
视频教程-vuecli实战商城后台管理系统-Vue
vuecli实战商城后台管理系统帝莎学院创始人&CEO,目前主要从事全栈开发.Python.PHP.小程序.App.Web等技术的研究和开发.专注于实战类教程,授课风趣幽默,讲解条理清晰.通 ...
php商城后台管理,商城后台管理系统
摘要:html> 商城后台管理系统商城后台管理系统 /*documentElement.clientHeight*/ .header{width:100%;height: 50px;line-h ...
商城前后端原型、商城prd文档、商城后台管理系统、商城app文档、电商需求文档、限时秒杀、电商平台、促销助力、拼团抽奖、电商文档、prd文档、电商前后端原型、电商原型、Axure电商系统、rp原型
商城前后端.商城prd文档.商城后台管理系统.商城app文档.电商需求文档.限时秒杀.电商平台.促销助力.拼团抽奖.电商文档.prd文档.电商前后端原型.电商原型.Axure电商系统.rp原型 Axu ...
Axure高保真企业商城后台管理系统web端公司商城后台管理原型连锁门店管理系统交互组件点餐平台商家管理端后台库存管理财务管理系统管理接单管理
作品介绍:Axure高保真企业商城后台管理系统&web端公司商城后台管理原型&连锁门店管理系统交互组件&点餐平台商家管理端后台&库存管理&财务管理&系统 ...
京淘商城后台管理系统
京淘商城京淘商城后台管理系统登录.注册界面商品管理新增商品查询商品规格参数网站内容管理内容分类管理内容管理账户管理管理员账户管理普通用户账户管理个人信息习得总结实习总结 ...

商城后台管理系统学习日志-01

商城后台管理系统学习日志-01相关推荐

最新文章

热门文章