2021-03-08《vue+element 电商后台管理项目 Day5》

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量131 收藏
点赞数
分类专栏： vue电商项目学习记录 文章标签： vue javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wonderfilled/article/details/114532719
版权
本文详细介绍了使用Vue和Element UI构建电商后台管理系统的用户添加功能，包括对话框的显示控制、表单渲染、自定义验证规则、表单重置操作以及调用API接口完成用户添加。重点讲解了如何实现邮箱和手机号的校验规则，并在用户添加成功后刷新列表。
摘要由CSDN通过智能技术生成

vue+element 电商后台管理项目

  • p52 23.添加用户-渲染添加用户的对话框
    1.需要定义一个布尔值控制对话框的显示与隐藏
    2 取消和确定按钮都要使addDialogVisible=flase
    3 dialog 里面分内容主体区和底部区域
    在这里插入图片描述

  • p53 24.添加用户-渲染添加用户的表单
    1 表单常见结构:el-form>el-form-item>el-input
    在这里插入图片描述2 :model 绑定表单数据对象 :rules 绑定表单验证规则对象
    prop 绑定数据验证规则对象里的每一个属性名，是一个数组
    label绑定提示名
    v-model 绑定数据item
    在这里插入图片描述

  • p54 25.添加用户-自定义邮箱和手机号的校验规则

  • 在这里插入图片描述
    一个校验规则就是一个箭头函数
    通过validator属性来进行触发

  • p55 26.添加用户-实现添加表单的重置操作
    1 由于dialog和form没有任何关系，所以当dialog关闭的时候表单的错误信息并不会自己消失，需要监听dialog关闭事件（当dialog关闭时触发处理函数）
    2 @close 当dialog关闭时会触发此函数
    在这里插入图片描述

  • 28.添加用户-调用API接口完成添加用户的操作
    确定前要调用预校验的函数，当预校验通过就进行网络请求
    在这里插入图片描述
    添加成功之后刷新列表

