vue3 登录页和路由表开发

目录

应用场景/背景描述:

开发流程:

详细开发流程:

总结/分析:


背景描述

在上一篇的基础上开始开发,element-plus+vue3

上一篇说道详细迁移的过程,如下:

所以我这篇开始了第一步,中途涉及其他东西,会引入其他篇。 

我找的模板是这里的:https://pnpm.io/zh/motivation


开发流程梳理

首先登录功能,需要两个页面,一个登录页,一个登录后跳转到页面,这里叫它首页吧。

  1. 先在views底下新建两个页面:首页,登录页
  2. 添加两个页面的路由表,这一步把路由表基础部分做了
  3. 画登录页和首页的界面
  4. 登录,需要向服务发送请求=> 做一下请求拦截和封装
  5. 发送请求
  6. 响应后存储用户信息,跳转页面
  7. 开发首页的样式

详细开发流程

一、新建页面

二、开发界面

因为用的模板,所以有大概的登录和首页界面。

但是还是需要改改代码,更改样式,首先是登录页,需要获取系统的图标,以及更改背景颜色和输入框的样式等。 


总结

暂时先写到这里,下面的下一篇写

overl

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

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

相关文章

Ubuntu20.04.2 Mate 安装后基本初始设置要点笔记

序言: 有几款Linux比较稳定而且LTS长期支持,窗口也比较干净有特色,CentOS、Ubuntu、Debian、Mint 都是挺不错的OS,因为LTS,所以不像Rolling版那样改动频发,为长期应用提供了比较好的保障。下面是 Ubuntu20…

【Filament】绘制立方体

1 前言 本文主要介绍使用 Filament 绘制彩色立方体,读者如果对 Filament 不太熟悉,请回顾以下内容。 Filament环境搭建绘制三角形绘制矩形绘制圆形 2 绘制立方体 本文项目结构如下,完整代码资源 → Filament绘制立方体。 2.1 自定义基类 为…

【计算机系统结构实验】实验5 多核编程(OpenMP编程)

5.1 实验目的 加深对多核处理器架构的理解; 掌握使用OpenMP进行多线程编程的基本方法; 学习Windows和OpenEuler环境下多核编程的过程和time命令; 5.2 实验平台 需要多核处理器的计算机和微软编程工具Visual Studio 2012。Taishan服务器&…

Mac使用Vmware Fusion虚拟机配置静态ip地址

一、设置虚拟机的网络为NAT 二、修改虚拟机的网络适配器网络 1、查看虚拟机的网卡 cd /etc/sysconfig/network-scripts#有些系统显示的是ens33,ens160等等 #不同的系统和版本,都会有所不同 #Centos8中默认是ens160,在RedHat/Centos7则为ens33 2、查看网…

封装Detours用于Python中x64函数hook

Detours 代码仓库: https://github.com/microsoft/Detours x64写一个任意地址hook要比x86麻烦的多,所以这里直接封装框架来用于x64的hook。 Detours是微软发布的一个API hook框架,同时支持x86和x64,看文档说也支持ARM和ARM64的Windows。 …

【Linux笔记】网络操作命令详细介绍

🍎个人博客:个人主页 🏆个人专栏:Linux学习 ⛳️ 功不唐捐,玉汝于成 前言: 网络操作是Linux系统中常见的任务之一,它涵盖了测试网络连接、配置网络接口、显示网络统计信息以及远程登录和文件传…

STM32的以太网外设+PHY(LAN8720)使用详解(5):MAC及DMA配置

