【前端项目笔记】3 用户管理

用户管理相关功能实现

涉及表单、对话框、Ajax数据请求
在这里插入图片描述
基本页面
在这里插入图片描述

用户列表开发

在这里插入图片描述
在router.js中导入Users.vue
在这里插入图片描述

解决用户列表小问题

选中（激活）子菜单后刷新不显示高亮
在这里插入图片描述

  1. 给二级菜单绑定单击事件，点击链接时把对应的地址保存到sessionStorage中
  2. home组件刚刷新创建时就立即把那个值取出来赋值给左侧菜单
  3. 点击每个二级菜单时还需要立即给data中activePath重新赋值，才能实现高亮替换
    在这里插入图片描述
    在这里插入图片描述

绘制用户列表的基本UI结构

面包屑的由来出自童话：两个孩子为了不在森林里迷路，于是沿途洒下了面包屑作为标记，帮助自己能够原路返回。之所以被称为面包屑导航，正是因为它在网站中也起了相同的作用，让用户既能看清自己在网站中所处的位置，也能快速的找到其他同类型产品。
面包屑就是我们经常看到的“主分类>一级分类>二级分类>三级分类>……>最终内容页面”这样的方式。
在这里插入图片描述
在这里插入图片描述

CSS box-shadow用法回顾：
box-shadow: 阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;/* 任意数量的阴影，以逗号分隔 */
box-shadow:3px 3px red,-1em 0 0.4em olive;/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

el-button对应颜色的type名
在这里插入图片描述
在这里插入图片描述

获取用户列表数据

在这里插入图片描述
Ajax主要作用：部分刷新页面而不用重新刷新整个网页
在这里插入图片描述

渲染用户列表数据

在这里插入图片描述
插槽
插槽就是子组件中的提供给父组件使用的一个占位符，用slot标签 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的slot标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。
子组件中用slot标签挖坑

<template><div class="student"><slot></slot>  <!-- 挖坑位置：在 --><h3>原始文本</h3></div>
</template>

在父组件中填坑：

<template><div class="container"><Student>插槽</Student>  <!-- 填坑 --></div>
</template>

输出类似如下：
在这里插入图片描述
作用域插槽：
vue插槽之插槽的用法及作用域插槽详解

实现用户状态的修改

在网页上修改状态，刷新后又恢复成原始状态（未把状态修改同步到后台数据库中进行保存）
在这里插入图片描述
请求方法：put，put一般代表修改的意思，发生修改一般用put请求
☆☆Ajax的常见提交数据方式：
前端GET、POST、PUT请求属于Ajax的常见提交数据方式。Ajax（Asynchronous JavaScript and XML）是一种用于创建异步浏览器和服务器交互的技术，它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。
GET请求：
通常用于从服务器获取数据。
数据通过URL传递，因此数据的大小有限制，并且数据对用户和服务器都是可见的。
GET请求是幂等的，意味着多次执行相同的GET请求将返回相同的结果。
POST请求：
通常用于向服务器发送数据，例如提交表单。
数据放在请求体中，不会在URL中显示，因此数据对用户不可见，但服务器可以访问。
POST请求不是幂等的，因为每次发送数据都可能导致服务器状态的变化。
PUT请求：
用于更新服务器上的资源。
发送数据的方式与POST类似，也是放在请求体中。
PUT请求是幂等的，意味着多次执行相同的PUT请求（具有相同的数据）将产生相同的结果。
除了GET、POST和PUT之外，Ajax还支持其他HTTP方法，如DELETE（用于删除资源）和HEAD（用于获取资源的响应头信息）等1。
在Ajax中，这些请求通常通过XMLHttpRequest对象或Fetch API来发起。这些对象和方法提供了与服务器通信的能力，并允许前端开发者以异步方式处理响应，从而在不重新加载整个页面的情况下更新页面内容。
需要注意的是，虽然Ajax提供了丰富的交互能力，但在使用时也需要注意安全性、性能和用户体验等方面的问题。

  1. 监听到switch状态开关的改变，从而拿到最新的状态
    在这里插入图片描述

  2. 调用对应的API接口，把这次最新的状态保存到数据库中
    在这里插入图片描述

实现搜索的功能

在这里插入图片描述

  1. 用v-model为搜索文本框绑定数据
  2. 为按钮绑定点击事件，直接调用getUserList函数
  3. 要想显示所有结果，需要手动一个个将文本框文本删除
    优化：添加可清空输入框文本属性clearable，使其可一次性删除文本框所有文字
    清空文本框的同时显示所有数据事件，使用@clear绑定getUserList函数
    在这里插入图片描述

实现添加用户的功能

