1.IHRM人力资源后台 - 项目搭建

IHRM人力资源 - 项目搭建

文章目录

  • IHRM人力资源 - 项目搭建
  • 一、项目搭建
    • 1.1 项目搭建
    • 1.2 项目目录
      • 1.2.1 src 目录
    • 1.3 App.vue 根组件解析
    • 1.4 基础设置 settings.js
    • 1.5 导航守卫 permission.js
    • 1.6 VUEX
  • 二、 图标使用
    • 2.1 图标使用
    • 2.2 Icon 图标的解析

一、项目搭建

1.1 项目搭建

拉取基础模板代码

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

其他: core-js版本处理

  • 项目模版中的core-js的版本号有些滞后,需要将其版本号改为“3.25.5”再安装依赖

image-20240102174649927

安装依赖项

yarn

出现这种情况便是安装依赖成功

image-20240102182148728

启动项目

我们在package.json中设定的dev执行命令

yarn dev

image-20240102180054972

启动一下下

image-20240102181922541

image-20240102182326517

下载两个插件

image-20240102182657305

此插件的作用就是帮我们格式化代码,如下图所示,在代码的后面加了一个分号,便提示错误信息

这种格式化的错误很好修改,只需要“Ctrl+Alt+L”即可(使用的webstore),会自动消失

image-20240102182836182

如果是VSCode的话就下载ESLint和Vetur

1.2 项目目录

1.2.1 src 目录

image-20240108160201312

  • src:源代码目录。写的功能、测试都在此目录下4

除了src文件之外我们都可以理解为配置文件

image-20240108151412425

image-20240108151510792

  • api目录:请求模块

我们会把请求单独抽离出来放在api文件目录下

抽离出来有个好处,哪个模块想用直接引用就好了

比如user.js文件按需导出了一些方法

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/vue-admin-template/user/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    url: '/vue-admin-template/user/info',
    method: 'get',
    params: { token }
  })
}

export function logout() {
  return request({
    url: '/vue-admin-template/user/logout',
    method: 'post'
  })
}
  • assets 目录

存放静态资源,比如图片

image-20240108151901086

  • components 目录

存放组件文件

Breadcrumb 面包屑组件

Hamburger 汉堡组件

SvgIcon 图标组件

这三个组件是公用组件

image-20240108152012905

  • icons 图标目录

我们要实现图片注册、自动引用

  • layout 布局组件目录

  • router 路由目录

路由:地址和组件的映射。一个地址对应一个组件,但一个组件可能会对应多个地址

  • store 目录

VUEX是状态管理框架,在store目录中存放的就是VUEX

  • style 样式目录

存放一些全局样式

  • utils目录

存放工具类

  • views目录

也是存放组件的目录,但是区别与components目录文件夹

views目录存放路由器组件

在router目录index.js文件中地址对应组件,对应的组件就是路由器组件,在views目录中

  • App.vue组件

    汇总所有组件

https://blog.csdn.net/weixin_51351637/article/details/126733697

  • main.js组件

入口文件。当执行完npm run serve命令后会直接执行此文件

一般在这个文件引入一些我们常用的模块、实例化vue、指定容器、挂载路由、渲染根组件、注册Element-ui组件

https://blog.csdn.net/weixin_51351637/article/details/126733697

1.3 App.vue 根组件解析

main.js组件将我们的根组件App.vue渲染到了页面上

那到底做了什么样的工作能够显示我们的登录/首页/布局

如下所示,App.vue组件中代码

<template>
  <div id="app">
     <!--路由容器组件,一级路由-->
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

App.vue文件中有一个router-view一级路由容器,里面放置的是root里面的一级路由

image-20240108195520441

然后“/”中里面还有二级路由

image-20240108195620361

layout布局是怎么保证二级路由组件的显示呢

/**
 *  Layout @/在vue中代表路径别名
 *  @ 符号表示当前目录的src
 *  @/ 表示src下的layout,而layout又是一个目录,所以会拉取index.vue文件
 *  即index.vue组件就是我们的路由组件,会实现二级路由
* */
import Layout from '@/layout'
{
  path: '/',
  component: Layout,
  redirect: '/dashboard',
  children: [{
    path: 'dashboard',
    name: 'Dashboard',
    component: () => import('@/views/dashboard/index'),
    meta: { title: 'Dashboard', icon: 'dashboard' }
  }]
},

