- 博客(84)
- 收藏
- 关注
RSS订阅原创 页面如何添加水印？
最近做vue项目的时候，需要要求要在页面中添加水印的效果，网上找了一些方法，具体操作如下：（1）页面中添加一个文件比如 waterMark.ts, 代码如下：const watermark: any = {};const setWatermark = (str: any) => { const id = '1.23452384164.123412415'; ...
2020-04-11 11:22:13
1145
原创 vue 项目如何实现动态加载路由？
一、思路① 在vue-router对象中首先初始化公共路由，比如（首页，404，login）等② 用户登陆成功后，根据用户的角色信息，获取对应权限菜单信息menuList，并将后台返回的menuList转换成我们需要的router数据结构③ 通过**router.addRouter(routes)**方法，同时我们可以将转后的路由信息保存于vuex，这样我们可以在我们的SideBar组...
2020-03-25 17:53:38
9722
7
原创 Git 相关操作
图中的几个专用名词解释： Workspace: 工作区 Index / Stage: 暂存区 Repository: 本地仓库 Remote: 远程仓库 Git 问题集锦情况一：最近一次 commit 的代码有问题怎么办？git add 我是修改内容.txtgit commit --amend【amend】修正，会对最新一条 co...
2020-03-24 16:02:12
359
原创 分享一些Vue中实用的小技巧
Vue项目开发中一些常用实用的小技巧：require.context()一个webpack的api,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块。语法：/** * directory {String} -说明需要检索的目录 * useS...
2020-02-27 16:30:22
595
原创 Vue组件间通信方式
组件可以封装一些重用的代码，通过传入不同的数据，实现组件的复用。组件之间传递数据基本上可以分为三种：父子组件、兄弟组件、隔代组件（跨组件），针对不同场景，我们可以选择不同的方式，具体如下：父子组件通信：（1）props/$emit父组件通过自定义属性传递数据，子组件通过props来接收;子组件通过emit传递一个自定义事件，父组件通过自定义事件来操作相应的逻辑：父组件：&...
2019-11-27 14:10:26
304
原创 vue-cli 3.0 引入mint-ui报错
场景：官网：http://mint-ui.github.io/docs/#/zh-cn2/quickstart npm i mint-ui -S main.ts 文件中引入并使用 import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'Vue.use(MintUI) 然后报错提示：Could not find ...
2019-09-06 14:17:24
2000
原创 区别 URL.createObjectURL() 和 FileReader.readAsDataURL()
业务场景：图片上传和预览功能~具体实现：URL.createObjectURL() URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。 简单说经过这个方法的处理后会生成一个...
2019-09-04 19:46:38
4927
原创 angular 配置i18n
1.安装 .npm install @ngx-translate/core --savenpm install @ngx-translate/http-loader 2. 配置（app.module.ts）import { BrowserModule } from '@angular/platform-browser';import { Inject, LOCALE_ID, N...
2019-08-23 18:05:11
2224
1
原创 Angular 报错解决
Can't bind to 'formGroup' since it isn't a known property of 'form' 错误描述 当form表单加FormGroup属性时报错Can't bind to 'formGroup' since it isn't a known property of 'form' <form [formGroup]="loginForm"&...
2019-08-23 17:08:11
713
原创 angular之关于Ionic的使用
官网：https://ionicframework.com/docs/intro安装：npm install @ionic/angular@latest --save使用：（1）在app.module.ts文件中引入 import { IonicModule } from "@ionic/angular";（2）添加到 AppModule 的 imports 数组中 ...
2019-08-22 17:49:29
2234
原创 vue + ionic 搭建移动端项目
vue创建项目：找一个空文件夹，使用如下命令构建vue 项目： vue create app-web备注：app-web为项目的名字 构建成功后，运行：npm run serve ，在浏览器中输入：locahost:8080 即可看到效果 使用如下命令，安装ionic: npm install @ionic/vue @ionic/core --save...
2019-06-28 17:09:23
6564
1
原创 vue filter过滤器
vue项目中，如果需要对某个字段进行处理，一般我们会写一个filter，如下，我们新建一个filters.js的文件，然后声明了两个filter,如下所示：const viCurrency = (val: any) => { if (!val) { return null; } let money = Math.ceil(+val); ...
2019-06-20 16:41:37
511
原创 egg.js 如何使用？
前言egg官网：https://eggjs.org/zh-cn/intro/quickstart.htmlegg是基于Koa 框架基础上实现的一个node框架所有的NodeJS 框架最基本的核心就是通过原生库http or https启动一个后端服务http.createServer(this.serverCallBack()).listen(...arg)， 然后所有的请求都会进入s...
2019-06-06 16:58:59
1427
原创 Vue 组件间通信方式
前言组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。一般来说，组件可以有以下几种关系：如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如p...
2019-05-31 16:15:18
348
原创 'PROXY_ENV' 不是内部或外部命令，也不是可运行的程序 或批处理文件。
今天启项目的时候碰到一个很奇葩问题： 在mac上能执行的npm命令，到windows上执行就不行了，报错如下：报错翻译就是：'PROXY_ENV' 不是内部或外部命令，也不是可运行的程序或批处理文件'。以下是package.json的配置：当在windows环境下执行npm run debug:pre时，就会报错，在mac下执行就正常运行~原因如下：原来是...
2019-05-09 20:47:59
1517
原创 angular项目如何配置国际化（i18n）？
1、下载ngx-translate的依赖库//利用npm来安装ngx-translate依赖npm install @ngx-translate/core --savenpm install @ngx-translate/http-loader --save2、在项目根模块app.module.ts中引入引入TranslateModule模块import { Browse...
2019-03-12 19:31:15
5913
1
原创 Rxjs常用操作符
Observable可观察序列中，我们可以使用操作符来对流进行处理，以实现我们想要的结果。详细的操作符以及具体使用可参考文档：https://rxjs-cn.github.io/learn-rxjs-operators/operators/utility/do.html常见的操作符如下：合并相关操作符：【1】concat N个请求按顺序串行发出（前一个结束再发下一个）Observ...
2019-03-08 10:34:40
940
原创 了解RXJS
RxjsRxjs简单说是一种针对异步数据流的编程，它将任何数据，包括http请求，DOM事件等都包装成流的形式，然后用一些操作符对流进行处理，这样就能用同步编程的方式去处理异步数据，并实现你所需要的功能；Rxjs核心概念Observable 可观察系列 Observer 观察者 Operator操作符Observable 简单说数据就在Observable中流动，你可以用各种...
2019-03-07 17:20:41
388
原创 :host 和::ng-deep
:host 表示选择当前的组件。::ng-deep 可以忽略中间className的嵌套层级关系。直接找到你要修改的className。使用：:host { background: #F5F5F5; overflow: hidden; padding: 24px; display: block;}.card-container ::ng...
2019-03-05 17:51:38
12500
1
原创 Sass相关用法
Sass是一款CSS预处理器，它在 CSS 语法的基础上拓展了一些功能，如：增加了变量 、嵌套、混合 、导入 等功能，有助于更好地组织管理样式文件，以及更高效地开发项目。Sass 有两种语法格式：1. scss 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的,也支持大多数 CSS hacks 写法以及浏览器前缀写法，以及早期的 IE 滤镜写法...
2019-03-04 19:43:32
526
原创 使用 FormBuilder 来生成表单控件
FormBuilder 服务提供了一些便捷方法来生成表单控件。FormBuilder在幕后也使用同样的方式来创建和返回这些实例，只是用起来更简单。 下面会重构 ProfileEditor 组件，用FormBuilder 来代替手工创建这些 FormControl 和 FormGroup。 Step 1 - 导入 FormBuilder 类import { FormBuilder ...
2019-02-22 18:29:22
10662
原创 typescript相关
ts基本数据类型：一、布尔类型（Boolean）var isDone: boolean = true ;二、数字类型（Number） 23var num: number = 9;三、字符串类型（Sring）var str: string = 'hello world'四、数组类型（Sring）两种方式【1】var arr: number[] = [22,3,45,2]...
2019-01-18 11:05:20
178
原创 使用angular-cli搭建angular开发环境
angular项目环境配置：步骤 1. 配置开发环境（node环境必须） 请先在终端/控制台窗口中运行命令 node -v 和 npm -v; 如果出现版本号则ok,并且确保验证一下版本号： node 8.x 和 npm 5.x 以上的版本。 更老的版本可能会出现错误，更新的版本则没问题。 如果没有出现版本号，则到node.js官网上自动下载，node环境是集成了npm环境，npm是node...
2018-11-07 18:10:11
802
原创 vue-router 配置路由
router:路由其实就是指根据不同URL跳转到对应的页面。Vue-router通过管理URL，实现URL和组件的对应，以及通过URL进行组件之间的切换。如何使用？1.安装cnpm install vue-router2.配置路由（1）在src目录新建一个router文件夹，并新建一个index.js文件（2）编辑index.js文件import Vue from 'vue...
2018-09-18 19:07:03
314
原创 vue-router传参
vue-router传参两种方式：params和queryparams、query是什么？ params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。方法1： query 方式传参和接收参数 ...
2018-09-10 10:47:31
260
原创 Vuex如何使用
1：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,简单说Vuex可以帮助我们管理一些共享状态。2：为什么？（1）多个组件依赖同一个状态。（2）不同组件需要操作同一个状态因此，把组件的共享状态抽取出来，任何组件都能获取状态或者触发行为3：Vuex 应用的核心是 store（仓库），包含着应用中大部分的状态 (state)。Vue...
2018-09-07 10:53:05
227
原创 修改mint-ui默认样式
Mint UI 是基于 Vue.js 的移动端组件库，有时候我们需要修改它的默认样式，方法如下：1. 安装sass的依赖包(前提：已安装node环境)由于sass-loader依赖于node-sass，所以先安装node-sass: cnpm install --save-dev node-sass 安装sass-loader: cnpm install -...
2018-09-06 10:06:58
4145
原创 Webpack与Gulp、Grunt区别
前言Webpack与Gulp、Grunt没有什么可比性，它可以看作模块打包机，通过分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场...
2018-08-30 20:39:52
6856
原创 let 和 const 以及var 区别
ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。ES6中增加了块级作用域的概念，let 命令1. let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。{ let a =10; var b= 8;}console.log(a);//ReferenceError: a is not de...
2018-08-23 19:40:16
6462
原创 qrcode.js 生成二维码
什么是qrcode.js?qrcode.js是一个用于生成二维码的js库，主要是通过DOM元素，再通过H5中的canvas绘制而成，它不依赖任何库。下载地址：http://code.ciaoca.com/javascript/qrcode/^-^先看实例^-^<!DOCTYPE html><html lang="en"><head>...
2018-07-25 15:16:55
5097
原创 gulp安装以及live-server使用
Gulp 是一个自动化工具 - 通常称构建工具Gulp插件大全：http://www.cnblogs.com/-ding/p/5972162.html 附件含有gulpfile.jslive-server 可以帮助我们前端人员搭建临时的http服务器。它不需要安装任何插件，使用起来比较便捷。它可以自动打开项目；修改本地文件后，浏览器能够立即同步，自动加载，自动刷新。安装流程：注...
2018-07-23 11:22:51
2849
转载 gulp怎么用?
本文转自：https://blog.youkuaiyun.com/xllily_11/article/details/51393569gulp常用地址：gulp官方网址：http://gulpjs.comgulp插件地址：http://gulpjs.com/pluginsgulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/A...
2018-07-20 17:32:37
885
原创 为什么使用gulp？
关于JavaScript和CSS更改后需要手动清除缓存的问题 我们做网站开发的时候，避免不了Javascript和CSS文件， JavaScript和CSS属于静态文件，如果项目地址不变，浏览器会缓存这些文件，那就意味着当我们修改JS或者CSS文件的时候，发现需要清除一下缓存（ctrl+shift+delete），才能看到真实的效果。关于JavaScript和CSS多个文件执...
2018-07-20 16:33:02
3551
原创 git相关
Git是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。版本控制系统： 简单说就是能够记录每个文件的改动，并且能够合并多个文件。集中式 VS 分布式 集中式版本控制系统（svn ， cvs）：版本库是集中放在中央服务器的，工作的时候需要先从中央服务器取得最新的版本，然后在开始工作，完了再推送给服务器。最大缺点是需要联网。 分布式版本控制...
2018-06-25 18:19:06
155
原创 Git安装说明
一．安装GIT步骤：1.双击2.点击Next，进入第三步3.默认勾选4.默认勾选 5.默认勾选 6.完成 二．生成key1.设置Git的user name和email：$ git config --global user.name "zhouyuxiang"$ git config --global user.email "zhouyuxiang@niwodai.com"2.查看是否已经有了ssh...
2018-06-21 20:33:47
398
原创 http 和 websocket
前端时间在做项目的时候遇到这样的一个场景：网页中有一个数据表格，这个数据表格数据表格的内容是从后台读取出来的，但是这些内容会随着时间的变化而变化，有点类似于股票行情。当时我的做法是用setInterval('toPage(1)',1000)来定时执行函数,toPage()方法是通过ajax请求访问服务器，并在成功后拿到后台返回的数据然后去更新页面。但是这种定时的方法有很多不足：（1）频繁的网络请求...
2018-04-24 16:28:06
401
原创 hash和hashchange事件
window.location.href和window.locaiton.hash（1）window.location.href 得到的是完整的URL 比如：window.location.href = ' www.baidu.com'（2）window.location.hash 得到的是锚链接 比如：window.location.hash= ' #all'（3...
2018-04-17 17:31:02
6406
原创 如何用vue创建项目？
如果你要使用vue-cli,你需要按如下步骤去操作：（1）：第一步： 安装：安装前，你一定要注意，需要安装3个环境： Node.js（版本必须>=6.x,最好是8.x）; npm环境（版本必须>=3）；如果你安装了node6.0,那么它的npm版本就是3.0；如果node版本是8.0,那么npm的版本就是5.0；（node环境集成了np...
2018-03-23 18:31:12
2476
原创 CSS实现表格表头（thead）固定，内容（tbody）滚动
前言 最近在写一个项目，然后要实现表头固定，tbody内容滚动的效果，该项目中没有使用任何插件，并且表格列数蛮多的，刚开始实现起来遇到各种问题，感觉蛮复杂的，后来找到了一种利用transform的方法实现，效果还不错，请看代码~~~~~~————代码————<!DOCTYPE html><html><head> <meta charset="...
2018-03-20 10:50:10
27539
15
原创 input:-webkit-autofill
chrome表单input获取焦点时，input会有一个记录之前填写过的文本的下拉列表式的东东，当你选择其中一个时，input文本框的背景会变成黄色的（如下图），这是由于chrome会默认给input加上input:-webkit-autofill私有属性，然后对其赋予以下样式：input:-webkit-autofill, textarea:-webkit-autofill, s
2017-09-14 15:48:15
11567
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人