- 博客(30)
- 收藏
- 关注
RSS订阅原创 首页和语言包
01-按钮权限讲解-实现按钮权限判断02-首页-页面绘制和昵称渲染03-首页-创建日历组件04-首页-日历自定义05-首页-日期处理逻辑06-首页-echarts的渲染07-首页-echarts的优化使用08-首页-全屏插件的使用09-首页-修改主体样式2种思路10-语言包实现-18n插件的使用11-语言包实现-i18n插件结合element-ui12-语言包实现-侧边栏菜单语言切换13-语言...
2022-04-07 20:48:11
100
原创 权限管理部分
1.角色关联权限1.1 准备弹窗1.2 获取所有权限1.3 回显角色权限1.4 授权提交2.前端实现权限控制2.1准备权限控制模块2.2筛选动态路由2.3 动态添加路由实例2.4退出重置路由实例2.5404问题优化...
2022-04-06 21:38:35
80
原创 员工管理模块
权限设计-RBAC的权限设计思想从上面的图中，我们发现，传统的权限设计是对每个人进行单独的权限设置，但这种方式已经不适合目前企业的高效管控权限的发展需求，因为每个人都要单独去设置权限RBAC实现了用户和权限点的分离，想对某个用户设置权限，只需要对该用户设置相应的角色即可，而该角色就拥有了对应的权限，这样一来，权限的分配和设计就做到了极简，高效，当想对用户收回权限时，只需要收回角色即可，接下来，我们就在该项目中实施这一设想给分配员工角色**目标**在员工管理页面，分配角色新建分配角
2022-04-03 22:14:15
1717
原创 员工管理部分
封装一个通用的工具栏目标：封装一个通用的工具栏供大家使用通用工具栏的组件结构在后续的业务开发中，经常会用到一个类似下图的工具栏，作为公共组件，进行一下封装组件 src/components/PageTools/index.vue<template> <el-card class="page-tools"> <el-row type="flex" justify="space-between" align="middle"> ...
2022-03-31 22:00:19
75
原创 组织架构树形结构布局
实现组织架构的头部内容首先实现头部的结构，采用element的行列布局 <!-- 实现页面的基本布局 --> <el-card class="tree-card"> <!-- 用了一个行列布局 --> <el-row type="flex" justify="space-between" align="middle" style="height: 40px"> <el-co...
2022-03-28 21:58:13
1188
原创 路由和页面
快速新建文件夹$ mkdir departments employees setting salarys social attendances approvals permission每个模块的内容，可以先按照标准的模板建立设置每个模块的路由规则每个模块导出的内容表示该模块下的路由规则如员工 employees.js// 导出属于员工的路由规则import Layout from '@/layout'// { path: '', component: '' }// 每个
2022-03-27 17:24:05
852
原创 项目登录功能
Vue-Cli配置跨域代理目标: 通过配置vue-cli的代理解决跨域访问的问题为什么会出现跨域？当下,最流行的就是前后分离项目,也就是前端项目和后端接口并不在一个域名之下，那么前端项目访问后端接口必然存在跨域的行为.请注意，我们所遇的这种跨域是位于开发环境的，真正部署上线时的跨域是生产环境的解决开发环境的跨域问题开发环境的跨域开发环境的跨域，也就是在vue-cli脚手架环境下开发启动服务时，我们访问接口所遇到的跨域问题，vue-cli为我们在本地开启了一个服务,可以通过这个
2022-03-24 22:04:13
324
原创 项目登录模块
1.设置固定的本地访问端口和网站名称在正式开发业务之前，先将项目的本地端口和网站名称进行一下调整本地服务端口: 在vue.config.js中进行设置vue.config.js 就是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于webpack，但是又不同于webpack，相当于改良版的webpack我们看到上面的 process.env.port实际上是一个nodejs服务下的环境变量，该变量在哪里设置呢？在项目下, 我们发现了.env.developme
2022-03-23 08:51:38
107
原创 项目第二天elementUI,promise
Async 和 Await针对异步编程，我们学习过Ajax的回调形式，promise的链式调用形式ajax回调模式// 回调形式调用$.ajax({ url, data, success:function(result){ $.ajax({ data:result, success: function(result1){ $.ajax({ ...
2022-03-21 21:54:08
275
原创 vuex基础
1vuex简介 修改state状态必须通过mutations mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行 执行异步代码，要通过actions，然后将数据提交给mutations才可以完成 state的状态即共享数据可以在组件中引用 组件中可以调用action vuex基础-statestate是放置所有公共状态的属性，如果你有一个公共状态数据 ， 你只需要定义在 state对象中定义state
2022-03-20 19:29:53
43
原创 项目评论部分
1.通过props的defalut属性巧妙的解决type是a或c的问题type: { type: String, // 自定义 Prop 数据验证 validator (value) { return ['a', 'c'].includes(value) }, default: 'a' } 如果是文章评论的话，父组件不需要向子组件传type，此时默认type是a，如果是回复评论，父组件需要向子组件传type为
2022-03-17 21:17:15
635
原创 项目文章详情
v-model的使用拓展运用场景： 当我们的父组件通过props传递某个数据给子组件，且子组件需要通过自定义事件$emit去修改该数据，也就是父子之间共同操作同一个变量数据，我们可以使用v-model指令上述案例中，props我们定义的是isFollowed，触发的自定义事件是update-is_followed。这只是2个名字而已，我们可以把props属性定义value； 自定义事件 定义为input props: { // 是否关注了 //isFollowed: {
2022-03-15 21:48:45
99
原创 项目第五天
1.频道数据持久化添加频道思路：如果未登录，则存储到本地 如果已登录，则存储到线上 找到数据接口 封装请求方法 请求调用 删除频道思路：如果未登录，则存储到本地 如果已登录，则存储到线上 找到数据接口 封装请求方法 请求调用 2.文章搜索先创建组件并配置路由布局页面申明变量isShow来条件渲染搜索联想建议1、获取并监视内容变化2、请求获取展示数据3、防抖优化lodash的使用1.安装lodash2.引入debounce 防抖函
2022-03-13 10:20:28
520
原创 项目第四天
封装计算属性筛选数据思路：所有频道 - 用户频道 = 推荐频道computed:{ recommentChannels(){ let arr = [] // 推荐数据 // 遍历所有频道 this.allChannels.forEach(channel=>{ // 遍历的元素是不是在我的频道里面的内容，如果不是，就说明是推荐频道 let ret = this.myChannels.fin
2022-03-11 21:22:43
112
原创 项目第三天
1.头部导航栏组件复用2.频道列表vant中tab标签页搭建布局展示频道列表第1步：api目录下面文件封装请求方法 第2步：data里面定义变量用于存储数据 第3步：methods里定义获取数据方法 3.1 页面里面导入这个方法 3.2 methods方法里面调用方法发送请求 3.3 请求错误处理 3.4 请求成功赋值data里面变量 第4步：created里面调用这个方法 第5步： 渲染数据方法定义// 导入封装方法import { getUserChanne
2022-03-10 20:02:21
81
原创 项目第二天
1 TabBar 处理父路由：一个空页面，包含一个 tabbar，中间留子路由出口 子路由：首页 问答 视频 我的layout 配置一级路由{ path: '/', component: () => import('@/views/layout')}2创建对应页面的vue文件3根据user判断不同的状态<!-- 已登录头部 --><div v-if="user" class="header user-info"> ...&
2022-03-09 18:49:40
43
原创 项目第一天
1.axios的封装1 yarn add axios2.在src目录下创建utils目录，再utils下创建request.jsimport axios from 'axios' const request =axios.create({ baseURL:'http://www.baidu.com'})export default request3.再src下创建api目录，api目录下创建user.jsimport request from '@utils/reques
2022-03-07 22:27:16
102
原创 Vuex使用
1. 概念在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用多个组件的共享状态进行集中式管理（读/写），也是一种组件间通信方式，且适用于任意组件间通信。2. 何时使用多个组件需要共享数据时3. 搭建vuex环境 创建文件：src/store/index.js // 引入核心库import Vue from 'vue'// 引入Vueximport Vuex from 'vuex'//应用插件Vue.use(Vuex)//创建并暴露store
2022-03-05 23:07:43
98
原创 路由配置vue-router
理解：一个路由（route）就是一组映射（key-value），多个路由需要路由器（router）进行管理 前端路由：key是路径，value是组件 1. 基本使用 安装vue-router，命令：npm i vue-router 编写router的配置项 //引入VueRouterimport VueRouter from 'vue-router'//引入路由组件import About from '../components/User'import Hom..
2022-03-03 20:36:40
158
原创 动态组件，组件插槽，自定义指令
1.动态组件1.0基本使用<component :is='comName'></component>点击改变:is的值1.1性能不高，每次切换都会销毁和重生组件解决：用<keep-alive></keep-alive>包裹，解决组件销毁和重生问题，产生组件缓存1.2 激活和非激活两个钩子函数：activated 激活时触发deactivated 失去激活时触发2.组件插槽1.0基本使用用<slot>&
2022-03-01 21:59:48
161
原创 axios、$nextTick和$refs
1.axios特点* 支持客户端发送Ajax请求* 支持服务端Node.js发送请求* 支持Promise相关用法* 支持请求和响应的拦截器功能* 自动转换JSON数据* axios 底层还是原生js实现, 内部通过Promise封装的基本使用axios({ method: '请求方式', // get post url: '请求地址', data: { // 拼接到请求体的参数, post请求的参数 xxx: xxx, }, params: ...
2022-02-28 21:10:45
91
原创 Vue生命周期函数
1.定义每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期，详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。4大阶段8大方法初始化：beforeCreate created挂载：beforeMount mounted更新：beforeUpdate updated销毁：beforeDestroy destroyed2.初始化阶段1.new Vue() – Vue实例化(组件也是一个小的Vue实例)2.Init E
2022-02-27 16:44:39
263
原创 计算属性、侦听属性、组件基础
1.计算属性用途： 一个数据, 依赖另外一些数据计算而来的结果语法：computed:{"计算属性名" () { return "值" }}注意: 计算属性也是vue数据变量, 所以不要和data里重名, 用法和data相同优点：有缓存机制，提高性能2.侦听属性 方法一，使用watch配置属性直接在创建vm对象时定义好 方法二，vm.$watch() 开启深度监视 deep:true 3.组件1.概念一个页面， 可...
2022-02-25 22:55:48
191
原创 vue基础指令、diff算法、过滤器
1.基础指令1.0 v-text v-html更新DOM对象节点内容语法：v-text="vue数据变量"v-html="vue数据变量"v-text不解析html结构，v-html可以解析html结构两者都会覆盖插值表达式1.1v-show和v-if用于显示隐藏语法：v-show="vue变量" display:none（频繁切换时使用）v-if="vue变量" 从DOM树移除，有性能问题 还可以接v-else使用1.2 v-for列表渲染，循环生成
2022-02-24 20:12:48
132
原创 vue脚手架及简单vue指令
1.vue脚手架vue/cli1.0全局安装脚手架yarn global add @vue/cli or npm i -g @vue/cli1.1初始化脚手架，生成脚手架文件vue create 文件名1.2启动内置的热更新本地服务器yarn serve or npm run serve1.3vue/cli自定义配置/* 覆盖webpack的配置 */module.exports = { devServer: { // 自定义服务配置 open: true,
2022-02-22 21:09:48
474
原创 webpack的使用
1.基本概念webpack是一个js应用程序静态模拟打包器可以处理静态文件，把很多文件打包整合到一起, 缩小项目体积, 提高加载速度2.使用步骤 初始化包环境 yarn init 安装依赖包 yarn add webpack webpack-cli -D 配置scripts(自定义命令) scripts: { "build": "webpack"} 新建目录src 新建src/add/add.js - 定义求和函数导出
2022-02-21 21:43:25
280
原创 大事件项目第一天
1.属性选择器<form class="layui-form" id="form_login"> <div class="layui-form-item"> <input name="username" ...
2022-01-21 21:23:55
211
原创 git第二天
1.项目托管平台github:全球最大的项目托管平台，可惜国内浏览可能会比较慢gitee:国内的项目托管平台，和github差不多2.远程仓库和本地仓库数据传输方式https:每一次都需要输入密码，多次传输时很麻烦ssh:只需设置一次用户名和密码ssh私钥和公钥：私钥放在本地，公钥文件内容复制粘贴到项目托管平台3.本地仓库上传远程仓库新建一个本地仓库，然后执行代码git remote add origin 远程仓库地址git push -u origin master
2022-01-20 21:01:14
718
原创 git第一天
1.git是什么？开源的分布式版本控制系统，最主流的，各个企业都在用git有三个区 分别为工作区，暂存区，仓库区2 .git 相关命令1.配置用户信息（全局配置，只需要配置一次）git config --global user.name 'soephin'git config --global user.email '[email protected]'2.查看用户信息git config user.namegit config user.emailgit config
2022-01-18 20:14:06
234
原创 ajax第四天笔记
1.jquery 上传文件 $.ajax({ method: 'POST', url: 'http://www.liulongbin.top:3006/api/upload/avatar', data: fd, contentType: false, processData: false, ...
2022-01-17 21:11:09
287
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人