<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[soephin的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/soephin</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; soephin]]></copyright><item><title><![CDATA[首页和语言包]]></title><link>https://blog.youkuaiyun.com/soephin/article/details/124026050</link><guid>https://blog.youkuaiyun.com/soephin/article/details/124026050</guid><author>soephin</author><pubDate>Thu, 07 Apr 2022 20:48:11 +0800</pubDate><description><![CDATA[01-按钮权限讲解-实现按钮权限判断



02-首页-页面绘制和昵称渲染



03-首页-创建日历组件



04-首页-日历自定义



05-首页-日期处理逻辑



06-首页-echarts的渲染



07-首页-echarts的优化使用

08-首页-全屏插件的使用



09-首页-修改主体样式2种思路



10-语言包实现-18n插件的使用





11-语言包实现-i18n插件结合element-ui



12-语言包实现-侧边栏菜单语言切换



13-语言...]]></description><category></category></item><item><title><![CDATA[权限管理部分]]></title><link>https://blog.youkuaiyun.com/soephin/article/details/124000806</link><guid>https://blog.youkuaiyun.com/soephin/article/details/124000806</guid><author>soephin</author><pubDate>Wed, 06 Apr 2022 21:38:35 +0800</pubDate><description><![CDATA[1.角色关联权限

1.1 准备弹窗



1.2 获取所有权限



1.3 回显角色权限



1.4 授权提交



2.前端实现权限控制

2.1准备权限控制模块





2.2筛选动态路由



2.3 动态添加路由实例



2.4退出重置路由实例



2.5404问题优化






...]]></description><category></category></item><item><title><![CDATA[员工管理模块]]></title><link>https://blog.youkuaiyun.com/soephin/article/details/123945826</link><guid>https://blog.youkuaiyun.com/soephin/article/details/123945826</guid><author>soephin</author><pubDate>Sun, 03 Apr 2022 22:14:15 +0800</pubDate><description><![CDATA[权限设计-RBAC的权限设计思想

从上面的图中，我们发现，传统的权限设计是对每个人进行单独的权限设置，但这种方式已经不适合目前企业的高效管控权限的发展需求，因为每个人都要单独去设置权限



RBAC实现了用户和权限点的分离，想对某个用户设置权限，只需要对该用户设置相应的角色即可，而该角色就拥有了对应的权限，这样一来，权限的分配和设计就做到了极简，高效，当想对用户收回权限时，只需要收回角色即可，接下来，我们就在该项目中实施这一设想



给分配员工角色

**目标**在员工管理页面，分配角色

新建分配角]]></description><category></category></item><item><title><![CDATA[员工管理部分]]></title><link>https://blog.youkuaiyun.com/soephin/article/details/123884780</link><guid>https://blog.youkuaiyun.com/soephin/article/details/123884780</guid><author>soephin</author><pubDate>Thu, 31 Mar 2022 22:00:19 +0800</pubDate><description><![CDATA[封装一个通用的工具栏

目标：封装一个通用的工具栏供大家使用

通用工具栏的组件结构

在后续的业务开发中，经常会用到一个类似下图的工具栏，作为公共组件，进行一下封装



组件 src/components/PageTools/index.vue


&lt;template&gt;
 &lt;el-card class="page-tools"&gt;
  &lt;el-row type="flex" justify="space-between" align="middle"&gt;
   ...]]></description><category></category></item><item><title><![CDATA[组织架构树形结构布局]]></title><link>https://blog.youkuaiyun.com/soephin/article/details/123807479</link><guid>https://blog.youkuaiyun.com/soephin/article/details/123807479</guid><author>soephin</author><pubDate>Mon, 28 Mar 2022 21:58:13 +0800</pubDate><description><![CDATA[实现组织架构的头部内容

