day01-项目介绍及初始化-登录页

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • day01-项目介绍及初始化-登录页
  • 一、人力资源项目介绍
    • 1.1项目架构和解决方案
    • 主要模块
    • 解决的问题
  • 二、拉取项目基础代码
    • 1.引入库
    • 2.升级core-js版本到3.25.5
    • 按照完整依赖
  • 3.项目目录和入口文件介绍
    • 3.1 入口文件
  • 4.App.vue根组件解析
    • 4.1App.vue组件
    • 4.2layout布局
  • 5.基础设置settings.js和导航守卫 permission.js
  • 6.Vuex的结构
    • 模板中的结构
    • Vuex的设计思想
      • 1.页面交互状态(折叠侧边栏-固定头部)
      • 2.使用全局状态Vuex根据功能拆分成不同的模块(modules)
      • 3.进行状态管理通过getters建立对于模块中属性的快捷访问
  • 7.使用模板中的Icon图标
    • 7.1 src/icons/svg目录下的图标都可以使用
    • 7.2 图标文件名直接设置为svg-icon组件的iconClass属性
  • 8.扩展-解析Icon图标的实现思路
    • 8.1引入目录所有的svg
    • 8.2全局注册svg-icon组件
    • 8.3 loader插件打包svg
    • 8.4svg-icon引用svg的链接
    • 8.5扩展
      • 8.5.1 了解:require.context(路径,是否扫描子目录, 正则匹配) 可以引入某个目录下的内容
      • 8.5.2 了解:svg-sprite-loader打包了所有svg到一个svg标签上,将svg名称作为symbol标签的id属性
      • 8.5.3 了解:svg-icon使用iconClass属性引用了symbol的id
  • 9.导入样式资源并使用git管理
    • 9.1删除原有的.git文件,初始化仓库
    • 9.2添加到暂存区
    • 9.3提交本地仓库
    • 9.4本地仓库配置远程仓库地址
    • 9.5推送到远程仓库
  • 10.登录页的结构和表单
    • 10.1 登录页的基本结构布局(src/views/login/index.vue)
  • 11.登录表单校验
    • 11.1定义数据和校验规则


day01-项目介绍及初始化-登录页

提示:这里可以添加本文要记录的大概内容:

例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。


提示:以下是本篇文章正文内容,下面案例可供参考

一、人力资源项目介绍

1.1项目架构和解决方案

在这里插入图片描述

主要模块

在这里插入图片描述

解决的问题

在这里插入图片描述

二、拉取项目基础代码

1.引入库

$ git clone  https://github.com/PanJiaChen/vue-admin-template.git  heimahr

2.升级core-js版本到3.25.5

$ npm i core-js@3.25.5
$ yarn add core-js@3.25.5

按照完整依赖

$ npm i
//启动
npm run dev

3.项目目录和入口文件介绍

在这里插入图片描述

3.1 入口文件

在这里插入图片描述

4.App.vue根组件解析

4.1App.vue组件

在这里插入图片描述

4.2layout布局

在这里插入图片描述

5.基础设置settings.js和导航守卫 permission.js

在这里插入图片描述
settings.js导出网站基础配置,包括:网站标题、固定header、显示logo
permission.js(权限),主要负责路由导航守卫

6.Vuex的结构

模板中的结构

在这里插入图片描述
在这里插入图片描述
注意:人资资源项目主要针对用户模块user 进行改造和重写

Vuex的设计思想

1.页面交互状态(折叠侧边栏-固定头部)

在这里插入图片描述

2.使用全局状态Vuex根据功能拆分成不同的模块(modules)

const store = new Vuex.Store({modules:{app,settings,user},getters
})

3.进行状态管理通过getters建立对于模块中属性的快捷访问

const getters = {sidebar:state => state.app.sidebar,device:state => state.app.device,token:state => state.user.token,
}

7.使用模板中的Icon图标

7.1 src/icons/svg目录下的图标都可以使用

在这里插入图片描述

7.2 图标文件名直接设置为svg-icon组件的iconClass属性