点击按钮弹出添加用户的对话框
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在添加用户的对话框中渲染一个添加用户的表单（表单复习）
在这里插入图片描述
实现自定义校验规则（实现邮箱和手机号的校验）
在这里插入图片描述
在这里插入图片描述

实现添加用户表单的重置功能

  1. 监听对话框的重置时间
  2. 在关闭事件中重置表单
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

添加用户前的表单预校验操作

点击确定按钮时调用一个函数，在函数中对整个表单进行一个预验证
在这里插入图片描述
在这里插入图片描述

实现用户修改的操作

展示用户编辑对话框，获取用户数据
在这里插入图片描述
在这里插入图片描述
布置修改用户的表单
在这里插入图片描述
data中撰写修改用户的验证规则
在这里插入图片描述
修改表单关闭后需要进行重置操作
在el-dialog中添加@close="editDialogClosed"事件
在methods添加函数：

// 监听修改用户对话框的关闭事件editDialogClosed() {this.$refs.editFormRef.resetFields()}

提交修改表单之前表单预验证操作及成功后修改用户信息操作

当点击 确定 按钮时，先对输入的表单进行预验证，只有预验证通过之后才应该发起网络请求进行真正的修改。
为 确定 按钮绑定一个验证处理函数
在这里插入图片描述
预验证操作：

  1. 首先找到this.$refs这个引用对象，然后在refs中点出来editFormRefs这个表单的引用，调用它的.validate函数
  2. 在这个函数中进行验证，验证结果通过valid拿到。如果这个值为true，证明预校验通过，才可发起修改用户信息的数据请求；如果为false则不通过直接return