首先实现头部的结构，采用element的行列布局


  &lt;!-- 实现页面的基本布局 --&gt;  
    &lt;el-card class="tree-card"&gt;
    &lt;!-- 用了一个行列布局 --&gt;
    &lt;el-row type="flex" justify="space-between" align="middle" style="height: 40px"&gt;
     &lt;el-co...]]></description><category></category></item><item><title><![CDATA[路由和页面]]></title><link>https://blog.youkuaiyun.com/soephin/article/details/123777210</link><guid>https://blog.youkuaiyun.com/soephin/article/details/123777210</guid><author>soephin</author><pubDate>Sun, 27 Mar 2022 17:24:05 +0800</pubDate><description><![CDATA[快速新建文件夹


$ mkdir departments employees setting salarys social attendances approvals permission

每个模块的内容，可以先按照标准的模板建立

设置每个模块的路由规则

每个模块导出的内容表示该模块下的路由规则

如员工 employees.js


// 导出属于员工的路由规则
import Layout from '@/layout'
//  {  path: '', component: '' }
// 每个]]></description><category></category></item><item><title><![CDATA[项目登录功能]]></title><link>https://blog.youkuaiyun.com/soephin/article/details/123722795</link><guid>https://blog.youkuaiyun.com/soephin/article/details/123722795</guid><author>soephin</author><pubDate>Thu, 24 Mar 2022 22:04:13 +0800</pubDate><description><![CDATA[Vue-Cli配置跨域代理

目标: 通过配置vue-cli的代理解决跨域访问的问题

为什么会出现跨域？

当下,最流行的就是前后分离项目,也就是前端项目和后端接口并不在一个域名之下，那么前端项目访问后端接口必然存在跨域的行为.



请注意，我们所遇的这种跨域是位于开发环境的，真正部署上线时的跨域是生产环境的

解决开发环境的跨域问题

开发环境的跨域

开发环境的跨域，也就是在vue-cli脚手架环境下开发启动服务时，我们访问接口所遇到的跨域问题，vue-cli为我们在本地开启了一个服务,可以通过这个]]></description><category></category></item><item><title><![CDATA[项目登录模块]]></title><link>https://blog.youkuaiyun.com/soephin/article/details/123676837</link><guid>https://blog.youkuaiyun.com/soephin/article/details/123676837</guid><author>soephin</author><pubDate>Wed, 23 Mar 2022 08:51:38 +0800</pubDate><description><![CDATA[1.设置固定的本地访问端口和网站名称

在正式开发业务之前，先将项目的本地端口和网站名称进行一下调整

本地服务端口: 在vue.config.js中进行设置

vue.config.js 就是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于webpack，但是又不同于webpack，相当于改良版的webpack





我们看到上面的 process.env.port实际上是一个nodejs服务下的环境变量，该变量在哪里设置呢？

在项目下, 我们发现了.env.developme]]></description><category></category></item><item><title><![CDATA[项目第二天elementUI,promise]]></title><link>https://blog.youkuaiyun.com/soephin/article/details/123647225</link><guid>https://blog.youkuaiyun.com/soephin/article/details/123647225</guid><author>soephin</author><pubDate>Mon, 21 Mar 2022 21:54:08 +0800</pubDate><description><![CDATA[Async 和 Await

针对异步编程，我们学习过Ajax的回调形式，promise的链式调用形式

ajax回调模式


