- 博客(44)
- 收藏
- 关注
RSS订阅原创 React每日总结
# 全局安装脚手架npm i create-react-app -g创建项目:# project-name 项目名称create-react-app react-demosrc/index.js:// 导入 react [核心语法包]import React from "react";// 导入 react-dom [react操作DOM的模块包]import ReactDOM from "react-dom";// <h1 id='desc'>你好<
2022-04-23 22:02:38
72
原创 uni-app每日总结
uni-app：是一个使用 Vue.js 开发所有前端应用的框架。官网条件编译：条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。#ifndef H5需条件编译的代码#endif H5平台#ifndef MP-WEIXIN需条件编译的代码#endif 微信小程序 loginFn() { // #ifdef MP-WEIXIN this.wxLogin...
2022-04-21 21:48:49
102
原创 微信小程序每日总结
微信小程序父子通信方法一// 子组件中定义 propertiesproperties:{ // 属性名:类型 age: Number}<!-- 子组件使用自定义属性 --> {{ 属性名 }} {{ age }}<!-- 父组件传递数据 --><子组件 属性名="{{ 变量 }}"></子组件><子组件 age="{{ 18 }}"></子组件>方法二通过 selectComponent 获...
2022-04-19 21:30:23
115
原创 小程序分包-自定义tabbar
分包加载分包指的是把一个 完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。小程序项目由 1 个主包 + 多个分包（9个） 组成：主包：一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源独立分包独立分包本质上也是分包，只不过它比较特殊，可以独立于主包和其他分包而单独运行。独立分包和普通分包的区别最主要的区别：是否依赖于主包才能运行普通分包必须依赖于主包才能运行独立分包可以在不下载主包的情况下，.
2022-04-18 21:39:43
889
原创 微信小程序每日总结
navigator：默认只能跳转到非tabBar页面，如果要跳转到tabBar页面，需要配置 open-type属性open-type属性：默认navigate 跳转到非tabBar页面redirect 重定向switchTab 跳转到tabBar页面reLaunch 打开小程序navigateBack 返回，不需要设置urlexit 退出小程序编程式导航：wx.navigateTo 类似push的效果wx.redirectTo 类似replace的效果跳转到tabBar页面，ta
2022-04-17 22:15:52
107
原创 微信小程序总结
安装wx开发者工具=>wx公众平台注册账号pages:存放所有小程序的页面app.js:小程序的入口页面app.json:全局的配置文件app.wxss全局的样式文件常用的组件：view、swiper、scroll-view,详情见：官方文档导航组件：navigator，事件绑定：bindtap、catchtap（可以阻止冒泡）渲染列表：<view wx:for="{{arr2}}" wx:key="index"><view>姓名是{{it
2022-04-16 21:54:08
48
原创 人力资源中台每日总结
功能权限应用目标： 实现功能权限的应用功能权限的受控思路上小节中，当我们拥有了一个模块，一个页面的访问权限之后，页面中的某些功能，用户可能有，也可能没有，这就是功能权限这就是上小节，查询出来的数据中的points比如，我们想对员工管理的删除功能做个权限怎么做？首先需要在员工管理的权限点下， 新增一个删除权限点，启用我们要做的就是看看用户，是否拥有point-user-delete这个point，有就可以让删除能用，没有就隐藏或者禁用使用Mixin技术将检查方法注入所以，我们可以
2022-04-07 21:43:16
104
原创 人力资源中台项目总结
前端权限应用-页面访问和菜单目标： 在当前项目应用用户的页面访问权限权限受控的主体思路到了最关键的环节，我们设置的权限如何应用？在上面的几个小节中，我们已经把给用户分配了角色， 给角色分配了权限，那么在用户登录获取资料的时候，会自动查出该用户拥有哪些权限，这个权限需要和我们的菜单还有路由有效结合起来我们在路由和页面章节中，已经介绍过，动态权限其实就是根据用户的实际权限来访问的，接下来我们操作一下在权限管理页面中，我们设置了一个标识， 这个标识可以和我们的路由模块进行关联，也就是说，如果用
2022-04-06 21:50:28
194
原创 人资项目-员工角色,权限管理
URL.createObjectURL(文件信息)：会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。css加权重筛选/deep/、::v-deep：<style lang="scss" scoped>//less /deep///scss ::v-deep.hidden { ::v-deep .el-upload--picture-card { display: none; }}</style>ResetFul接口规范...
2022-04-05 20:36:35
65
原创 el-upload 组件文件上传
该组件可以实现文件的上传, 组件内部会自己使用原生的xhr发送请求<el-upload list-type="picture-card" :file-list="fileList" :on-remove="onRemove" :on-preview="onPreview" :on-change="onChange" :before-upload="beforeUpload" :http-request="httpRequest" action="#...
2022-04-03 22:10:42
427
原创 人力资源每日总结
封装一个通用的工具栏目标：封装一个通用的工具栏供大家使用通用工具栏的组件结构在后续的业务开发中，经常会用到一个类似下图的工具栏，作为公共组件，进行一下封装组件 src/components/PageTools/index.vue<template> <el-card class="page-tools"> <el-row type="flex" justify="space-between" align="middle"> <...
2022-04-01 21:10:53
60
原创 人力资质项目总结
封装一个通用的工具栏目标：封装一个通用的工具栏供大家使用通用工具栏的组件结构在后续的业务开发中，经常会用到一个类似下图的工具栏，作为公共组件，进行一下封装组件 src/components/PageTools/index.vue<template> <el-card class="page-tools"> <el-row type="flex" justify="space-between" align="middle"> <...
2022-03-31 21:51:19
53
原创 人力资源总结
取消按钮和关闭// 点击确定时触发 btnOK() { this.$refs.deptForm.validate(async isOK => { if (isOK) { // 表示可以提交了 await addDepartments({ ...this.formData, pid: this.treeNode.id }) // 调用新增接口 添加父部门的id this.$emit('addDepts')...
2022-03-29 22:02:49
105
原创 新增-删除-利用sync修饰符关闭新增弹层
删除部门功能实现删除功能首先我们需要获取数据封装删除接口，注册下拉菜单事件/** ** 根据id根据部门 删除 delete 新增 post 修改put 获取 get* **/export function delDepartments(id) { return request({ url: `/company/department/${id}`, method: 'delete' })}然后我们需要监听下拉事件，父组件监听事件<el-drop...
2022-03-28 21:52:51
323
原创 树形结构布局
组织架构树形结构布局采用 element 中的 tree组件 可以实现树形结构, 用清晰的层级结构展示信息<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree><script> export default { data() { return { data: [{ label: '一级 1',...
2022-03-26 21:43:05
65
原创 人资项目：自定义指令-用户资料模块-token 处理
在main.js中进行全局注册：import * as directives from '@/directives'// 注册自定义指令// 遍历所有的导出的指令对象 完成自定义全局注册Object.keys(directives).forEach(key => { // 注册自定义指令 Vue.directive(key, directives[key])})此导入语法可以获取文件中所有的指令对象：import * as 变量 得到的是一个对象{ 变量1：对象1，变量2： 对..
2022-03-25 22:02:41
162
原创 人资项目---登录模块
由于我们的请求,涉及到跨域问题,可以通过代理的方式,进行解决.module.exports = { devServer: { // 代理配置 proxy: { // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制 // localhost:8888/api/abc => 代理给另一个服务器 // 本地的前端 =》 本地的后端 =》 代理我们向另一个服务器发请求 （行得通） // 本地的前...
2022-03-24 21:24:38
80
原创 人资项目登录模块
如果想要设置开发环境的接口,直接在.env.development中写入对于port变量的赋值# 设置端口号port = 8888网站名称登录页面的基础布局设置头部背景(标题图片)<div class="title-container"> <h3 class="title"> <img src="@/assets/common/login-logo.png" alt=""> </h3>...
2022-03-22 21:37:57
60
原创 Vuex总结
修改state状态必须通过mutationsmutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行执行异步代码，要通过actions，然后将数据提交给mutations才可以完成state的状态即共享数据可以在组件中引用组件中可以调用actionvuex基础-初始化功能vue create demo 创建了一个叫demo的文件、初始化：第一步：npm i vuex --save => 安装到运行时依赖 => 项目上线之后..
2022-03-19 21:51:00
1007
1
原创 【无标题】
评论点赞1、在 api/comment.js 中添加封装两个数据接口对评论或评论回复点赞export function addCommentLike(commentId) { return request({ method: "POST", url: "/v1_0/comment/likings", data: { target: commentId } });}取消对评论或评论回复点赞export function del...
2022-03-18 22:02:44
98
原创 黑马头条每日总结
点击发布评论,会有弹出层,用vant写出弹出层,弹出层对发布评论的页面来说,是爷爷,要经过两次传参.item中@click="$emit('recleClick', comment)"list中@recleClick="$emit('recleClick', $event)"index,中@recleClick="recleClick"来判断弹出层是否要打开设置样式.发布评论要验证是否登录,没有登录,点击发布评论,会跳到登录页,登录,if (!this.$store.st
2022-03-17 21:27:24
83
原创 黑马头条每日总结
关注用户功能:先封装请求函方法, 然后给关注按钮注册点击事件。在事件函数中判断用户是否登录, 如未登录, 则 return 出来, 并提示用户登录，如果已登录则进行下一个关注的判断。如果已关注，则取消关注，如果没有关注，则添加关注。然后将视图进行更新,给值取反, 因为子组件不能直接修改, 使用 $emit 将值传给父组件为了防止用户频繁点击和用户的交互反馈, 设置一个变量来控制是否处于加载中(默认为false), 在触发点击事件时, 将变量设置为true, 开启按钮的 loading 状态...
2022-03-15 21:58:36
105
原创 每日头条总结
1、创建组件并配置路由创建 views/article/index.vue 组件然后将该页面配置到根级路由找到首页文章列表项组件配置路由跳转2、页面布局3、实现功能获取文章数据：在 api/article.js 中新增封装接口方法export const getArticleById = articleId => { return request({ method: 'GET', url: `/v1_0/articles/${articleId}` }...
2022-03-14 21:53:26
77
原创 黑马头条总结
同步列表,登录状态,未登录状态,用户编辑时利用store的state中的user.来判断用户是否登录,没有登录,就保存到本地中,等录保存在网络中.if (this.user) { try { const { data } = await userChines(); this.chennls = data.data.channels; } catch (err) { console.log(err);...
2022-03-12 21:44:24
227
原创 黑马头条每日总结
优化时间,利用day.js.修改的样式例如:初始化前是 ? ? 2021:01:22初始化后是 一年前下载? npm i dayjs// 配置中文包import "dayjs/locale/zh-cn";import relativeTime from "dayjs/plugin/relativeTime";// 使用中文语言包dayjs.locale("zh-cn");//相对时间设置全局过滤器Vue.filter("relativeTime", (timer
2022-03-11 21:47:06
53
原创 黑马头条每日总结
1.首页的页面布局头部导航栏1、使用导航栏组件2、在导航栏组件中插入按钮3、样式调整2、频道列表2.1、使用 Tab 标签页组件样式调整：宽高、样式、位置、添加占位符充当内容区域2.3、展示频道列表思路：第1步：api目录下面文件封装请求方法第2步：data里面定义变量用于存储数据第3步：methods里定义获取数据方法3.1 页面里面导入这个方法3.2 methods方法里面调用方法发送请求3.3 请求错误处理3.4 请求成功赋值data里面变量第4步：c.
2022-03-10 21:31:20
115
原创 黑马头条总结----
?登录注册创建 src/views/login/index.vue并配置路由<template> <div class="login-container">登录页面</div></template><script>export default { name: 'LoginPage', components: {}, props: {}, data () { return {} }, computed:...
2022-03-08 21:49:17
166
原创 黑马头条-Day 01总结
初始化项目1、使用 Vue CLI 创建项目。npm install --global @vue/cli // 全局安装脚手架2、创建vue项目，并配置项目。vue create toutiao-m // 创建项目3、加入 Git 版本管理。远程创建仓库。本地创建仓库，git init 放在暂存区 git add . 提交到本地仓库git commit -m '描述'与远程关联 git remote add origin git@gitee.com:mao-mao-sun/he...
2022-03-07 21:53:01
173
原创 Vuex的学习
什么是Vuex?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。四个map方法的使用mapState方法用于帮助我们映射state中的数据为计算属性computed: { //借助mapState生成计算属性：sum、school、subject（对象写法） ...mapState({sum:'sum',school:'school',subject:'subjec
2022-03-05 21:31:54
35
原创 Vue-Day 05
一、 声明式导航 - 基础使用 vue-router提供了一个全局组件 router-link router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#) router-link提供了声明式导航高亮的功能(自带类名) 二、 路由 - 重定向const routes = [ { path: "/", // 默认hash值路径 redirect: "/find" // 重定向到/find // 浏览器url中#后
2022-03-03 20:03:52
43
原创 Vue-Day 04
动态组件设置挂载点<component :is="变量"></component>组件缓存Vue内置的keep-alive组件 包起来要频繁切换的组件激活和非激活补充2个钩子方法名: activated – 激活时触发 deactivated – 失去激活状态触发局部注册和使用// 目标: 创建 "自定义指令", 让输入框自动聚焦// 1. 创建自定义指令// 全局 / 局部// 2. 在标签上使用自定义指令 v-指令名// 注
2022-03-01 20:44:23
404
原创 Vue-Day 03
一、使用axios（Vue）1.基本使用axios({ method: '请求方式', // get post url: '请求地址', data: { // 拼接到请求体的参数, post请求的参数 xxx: xxx, }, params: { // 拼接到请求行的参数, get请求的参数 xxx: xxx }}).then(res => {//{data:res} 结构赋值 console.log(res.data) // 后
2022-02-28 21:56:02
43
原创 Vue总结
Vue中有哪些钩子函数(十二个)Vue2.x的生命周期钩子(8个)：①、beforeCreate和created②、beforeMount和mounted③、beforeUpdate和updated④、beforeDestroy和destroyed路由组件(2个)：⑤、activated和deactivated⑥、$nextTick:下次 DOM 更新循环结束之后执行延迟回调⑦、errorCaptured:当捕获一个来自子孙组件的错误时候调用Vue3.x的生命周期钩子
2022-02-26 21:45:30
234
原创 Day 02-Vue
一、Vue中是如何进行组件通信的？①、父组件 => 子组件父组件内设置想要传递的数据，在父组件内引用的子组件绑定一个自定义属性并把数据绑定在自定义属性上，最后在子组件内添加props参数接收即可。②、子组件 => 父组件通过自定义事件，即子组件通过$emit进行触发并且可以携带参数，父组件通过@进行监听，然后进行方法处理。③、兄弟组件(1)、全局事件总线 $bus(2)、第三方库(pubsub) 消息的订阅与发布(3)、VueX二、methods和comput
2022-02-25 21:01:14
203
原创 Day 02-Vue
一、v-if和v-show的区别相同点：都能使元素隐藏不同点：v-show的本质是设置css的display:none,该元素在页面上还是存在的；但v-if是动态的向DOM树中添加或删除DOM元素总结：如果需要频繁切换某节点，使用v-show如果不需要频繁切换某节点，建议使用v-if二、为什么避免v-for和v-if在一起使用Vue 处理指令时，v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高。如果避免出现这种情况，则在外层嵌套
2022-02-24 21:32:40
36
原创 Day 01-Vue
一、什么是Vue,Vue有哪些优势？一套构建用户界面的渐进式JavaScript框架[构建用户界面] 后台数据 ===> 渲染界面（通过Vue）[渐进式] Vue可以自底向上逐层的应用：简单使用只需要引入一个轻量小巧的库，复杂使用可以引入各种插件优势： ①采用组件化模式，提高代码复用率，让代码更好维护。 ②声明式编码，无需直接操作DOM，提高开发效率。 ③SPA单页面应用，通过路由进行页面的切换和跳转，使用局部刷新。 ④可以对数据进行双向绑定，编写的界面效果是响
2022-02-22 21:39:36
103
原创 Webpack
1.什么是webpack把很多文件打包整合到一起, 缩小项目体积, 提高加载速度2.加载器---处理css文件原因: webpack默认只认识 js 文件和 json文件（1）安装依赖yarn add style-loader css-loader -D（2）webpack.config.js 配置module.exports = { // ...其他代码 module: { rules: [ // loader的规则 {
2022-02-21 18:56:35
116
原创 每日心得（大事件篇）--- 第七天
一、复习了如何让一个盒子垂直水平居中 position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);记得要给父盒子加相对定位二、复习了如何用gitee管理大事件项目1.首先在本地创建文件夹large_event2.git init 初始化仓库3.在gitee新建仓库4.将本地仓库和gitee中的仓库建立关联三、学会了如何利用layui添加表单元素自定义验证规则
2022-01-21 20:55:57
278
原创 每日心得【Git篇】--- 第六天
一、Git 分支操作1.查看分支列表（master代表主分支）git branch2.创建新分支git branch 分支别名3.切换分支git checkout 分支别名4.分支的快速创建和切换git checkout -b 分支别名5.合并分支（先切换到主分支，再合并，先看清分支是否已经提交干净！！！）（1）.git checkout master（2）.git merge 分支别名6.删除分支 （先切换到其他分支再删除）git branch -d 分
2022-01-20 18:54:05
671
原创 每日心得（Git篇）--- 第五天
一、Git的三个区域（1）.工作区 ======>处理工作的区域（2）.暂存区======>已完成的工作的临时存放区域，等待被提交（3）.Git仓库 ======>最终的存放区域二、Git中的三种状态（1）.已修改 modified 表示修改了文件，但还没将修改的结果放到暂存区（2）....
2022-01-18 19:06:24
231
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人