0 工具准备 1.野火 stm32f407霸天虎开发板 2.LAN8720数据手册 3.STM32F4xx中文参考手册1 MAC及DMA配置 1.1 使能ETH时钟 stm32的ETH外设挂载在AHB1总线上,位于RCC_AHB1ENR的bit25-bit27: 相关语句如下: RCC_AHB1PeriphClockCmd(RCC_AHB1…

WPF组合控件TreeView+DataGrid之DataGrid封装-粉丝专栏

wpf的功能非常强大,很多控件都是原生的,但是要使用TreeViewDataGrid的组合,就需要我们自己去封装实现。 我们需要的效果如图所示: 这2个图都是第三方控件自带的,并且都是收费使用。 现在我们就用原生的控件进行封装一…

Tekton

一. 概念 Tekton 官网 Github Tekton 是一种用于构建 CI/CD 管道的云原生解决方案,它由提供构建块的 Tekton Pipelines,Tekton 作为 Kubernetes 集群上的扩展安装和运行,包含一组 Kubernetes 自定义资源,这些资源定义了您可以为…

nodejs+vue+ElementUi资源互助共享平台的设计

后台:管理员功能有个人中心,用户管理,卖家管理,咨询师管理,萌宝信息管理,幼儿知识管理,保姆推荐管理,音频资源管理,二手商品管理,商品分类管理,资…

【CF闯关练习】—— 900分段

🌏博客主页:PH_modest的博客主页 🚩当前专栏:cf闯关练习 💌其他专栏: 🔴每日一题 🟡 C跬步积累 🟢 C语言跬步积累 🌈座右铭:广积粮,缓…

GPTs | Actions应用案例

上篇文章说道,如何使用创建的GPTs通过API接口去获取外部的一些信息,然后把获取的外部信息返回给ChatGPT让它加工出来,回答你的问题,今天我们就来做一个通俗易懂的小案例,让大家来初步了解一下它的使用法! …

基于AE、VAE 和 VQ-VAE的图像生成

AE 是将数据映直接映射为数值code(确定的数值),主要用于图像压缩与还原VAE是先将数据映射为分布,再从分布中采样得到数值code,主要用于图像生成。AQ-VAE是在原始VAE基础上多了一步Vector Quantization矢量量化操作&…

STM32的以太网外设+PHY(LAN8720)使用详解(1):ETH和PHY介绍

0 工具准备 1.野火 stm32f407霸天虎开发板 2.LAN8720数据手册 3.STM32F4xx中文参考手册1 以太网外设(ETH) 1.1 以太网外设(ETH)简介 STM32F4系列MCU内部集成了一个以太网外设(ETH),可以通过介…

DRF之引入

目录 一、web应用模式 【1】前后端混合开发 【2】前后端分离 二、API接口 三、接口测试工具:Postman 四、RESTful API规范 【1】什么是RESTful 【2】RESTful API的规范 2.1 数据的安全保障 2.2 接口特征表现 2.3 多数据版本共存 2.4 数据即是资源&#…

2024年PMP考试新考纲-PMBOK第七版-项目管理原则真题解析

从战争中学习战争。对于参加2024年PMP考试的小伙伴来说,最有效的学习方式是这样地:①阅读了教材(PMBOK6、7和敏捷),了解基本概念;②反复刷近期的PMP考试真题,查漏补缺。 为此,华研荟…

华为云Stack 8.X流量模型分析(三)

三、VPC内部二层流量模型分析 1.不同宿主机下虚拟机互访 VM1发送arp请求,arp报文根据流表到达br-tun,br-tun给予VM1到达VM2的MAC信息。此时arp报文不出宿主机(Host1); **注意:**br-tun内的信息是由管理平…

2023年PMP证书的含金量有多高?对于企业来说有多大的价值?

PMP含金量更多的是“敲门砖”作用,公司招聘的门槛 当然现在PMP管理模式也很热门,各大企业都有引进改良应用在公司的项目上,之前在校友群里面大家在讨论PMP 的作用也有说到这一点,给大家看看吧。 至于为什么PMP认证从国外引进大陆…

尺寸公差分析与尺寸链计算软件-DTAS3D到底能给我们带来哪些价值?

【技能】DTAS3D能给我们带来哪些价值? DTAS3D是一款高度集成的公差分析软件,旨在为产品开发团队提供准确的建议,从而放心地将设计发布给制造部门。下面是DTAS3D的关键价值和应用: 1.与三维CAD无缝集成: DTAS3D与三维CAD软件 (CATIA、NX、Cr…

如何进行USB丢弃攻击?

USB丢弃攻击,类似于一场表演艺术,您需要构建一个引人入胜的故事,激发目标的好奇心,让他们忽略基本的安全意识,插入您精心准备的USB设备! 本文章仅限娱乐,请勿模仿或进行违法活动! 一、选择放置…