// 回调形式调用
$.ajax({
  url,
  data,
  success:function(result){
    $.ajax({
      data:result,
      success: function(result1){
        $.ajax({
         ...]]></description><category></category></item><item><title><![CDATA[vuex基础]]></title><link>https://blog.youkuaiyun.com/soephin/article/details/123619176</link><guid>https://blog.youkuaiyun.com/soephin/article/details/123619176</guid><author>soephin</author><pubDate>Sun, 20 Mar 2022 19:29:53 +0800</pubDate><description><![CDATA[1vuex简介


	修改state状态必须通过mutations
	
	
	mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行
	
	
	执行异步代码，要通过actions，然后将数据提交给mutations才可以完成
	
	
	state的状态即共享数据可以在组件中引用
	
	
	组件中可以调用action
	
vuex基础-state

state是放置所有公共状态的属性，如果你有一个公共状态数据 ， 你只需要定义在 state对象中

定义state

]]></description><category></category></item><item><title><![CDATA[项目评论部分]]></title><link>https://blog.youkuaiyun.com/soephin/article/details/123560604</link><guid>https://blog.youkuaiyun.com/soephin/article/details/123560604</guid><author>soephin</author><pubDate>Thu, 17 Mar 2022 21:17:15 +0800</pubDate><description><![CDATA[1.通过props的defalut属性巧妙的解决type是a或c的问题


type: {
      type: String,
      // 自定义 Prop 数据验证
      validator (value) {
        return ['a', 'c'].includes(value)
      },
      default: 'a'
    }  

如果是文章评论的话，父组件不需要向子组件传type，此时默认type是a，

如果是回复评论，父组件需要向子组件传type为]]></description><category></category></item><item><title><![CDATA[项目文章详情]]></title><link>https://blog.youkuaiyun.com/soephin/article/details/123513303</link><guid>https://blog.youkuaiyun.com/soephin/article/details/123513303</guid><author>soephin</author><pubDate>Tue, 15 Mar 2022 21:48:45 +0800</pubDate><description><![CDATA[v-model的使用拓展

运用场景： 当我们的父组件通过props传递某个数据给子组件，且子组件需要通过自定义事件$emit去修改该数据，也就是父子之间共同操作同一个变量数据，我们可以使用v-model指令

上述案例中，props我们定义的是isFollowed，触发的自定义事件是update-is_followed。这只是2个名字而已，我们可以把props属性定义value； 自定义事件 定义为input


 props: {
    // 是否关注了
    //isFollowed: {
   ]]></description><category></category></item><item><title><![CDATA[项目第五天]]></title><link>https://blog.youkuaiyun.com/soephin/article/details/123455089</link><guid>https://blog.youkuaiyun.com/soephin/article/details/123455089</guid><author>soephin</author><pubDate>Sun, 13 Mar 2022 10:20:28 +0800</pubDate><description><![CDATA[1.频道数据持久化

添加频道思路：

如果未登录，则存储到本地
	如果已登录，则存储到线上
	找到数据接口
		封装请求方法
		请求调用
	
删除频道思路：

如果未登录，则存储到本地
	如果已登录，则存储到线上
	找到数据接口
		封装请求方法
		请求调用
	
2.文章搜索

先创建组件并配置路由布局页面

申明变量isShow来条件渲染

搜索联想建议

1、获取并监视内容变化

2、请求获取展示数据

3、防抖优化

lodash的使用

1.安装lodash

2.引入debounce 防抖函]]></description><category></category></item><item><title><![CDATA[项目第四天]]></title><link>https://blog.youkuaiyun.com/soephin/article/details/123434280</link><guid>https://blog.youkuaiyun.com/soephin/article/details/123434280</guid><author>soephin</author><pubDate>Fri, 11 Mar 2022 21:22:43 +0800</pubDate><description><![CDATA[封装计算属性筛选数据

思路：所有频道 - 用户频道 = 推荐频道