我们也可以分析一下layout中index.vue文件的代码,是如下所示的布局形式

image-20240108200759280

放到我们的页面三个结构如下所示

image-20240108201111746

app-main组件为什么可以展示二级路由

在layout目录的index.vue文件下如下图所示:

image-20240108201428346

我们可以再看一下components文件下AppMain.vue组件

并且在此处还有一个router-view组件(此时是二级组件)

image-20240108201555317

可以看一下layout布局组件的总结

image-20240108201745077

1.4 基础设置 settings.js

导出网站基础设置,保罗网站标题、固定header、显示logo

这个文件中导出了一个对象,里面有许多的属性是key:value的形式

module.exports = {

  /**
  * 标题
  */
  title: '人力资源后台管理系统',

  /**
   * 是否固定我们的头部组件
   */
  fixedHeader: false,

  /**
   * 是否显示侧边栏的logo
   */
  sidebarLogo: false
}

如下所示我们的title

image-20240108202242102

当fixedHeader的值是true时,下图所标注的地方不会随便下拉而看不到,而是一直固定在这里

image-20240108202342462

当sidebarLogo的值为true的时候,就可以看到如下图所示的图标

image-20240108202515981

1.5 导航守卫 permission.js

此文件为了完成权限拦截,负责路由导航守卫

路由守卫

其实就是下面两个函数,路由前置守卫和路由后置守卫

路由前置守卫:路由跳转之前执行

路由后置守卫:路由跳转之后执行

// to到哪个组件
//from从哪个组件来
//next是在执行完一系列判断逻辑之后必须要执行哪个函数,只有执行了next,路由才能完成正常的跳转,完成跳转之后会执行路由后置守卫
async(to, from, next)

image-20240108203047631

1.6 VUEX

VueX

VUEX向外暴露了两个属性,一个modules和一个getters

我们只暴露两个属性说明我们项目的VUEX都放在modules模块中,而getters是向外暴露一些便捷的访问属性,并没有我们常见的state、mutation和action

modules我们称之为模块

getters我们称之为VueX里面的计算属性

image-20240108204539930

index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({
  // 模块
  modules: {
    app,
    settings,
    user
  },
  // Vuex中的计算属性
  getters
})

export default store

app和settings控制我们左侧导航的伸缩、控制header的固定、左侧导航的logo展示

user是需要我们做用户权限信息的部分

image-20240108205115521

getters是模块属性的意思,而getters中属性都来自于modules模块中state属性

image-20240108205432951

然后我们可以看到getters.js文件中导出了一些属性

state是根状态

state.app.sidebar是取app模块属性

state.user.token是取user模块属性

所以说我们的getters只是做了一个便捷访问,更便捷的访问模块中的属性

image-20240108205513605

此项目中Vuex的设计思想

  • 页面交互状态(折叠侧边栏-固定头部)使用全局状态Vuex
  • 根据功能拆分成不同的模块(modules)进行状态管理
  • 通过getters建立对于模块中属性的快捷访问

二、 图标使用

图片和图标是有区别的

图片使用png或者gpg,而图标一般是svg形式

图标的目的是装饰和点缀,也没有其他的作用

2.1 图标使用

image-20240108210615027

我们将上面的图标进行使用的时候还需要借助一个组件,此组件已经将图标注册好了,图标就可以正常显示了

image-20240108210719834

<template>
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import { isExternal } from '@/utils/validate'

export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    isExternal() {
      return isExternal(this.iconClass)
    },
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    },
    styleExternalIcon() {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover!important;
  display: inline-block;
}
</style>

怎么使用

<!--使用svg-incon组件-->
<!--设置iconClass属性=“文件名(没有后缀)”-->
<svg-icon icon-class="dashboard"></svg-icon>
  • src/icons/svg目录下的图标都可以使用

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

2.2 Icon 图标的解析

在main.js文件实际上我们引入了icon这个目录,并且在这个目录中有一个index.vue文件

image-20240108211840613

查看一下icon目录下index.vue文件

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// 全局注册组件。这也就是为什么后面我们可以直接使用svg-icon
Vue.component('svg-icon', SvgIcon)

//require.context(要扫描的目标目录,是否扫描子目录,要扫描的目标文件,是一个正则表达式,以.svg结尾的文件) 扫描目录中的文件
//最终返回值req是是一个函数
const req = require.context('./svg', false, /\.svg$/)