wonderfilled
关注
专栏目录
2021搭建企业级后台（Vue + TS + Element Plus ）～ 1.创建项目
yuan
08-16 277
一. 搭建项目结构 1. 创建项目 安装 Vue CLI： $ npm i -g @vue/cli
2021搭建企业级后台（Vue + TS + Element Plus ）～ 8. 页面基础布局
yuan
08-19 331
页面效果 整体布局 Container 布局容器 编辑 src/Layout/index.vue wenjian： <template> <el-container> <!-- 侧边栏 --> <el-aside width="200px"> <app-aside /> </el-aside> <!-- 版心 --> <el-container>
Vue + ElementUi 管理系统页面制作步骤 2021-6-29
前端工程师的修炼笔记
08-05 2303
管理系统页面制作步骤 登录/退出功能 登录概述 1.登录业务流程 在登录页面输入用户名和密码 调用后台接口进行验证 通过验证之后，根据后台的响应状态跳转到项目主页 2.登录业务的相关技术点 http 是无状态的 通过cookie在客户端记录状态（不跨域推荐） 通过session在服务器端记录状态（不跨域推荐） 通过token方式维持状态 (存在跨域使用） 3.登录功能实现 路有导航守卫控制访问权限 如果用户没有登录，但是直接用过url访问特定页面，需要重新导航到登录页面 //为路由对象 添加 befor
2021-03-21《vue+element 电商后台管理项目 Day6》
wonderfilled的博客
03-23 87
用户管理模块的功能代码查看与梳理（User.vue） 请求用户数据列表 1 根据文档自定义需要的参数 2 发起ajax网络请求 3 一般情况下定义多个数组去存放数据 4 数据列表一般在生命周期函数里直接调用 绘制搜索框和添加用户按钮 1 行跟列组件渲染 用户列表的渲染 1 表格与请求下来的数据数组关联 2 通过prop指定每一列的数据 3 对于需要有样式的列用作用域插槽来绑定 分页效果 当页码值和每页数据条数发生改变时，需要分别将函数的回调参数重新赋值给将要发起请求的参数，然后发起请求就实现
2021-03-03《vue+element 电商后台管理项目 Day2》
wonderfilled的博客
03-03 118
vue+element 电商后台管理项目 Day2 登录成功后操作 sessionStorage 会话期间的存储机制:一旦窗口或标签页被永久关闭了，那么所有通过它存储的数据也就被清空了. 保存token值以及进行页面跳转 window.sessionStorage.setItem('token',res.data.token) this,$router.push('/home') ...
2021-03-03《vue+element 电商后台管理项目 Day3》
wonderfilled的博客
03-04 109
vue+element 电商后台管理项目 Day3 生命周期函数 1.created 页面一创建就渲染数据，调用getmenulist函数 2.在方法中请求左侧列表数据，将请求的数据保存到data域里 3.左侧菜单先只绘制一个，通过双层for循环来渲染菜单和子菜单 路由嵌套 1 在当前页面上放一个路由占位符 通过路由嵌套可以先显示home页面，再显示welcome页面 侧边栏路由链接的改造 :index：’/‘+’users‘ 左侧侧边栏高亮效果的保持 1 需求:点击谁谁获得高亮效果，并且在
2021-03-01《 vue+element 电商后台管理项目 Day1》
wonderfilled的博客
03-03 107
vue+element 电商后台管理项目 Day1 scoped 单文件组件加上防止样式冲突 业务流程 ： 1 访问 app.vue 自动 redirect 到 login.vue 2 导入 global.css 全局style body,html.#app 的height 设置为 100% 并且清空 默认的 margin padding 3 利用absolute position 使盒子居中（相对于body偏移） 4 relative 相对于自己的当前位置 偏移 5 avatar 头像 border-
2021-03-05《vue+element 电商后台管理项目 Day4》
wonderfilled的博客
03-08 129
vue+element 电商后台管理项目 Day4 数据的分页形式效果 pagination 分页 @size-change= 切换页面条数时触发 :每页有几条数据 @current-change= 页码值发生切换就触发 实现逻辑 当页面条数发生改变时触发函数，把最新的条数赋值给queryInfo里的pagesize，然后重新渲染页面 效果：当切换每页有多少数据时，页面显示多少数据条数，当切换显示到第几页时，页面也跳转 修改用户的状态（未解决） 拼接参数，拼接单引号变成模板字符串 更新状态失败
SSM+Vue+Element-UI实现移动电商网站
分享技术热点，看天下大事
08-23 1093
系统采用了Java技术SSM框架，前端使用 element-ui 组件库，选择MySQL作为系统的数据库，开发工具选择 idea来进行系统的设计。基本实现了运动会管理系统应有的主要功能模块，本系统有以下功能：（1）前台：首页、商品信息商品资讯、个人中心、后台管理、购物车、在线客服。（2）管理员：首页、个人中心、用户管理、商品分类管理、商品信息管理、订单评价管理、系统管理、订单管理。
Vue实战项目day05--电商后台管理系统(Element-ui)
weixin_46379498的博客
06-30 441
Vue实战项目day05--电商后台管理系统添加商品列表添加商品 今日目标 1.制作商品列表页面 2.制作商品添加页面 创建子分支 git checkout -b goods_list 推送至码云 git push -u origin goods_list 添加商品列表 A.制作商品列表基本结构 添加子级路由组件以及对应的规则,并设置组件的基本机构 打开router.js,添加下面的代码 import GoodList from './components/goods/List.vue' path: '
Vue实战项目day04--电商后台管理系统(Element-ui)
weixin_46379498的博客
06-29 227
Vue实战项目day04--电商后台管理系统商品分类创建子级路由添加组件基本布局请求分类数据使用插件展示数据完成分页功能完成添加分类参数管理模块添加子级组件完成组件基本布局完成级联选择框展示参数添加参数编辑参数删除参数 今日目标 1.完成商品分类 2.完成参数管理 商品分类 A.新建分支goods_cate 新建分支goods_cate并推送到码云 git checkout -b goods_cate git push -u origin goods_cate B. 创建子级路由 创建categories
Vue实战项目day01--电商后台管理系统(Element-ui)
weixin_46379498的博客
06-15 1939
Vue实战项目day01--电商后台管理系统电商业务概述项目初始化码云相关操作 电商业务概述 客户使用的业务服务：PC端，小程序，移动web，移动app 管理员使用的业务服务：PC后台管理端。 PC后台管理端的功能：管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计 电商后台管理系统采用前后端分离的开发模式 此前端项目是基于Vue的SPA（单页应用程序）项目 前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts 后端
Vue实战项目day06--电商后台管理系统(Element-ui)
weixin_46379498的博客
07-01 485
Vue实战项目day06--电商后台管理系统添加商品完成图片上传使用富文本插件订单列表制作省市区县联动制作物流进度对话框数据统计 今日目标 1.完成商品添加 2.完成订单列表 3.完成数据统计展示 添加商品 完成图片上传 使用upload组件完成图片上传 在element.js中引入upload组件，并注册 因为upload组件进行图片上传的时候并不是使用axios发送请求 所以，我们需要手动为上传图片的请求添加token，即为upload组件添加headers属性 //在页面中添加upload组件，并设置
Vue实战项目day03--电商后台管理系统(Element-ui)
weixin_46379498的博客
06-24 525
Vue实战项目day03--电商后台管理系统今日目标修改用户信息删除用户推送代码权限列表角色列表分配角色将代码推送到码云 今日目标 1.修改用户,删除用户 2.推送代码到码云 3.权限列表 4.角色列表 5.分配角色 修改用户信息 A.为用户列表中的修改按钮绑定点击事件 B.在页面中添加修改用户对话框，并修改对话框的属性 C.根据id查询需要修改的用户数据 //展示编辑用户的对话框 async showEditDialog(id) { //发送请求根据id获取用户信息 const { d
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 863
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 508
【代码】【JavaScript】LeetCode：707设计链表。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 456
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 885
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
Vue+Element-UI JYAdmin后台管理系统模板详解及axios封装
这篇文章提供了vue+element-ui JYAdmin后台管理系统开发的实践指导，涵盖了基础架构配置到具体功能实现的关键技术，对于学习者和开发者来说具有很高的实用价值。通过跟随文章中的步骤和示例，读者可以更好地理解和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值