- 博客(37)
- 收藏
- 关注
RSS订阅原创 人资项目day10-员工详情页创建和布局
详情页的基本布局和路由建立详情页路由{ path: 'detail/:id', // query传参 动态路由传参 component: () => import('@/views/employees/detail'), hidden: true, // 不在左侧菜单显示 meta: { title: '员工详情' // 标记当前路由规则的中文名称 后续在做左侧菜单时 使用 } }建立基本架构<div class="d...
2022-04-03 21:26:40
2179
原创 人资项目day09-上传与导出
员工导入组件封装使用组件vue-element-admin 代码地址excel导入功能需要使用npm包xlsx，所以需要安装xlsx插件$ npm i xlsx或$ yarn add xlsx将vue-element-admin提供的导入功能新建一个组件，位置： src/components/UploadExcel注册全局的导入excel组件import PageTools from './PageTools'import UploadExcel from '..
2022-04-01 20:25:39
179
原创 人资项目day08-
封装一个通用的工具栏通用工具栏的组件结构在后续的业务开发中，经常会用到一个类似下图的工具栏，作为公共组件，进行一下封装组件 src/components/PageTools/index.vue<template> <el-card class="page-tools"> <el-row type="flex" justify="space-between" align="middle"> <el-col> ...
2022-03-31 20:12:36
1076
原创 人资项目day07-公司角色页面的基本结构
建立公司页面的基本结构采用element-ui的组件实现src/views/setting/index.vue<template> <div class="dashboard-container"> <div class="app-container"> <el-card> <el-tabs> <!-- 放置页签 --> <el...
2022-03-29 19:46:21
151
原创 人资项目day06-组织架构树形结构布局
使用element-UI组件布局组织架构的基本布局认识组织架构组织架构产品prd一个企业的组织架构是该企业的灵魂，组织架构多常采用树形金字塔式结构，本章节，我们布局出页面的基本结构实现组织架构的头部内容首先实现头部的结构，采用element的行列布局 <!-- 实现页面的基本布局 --> <el-card class="tree-card"> <!-- 用了一个行列布局 --> ...
2022-03-28 19:48:56
1786
原创 人资项目day05-路由和页面
路由页面整理我们需要知道类似这种大型中台项目的页面路由是如何设置的。简单项目当前项目结构因为复杂中台项目的页面众多，不可能把所有的业务都集中在一个文件上进行管理和维护，并且还有最重要的，前端的页面中主要分为两部分，一部分是所有人都可以访问的， 一部分是只有有权限的人才可以访问的，拆分多个模块便于更好的控制静态路由和动态路由了解完成路由设计之后，我们对当前的路由进行一下整理删除多余的静态路由表 src/router/index.js/*** constan...
2022-03-26 21:22:53
627
原创 人资项目day03-主页模块
主页的token拦截处理目标：根据token处理主页的访问权限问题权限拦截的流程图流程图转化代码// 权限拦截 导航守卫 路由守卫 routerimport router from '@/router' // 引入路由实例import store from '@/store' // 引入vuex store实例import NProgress from 'nprogress' // 引入一份进度条插件import 'nprogress/nprogress.css' // 引..
2022-03-25 21:10:13
187
原创 人资项目day02-登录、主页模块
Vue-Cli配置跨域代理为什么会出现跨域？当下,最流行的就是前后分离项目,也就是前端项目和后端接口并不在一个域名之下，那么前端项目访问后端接口必然存在跨域的行为.解决开发环境的跨域问题开发环境的跨域开发环境的跨域，也就是在vue-cli脚手架环境下开发启动服务时，我们访问接口所遇到的跨域问题，vue-cli为我们在本地开启了一个服务,可以通过这个服务帮我们代理请求,解决跨域问题这就是vue-cli配置webpack的反向代理vue-cli的配置文件即vue.conf..
2022-03-24 19:23:18
1911
原创 人资项目day01 - 初始化项目
目录结构├── build # 构建相关├── mock # 项目mock 模拟数据├── public # 静态资源│ │── favicon.ico # favicon图标│ └── index.html # html模板├── src # 源代码...
2022-03-23 10:18:21
597
原创 Element-UI
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库-> Element UI是基于Vue 2.0的-> Element UI 提供一组组件-> Element UI 提供组件的参考实例, 直接复制安装Element开发时依赖 ： 开发环境所需要的依赖 -> devDependencies运行时依赖: 项目上线依然需要的依赖 -> dependencies$ npm i element-ui实现表单基本结构.
2022-03-21 20:55:31
136
原创 VUEX:
vuex的出现是为了组件传值子传父，父传子，跨组件通信Vuex 状态共享框架是一个专为Vue.js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化采用集中式管理组件依赖的共享数据的一个工具，可以解决不用组件数据共享的问题state 存储共享状态数据的地方，mutaitions 唯一能修改数据的地方，actions 异步修改数据的地方，getters 快速获取数据的地方修改state必须通过m...
2022-03-19 21:08:06
1171
原创 头条案例day09：
编辑用户资料：1. 创建组件并配置路由创建 `views/user-profile/index.vue` ， 并将该页面配置到跟路由 ， 给父组件编辑资料按钮绑定跳转2. 页面布局：引入vant组件，van-nav-bar，van-cell，van-image3. 展示用户信息思路：- 找到数据接口- 封装请求方法- 请求获取数据- 模板绑4. 修改昵称 1、准备弹出层定义弹出层控制变量：isUpdateNameShow: false绘制弹出层组件：<...
2022-03-18 21:10:16
779
原创 头条案例day08：
评论点赞：封装请求，给评论项中的like图标注册点击事件，在事件中处理。判断是否登录，已登录再判断是否点赞，有，取消点赞，没有，点赞。未登录，提示请登录。// 点赞或取消点赞事件async onCommentLike () { // loading 开启 this.commentLoading = true try{ // 如果已经赞了则取消点赞 if (this.comment.is_liking) { await deleteCom...
2022-03-17 19:52:25
661
原创 头条案例day07：
关注用户思路：- 给按钮注册点击事件- 在事件处理函数中 - 如果已关注，则取消关注 - 如果没有关注，则添加关注给关注按钮绑定点击事件，如果已关注则取消关注，如果没有关注，则是关注，账号登录的状态下，未登录则提示关注失败，跳转到登录页面已关注v-if="article.is_followed" 关注v-else找到数据接口，封装接口，请求调用，视图更新async onFollow () { // 如果没有登录，就不允许操作 if(!this.$store.sta...
2022-03-15 21:10:09
102
原创 头条案例day06：
搜索历史记录：当发生搜索的时候我们才需要记录历史记录。1 添加历史记录// 在`search/index.vue` `data`添加一个数据用来存储历史记录data () { return {中 ... searchHistories: [] }}// 在触发搜索的时候，记录历史记录onSearch (val) { // 更新文本框内容 this.searchText = val // 存储搜索历史记录 // 要求：不要有重复历史记...
2022-03-14 19:28:07
1003
原创 头条案例day05：
频道数据持久化：已登录状态：数据存储在线上后台服务器，更换不同的设备可以同步数据。把数据请求接口放到线上，根据接口文档携带参数。未登录状态：数据存储在本地，不支持同步功能。正确获取首页频道数据：判断是否已登录，已登录请求获取用户频道数据。未登录，查看是否有本地存储频道列表，有直接使用，没有请求获取推荐频道数据。获取登录用户的频道列表和获取默认推荐的频道列表是同一个数据接口。后端会根据接口中的 token 来判定返回数据。判断是否已登录，引入vuex的State中封装的user变量，查看里面
2022-03-12 20:09:55
177
原创 头条案例day04：
频道列表：给导航栏上的标题图标绑定点击事件使用vant组件--- Popup弹出层closeable //是否显示关闭图标，显示 close-icon-position="top-left" //X按钮位置，在上边 position="bottom" // X按钮退出弹出层 :style="{ height: '100%' }" // 内容高度铺满屏幕铺设频道列表页面：我的频道/推荐频道使用vant组件--- cell单元格：标题栏<v...
2022-03-11 20:39:26
532
原创 头条案例day03
文章首页页面铺设--vant插件的使用顶部标题栏使用vant--Tab标签页属性：v-model：绑定当前选中标签的标识符animated： 滑动的动画border： 底边框线swipeable： 开启左右手势滑动使用 List 列表组件[List 列表组件](https://youzan.github.io/vant/#/zh-CN/list)：瀑布流滚动加载，用于展示长列表。List 组件通过 loading 和 finished 两个变量控制加载状态，当组件初始化或滚动到
2022-03-10 20:54:53
185
原创 头条项目day-02：
获取表单数据，并进行注册登录：使用vant组件插入表单格式，根据vant文档进行操作1. 获取表单：2. 表单验证：表单以及验证码的规则和格式验证，为必填项，不能为空，使用正则表达式进行设置长度以及规则。增加验证规则对象mobile: [{ required: true, message: '手机号不能为空' }, { pattern: /^1[3|5|7|8]\d{9}$/, message: ...
2022-03-08 20:12:49
621
原创 头条项目练习day-01：
使用@vue/cli 框架，初始化新项目toutiao 一份按需加载相关辅助包运行，在vue.config.js文件关闭严格模式。lintOnSave: false删除初始化带来的无用文件创建需求目录以及需求文件src/api/user.jssrc/views/login/index/vuesrc/styles/index.less --- icon.less初始化App.vue main.js router/index.js utils/request.js ...
2022-03-07 20:46:35
323
原创 Vuex（状态管理模式）
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex是状态管理器，作用是在vue项目中管理数据。组件的通讯是很复杂的，方便进行组件通讯。优点：数据的更新是响应式的。使用vuex 安装：yarn add [email protected]创建配置store : src/store/index/jsimport Vue from 'vue'import Vuex from ...
2022-03-05 20:49:16
238
原创 路由---
路由是一种映射关系，vue中的路由就是路径和组件之间的映射关系。单页面应用：所有功能都在一个HTML页面运行前端路由作用：实现业务场景的切换优点：整体不刷新页面，用户体验好。数据传递更容易，开发效率高。缺点：开发成本高（需要学习专门知识），首次加载比较慢，可能不利于SEO的应用单页面应切换场景依赖路由切换显示.vue文件分2类, 一个是页面组件, 一个是复用组件src/views(或pages) 文件夹 和src/components文件夹页面组件和复用组件* 页面组件 - 页面展示
2022-03-03 21:47:34
334
原创 props的变量值
对props的变量值，进行校验props:{ 变量名：{type--约束值的类型，Array，Objact，default--设置默认值，truerequired:true -- 设置为必须值validator(value) { if (value.length >= 2 && value.length <= 5) { return true } else {...
2022-03-01 21:53:38
235
原创 Axios 和 生命周期
生命周期从组件在内存中的创建一直到销毁的整个过程就是VUE实例的生命周期### 1.1_钩子函数> 目标: **Vue** 框架内置函数，随着组件的生命周期阶段，自动执行作用: 特定的时间点，执行特定的操作场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据分类: 4大阶段8个方法四个阶段：初始化，挂载，更新，销毁八大方法：beforeCreate，crated，beforeMount，mounted，beforeUpda
2022-02-28 21:36:36
355
原创 Vue基础Day03
把值转成另一种形式, 使用过滤器。目的: 转换格式, 过滤器就是一个函数, 传入值返回处理后的值。注意：过滤器只能用在, ==插值表达式和v-bind表达式==语法:* Vue.filter("过滤器名", (值) => {return "返回处理后的值"})* filters: {过滤器名字: (值) => {return "返回处理后的值"}vue过滤器-传参和多过滤器语法:* 过滤器传参: vue变量 | 过滤器(实参)* 多个过滤器: vue变量 |...
2022-02-25 21:18:24
71
原创 Vue基础Day02
1. vue指令v-for 根据数组的个数, 循环数组元素的同时还生成所在的标签v-show 显示内容v-if 显示与隐藏 v-else 必须和v-if连用 不能单独使用 否则报错 v-bind 动态绑定 作用： 及时对页面的数据进行更改, 可以简写成:分号v-on 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面v-text 解析文本v-html 解析html标签v-show和v-if的区别2.v...
2022-02-24 20:54:31
104
原创 Vue基础-day01
Vue是什么？是一个渐进式的Javascript框架。vue的特点：渐进式，声明式渲染，数据驱动视图 (响应式)，极少的去写DOM操作相关代码，双向绑定，组件系统，不兼容IE8及以下浏览器。Vue-cli作用？@vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目，脚手架是为了保证各施工过程顺利进行而搭设的工作平台。@vue/cli的好处：开箱即用，0配置webpack，babel支持，css, less支持，开发服务器支持。库: 封装的属性或方法 (.
2022-02-22 20:07:35
105
原创 webpack(模块打包工具)
webpack(模块打包工具)，是一个模块包，可以识别代码，翻译，压缩，整合打包，提高浏览器打开的速度。webpack指令：1：初始化，得到package.json文件yarn init2：添加依赖包yarn add 所需功能包名（+@版本号） -D3：移除包yarn remove 功能包名4：安装项目全部依赖包yarn5：全局安装：yarn global add 功能包名卸载：yarn global remove 功能包名注意：global 一定在add左边webpack.
2022-02-21 21:51:17
533
原创 Node.js基础学习
node.js node文件名 可以执行JS文件代码 使用↑键 可以快速定位到上一次执行的命令 使用tab键 能够快速补全路径 使用esc键 能够快速清空当前已输入的命令 输入cls命令 可以清空终端 cd目录名 切换目录 cd.. 切换目录上一级 dir 查看当前目录列表或文件 fs文件系统模块 constfs=require('fs') ...
2022-02-10 19:17:19
202
原创 H5和C3新增特性
H5新曾语义化标签: header 头部，footer尾部，nav 定义导航，section 定义文档中的区段，article 定义文章，aside 定义文章侧边栏 多媒体标签: video audio 表单控件: number ，search ，email ，tel ，date ，file ，time ，url，calendar localStorage：本地离线存储，长期存储数据，改变浏览器数据不会丢失。 sessionStorage：浏览器关闭数据会丢失。 自定义属性 data-...
2022-01-21 21:28:44
463
原创 H5和C3新曾
H5和C3新曾1、颜色：新增RGBA，HSLA模式2、文字阴影（text-shadow）边框阴影： box-shadow3、边框： 圆角（border-radius）4、盒子模型：box-sizing5、背景：background-size 设置背景图片的尺寸background-origin 设置背景图片的原点background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局6、渐变：linear-gradient、radial-gradi.
2022-01-21 19:28:46
152
原创 GIT 使用命令方法02--远程仓库与本地仓库分支的使用
创建master主分支--本地创建文件夹--初始化文件html和css和js--创建git仓库git init-- git add .-- git commit -m 文件名--推送到远程仓库git push--新建master-dev 主线副分支--成员克隆链接--个人本地git clone 复制的链接会获取仓库文件--进入仓库打开git--拉取远程分支 git fetch origin dev:dev--再创建自己的分支 git checkout -b 分支名-- 操作完...
2022-01-20 18:25:12
484
原创 GIT 使用命令方法01
clear清空窗口内容 gitconfig--list--global#查看所有的全局配置项 gitconfiguser.name#查看指定的全局配置项，用户名 gitconfiguser.email#查看指定的全局配置项，邮箱地址 githelpconfig#打开config命令的帮助手册 gitconfig-h...
2022-01-18 18:35:06
221
原创 AJAX和AXIOS
AJAX：是网页中使用XMLHttpRequest（简写xhr）对象和服务器进行数据交互的方式。可以实现异步通信的效果，页面局部刷新。有三种请求方式，get请求，post请求，ajax请求。xhr发起GET请求步骤：// 1. 创建 XHR 对象 var xhr = new XMLHttpRequest() // 2. 调用 open 函数 xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks') /...
2022-01-17 19:29:16
1195
原创 常用数组和字符串方法
数组方法 数组名.push(str1,str2,str3...) 在原数组后面添加新的元素，一个或多个，原数组的长度会变成新数组的长度 数组名.unshift(str1,str2,str3...) 在原数组前面添加新的元素，一个或多个，原数组的长度会变成新数组的长度 数组名.pop(无参数) 删除数组中最后的一个元素，并返回新的数组长度（原数组.length-1） 数组名.shift(无参数) 删除数组中最前的一个元素，并返...
2022-01-17 19:14:37
222
原创 跨域的原因和解决方案
跨域的原因：因为浏览器的协议，域名或端口号最少有一项是不一样的，在文件传输过程中就形成了跨域，可以被传输过去，在回来的时候被同源策略拦截，无法加载到浏览器上面去。解决方案：可以使用JSONP解决，通过script的src属性获取相应的服务器接口，通过回调函数的方式实现跨域请求，并接受返回来的数据。...
2022-01-17 18:57:15
1931
原创 防抖策略与节流策略
防抖策略（debounce）：是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时节流策略（throttle）：减少一段时间内事件的触发频率。降低事件的触发频率。节流策略（throttle）：减少一段时间内事件的触发频率。降低事件的触发频率。...
2022-01-17 18:36:40
274
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人