//requireAll一个函数
//req.keys()的值是我们所扫描的所有的文件
//map是循环每一个项,也就是每一个svg图片,并且map的参数是一个回调函数
//req函数能够引用图片到项目中,如果svg有一百个,那这个map就执行100次
const requireAll = requireContext => requireContext.keys().map(requireContext)

//调用了函数
//将所有的svg都引用到项目中
requireAll(req)

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

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

相关文章

Cypress安装与使用教程(4)—— 软测大玩家

&#x1f60f;作者简介&#xff1a;博主是一位测试管理者&#xff0c;同时也是一名对外企业兼职讲师。 &#x1f4e1;主页地址&#xff1a;【Austin_zhai】 &#x1f646;目的与景愿&#xff1a;旨在于能帮助更多的测试行业人员提升软硬技能&#xff0c;分享行业相关最新信息。…

一篇搞明白微信的基本授权功能

一、介绍 由于部分接口需要经过用户授权同意才能调用。我们把这些接口按使用范围分成多个 scope , 用户选择对 scope 来进行授权&#xff0c;当授权给一个 scope 之后&#xff0c;其对应的所有接口都可以直接使用。 此类接口调用时&#xff1a; 如果用户未接受或拒绝过此权限…

2.IHRM人力资源 - 登录

一、登录页结构与表单开发 我们要实现的登录界面 目前的登录界面 1.1 登录页结构 复制下面的代码到views/login/index.vue页面下 <template><div class"login-container"><div class"logo"/><div class"form"><h1&…

使用 Jamf Pro 和 Okta 工作流程实现自动化苹果设备管理

Jamf的销售工程师Vincent Bonnin与Okta的产品经理Emily Wendell一起介绍了JNUC 2021的操作方法会议。它们涵盖了Okta工作流程&#xff08;Okta Workflow&#xff09;&#xff0c;并在其中集成了Jamf Pro&#xff0c;构建了一些工作流程&#xff0c;并提供了几个用例。 Okta 工作…

MySQL加锁规则

项目编写涉及到数据持久化一般选择使用MySQL。由于时间原因&#xff0c;数据库使用我选择了无脑三板斧&#xff1a;1. 建立了索引加速查询、2. 关闭自动提交事务、3. 在需要确保原子性的数据库操作之间手动创建和提交事务。 这么一看&#xff0c;仿佛即使是实际开发也与你此前…

什么是充放电振子理论?

CHAT回复&#xff1a;充放电振子模型&#xff08;Charging-Reversal Oscillator Model&#xff09;是一种解释ENSO现象的理论模型&#xff0c;这个模型把ENSO现象比喻成一个“热力学振荡系统”。 在这个模型中&#xff0c;ENSO现象由三个组成部分&#xff1a;充电&#xff08;C…

利用CHAT写实验结论

问CHAT&#xff1a;通过观察放置在玻璃表面上的单个水滴&#xff0c;人们可以观察到水滴充当成像系统。探究这样一个透镜的放大倍数和分辨率。 CHAT回复&#xff1a;实验报告标题&#xff1a;利用玻璃表面的单一水滴观察成像系统的放大倍数和分辨率&#xff1a; 一、 实验目的…

你不得不知道的常用 Git 命令

最近在学习的时候发现 git 命令没有自己想象中那么简单&#xff0c;特此做一期 《 常用 Git 命令 》&#xff0c;不仅是给掘友分享&#xff0c;也能巩固自己学到的知识。 在此向大家推荐一个学习 git 指令的小游戏 Learn Git Branching&#xff0c;以通关的方式进行学习&#…

鸿蒙Harmony--状态管理器-@Observed装饰器和@ObjectLink装饰器详解

经历的越多&#xff0c;越喜欢简单的生活&#xff0c;干净的东西&#xff0c;清楚的感觉&#xff0c;有结果的事&#xff0c;和说到做到的人。把圈子变小&#xff0c;把语放缓&#xff0c;把心放宽&#xff0c;用心做好手边的事儿&#xff0c;该有的总会有的! 目录 一&#xff…

【壹基金儿童服务站瑞金站】寿司DIY亲子活动火热进行

1月13日下午&#xff0c;“大灰狼来啦....”在小朋友们一声声欢快律动的游戏里在象湖新城小区拉开了一场“寿司DIY”亲子主题活动序幕&#xff0c;活动由壹基金儿童服务站瑞金站&#xff08;瑞金赋能公益&#xff09;和爱心商家安心妈妈飞鹤奶粉联合主办。 热身游戏结束后&…

