【前端项目笔记】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-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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

适合企业的TTS文本转语音接口：微软TTS最新模型，发布9种更真实的AI语音

适合企业的TTS文本转语音接口：微软TTS最新模型，发布9种更真实的AI语音

微软对Azure Al语音服务的Personal Voice功能进行了升级&#xff0c;引入了新的零样本学习(zero-shot)的文本到语音(TTS)模型。与初始模型相比&#xff0c;这些新模型提高了合成语音的自然度&#xff0c;并更好地模仿了提示语音中的语音特征。 微软提供了超过400种神经语音&am…
阅读更多...
MySQL数据库的列类型

MySQL数据库的列类型

数值 tinyint 十分小的数据 1个字节 smallint 较小的数据 2个字节 mediumint 中等大小的数据 3个字节 int 标准的整数 4个字节&#xff08;常用&#xff09; bigint …
阅读更多...
【送模板】5张图，帮你轻松搞懂OKR工作法

【送模板】5张图，帮你轻松搞懂OKR工作法

OKR是目标与关键结果法的缩写&#xff0c;OKR运用在工作中就是强调对业务进行逻辑思考&#xff0c;找到目标与关键结果之间的因果关系。这种因果关系的是否准确决定我们努力的价值。 OKR是一种高效的目标管理方法。“O”就是object&#xff0c;目标的意思&#xff0c;“kr”就…
阅读更多...
考研计组chap4指令系统

考研计组chap4指令系统

目录 一、指令格式 155 13.操作码地址码 2.按照地址码数量 &#xff08;1&#xff09;零地址指令 &#xff08;2&#xff09;一地址指令 &#xff08;3&#xff09;二地址指令 &#xff08;4&#xff09;三地址指令 &#xff08;5&#xff09;四地址指令 3.指令长度 …
阅读更多...
信号与系统概述

信号与系统概述

信号是消息的表现形式或传送载体&#xff0c;数学上用函数来表示。信号可以分为确定信号和随机信号、连续时间信号和离散时间信号、周期信号和非周期信号、能量信号和功率信号等。模拟信号是幅度连续的连续时间信号&#xff0c;而数字信号是幅度离散的离散时间信号。对于连续时…
阅读更多...
【C#】字符串处理器

【C#】字符串处理器

实现&#xff1a; 统计字符串中单词的数量。查找字符串中最长的单词&#xff0c;并显示其长度。将字符串中的所有单词首字母大写。将字符串中的所有单词反转。 要求&#xff1a; 使用面向对象的方式实现&#xff0c;包括至少一个类&#xff08;例如 StringProcessor&#xf…
阅读更多...
展厅设计要考虑哪些问题

展厅设计要考虑哪些问题

1、树立醒目的标志。 展馆设计说&#xff0c;与众不同可以吸引更多的参观者&#xff0c;让参观者更容易识别和寻找&#xff0c;给没进过展厅的人留下印象&#xff0c;但不要偏离展览目标和商业形象。环顾别人的设计图&#xff0c;后只有一种可能。不知道应该设计什么样的图纸&a…
阅读更多...
AI产品组件——TTS产品

AI产品组件——TTS产品

语音合成TTS 序列猴子TTS&#xff0c;每个发音人付费标准不同&#xff0c;通过序列猴子开放平台使用。 微软TTS&#xff0c;采用信用卡后付费模式。Speech Studio&#xff0c;付费模式采用统一付费的形式&#xff0c;音效有一款女声效果逼真。 女声&#xff1a;晓晓&#xff…
阅读更多...
Python8 使用结巴（jieba）分词并展示词云

Python8 使用结巴（jieba）分词并展示词云

Python的结巴&#xff08;jieba&#xff09;库是一个中文分词工具&#xff0c;主要用于对中文文本进行分词处理。它可以将输入的中文文本切分成一个个独立的词语&#xff0c;为后续的文本处理、分析、挖掘等任务提供基础支持。结巴库具有以下功能和特点&#xff1a; 中文分词&a…
阅读更多...
【免费API推荐】：解锁无限创意，让您的应用更具竞争力（8）

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

热门高效的免费实用类API是当今开发者们追逐的宝藏。这些API提供了各种热门功能和服务&#xff0c;能够帮助开发者轻松地为应用程序增添实用性和吸引力。无论是人脸识别、自然语言处理、机器学习还是图像处理&#xff0c;这些热门高效的免费API提供了强大的功能和高效的性能&am…
阅读更多...
图纸管理的方法、图纸管理软件

图纸管理的方法、图纸管理软件