预校验通过后修改用户信息的操作：

  1. 查看api文档确定请求方式，这里是put请求方式，发送Ajax网络请求this.$http.put( )
  2. 判断请求是否发送成功（res.meat.status是否等于200），失败返回错误信息this.$message.error(’ ')；成功进行三步操作：首先关闭对话框，其次刷新用户数据列表，最后给出修改成功的提示信息。
    在这里插入图片描述
    为什么函数返回值是promise可用await和async优化
    在这里插入图片描述
    在这里插入图片描述

实现删除用户的操作

在删除之前先弹出提示用户是否删除的对话框
在这里插入图片描述
按需导入MessageBox弹框组件
在这里插入图片描述
在methods中使用弹框
在这里插入图片描述

分配角色功能与权限管理有关，等完成权限管理功能再来实现分配角色功能。

☆☆Vue.use()和Vue.prototype的区别:
在Vue中引入使用第三方库通常我们都会采用import的形式引入进来
但是有的组件在引入之后又做了Vue.use()操作
有的组件引入进来又进行了Vue.prototype.$axios = axios

在这里插入图片描述

区别：
Vue.use()用于注册具有install方法的变量，注册后install函数会自动调用，使得install的具体变量能够全局使用，包括全局变量，全局标签等等。
而Vue.prototype就是一个注册全局变量的方法，注册的全局的变量以$开头，调用this方法调用。

分配角色的功能实现

弹出对话框，把当前用户和角色信息渲染到页面中，并获取所有角色信息：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

将获取到的角色列表渲染为一个下拉菜单：
在这里插入图片描述
在这里插入图片描述

实现分配角色的功能：
在这里插入图片描述
在这里插入图片描述
关闭对话框未重置下拉菜单的选择项，导致下次选择时仍保留上次的选项
应该监听对话框的关闭事件，是的下一次分配角色时保持初始状态
在这里插入图片描述
在这里插入图片描述

提交用户列表功能代码

git命令回顾
git branch 查看所有分支，*表示当前所处分支
git checkout -b user 新建分支user并切换到该分支上（checkout代表切换，-b代表新建分支）
git status 检查当前分支上文件的状态（修改、新增）
git add . 把所有状态发生改变的文件统一添加到暂存区
git commit -m "完成用户列表功能的开发" 把当前分支提交到本地仓库中（-m为添加提示消息）
git push -u origin user 把本地的分支user推送到云端origin仓库中同时以user分支进行保存（云端仓库的别名origin）
当开发完一个功能，应该立即把这个功能合并到主分支上
把user分支所有带啊合并到主分支master
git checkout master 切换到主分支master
git merge user 从主分支上把user代码合并过来
此时本地master代码是最新的，云端master还是旧的
git push 提交master更新代码，由于云端已存在master，不用-u

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/856889.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

vlan技术--交换机实现局域网分割(Access模式trunk模式)

vlan技术--交换机实现局域网分割(Access模式trunk模式)

自作笔记... 目录 vlan技术--交换机连接pc实现局域网分割(Access模式) PC SW1 结果 vlan技术--交换机连接pc实现局域网分割(trunk模式) vlan技术--交换机连接pc实现局域网分割(Access模式) 交换机先创建vlan. 交换机分别进入接口 (配置好连接模式, 连接的vlan) PC SW1 …
阅读更多...
Set集合系列——Set、HashSet、LinkedHashset、TreeSet

Set集合系列——Set、HashSet、LinkedHashset、TreeSet

Set系列的公共特点&#xff1a;无重复、无索引&#xff0c;不可用普通for循环&#xff0c;API和Collection重复 HashSet&#xff1a;采取哈希表存取数据 哈希表组成&#xff1f; JDk8之前&#xff1a;数组链表&#xff0c; JDK8以后&#xff1a;数组链表红黑树 哈希值&#…
阅读更多...
简单高效的盈利策略，昂首资本推荐价格行为交易

简单高效的盈利策略，昂首资本推荐价格行为交易

有没有这样一种简单高效的盈利策略&#xff0c;不仅易于新手掌握&#xff0c;也是专业人士的常用利器?当然有了&#xff0c;就是Anzo Capital昂首资本今天推荐的价格行为交易。价格行为交易以其透明清晰的市场视角受到交易员的青睐&#xff0c;它如实反映了市场的真实动态&…
阅读更多...
Ubuntu下安装docker

Ubuntu下安装docker

一、docker安装说明 解决官方源无法下载的问题 二、使用步骤 1.更新软件包索引 sudo apt-get update2.安装必要的软件包&#xff0c;以允许apt通过HTTPS使用仓库 sudo apt-get install apt-transport-https ca-certificates curl software-properties-common3.添加Docker的…
阅读更多...
功能测试 之 单模块测试----购物车模块

功能测试 之 单模块测试----购物车模块

1.需求分析 &#xff08;1&#xff09;购物车显示 1.若未登录&#xff0c;提示登录&#xff0c;提示文案“购物车内暂时没有商品&#xff0c;登录后将显示您之前加入的商品” 2.若已登录&#xff0c;购物车没有商品&#xff0c;提示去购物。 未登录状态 已登录状态 3.购物车有…
阅读更多...
CVPR2024|UniPAD：一种自动驾驶的统一的预训练范式

CVPR2024|UniPAD：一种自动驾驶的统一的预训练范式

本文章仅用于学术分享 论文标题丨 UniPAD: A Universal Pre-training Paradigm for Autonomous Driving 论文地址丨 https://arxiv.org/abs/2310.08370 代码地址 | https://github.com/Nightmare-n/UniPAD 关注「AI前沿速递」公众号&#xff0c;获取更多前沿资讯 01总览 这…
阅读更多...
Spring Clude 是什么？

Spring Clude 是什么？

目录 认识微服务 单体架构 集群和分布式架构 集群和分布式 集群和分布式区别和联系 微服务架构 分布式架构&微服务架构 微服务的优势和带来的挑战 微服务解决方案- Spring Cloud 什么是 Spring Cloud Spring Cloud 版本 Spring Cloud 和 SpringBoot 的关系 Sp…
阅读更多...
「51媒体」食品展览展会活动，媒体邀约资源有哪些？

「51媒体」食品展览展会活动，媒体邀约资源有哪些？

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 食品展览展会活动在媒体邀约方面拥有丰富的资源&#xff0c;可以吸引各类媒体的关注和报道。以下是一些常见的媒体邀约资源&#xff1a; 1. 行业媒体&#xff1a; 专业食品杂志&#xff…
阅读更多...
可编程非线性RCD负载原理与应用

可编程非线性RCD负载原理与应用

可编程非线性RCD负载&#xff08;Resistor-Capacitor-Diode&#xff09;是一种电子元件&#xff0c;其电阻、电容和二极管的特性可以通过编程进行控制和调整。这种负载广泛应用于电力系统、通信设备、电子设备等领域&#xff0c;具有很高的实用价值。 RCD负载的基本原理是利用电…
阅读更多...
超声波清洗机的优势到底有哪些？四款精良爆品总结安利，质量放心

超声波清洗机的优势到底有哪些？四款精良爆品总结安利，质量放心

眼镜是现代人生活中的必备物品&#xff0c;但是很多人可能对于如何正确清洗眼镜感到困惑。传统的清洗方法可能会在清洗过程中对眼镜造成损坏&#xff0c;例如使用普通肥皂或清水清洗时容易划伤镜片。为了解决这个问题&#xff0c;家用眼镜超声波清洗机应运而生。超声波清洗机利…
阅读更多...
[华为北向网管NCE开发教程（6）消息订阅

[华为北向网管NCE开发教程（6）消息订阅

1.作用 之前介绍的都是我们向网管NCE发起请求获取数据&#xff0c;消息订阅则反过来&#xff0c;是网管NCE系统给我们推送信息。其原理和MQ&#xff0c;JMS这些差不多&#xff0c;这里不过多累述。 2.场景 所支持订阅的场景有如下&#xff0c;以告警通知为例&#xff0c;当我…
阅读更多...
Talk｜北京大学张嘉曌：NaVid - 视觉语言导航大模型

Talk｜北京大学张嘉曌：NaVid - 视觉语言导航大模型

本期为TechBeat人工智能社区第602期线上Talk。 北京时间6月20日(周四)20:00&#xff0c;北京大学博士生—张嘉曌的Talk已经准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “NaVid - 视觉语言导航大模型”&#xff0c;NaVid是首个专为视觉语言导航&#xf…
阅读更多...
深入理解Java并发锁

深入理解Java并发锁

在Java中&#xff0c;并发锁是用来控制多个线程对共享资源的访问&#xff0c;确保数据的一致性和完整性。Java提供了多种并发锁机制&#xff0c;包括内置锁&#xff08;synchronized&#xff09;、显示锁&#xff08;如ReentrantLock&#xff09;、原子变量、并发容器以及一些高…
阅读更多...
计算机考研｜20所超高性价比院校，别错过！

计算机考研｜20所超高性价比院校，别错过！

这题我太会了&#xff0c;给大家推荐20所性价比非常高的计算机考研院校&#xff01; 985和211都有&#xff0c;这些学校不搞歧视&#xff0c;公平竞争&#xff0c;非常有能力的同学报考。 ✅厦门大学 (985)&#xff1a;不歧视双非&#xff0c;全靠实力&#xff0c;校园环境还…
阅读更多...
vscode安装所需插件 个人记录版

vscode安装所需插件 个人记录版

vscode安装所需插件 个人记录版 仅做参考 设置
阅读更多...
通信系统的最佳线性均衡器（2）---自适应滤波算法

通信系统的最佳线性均衡器（2）---自适应滤波算法

本篇文章是博主在通信等领域学习时&#xff0c;用于个人学习、研究或者欣赏使用&#xff0c;并基于博主对通信等领域的一些理解而记录的学习摘录和笔记&#xff0c;若有不当和侵权之处&#xff0c;指出后将会立即改正&#xff0c;还望谅解。文章分类在通信领域笔记&#xff1a;…
阅读更多...
好用的便签是什么 电脑桌面上好用的便签

好用的便签是什么 电脑桌面上好用的便签

作为一名文字工作者&#xff0c;我经常需要在繁杂的思绪中捕捉灵感&#xff0c;记录下那些一闪而过的想法。在寻找一款适合电脑桌面的便签应用时&#xff0c;我偶然发现了敬业签便签软件简直是为我量身定制的&#xff0c;它不仅界面简洁&#xff0c;操作便捷&#xff0c;更重要…
阅读更多...
`THREE.PointsMaterial` 是 Three.js 中用于创建粒子系统材质的类。它允许你设置粒子系统的外观属性，比如颜色、大小和透明度。

`THREE.PointsMaterial` 是 Three.js 中用于创建粒子系统材质的类。它允许你设置粒子系统的外观属性，比如颜色、大小和透明度。

demo案例 THREE.PointsMaterial 是 Three.js 中用于创建粒子系统材质的类。它允许你设置粒子系统的外观属性&#xff0c;比如颜色、大小和透明度。下面是对其构造函数的参数、属性和方法的详细讲解。 构造函数 const material new THREE.PointsMaterial(parameters);参数&am…
阅读更多...
阿里AI图片编辑新项目，人人都可做设计师。MimicBrush本地一键整合包下载

阿里AI图片编辑新项目，人人都可做设计师。MimicBrush本地一键整合包下载

最近阿里巴巴联合香港大学开源了一个创新图像编辑工具&#xff1a;MimicBrush&#xff0c;这个工具相当于是一个局部重绘工具。它通过先进的AI技术&#xff0c;能够将一张图片的某一部分融合到另一张图片上。 MimicBrush&#xff0c;一款颠覆传统的图像编辑神器&#xff0c;不过…
阅读更多...
深度学习 --- stanford cs231学习笔记四(训练神经网络的几个重要组成部分之一，激活函数)

深度学习 --- stanford cs231学习笔记四(训练神经网络的几个重要组成部分之一，激活函数)

训练神经网络的几个重要组成部分 一 1&#xff0c;激活函数&#xff08;activation functions&#xff09; 激活函数是神经网络之于线性分类器的最大进步&#xff0c;最大贡献&#xff0c;即&#xff0c;引入了非线性。这些非线性函数可以被分成两大类&#xff0c;饱和非线性函…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023