大事件项目day03
1. 文章类别1.1 点击编辑按钮展示修改文章分类的弹出层
为编辑按钮添加 btn-edit 类名如下：
<button type="button" class="layui-btn layui-btn-xs btn-edit" data-id="{{$value.Id}}">编辑</button>
定义 修改分类 的弹出层：
<script type="text/html" id="dialog-edit"> <form class="layui-form" id="form-edit" lay-filter="form-edit"> <!-- 隐藏域，保存 Id 的值 --> <input type="hidden" name="Id"> <div ...
大事件项目day02
1. 后台主页1.1 获取用户的基本信息
导入需要的脚本：
<!-- 导入 jQuery --><script src="/assets/lib/jquery.js"></script><!-- 导入自己封装的 baseAPI --><script src="/assets/js/baseAPI.js"></script><!-- 导入自己的 js 文件 --><script src="/assets/js/index.js"></script>
定义 getUserInfo 函数：
// 获取用户的基本信息function getUserInfo() { $.ajax({ method: 'GET', url: '/my/userinfo', // headers 就是请求头配置对象 headers: { Auth ...
基础环境搭建
项目课设计
人力资源的环境搭建vue-element-admin的了解和介绍目标: 学习和了解通用的vue后台集成方案**vue-element-admin**
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。
vue-element-admin 是一个后台集成方案, 集成了PC项目中很多的业务场景和功能, 尤其在当下SPA的趋势下,我们可以从中获得很多成熟的解决方案.
vue-element-admin 有一个成熟的集成方案，里面包含了所有的业务功能和场景,并不适合直接拿来进行二次开发, 但是可以通过该项目中的一个案例来进行学习和使用.
这里是官网地址
这里是线上demo地址
如果你想查看该项目的具体功能和效果，可以拉取代码，启动进行预览￥
$ git clone https://github.com/PanJiaChen/vue-element-admi ...
登录模块
登录模块线上地址
本章节，我们将在现有模板的基础上，完成如图的登录模块的功能
设置固定的本地访问端口和网站名称目标: 设置统一的本地访问端口和网站title
在正式开发业务之前，先将项目的本地端口和网站名称进行一下调整
本地服务端口: 在**vue.config.js**中进行设置
vue.config.js 就是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于webpack，但是又不同于webpack，相当于改良版的webpack， 文档地址
如图，是开发环境服务端口的位置
我们看到上面的 **process.env.port**实际上是一个nodejs服务下的环境变量，该变量在哪里设置呢？
在项目下, 我们发现了**.env.development和.env.production**两个文件
development => 开发环境
production => 生产环境
当我们运行npm run dev进行开发调试的时候,此时会加载执行**.env.development**文件内容
当我们运行npm run build:prod进行生产环 ...
路由和页面
路由页面整理目标 删除基础模板中附带的多余页面
基础模板帮我们提前内置了一些页面，本章节我们进行一下整理
首先，我们需要知道类似这种大型中台项目的页面路由是如何设置的。
简单项目
当前项目结构
为什么要拆成若干个路由模块呢？
因为复杂中台项目的页面众多，不可能把所有的业务都集中在一个文件上进行管理和维护，并且还有最重要的，前端的页面中主要分为两部分，一部分是所有人都可以访问的， 一部分是只有有权限的人才可以访问的，拆分多个模块便于更好的控制
静态路由和动态路由
**注意**这里的动态路由并不是 路由传参的动态路由
了解完成路由设计之后，我们对当前的路由进行一下整理
删除多余的静态路由表 src/router/index.js
/** * constantRoutes * a base page that does not have permission requirements * all roles can be accessed */export const constantRoutes = [ { path: '/login ...
主页模块
主页的token拦截处理**目标**：根据token处理主页的访问权限问题
权限拦截的流程图
我们已经完成了登录的过程，并且存储了token，但是此时主页并没有因为token的有无而被控制访问权限
接下来我们需要实现以下如下的流程图
在基础框架阶段，我们已经知道**src/permission.js**是专门处理路由权限的，所以我们在这里处理
流程图转化代码流程图转化的代码
// 权限拦截 导航守卫 路由守卫 routerimport router from '@/router' // 引入路由实例import store from '@/store' // 引入vuex store实例import NProgress from 'nprogress' // 引入一份进度条插件import 'nprogress/nprogress.css' // 引入进度条样式const whiteList = ['/login', '/404'] // 定义白名单 所有 ...
Vue知识点串讲
一、Vue知识点串讲复习一下Vue中的核心知识点。
复习完基本的知识点以后，后面再来看一下其它的面试内容
1、基本使用下面，先来看一段最简单的代码，如下所示：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vue基本使用</title> </head> <body> <div id="app"> {{msg}} </div> <script src="vue.js"></script> ...
公司和角色
建立公司角色页面的基本结构**目标**建立公司页面的基本结构
根据以上的结构，我们采用element-ui的组件实现
src/views/setting/index.vue
<template> <div class="dashboard-container"> <div class="app-container"> <el-card> <el-tabs> <!-- 放置页签 --> <el-tab-pane label="角色管理"> <!-- 新增角色按钮 --> <el-row style="height:60px"> <el-button icon="el-icon-plus" ...
其他模块集成
全模块集成目标： 将其他业务模块代码集成到该项目中
到目前为止，我们已经完成了一个基本项目框架 + 组织架构 + 公司 + 员工 + 权限的 业务联调， 时间关系，我们不可能将所有的业务都去编写一遍，这里提供大家 其余模块的集成代码，最终的目的是让大家得到一个完成的业务模块
要集成的模块业务，包括工资模块，社保模块，考勤模块，审批模块
在我们提供的资源集成模块中，我们提供了四个模块的**路由/页面/api*, 按照下面的路径拷贝即可
路由 => src/router/modules
页面 => src/views
api => src/api
除此之外，我们需要将 router/modules/user.js 导入到静态路由中，因为这个模块是所有模块都可以访问的
最终，我们将得到一个较为完整的系统业务。
主页审批-图表
首页的页面结构**目标**： 实现系统首页的页面结构
目前，我们的页面还剩下首页，这里我们可以按照如图实现一下的结构
首页页面结构，src/views/dashboard/index.vue
<template> <div class="dashboard-container"> <!-- 头部内容 --> <el-card class="header-card"> <div> <div class="fl headL"> <div class="headImg"> <img src="@/assets/common/head.jpg"> </div> <div class="headInfoTip"> < ...
组织架构
组织架构树形结构布局**目标**：使用element-UI组件布局组织架构的基本布局
认识组织架构组织架构产品prd
一个企业的组织架构是该企业的灵魂，组织架构多常采用树形金字塔式结构，本章节，我们布局出页面的基本结构
实现组织架构的头部内容首先实现头部的结构，采用element的行列布局
<el-card class="tree-card"> <!-- 用了一个行列布局 --> <el-row type="flex" justify="space-between" align="middle" style="height: 40px"> <el-col> <span>江苏传智播客教育科技股份有限公司</span> </el-col> <el-col :span="4"> < ...
多语言tab页全屏主题
全屏插件的引用目标：实现页面的全屏功能
全屏功能可以借助一个插件来实现
第一步，安装全局插件screenfull
$ npm i screenfull
第二步，封装全屏显示的插件·· src/components/ScreenFull/index.vue
<template> <!-- 放置一个图标 --> <div> <!-- 放置一个svg的图标 --> <svg-icon icon-class="fullscreen" style="color:#fff; width: 20px; height: 20px" @click="changeScreen" /> </div></template><script>import ScreenFull from 'screenfull'export default { methods: { // 改变全屏 ...