链接全域直播产业经济,天府锋巢直播产业基地10层正式起航

100㎡-400㎡多种类型的办公户型可选 精装全包 拎包入驻 【天府锋巢直播基地】 由德商产投与无锋科技联袂打造 坐落于天府新区核心区域科学城板块 包含电商直播、娱乐直播、跨境直播 多种直播业态的全域直播基地 基地【10层】于12月初全面竣工 招&#xff5c;商 &#xff5c;火&…

Jan, 一个开源 ChatGPT 替代品

Jan 是一个开源 ChatGPT 替代品&#xff0c;可以在您的计算机上 100% 离线运行。 Jan 可以在任何硬件上运行。从 PC 到多 GPU 集群&#xff0c;Jan 支持通用架构&#xff1a; Nvidia GPU&#xff08;快速&#xff09;Apple M 系列&#xff08;快速&#xff09;苹果英特尔Linu…

LLM之RAG实战(十五)| RAG的自动源引文验证技术

​ 在过去的一年里&#xff0c;检索增强生成&#xff08;RAG&#xff09;已经成为一种基于LLM的流行架构&#xff0c;旨在解决在基于知识的LLM最常见的挑战之一&#xff0c;可怕的幻觉。 一、RAG如何解决幻觉&#xff1f; RAG Pipeline包括两个关键组件&#xff1a;&…

基于Java SSM框架实现摄影器材租赁系统项目【项目源码+论文说明】

基于java的SSM框架实现摄影器材租赁系统演示 摘要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&a…

Linux(Centos7)安装 jenkins(jdk11+jenkins2.375),并配置JDK,Maven,Git,GitLab

安装步骤 1. JDK11安装2. Maven安装3. git安装4. Jenkins2.375安装4.1 设置中文显示4.2 端口,用户权限修改4.3 插件下载4.4 全局工具配置4.4.1 Maven配置4.4.2 JDK配置4.4.3 Git配置 4.5 系统配置4.5.1 Gitee配置 4.6 构建测试 1. JDK11安装 #下载 yum -y install fontconfig …

怎样获取power shell 的全部可用命令?2/5(篇幅有点长,分成5份)

在power shell 窗口中&#xff0c;有一个获取全部可用命令的命令&#xff1a;get-command&#xff0c;获取到的命令有1640多个&#xff0c;够学习了吧&#xff1f;那么&#xff0c;power shell 命令有哪些类别呢&#xff1f; PowerShell命令可以分为以下几类&#xff1a; Cmdl…

高可用架构去中心化重要?

1 背景 在互联网高可用架构设计中&#xff0c;应该避免将所有的控制权都集中到一个中心服务&#xff0c;即便这个中心服务是多副本模式。 对某个中心服务&#xff08;组件&#xff09;的过渡强依赖&#xff0c;那等同于把命脉掌握在依赖方手里&#xff0c;依赖方的任何问题都可…

开启C++之旅(上):探索命名空间与函数特性(缺省参数和函数重载)

之前浅显的讲解了数据结构的部分内容&#xff1a;数据结构专栏 那么今天我们迎来了新的起点&#xff1a;C的探索之旅 文章目录 1.命名空间1.1引入命名冲突1.2命名空间1.2.1命名空间的定义1.2.2命名空间的使用 2.c的输入与输出3.缺省参数3.1概念3.2缺省参数分类 4.函数重载4.1概…

【深基9.例4】求第 k 小的数#洛谷(MLE)

题目描述 输入 n n n&#xff08; 1 ≤ n < 5000000 1 \le n < 5000000 1≤n<5000000 且 n n n 为奇数&#xff09;个数字 a i a_i ai​&#xff08; 1 ≤ a i < 10 9 1 \le a_i < {10}^9 1≤ai​<109&#xff09;&#xff0c;输出这些数字的第 k k k 小…

吉祥物如何解锁虚拟主持人身份,赋能品牌营销?

在互联网突破时空的整体语境下&#xff0c;一个吉祥物可以解锁虚拟主持人身份&#xff0c;结合动作捕捉技术&#xff0c;活跃于品牌线上线下营销活动场景&#xff0c;让吉祥物虚拟主持人凭借其“萌”、的特征&#xff0c;带给用户亲近感&#xff0c;快速拉近品牌与用户的距离&a…