8.扩展-解析Icon图标的实现思路

8.1引入目录所有的svg

const req = require.context('./svg',false,/\.svg$/);
const requireAll = requireContext =>requireContext.keys().map(requireContext);
requireAll(req);

8.2全局注册svg-icon组件

Vue.component('svg-icon',SvgIcon)

8.3 loader插件打包svg

// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('')

8.4svg-icon引用svg的链接

在这里插入图片描述

8.5扩展

8.5.1 了解:require.context(路径,是否扫描子目录, 正则匹配) 可以引入某个目录下的内容

8.5.2 了解:svg-sprite-loader打包了所有svg到一个svg标签上,将svg名称作为symbol标签的id属性

8.5.3 了解:svg-icon使用iconClass属性引用了symbol的id

9.导入样式资源并使用git管理

9.1删除原有的.git文件,初始化仓库

git init 

9.2添加到暂存区

git add .

9.3提交本地仓库

git commit -m '初始化项目'

9.4本地仓库配置远程仓库地址

git remote add origin 仓库地址

9.5推送到远程仓库

git push -u origin master

10.登录页的结构和表单

在这里插入图片描述

10.1 登录页的基本结构布局(src/views/login/index.vue)

<template><div class="login-container"><div class="logo" /><div class="form"><h1>登录</h1><el-card shadow="never" class="login-card"><!--登录表单--><div class="form" ><h1>登录</h1><el-card shadow="never" class="login-card"><!--登录表单--><!-- el-form > el-form-item > el-input --><el-form ref="form" :model="loginForm" :rules="loginRules"><el-form-item prop="mobile"><el-input placeholder="请输入手机号" v-model="loginForm.mobile" /></el-form-item><el-form-item prop="password"><el-input placeholder="请输入密码" v-model="loginForm.password" show-password/></el-form-item><el-form-item prop="isAgree"><el-checkbox v-model="loginForm.isAgree">用户平台使用协议</el-checkbox></el-form-item><el-form-item><el-button style="width:350px" type="primary" @click="login">登录</el-button></el-form-item>
</el-form></el-card></div></div>
</template>
<script>export default{name:"Login"}
</script>
<style lang="scss">.login-container {display: flex;align-items: stretch;height: 100vh;.logo {flex: 3;background: rgba(38, 72, 176) url(../../assets/common/login_back.png)no-repeat center / cover;border-top-right-radius: 60px;display: flex;flex-direction: column;align-items: flex-end;justify-content: center;padding: 0 100px;.icon {background: url(../../assets/common/logo.png) no-repeat 70px center /contain;width: 300px;height: 50px;margin-bottom: 50px;}p {color: #fff;font-size: 18px;margin-top: 20px;width: 300px;text-align: center;}}.form {flex: 2;display: flex;flex-direction: column;justify-content: center;padding-left: 176px;.el-card {border: none;padding: 0;}h1 {padding-left: 20px;font-size: 24px;}.el-input {width: 350px;height: 44px;.el-input__inner {background: #f4f5fb;}}.el-checkbox {color:#606266;}}
}
</style>

11.登录表单校验

11.1定义数据和校验规则

export default{name:'Login',data(){return{loginForm: {mobile: '',password: '',isAgree: false},loginRules: {mobile: [{required: true,message: '请输入手机号',trigger: 'blur'}, {pattern: /^1[3-9]\d{9}$/,message: '手机号格式不正确',trigger: 'blur'}],password: [{required: true,message: '请输入密码',trigger: 'blur'}, {min: 6,max: 16,message: '密码长度应该为6-16位之间',trigger: 'blur'}],// required只能检查 null "" undefinedisAgree: [{validator: (rule, value, callback) => {// rule规则// value检查的数据 true/false// callback 函数 执行这个函数// 成功执行callback 失败也执行callback(错误对象 new Error(错误信息))value ? callback() : callback(new Error('没有勾选用户平台协议'))}}]}}},methods:{login(){this.$refs.form.validate((isok)=>{if(isok){alert('校验通过') } }) } }
}

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

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

相关文章

LSTM时间序列基础学习

时间序列 时间序列可以是一维&#xff0c;二维&#xff0c;三维甚至更高维度的数据&#xff0c;在深度学习的世界中常见的是三维时间序列&#xff0c;这三个维度分别是&#xff08;batch_size,time_step,input_dimensions&#xff09;。 其中time_step是时间步&#xff0c;它…

jenkins中执行docker命令

1. 修改docker.sock文件的所属组 命令如下&#xff1a; sudo chown root:root docker.sock 2. 对这个文件赋予权限&#xff0c;供其他用户使用&#xff0c;给定权限命令如下&#xff1a; sudo chmod orw docker.sock 3. docker容器映射 这里需要两个文件&#xff1a; 一个…

js-iframe-同源策略-addEventListener-postMessage-父子框架

文章目录 1.同源策略2.不同源解决办法-postMessage不受跨域的影响2.1.addEventListener函数监听消息2.2.父传子-不同源2.3.子传父-不同源 3.通过父页面操作子页面-同源3.1.值3.2.函数 4.通过子页面操作父页面-同源4.1.值4.2.函数 1.同源策略 在HTML页面中&#xff0c;我们有时…

等保主机测评防骗指南(资产调研)

你是否测评时常被运维给忽悠&#xff1f;是否觉得以下的对话耳熟&#xff1f; 你&#xff1a;您好&#xff0c;请问你们的主机资产有哪些&#xff0c;包括服务器、数据库、中间件、应用系统等。 甲&#xff1a;我们资产就这两台服务器&#xff0c;数据库什么的都这上面&#…

中断的“挂起状态”

中断的“挂起状态”&#xff08;Pending State&#xff09;是指中断信号已经被系统识别&#xff0c;但尚未被处理器处理的状态。在微控制器或计算机系统中&#xff0c;中断通常是程序外部事件&#xff08;如硬件设备的信号&#xff09;触发的信号&#xff0c;用于通知处理器需要…

C++关键字总结

1.数据类型 bool:布尔类型&#xff0c;属于基本类型的整数类型&#xff0c;取值为真和假 true:具有布尔类型的字面量&#xff0c;表示真 false:具有布尔类型的字面量&#xff0c;表示假 char:表示字符型&#xff0c;定义了字节的大小&#xff0c;char表示单字节字符 wchar_t:表…

蛇形矩阵(xmuoj)

描述 输入两个整数n和m&#xff0c;输出一个n行m列的矩阵&#xff0c;将数字11到nm按照回字蛇形填充至矩阵中。 具体矩阵形式可参考样例。 输入 输入共一行&#xff0c;包含两个整数n和m。 输出 输出满足要求的矩阵。 矩阵占n行&#xff0c;每行包含m个空格隔开的整数。…

TMGM:ASIC撤销禁令,TMGM强化合规、重启差价合约服务

TMGM作为差价合约&#xff08;CFDs&#xff09;与保证金外汇交易领域的领航者&#xff0c;安全、合规、高效被奉为我集团的终身使命。澳大利亚证券和投资委员会&#xff08;ASIC&#xff09;已正式撤销了早前针对TMGM差价合约业务实施的临时止损令。这一误会的解除&#xff0c;…

降低IT运营成本,提升客户体验 |LinkSLA亮相第十届CDIE

6月25-26日&#xff0c;中国数字化创新博览会&#xff08;CDIE 2024&#xff09;在上海张江科学会堂举行。本届展览主题为“AI创新&#xff0c;引领商业增长新格局”&#xff0c;旨在交流企业在数字化时代&#xff0c;如何以科技为驱动&#xff0c;在转型中如何把握机遇&#x…

Springboot + Mybatis-Plus代码生成指南

使用 Spring Boot 和 MyBatis-Plus 生成代码&#xff0c;可以大大简化开发流程&#xff0c;可以保持编码的规范性&#xff0c;生成单元测试等。以下是详细步骤&#xff1a; 配置pom.xml <dependency><groupId>com.baomidou</groupId><artifactId>myb…

【D3.js in Action 3 精译】推荐序

作为一名自由职业的数据可视化教育从业人员、咨询顾问和设计师&#xff0c;我从 2000 年代末开始就深深沉浸在数据可视化的各个角落&#xff0c;有幸坐到前排亲眼目睹了巨大的产业变革。数据可视化的技术格局一直在推陈出新。从行业工具的发展演变&#xff0c;到触达受众的可视…

如何利用静力水准仪进行地形沉降测量

地形沉降测量在建筑工程和地质研究中起着至关重要的作用。准确的地形沉降测量可以帮助工程师预测和预防潜在的地基问题&#xff0c;从而保障建筑物的安全和稳定。本文将详细介绍如何利用静力水准仪进行地形沉降测量&#xff0c;并探讨其在实际应用中的优势。 静力水准仪的基本原…

关于数字化营销中做好拓新裂变活动的策划探讨

一、引言 在当今数字化时代&#xff0c;企业面临着日益激烈的市场竞争和不断变化的消费者需求。数字化营销作为一种高效的营销方式&#xff0c;能够以较低的成本触达更广泛的目标受众。而拓新裂变活动则是数字化营销中的关键环节&#xff0c;对于企业快速扩大用户群体、提升品…

购物商城系统

摘要 随着互联网的快速发展&#xff0c;网上购物已经成为人们日常生活中不可或缺的一部分。越来越多的消费者选择在网上购物&#xff0c;享受随时随地的便利和丰富多样的商品选择。然而&#xff0c;随着网上购物用户数量的不断增加&#xff0c;传统的线下商店已经无法满足用户…

国家地表水水质自动监测数据(整理版)

国家地表水水质自动检测实时数据发布系统&#xff0c;发布的数据。含省份、城市、河流、流域、断面名称、监测时间、水温、pH、DO、CODMn、TP、TN、NH3-N、浊度等。 数据介绍&#xff1a; 2014年4月-2020年11月每月60-140个左右的站点有数据&#xff0c;从2020年11月开始&#…

MHA、MMM高可用方案及故障切换

目录 一、MHA高可用方案 1、MHA的组成 2、MHA的工作原理 3、部署MHA架构 第一部分&#xff1a;一主两从数据库架构部署 1、全部更改主机名、初始化操作、开启mysql服务、设置主机名管理、时间同步 2、MySQL服务器做主从复制 3、测试主从效果 第二部分&#xff1a;MHA架…

MySQL建表时的注意事项

以下是我对MySQL建表时的注意事项。其实&#xff0c;建表事项有很多&#xff0c;我的总结如下&#xff1a; 1 存储引擎的选择&#xff0c;一般做开发&#xff0c;都是要支持事务的&#xff0c;所以选择InnoDB 2 对字段类型的选择&#xff1a; ​ 对于日期类型如果要记录时分…

VS Code SSH 远程连接服务器及坑点解决

1,设置密钥参考VS Code SSH 远程连接服务器及坑点解决_vscode-cli-611f9bfce64f25108829dd295f54a6894e87339-CSDN博客 2, 远程服务器需要下载 sudo apt-get install wget sudo apt-get install curl 3,代理设置 https://bobbyhadz.com/blog/error-while-fetching-extensi…

PyTorch nn.MSELoss() 均方误差损失函数详解和要点提醒

文章目录 nn.MSELoss() 均方误差损失函数参数数学公式元素版本 要点附录 参考链接 nn.MSELoss() 均方误差损失函数 torch.nn.MSELoss(size_averageNone, reduceNone, reductionmean) Creates a criterion that measures the mean squared error (squared L2 norm) between each…

Python25 Numpy基础

1.什么是Numpy NumPy&#xff08;Numerical Python 的简称&#xff09;是 Python 语言的一个扩展程序库&#xff0c;支持大量的维度数组与矩阵运算&#xff0c;此外也针对数组运算提供大量的数学函数库。NumPy 的前身是 Numeric&#xff0c;这是一个由 Jim Hugunin 等人开发的…