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

news2025/1/16 5:11:03

用户管理相关功能实现

涉及表单、对话框、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-dialogue中添加@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.coloradmin.cn/o/1838914.html

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

相关文章

WPS相同字体但是部分文字样式不一样解决办法

WPS相同字体但是部分文字样式不一样解决办法

如下图&#xff0c;在使用wps编辑文档的时候发现有些电脑的文字字体很奇怪&#xff0c;但是把鼠标移到这个文字的位置&#xff0c;发现它和其他正常文字的字体是一样的&#xff0c;都是仿宋_GB2312 正常电脑的文字如下图所示 打开C:\Windows找到Fonts这个文件夹 把仿宋_GB2312这…
阅读更多...
【免费API推荐】：解锁无限创意，让您的应用更具竞争力（8）

【免费API推荐】：解锁无限创意，让您的应用更具竞争力（8）

热门高效的免费实用类API是当今开发者们追逐的宝藏。这些API提供了各种热门功能和服务&#xff0c;能够帮助开发者轻松地为应用程序增添实用性和吸引力。无论是人脸识别、自然语言处理、机器学习还是图像处理&#xff0c;这些热门高效的免费API提供了强大的功能和高效的性能&am…
阅读更多...
格雷母线技术革新：推动斗轮堆取料机进入精准操作时代

格雷母线技术革新：推动斗轮堆取料机进入精准操作时代

随着工业4.0时代的到来&#xff0c;智能化、自动化已成为工业发展的必然趋势。特别是在港口、电力、冶金等行业中&#xff0c;散料装卸机械的智能化水平直接关系到整个生产流程的效率与安全。斗轮堆取料机作为这些行业中的关键设备&#xff0c;其操作方式的革新显得尤为重要。 …
阅读更多...
Apple Watch开发入门知识，还是很有必要的

Apple Watch开发入门知识，还是很有必要的

随着现在 Apple 生态圈的发展&#xff0c;越来越多的 App 会把自己的简化版从 iOS 迁移至 WatchOS&#xff08;支付宝、微信、手Q、头条、QQ音乐、网易云音乐等等&#xff0c;都有Watch版App&#xff09;。官方开发文档&#xff1a;Setting up a watchOS project | Apple Devel…
阅读更多...
NPDP含金量、考试内容、报考要求、适合人群?

NPDP含金量、考试内容、报考要求、适合人群?

01.NPDP核心价值解读 NPDP认证的核心价值在于整合产品开发管理的理论与实践&#xff0c;包含新产品开发策略、研发流程管理、市场研究、销规划、团队管理、项目管理等等&#xff0c;理论体系和知识内容穿插在产品发展的全过程。 对于职场打工人来说&#xff0c;拥有NPDP证书证…
阅读更多...
csrf+xss组合拳

csrf+xss组合拳

csrfxss组合拳 一、环境搭建 靶场cms文章管理系统 二、流程开始 这是系统前端 系统管理后台 而我们要打到后台管理员的cookie&#xff0c;结合前端存储型的xss完全可以实现&#xff0c;那后端怎么被打到cookie呢&#xff0c;我们来从这里添加用户开始分析数据包来说明 看看…
阅读更多...
【CT】LeetCode手撕—手撕快排

【CT】LeetCode手撕—手撕快排

目录 题目1-思路-快排1-1 快排的核心思想快速排序算法步骤优美的调整区间 1-2 ⭐快排的实现 2- 实现⭐912. 排序数组——题解思路 3- ACM 实现 题目 原题连接&#xff1a;912. 排序数组 1-思路-快排 1-1 快排的核心思想 选择一个基准 基准左侧的元素都小于该元素基准右侧的元…
阅读更多...
乾坤微服务的使用

乾坤微服务的使用

前言&#xff1a; 在这里整理下用乾坤来开发微服务的一些资料。 使用好处&#xff1a; 使用乾坤可以实现什么效果呢&#xff1f;众所周知&#xff0c;前端的框架五花八门&#xff0c;react/vue/angular等各领风骚&#xff0c;那么如果我们有需要把不同技术栈的项目整合起来&…
阅读更多...
为何Proteus用户争相拥抱SmartEDA？揭秘背后的强大吸引力！

为何Proteus用户争相拥抱SmartEDA？揭秘背后的强大吸引力！

在电路设计与仿真领域&#xff0c;Proteus一度以其稳定性能和丰富功能赢得了众多用户的青睐。然而&#xff0c;近年来&#xff0c;越来越多的Proteus用户开始转向SmartEDA&#xff0c;这一新兴电路仿真软件正迅速崭露头角&#xff0c;成为行业内的翘楚。那么&#xff0c;究竟是…
阅读更多...
MySQL数据库的列类型

MySQL数据库的列类型

数值 tinyint 十分小的数据 1个字节 smallint 较小的数据 2个字节 mediumint 中等大小的数据 3个字节 int 标准的整数 4个字节&#xff08;常用&#xff09; bigint …
阅读更多...
ARM架构简明教程