computed:{
    recommentChannels(){
        let arr = []  // 推荐数据
        // 遍历所有频道
        this.allChannels.forEach(channel=&gt;{
            // 遍历的元素是不是在我的频道里面的内容，如果不是，就说明是推荐频道
            let ret = this.myChannels.fin]]></description><category></category></item><item><title><![CDATA[项目第三天]]></title><link>https://blog.youkuaiyun.com/soephin/article/details/123409744</link><guid>https://blog.youkuaiyun.com/soephin/article/details/123409744</guid><author>soephin</author><pubDate>Thu, 10 Mar 2022 20:02:21 +0800</pubDate><description><![CDATA[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]]></description><category></category></item><item><title><![CDATA[项目第二天]]></title><link>https://blog.youkuaiyun.com/soephin/article/details/123384217</link><guid>https://blog.youkuaiyun.com/soephin/article/details/123384217</guid><author>soephin</author><pubDate>Wed, 09 Mar 2022 18:49:40 +0800</pubDate><description><![CDATA[1 TabBar 处理

父路由：一个空页面，包含一个 tabbar，中间留子路由出口
	子路由：首页 问答 视频 我的
layout 配置一级路由


{
  path: '/',
  component: () =&gt; import('@/views/layout')
}

2创建对应页面的vue文件

3根据user判断不同的状态


&lt;!-- 已登录头部 --&gt;
&lt;div v-if="user" class="header user-info"&gt;   
    ...
&]]></description><category></category></item><item><title><![CDATA[项目第一天]]></title><link>https://blog.youkuaiyun.com/soephin/article/details/123341011</link><guid>https://blog.youkuaiyun.com/soephin/article/details/123341011</guid><author>soephin</author><pubDate>Mon, 07 Mar 2022 22:27:16 +0800</pubDate><description><![CDATA[1.axios的封装

1 yarn add axios

2.在src目录下创建utils目录，再utils下创建request.js


import axios from 'axios'

 const request =axios.create({
  baseURL:'http://www.baidu.com'
})
export default request

3.再src下创建api目录，api目录下创建user.js


import request from '@utils/reques]]></description><category></category></item><item><title><![CDATA[Vuex使用]]></title><link>https://blog.youkuaiyun.com/soephin/article/details/123303102</link><guid>https://blog.youkuaiyun.com/soephin/article/details/123303102</guid><author>soephin</author><pubDate>Sat, 05 Mar 2022 23:07:43 +0800</pubDate><description><![CDATA[1. 概念

在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用多个组件的共享状态进行集中式管理（读/写），也是一种组件间通信方式，且适用于任意组件间通信。

2. 何时使用

多个组件需要共享数据时

3. 搭建vuex环境


	创建文件：src/store/index.js
	

// 引入核心库
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
//应用插件
Vue.use(Vuex)
​

​
//创建并暴露store
]]></description><category></category></item><item><title><![CDATA[路由配置vue-router]]></title><link>https://blog.youkuaiyun.com/soephin/article/details/123263158</link><guid>https://blog.youkuaiyun.com/soephin/article/details/123263158</guid><author>soephin</author><pubDate>Thu, 03 Mar 2022 20:36:40 +0800</pubDate><description><![CDATA[理解：一个路由（route）就是一组映射（key-value），多个路由需要路由器（router）进行管理
	
	
	前端路由：key是路径，value是组件
	
1. 基本使用


	安装vue-router，命令：npm i vue-router
	
	
	编写router的配置项
	

//引入VueRouter
import VueRouter from 'vue-router'
//引入路由组件
import About from '../components/User'
import Hom..]]></description><category></category></item><item><title><![CDATA[动态组件，组件插槽，自定义指令]]></title><link>https://blog.youkuaiyun.com/soephin/article/details/123216788</link><guid>https://blog.youkuaiyun.com/soephin/article/details/123216788</guid><author>soephin</author><pubDate>Tue, 01 Mar 2022 21:59:48 +0800</pubDate><description><![CDATA[1.动态组件

1.0基本使用

&lt;component :is='comName'&gt;&lt;/component&gt;

点击改变:is的值

1.1性能不高，每次切换都会销毁和重生组件

解决：用&lt;keep-alive&gt;&lt;/keep-alive&gt;包裹，解决组件销毁和重生问题，产生组件缓存

1.2 激活和非激活

两个钩子函数：

activated 激活时触发

deactivated 失去激活时触发

2.组件插槽

1.0基本使用

用&lt;slot&gt;&]]></description><category></category></item></channel></rss>