- 博客(55)
- 收藏
- 关注
RSS订阅原创 Grid布局
Grid 布局即网格布局，目前css布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系，目前唯一一种 CSS 二维布局。在兼容性方面，截至 目前，几乎所有的浏览器都对 CSSGrid 提供了原生的支持。Grid布局优点：这是一个二维布局系统，最大优点就是可以同时处理列和行Grid 布局和 flex 布局。
2023-06-02 12:35:51
721
原创 Angular
但Angular 2就不同了，发布于2016年9月份，它是基于ES6来开发的，它的起点更高，整合了现代前端的各种先进理念，在框架、文档、工具等各个层面提供了全方位的支持。微语法解析器接收of，会将它的首字母大写(Of)，然后加上属性的指令名(ngFor)前缀，它最终生成的名字是 ngFor 的输入属性(colors)在angular中,路由是非常重要的组成部分, 组件的实例化与销毁,模块的加载,组件的某些生命周期钩子的发起,都是与它有关。组件是拥有模板的控制器类，主要处理页面上的应用程序和逻辑的视图。
2023-06-02 12:35:03
294
原创 Grid布局
Grid 布局即网格布局，目前css布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系，目前唯一一种 CSS 二维布局。在兼容性方面，截至 目前，几乎所有的浏览器都对 CSSGrid 提供了原生的支持。Grid布局优点：这是一个二维布局系统，最大优点就是可以同时处理列和行Grid 布局和 flex 布局。
2023-05-23 22:03:28
400
原创 angular基础
先引入表单的一些内置依赖import {//构造函数里注入FormBuilder constructor(private fb : FormBuilder) {} //错误提醒数据 formErrors = {//在组件类的初始化函数里对表单中的元素的校验进行定义，并调用表单的valueChanges方法，检测表单的输入的变化 ngOnInit() : void {if(!
2023-04-22 17:36:56
394
原创 vue-element-admin---打包
如图所以，方块越大，说明该文件占用的文件越大，文件越大，对于网络带宽和访问速度的要求就越高，这也就是我们优化的方向。我们可以使用vue-cli本身提供的性能分析工具，对我们开发的所有功能进行打包分析。，hr是特定的前缀地址，此时我们可以配置一个base属性，配置为hr。： #后面是路由路径，特点是前端访问，#后面的变化不会经过服务器。：正常的/访问模式，特点是后端访问，任意地址的变化都会访问服务器。进行依赖分析，分析出最大的包，方便我们进行观察和优化。将打包好的代码打包上线，并在nodejs中代理跨域。
2023-02-22 15:20:44
1161
原创 打包路由模式
我们会发现，其实域名是**www.xxxx/com**，hr是特定的前缀地址，此时我们可以配置一个base属性，配置为hr。改成history模式非常简单，只需要将路由的mode类型改成history即可。： #后面是路由路径，特点是前端访问，#后面的变化不会经过服务器。：正常的/访问模式，特点是后端访问，任意地址的变化都会访问服务器。此时，我们会发现地址已经变成我们想要的样子了。**目标**配置打包之前的路由模式。
2023-02-22 14:25:19
68
原创 多语言实现
当我们全局注册i18n的时候，每个组件都会拥有一个**$t**的方法，它会根据传入的key，自动的去寻找当前语言的文本，我们可以将左侧菜单变成多语言展示文本。注意：当文本的值为嵌套时，可以通过**$t(key1.key2.key3...)**的方式获取。第三步，在main.js中对挂载 i18n的插件，并设置element为当前的语言。第二步，需要单独一个多语言的实例化文件 src/lang/index.js。这里，针对英文和中文，我们可以提供两个不同的语言包。**目标**实现国际化语言切换。
2023-02-22 14:13:58
591
原创 动态主题的设置
来设置的，所以就不难实现动态换肤了，只要找到那几个颜色变量修改它就可以了。首先我们需要拿到通过 package.json 拿到 element-ui 的版本号，根据该版本号去请求相应的样式。拿到样式之后将样色，通过正则匹配和替换，将颜色变量替换成你需要的，之后动态添加 style 标签来覆盖原有的 css 样式。element-ui 2.0 版本之后所有的样式都是基于 SCSS 编写的，所有的颜色都是基于几个基础颜色。第二步， 放置于**layout/navbar.vue**中。： 实现动态主题的设置。
2023-02-22 13:25:36
385
原创 全屏插件的引用
第四步，放置于**layout/navbar.vue**中。第二步，封装全屏显示的插件··第三步，全局注册该组件。：实现页面的全屏功能。第一步，安装全局插件。
2023-02-22 13:19:52
54
原创 打印员工信息
首先，打印功能我们借助一个比较流行的插件。利用vue-print-nb进行打印。完成个人信息和工作信息的打印功能。完成详情到打印的跳转。最终，我们看到的效果。
2023-02-20 16:16:49
76
原创 图片地址生成二维码
在点击员工的图片时，显示弹层，并将图片地址转化成二维码。我们尝试将canvas标签放到dialog的弹层中。首先，需要安装生成二维码的插件。将图片地址生成二维码显示。
2023-02-20 15:32:10
300
原创 显示头像-elementUI--table
在 src\views\employees\index.vue 中的 table 上补充一列。此时可能部分图片无法正常显示（原因是图片本身地址有误，或者就是没有设置图片）此时可能部分图片无法正常显示（原因是图片本身地址有误，或者就是没有设置图片）组件使用者如果传递了图片，使用传递的图片。首先需要封装图片组件，然后进行全局注册。通过自定义列，将图片显示在表格中。如果没有传递图片，使用默认图片。通用封装-封装全局图片组件。在业务组件使用封装的组件。我们为什么要封装图片组件。在业务组件中封装组件。
2023-02-20 14:31:01
795
原创 图片保存到存储桶&&图片展示
使用自定义行为覆盖默认上传，注意一旦设置自定义上传行为之后，所有的上传操作都需要自己实现，比如数据处理，上传成功之后的后续操作，on-success 钩子函数也不会继续触发。实际工作中，秘钥属于敏感信息，不能直接放到前端存储，容易产生安全问题，更好的做法是把秘钥交给后端管理，前端通过调用接口先获取秘钥，有了秘钥之后再进行上传操作。服务器属于个人的，需要一定的权限才能自由上传图片，这个负责权限验证的其实就是秘钥，也就是说拥有秘钥是进行上传的必要条件。
2023-02-20 13:06:56
245
原创 组件-全局注册
在上一节，我们将业务组件在 components 中进行注册，定义成了局部组件，这种方式能够满足我们的业务，但这种写法会导致公用的组件需要在多个组件中分别进行注册，造成代码冗余。我们可以把这个配置对象, 封装到src/components/index.js中, 导出此对象到main.js中给Vue.use使用。如果传入Vue.use()里是一个函数, 直接传入Vue构造器, 直接执行此函数。Vue.use 可以接收一个对象，Vue.use(obj)掌握 Vue.use() 的用法，能用它来注册全局组件。
2023-02-18 00:05:27
284
原创 vue具名插槽
创建组件实现基本结构，新建 src\components\PageTools\index.vue 文件,，实现页面结构的创建。在 src\views\employees\index.vue 组件中使用封装的 PageTools 组件。在后续的业务开发中，我们经常会用到一个类似下图的工具栏，因此需要可以将其封装成公共组件，方便复用。我们定义了两个具名插槽，将来在使用组件的时候，只需要按照对应的插槽名称就可以在特定的位置插入内容。问： 左侧的提示消息 和 右侧按钮 在每个页面中并不是一致的，怎么处理呢？
2023-02-18 00:01:52
113
原创 mapAction使用
2、用mapActions的话怎么像里面传参数到actions里请求数据。怎么向...mapActions（'*'）里传参数？1、可以直接用 dispatch是可以的。
2023-02-16 20:43:52
118
原创 处理树形结构
pid 代表的是父级的 id，那是否可以使用 id 和 pid 形成嵌套关系呢？把我们第一天的函数, 封装成工具，单独放在 utils\index.js 下边。数据结构比较复杂，如果使用循环，会产生多层 for 循环，因此需要使用递归。如果以后工作本来是要层叠嵌套结构, 但是数组是扁平化的应该怎么办?把后端传过来的平铺数组数据，处理成 tree 组件需要的树形数据。在 src\utils\index.js 中进行代码的封装。如果不为空，pid 代表的是父级的 id，如果为空，说明是 1 级。
2023-02-15 20:17:00
62
原创 默认插槽 内部数据自定义模板渲染 scope.data直接key解构赋值变量也是data(对应数据对象)
实现结构的复用 (看功能操作区域部分标签代码)
2023-02-15 18:28:03
99
原创 添加子部门-隐藏组件
views/departments/components/departDialog.vue, 弹出框组件里点击按钮绑定事件关闭弹窗。子组件时, 恰当时机this.$emit('update:属性名', 传给父变量的值)点击遮罩层, 点击右上角×按钮, 键盘的esc按键, 点击确定和取消按钮自己写逻辑。隐藏组件的方式有很多种, 但是我们只想让用户点击取消和确定按钮才能关闭。其实就是个语法糖, 绑定个自定义事件, 把收到的值给右侧的Vue变量。父组件时, :属性名.sync="父里Vue数据名"
2023-02-15 18:13:53
38
原创 mapActions
localStorage：可长期存储数据，除非用户清楚localStorage信息，否则数据会一直存在。同一中浏览器之间，不同页面，数据可以共享。我们在写vuex的时候 先从外再到内，比如说 如果你想吃饭，我们就先拿个碗再去盛饭，下面开始展示代码，在user.js中。先在 获取到了 userInfo中的数据了 ，可以对 userInfo 里面的数据 修改，添加等。在store下的index.js 里面 引入 module文件夹下的 index.js ，可以在页面中修改等操作， 也可以调用这个值，渲染值。
2023-02-15 17:15:28
147
原创 【无标题】
模板学习预习自测-必须把vue-admin-template这一个模板项目克隆下来(看02节内容-按照步骤来)看看npm install后, 是否能启动成功项目介绍项目功能模块划分:技术栈：vue-admin-template 二次开发技术解决方案：RBAC 权限设计多语言Excel 导入导出反向代理请求模块封装...01.vue-element-admin-介绍目标公司项目提倡 “小步快跑，快速迭代” 的敏捷开发模式传统开发：闭关三年，潜心修炼，精益求精，产品横空出世。
2023-02-10 20:00:20
95
原创 项目打包App
wap项目转 App , 原来只运在手机上的wap(无线网络协议,诺基亚,爱立信时代)项目 可转app项目。把我们vue项目打包好的dist下的一切复制到你刚才的项目-覆盖过来即可 (一定要保留manifest.json文件)微信原生小程序的另外一个编辑器,比微信提供的开发者工具好用,但是现在谁还在用原生写小程序呢?ios,安卓程序员 用各自的编程语言写的代码，只能在某一个平台上运行。多端应用,一套代码,复用八端,时下最火的一个跨端框架。下载安装, 注册激活， 如果不注册激活，就不能使用它的打包功能。
2023-02-09 15:22:16
68
原创 项目打包部署
然后购买线上的云服务器 (学生应该什么时候都便宜) 一人打100kb左右计算 (可以预估同时能支持多少人访问) 根据业务选择多大带宽的服务器 (如果就自己玩 越低越好, 越便宜越好)线上的云服务器, 开启一个web服务器 (node+express / nginx / apache / 等)部署项目, 为了得到一个url地址, 可以在公网中, 大家都可以访问你做的项目。一定要关闭服务器的防火墙(在哪个网站买的, 来到管理页面, 放行端口)如果自己删除, 那开发还得加回来, 注释也一样啊, 麻烦。
2023-02-09 15:17:07
84
原创 项目打包--跨域
chunk-vendors：第三方包的代码统一放在这里（dayjs,vue,vuex,vue-router,vant）-只要被webpack构建依赖关系发现的包。app.hash值.js.map: 记录当前的.js文件, 打包之前对应代码位置, 有利于代码出错快速找到源代码的位置。作用：用vue-cli内部集成的webpack，把.vue,.less.js 等打包成浏览器可直接执行的代码。chunk-hash值.js: 某个第三方模块对应的js ,某个.vue文件编译之后的.js。
2023-02-09 15:11:32
237
原创 删除工具包
只能对自己发布的包, 执行npm unpublish命令。再次发布的包名或版本, 和刚才发布的不能完全一致。运行npm unpublish命名。如果感觉名字不好想删除。如何撤销发布的工具包。
2023-02-09 15:05:36
49
原创 发布工具包
创建index.js(package.json记录入口文件名字统一), 然后把其他模块的方法统一导入并导出。也可以到任何一个地方, 用npm / yarn 下载刚才你发布的包名。把package.json的版本向前改(因为每个版本号只能用一次)把js文件放到本地包文件夹里, 在index.js统一导出。一个项目下来, 自己用原生js, 封装了些工具。新建文件夹, 并初始化包环境npm init。以后换电脑, 直接npm/yarn下载即可。重要: ==包名, 入口==把要发布的js文件拿过来。
2023-02-09 15:03:34
49
原创 vuecli开发环境-做代理服务器
但是vuecli脚手架, 启动了一个webpack开发服务器, 它就能做代理转发。如果后端jsonp也不弄, cors也不弄, 就给你个接口地址。演示用axios请求网易新闻地址, 发现跨域报错。在vue.config.js - 添加规则和配置。而且前端和这个服务器是同源的都是8080端口。需要修改webpack开发服务器的配置即可。jsonp / cors / 代理转发。vuecli开发环境-做代理服务器。vuecli环境如何设置代理转发?例子代码(看看就行, 不用尝试)跨域的几种解决方案是什么。
2023-02-09 14:57:38
55
原创 滚动条位置
监测tabs切换后, 从nameToTop对象里拿到原本滚动位置设置。tabs标签绑定before-change事件和方法实现。明确数据结构, 在Home/index.vue定义变量。切换之前保存, 切换之后从数据结构取出对应值设置。路由对象/home, 上添加meta额外信息。首先明确数据结构, 频道id对应滚动条值。在全局后置钩子设置页面滚动条。tabs切换后, 把位置设置。给Home设置组件内守卫。tabs切换保存当前位置。优化_首页-滚动条位置。首页滚动条位置需要恢复。优化频道-滚动条位置。
2023-02-08 23:56:46
80
原创 自动聚焦问题
inserted只有第一次指令所在标签, 插入真实DOM执行。自动聚焦依赖自定义指令inserted执行。用户名修改弹窗多次点击。只有第一次自动聚焦问题。
2023-02-08 23:04:51
62
原创 文章详情-代码高亮
想要让代码高亮, 必须在后台发布文章时, 就要把代码分段用pre+code标签包裹。前端可以通过获取这些标签名/指定类名, 分别给予相应样式。基于 highlight.js 美化详情页的代码片段。在铺设文章详情标签使用v-highlight指令即可。下载此插件到项目中一定要带.js名字。文章详情页里代码片段高亮效果。在main.js 引入即可。遇到需求, 多百度解决方案。优化_文章详情-代码高亮。注册高亮代码-自定义指令。看文档尝试使用解决需求。
2023-02-08 22:57:17
113
原创 路由-全局守卫
/ vuex里有token(代表登录过, 但是一定要注意过期和主动退出要先清除vuex和本地的token, 让其跳转登录页)登录成功时, 不允许切换路径进入登录页面。重点多看看路由执行的过程和注意事项。路由守卫有很多种, 具体查阅文档。方法1: 全局前置守卫判断。方法2: 路由独享守卫。
2023-02-08 19:23:02
47
原创 vue头像的上传
JS监测A点击事件, 触发B标签标签事件。引接口, 传入表单对象, 更新页面。上传图片文件对象, 表单给后台。先实现前端点击获取文件对象效果。给用户看A标签, 点击A标签。点击头像出现文件选择器。
2023-02-08 00:19:37
176
原创 解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
resolve与reject是用户传的成功/失败的回调。出现这个问题是因为重复点击了相同的路由引起的：编程式导航。问题描述：重复点击导航时，控制台出现报错 ，虽然不影响功能使用，但也不能坐视不管。方案二：在跳转时，判断是否跳转路由和当前路由是否一致，避免重复跳转产生问题。这是因为promise需要传递一个成功/失败的回调，才能处理这个异常。：给push方法传递相应的成功、失败回调函数，可以捕获当前的错误。push：是VueRouter类的一个实例。中，还是会有类似的错误出现。this：当前组件的实例。
2023-02-07 22:16:51
3372
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人