ARM架构简明教程

目录 一、ARM架构 1、RISC指令集 2、ARM架构数据类型的约定 2.1 ARM-v7架构数据类型的约定 2.2 ARM-v8架构数据类型的约定 3、CPU内部寄存器 4、特殊寄存器 4.1 SP寄存器 4.2 LR寄存器 4.3 PC寄存器 二、汇编 1、汇编指令&#xff08;常用&#xff09; 2、C函数的…
阅读更多...
屏蔽房是做什么用的？为什么需要定期检测？

屏蔽房是做什么用的？为什么需要定期检测？

屏蔽房对于不了解的人来说&#xff0c;可能光看名字不知道是做什么的&#xff0c;但是对于一些企业或者机构&#xff0c;却是再熟悉不过的了。和名字一样&#xff0c;屏蔽房是对空间内的信号以及一些外界环境条件进行隔绝&#xff0c;在一些有特殊要求的企业机构中&#xff0c;…
阅读更多...
刚刚发布！这4本期刊已剔除SCI收录，附完整目录下载

刚刚发布！这4本期刊已剔除SCI收录，附完整目录下载

科睿唯安于6月19日更新了SCIE、SSCI、AHCI、ESCI四大数据库最新收录期刊目录。 2024年第一版——2024年1月24日更新 2024年第二版——2024年2月19日更新 2024年第三版——2024年3月18日更新 2024年第四版——2024年4月15日更新 2024年第五版——2024年5月20日更新 2024年…
阅读更多...
疯狂买买买！你的支付环境真的安全吗？

疯狂买买买！你的支付环境真的安全吗？

在日常生活中&#xff0c;移动电话为我们带来了更多的方便。然而&#xff0c;我们在享受手机支付的便捷之余&#xff0c;也应充分认识到风险&#xff0c;增强防范意识&#xff0c;慧眼识诈。 小亿提醒&#xff1a;大家在购物之余&#xff0c;务必要注意手机支付的安全性&#…
阅读更多...
二维码分班查询系统你还不会用？

二维码分班查询系统你还不会用？

分班查询系统&#xff0c;已经成为许多学校管理分班流程的得力助手。当新学期伊始&#xff0c;学校需要进行分班&#xff0c;而传统的手工分班方式不仅耗时&#xff0c;还容易出错。这时&#xff0c;一个智能的分班查询系统就显得尤为重要。 作为老师&#xff0c;您可能已经意识…
阅读更多...
电脑开机黑屏怎么办？教你3招轻松解决

电脑开机黑屏怎么办？教你3招轻松解决

电脑开机黑屏是一种常见但令人沮丧的问题。无论是台式机还是笔记本电脑&#xff0c;用户都可能遇到这种情况&#xff0c;导致无法正常使用电脑。黑屏问题可能由多种原因引起&#xff0c;包括硬件故障、软件冲突、驱动问题等。本文将介绍电脑开机黑屏怎么办的三种方法&#xff0…
阅读更多...
Geoserver源码解读三 GeoServerBasePage

Geoserver源码解读三 GeoServerBasePage

一、概述 org.geoserver.web.GeoServerBasePage 类&#xff0c;在Geoserver中是所有页面类的基类&#xff0c;也是单独存在的一个主UI界面入口文件。拿到源码后可以在里面进行肆意的魔改&#xff0c;也可以单独创建一个工程写根据它扩展。下面以登录的代码作为切入点&#xff0…
阅读更多...
CarService的构成和初始化分析

CarService的构成和初始化分析

以下分析&#xff0c;基于安卓13的AAOS。 代码构成 packages/services/Car CarService相关代码&#xff0c;主要是在这个目录下 frameworks/opt/car/services 主要是carservice启动相关。 其它目录&#xff1a;audio_policy_configuration.xml和car_audio_configuration.xm…
阅读更多...
＜Rust＞＜iced＞基于rust使用iced构建GUI实例：如何将svg格式转为ico格式图片？

＜Rust＞＜iced＞基于rust使用iced构建GUI实例：如何将svg格式转为ico格式图片？

前言 本专栏是Rust实例应用。 环境配置 平台：windows 软件：vscode 语言：rust 库：iced、iced_aw 概述 本文是专栏第4篇实例，依旧是一个图像格式转换程序，基于rust的svg库resvg、图像处理库image以及文件处理库rfd。 流程是先用resvg获取svg图片的数据并将其转为png数据…
阅读更多...
llama-factory微调chatglm3

llama-factory微调chatglm3

一、定义 案例/多卡 二、实现 案例 1. 下载chatglm3-6b-32k模型 2. 配置数据集微调指令 CUDA_VISIBLE_DEVICES0,1 llamafactory-cli train \--stage sft \--do_train True \--model_name_or_path /home/chatglm3-6b-32k \--finetuning_type lora \--template chatglm3 \--d…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023