图纸管理是一个复杂且关键的过程&#xff0c;它涉及到图纸的创建、存储、共享、修改、审核、存档和检索等多个环节。以下是根据参考文章总结的图纸管理的具体内容和方法&#xff1a; 一、图纸管理的目的 1、确保图纸的准确性&#xff1a;通过规范的管理流程和质量控制措施&…
阅读更多...
设计模式——观察者模式(发布/订阅模式)

设计模式——观察者模式(发布/订阅模式)

观察者模式(发布/订阅模式) 是一种行为模式&#xff0c;允许你定义一种订阅机制&#xff0c;可在对象事件发生时通知多个“观察”该对象的其他对象 观察者模式定义了一种一对多的依赖关系&#xff0c;让多个观察者对象同时监听某一主题对象。这个主题对象在状态发生变化时&am…
阅读更多...
这么多人追捧的伦敦金陷阱是什么？

这么多人追捧的伦敦金陷阱是什么？

我们经常说伦敦金交易是有风险的&#xff0c;整个伦敦金市场中随时可能会出现陷阱&#xff0c;如果投资者不小心掉进这些陷阱&#xff0c;轻则被震荡离场&#xff0c;丢失原来已经盈利的仓位&#xff0c;重则可能还会承受交易本金的亏损。下面我们就来介绍两个在伦敦金交易市场…
阅读更多...
基于DMAIC的SMT TX插件撞伤不良改善

基于DMAIC的SMT TX插件撞伤不良改善

在快速发展的电子制造领域&#xff0c;SMT&#xff08;表面贴装技术&#xff09;已经成为电子产品组装的核心技术之一。然而&#xff0c;SMT TX插件撞伤不良问题一直是制约生产效率与产品质量的瓶颈。本文将基于DMAIC&#xff08;定义、测量、分析、改进、控制&#xff09;方法…
阅读更多...
网格布局之网格线编号定位

网格布局之网格线编号定位

网格布局之网格线编号定位 欢迎关注&#xff1a;xssy5431 小拾岁月 参考链接&#xff1a;https://mp.weixin.qq.com/s/aOO1G3r1kH-cHDXJGPzK6g 点击查看 名词解释 网格线&#xff1a;用与表示网格开始与结束的线。每条网格线都是从 1 开始&#xff0c;分为 行网格线 与 列网…
阅读更多...
Mcgs屏幕脚本程序

Mcgs屏幕脚本程序

目录 1.脚本程序概述1.1 脚本程序简介1.2 脚本程序编辑环境 2.脚本程序语言要素2.1 变量和常量2.2 对象2.3 事件2.4 表达式2.5 联行符2.6 运算符2.7 系统函数 3. 基本语句3.1 赋值语句3.2 条件语句3.3 循环语句3.4 跳出语句3.5 退出语句3.6 注释语句3.7 声明语句3.6 命名规则 1…
阅读更多...
小白如何重装系统win10？电脑一键重装系统傻瓜式操作！超详细步骤！

小白如何重装系统win10？电脑一键重装系统傻瓜式操作！超详细步骤！

随着电脑的广泛应用&#xff0c;给笔记本/台式电脑系统重装已成为一项基本技能。对于电脑新手而言&#xff0c;如何重装Win10系统&#xff0c;或者更高版本的Win11系统可能是一个巨大的挑战。如果对电脑重装系统刚好有需要了解的小伙伴&#xff0c;不妨看看下面的干货分享。本文…
阅读更多...
AI智能写作工具, 免费在线智能创作内容网站

AI智能写作工具, 免费在线智能创作内容网站

对于需要创作内容的同学&#xff0c;选择一款适合自己的AI写作工具可以极大的提高创作效率。下面小编就来和大家分享几款可以生成高质量原创内容的AI写作工具。 1. Kimi智能助手 Kimi智能助手是一款集成了先进算法的AI工具&#xff0c;它能够理解复杂的语言模式&#xff0c;生…
阅读更多...
Mp3文件结构全解析(一)

Mp3文件结构全解析(一)

Mp3文件结构全解析(一) MP3 文件是由帧(frame)构成的&#xff0c;帧是MP3 文件最小的组成单位。MP3的全称应为MPEG1 Layer-3 音频 文件&#xff0c;MPEG(Moving Picture Experts Group) 在汉语中译为活动图像专家组&#xff0c;特指活动影音压缩标准&#xff0c;MPEG 音频文件…
阅读更多...
vue3delete请求报403forbidden,前后端解决方式,cookie无效问题

vue3delete请求报403forbidden,前后端解决方式,cookie无效问题

在做开发时&#xff0c;前期已经在Controller类加上CrossOrigin(origins "*")&#xff0c;发送get和post请求都没问题&#xff0c;但遇到delete请求时&#xff0c;又报出跨域问题 一.前端添加proxy代理服务器&#xff08;未能解决&#xff09; 在vue.config.js中使…
阅读更多...
最新文章

Copyright @ 2022~2023