- 博客(42)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Angular中的操作dom的类
对于目前的三大框架而言，都是不建议直接对dom进行操作的，但是实际业务有时候难免需要，因为需要操作dom的时候并不多，所以东西容易忘，还是记录一下为好，在angular中官方提供了操作dom的类，这一点是很不错的，当然也可以自己用原生的方法去操作，但是官网中明确是不建议这么操作的，那么可以理解为官方的类为我们处理了一些直接操作dom带来的可能性能方面上的问题吧主要的一步是在构造器里注入ElementRef和Renderer2这个两个类，在指令中或者管道中，注入ElementRef拿到就是指令或者管道的宿
2021-11-12 17:57:15
1282
原创 前端向后端进发之----Springboot JPA增删改查
写在前面如题，这里只是个人的学习理解过程，不是专业的后端，一些概念知识难免说的不对，请自行斟酌。写完这篇争取在写一遍mybatis (。＿ 。） ✎＿。这里不截图相关的代码了，不太好弄，只是介绍一些要用到的概念，要结合demo来看，是前后分离的，前端用vue，demo地址点这里，demo里有些是使用原生sql，主要是为了学习，其实springboot jpa都能实现，另外jpa还是有很多东西要学的，这里都只是入门而已。在了解了jpa的概念之后，突然觉得一个好的框架真的能省下来不少麻烦事，这也是一个框架
2021-07-24 17:21:35
718
1
原创 @angular/cdk中overlay的使用
cdk是angular官方维护的一个开发工具包，其实官网写的很明白了，只是overlay这块只有一个用指令写的demo，其他的一些用法只能看个人的理解能力去发挥他的强大功能了。了解cdk还是因为在使用ngzorro中发现这个浮层做的也太牛了，兴趣驱动下去了解才发现的。其实一般情况下用了ngzorro，基本不用考虑去封装什么通用组件了，ngzorro基本都涵盖了，但是要想提高还是需要了解的，比如当你维护公司的组件库的时候。当初就是因为没了解cdk才写了那么多冤枉代码，浮层指令，拖拽功能，如今看到官方其实都有
2021-07-14 21:49:21
1951
原创 前端向后端进发之----Springboot初识
扯点别的相对来说从前端向后端学习的难度大于后端向前端学习的难度，毕竟后端多少会知道基本的前端知识，不然只写个接口返回个数据而不知道最后数据的最终呈现，对于一个程序员来说似乎不是一个完整的工作，而对于前端人员来说，没有数据我可以自己造假数据嘛，实在不行我node搭一个嘛。由于造假数据很快就能满足前端的学习过程，所以导致前端人员对后端知识的掌握相对是匮乏的，其实对于已经工作的前端人员来说，学习后端最难的不是java知识本身，而是环境以及每项技术的前置知识，毕竟基础的结构型语句大家都有，方法很多也是相通的，语
2021-05-22 17:08:44
2898
5
原创 react学习笔记
未完善环境要求1. npm install -g create-react-app2. create-react-app my-app3. npm install --save react-router// 安装的时候最好使用yarn，使用npm安装不上路由，有node版本警告yarn intall// 注意不是react-router，这个很少用// yarn add react-routeryarn add react-router-dom文件结构public静态资源文件夹ma
2021-05-10 21:56:18
175
原创 Echarts显示行政区域图并上色
Echarts要显示行政区域图有几种方式，这里使用type: 'map'的方式，前提是有geojson数据，这个数据的获取可以从阿里云获取，高德提供的数据http://datav.aliyun.com/tools/atlas/选好要展示的行政区域后下载到本地，然后按照官网的demo写就好了，官网默认的方式是根据数值行政区域的颜色自动渐变变化，但有时我们需要对每个行政区域分别显示区域，那么就得依赖dataRange属性了，如下 async initChart1() { const dom =
2021-05-08 15:53:35
1457
3
原创 java连接数据库JDBC
兜兜转转最后还是得学java，当初就是因为eclipse太丑而拒绝入行java，最后还是迫于现实重新拿起java，感觉亏啊，学完java就是一个搞过.net，摸过java，撸过ng，用过vue，学过uni-app的人了，后面再学个react，感觉完美了，O(∩_∩)O哈哈~。一个简单的JDBC连接public static void main(String[] args) { Connection con = null; Statement stmt = null; Resu
2020-12-15 22:07:44
69
原创 vue2.x选择js和ts新建项目的一些区别
使用vue-cli生成项目的时候可以选择使用默认的js方式，也可以选择使用ts的方式，ts的方式中又有使用class-style方式和非class-style的方式，这三种的区别基本只在script部分的不同。在选择ts方式生成项目的时候回再寻问是否使用class-style的方式，见下图js方式生成的项目<script>export default { name: "HelloWorld", props: { msg: String }};</scrip
2020-12-05 16:00:41
2850
原创 angular使用openlayers6以及加载百度地图
angular中使用openlayers本来是没什么难度的，但是如果要加载百度地图还是有些问题的，在openlayers3中坐标是从原点右上递增，而openlayers6中是右下递增，这就导致使用百度地图作为底图时出现图层错乱的问题，同时还有偏移问题，相关的问题和解答网上的资料真的少，对于不是gis专业出身的人来说真的能搞死人，此外还有openlayers那文档，不是英文的原因，是真的难以看懂。首先是安装，要注意的还是版本问题，openlayers6和之前版本的安装命令不一样。两种不同的安装命令意味着有
2020-09-30 22:57:39
1186
1
原创 Angular添加webpack
添加webpack不同分两种情况，分别是高于ng8和低于ng8低于ng8：npm i -D @angular-builders/custom-webpack@版本号npm i -D @angular-builders/dev-server@版本号build节点的builder改为@angular-builders/custom-webpack:browserbuild节点的opti...
2020-06-20 15:03:56
1214
原创 Angular取消生成测试文件
在写demo的时候想让项目文件看的简洁一点，想取消生成测试文件，在angular.json中的schematics节点进行如下配置 "schematics": { "@schematics/angular:component": { "styleext": "scss", "spec": false }, "@schematics/angular:class": { "spec": false
2020-06-20 14:53:02
1054
原创 使用gulp打包压缩scss
先全局安装gulpnpm i gulp -g然后在项目中在安装一次gulpnpm i gulp -D在项目的根目录下新建gulpfile.js文件，内容为：// 先npm安装这四个包const gulp = require("gulp");const sass = require("gulp-sass");const minifyCss = require("gulp-clea...
2020-03-30 17:44:22
1460
原创 git的一些常用命令
先建仓库git add .git commit 注释git remote add origin 仓库地址git push -u origin master输入账户名密码
2020-03-21 23:16:35
83
原创 编写Angular第三方包发布npm
创建好项目之后执行命令// --prefix: 是选择器的前缀，例如ng默认的app前缀，可以不要ng g library zh-rate --prefix zh执行以上命令之后自动生成文件夹：projects，文件夹下有一些配好的文件此时进入到projects文件夹下的lib目录中找到你的组件进行编写，和编写正常的ng代码一样，要注意的是，如果报了一些指令没法用的问题，比如ngSty...
2020-03-21 23:06:57
419
原创 降低scss样式的权重
scss的嵌套写法是方便了许多，但是带来的问题是权重的增加，如果你想通过DOM修改某个样式将会发现，要修改的样式总是被原有的覆盖，不用想，肯定是权重值不够，但是又不想用!important，那么解决的方式就是使用scss的@at-root指令，这个指令可以然你的样式在文档的根层级上输出而不是嵌套在符选择器下，这样一来通过其他方式修改样式就不用担心原来的样式权重值太高而不起作用了。编译结果这...
2020-03-03 15:59:03
943
原创 初学vue知识点总结
<script>import RenameComponent1 from "../RenameComponent1.vue";import RenameComponent2 from "../RenameComponent2.vue";export default { data() { // data 是往自己组件内部，挂载一些私有数据 return { ...
2020-02-22 13:26:22
125
原创 Angular中使用ECharts
angular中使用echarts的教程很多，但很多都是结合ngx-echarts，但个人在学习一个新的东西的时候不喜欢在此基础有加一个东西，所以这里不使用ngx-echarts1：下载安装echartsnpm install echarts --save2：下载安装echarts的ts支持，因为echarts是js写的，而angular是ts，安装这个是为了API提示npm ins...
2020-01-19 10:24:12
3275
原创 js对象数组分组
按照某个字段进行分组let groupData = [ {name: "张三",project: "语文",score: "90"}, {name: "张三",project: "数学",score: "88"}, {name: "张三",project: "英语",score: "86"}, {name: "张三",project: "物理",score:...
2020-01-13 17:20:16
2576
原创 SVG不能铺满的问题
最近在进行界面绘制的时候，美工提供过来的图是svg格式，一开始觉得这样也好，但是在用的时候就发现了问题，设置了容器样式的宽高都是100%，容器高度也是能撑开的，但是svg图片不能进行宽高的拉伸将容器铺满，查了一下才知道svg中需要这个属性preserveAspectRatio="none meet"同时也要注意的是svg的width和height也得是100%。见下图：...
2020-01-13 17:07:47
4795
3
原创 谷歌浏览器滚动条样式设置
有时候美工设计了好看的界面的，但是界面大小出现变化时出现的滚动条样式与界面格格不入，显得很不搭调，所以有必要设置滚动条样式，只有谷歌，其他浏览器的还没试::-webkit-scrollbar { width: 8px; height: 8px;}::-webkit-scrollbar-thumb { background-color: rgb(59, 182, 22...
2020-01-13 16:57:39
1266
原创 js深拷贝
深拷贝我在开发的时候经常会遇到与实现，但是原来是不知道叫做深拷贝，知道看见一些推文的时候才醒悟过来。深拷贝其实就是为了解决引用类型数据的复制问题，引用类型的数据如果你用“=”号进行复制的时候，只是复制了地址，这是浅拷贝，当源数据与复制数据之中不管是谁修改一些值的时候，另一个的值也会跟着变，这就不好了。对于深拷贝与浅拷贝的形象理解就是：浅拷贝：张三换了一个名叫做李四，两个名字其实都是一个人，张...
2019-10-26 22:46:02
76
原创 Rxjs理解
说到RxJs就先说说历史，Rx是Reactive Extension的简称，它是一套实现响应式编程的一套工具，或者说API，关于Rx的概念：> Rx的概念最初由微软公司实现并开源，也就是```Rx.NET```，因为Rx带来的编程⽅式⼤⼤改进了异步编程模型，在.NET之后，==众多开发者在其他平台和语⾔上也实现了Rx的类库==。可见，Rx其实是⼀个⼤家族，在这个⼤家族中，还有⽤Java实现的```RxJava```，⽤C++实现的```RxCpp```，⽤Ruby实现的```Rx.rb```，...
2019-08-12 16:41:11
565
原创 Angular通过FileReader读取文件上传
首先这里说一下这个方式只适合小文件的上传，并且存在弊端，对于大文件参考我的另一篇博客ng2-file-upload+node.js+express实现文件上传并保存本地首先前台就是通过file类型的input选择文件<input type="file" (change)="selectFile($event)" id="inputBox">然后进行文件读取并上传 /** ...
2019-08-09 10:48:28
2284
原创 Angular动态表单使用
使用动态表单目的就是不用去手动编写太多的HTML代码，设置好之后就由数据的多少以及类型来动态生成表单，提高效率。在Angular的官网中介绍动态表单时，夹杂了一些业务方面的东西，增加了不熟悉的人学习的难度，这里直接就是为了演示怎么产生和使用动态表单。使用动态表单时，有可能需要input类型、textarea类型或者其他表单类型等，在拿到数据构建相关控件时，需要制定一些基本的东西，比如控件类型、值...
2019-08-08 17:01:12
3312
原创 Angular添加自定义属性并绑定一个变量
Angular中如果使用自定义属性时使用的是H5添加的方式，那么有一个问题是，自定义属性的值是固定不变的，也就是不能绑定变量，比如下面的方式<a href="javascript:void(0)" *ngFor="let item of images, let i=index" (click)="locationImage(i)" data-index="i" #dots&...
2019-08-07 10:49:13
7420
原创 Angular获取当前激活路由与监听路由
Angualr获取当前激活路由可以通过PlatformLocation和Router获取，还有一说Location也可以，看名字估计是没问题的。这里就写前面两个，PlatformLocation这个包来自@angular/common，Router来自@angular/routerconstructor( private route:Router, private planfor...
2019-08-02 17:01:45
6200
1
原创 canvas入门&绘制动态饼图
canvas是什么就不介绍了，我是怎么了解到canvas的我自己都不记得了，我只知道开始学习了解之后感觉就是欲罢不能啊，这东西很酷也很强大，而我喜欢的原因就是它能够进行画画！当然它主要的用途是进行数据可视化，echarts就是canvas写的。不多说了，这里分两部分，第一部分是简单的入门，第二部分是绘制一个动态饼图。
2019-07-18 15:47:51
1527
原创 vue组件间通讯
父子组件间通讯父组件向子组件传递数据步骤1：在data中定义要传递的值data() { return { msgData: { name: "张三", age: 18 } };},步骤2：在模板中的子组件的标签上进行属性绑定，将要传递的值进行绑定<!--父组件模板--><template> <div class="hom...
2019-07-10 17:17:35
137
原创 图解JS中的原型链
关于原型和原型链在学习JS中是避不开的一个知识点，这方面的知识有很多资料，这里就不做什么解释了，关于原型，我们应该要得知道有：1. 构造函数中的```prototype```里面的属性和方法可以直接通过实例对象调用2. 在构造函数中定义的属性和方法，当实例化对象的时候，实例对象中的属性和方法都是在自己的空间中存在的，如果是多个对象，这些属性和方法都会在单独的空间存在，浪费内存空间，所以，为了数据共享，应该把可以共享的属性或者方法写在原型对象中，以达到数据共享，实现节省内存的目的。
2019-07-07 16:21:19
102
原创 初级JS杂记
从大的来说JavaScript可以分成三个部分:ECMAScript标准。这里就主要是JS的基本的语法DOM。Document Object Model，就是文档对象模型，用于操作页面的元素部分BOM。Browser Object Model，指的是浏览器对象模型，用于操作浏览器部分自定义属性设置自定义属性：setAttribute("属性的名字","属性的值")获取自定义属性的值...
2019-07-06 11:10:48
85
原创 求对象数组的差集
求对象数组的差集是我在开发中遇到的一个需求，场景是这样：用户第一次选择了1、2、3对象，并确定保存进了数据库，用户第二次进入的时候觉得不对，选择了3、4、5对象，然后保存进数据库。这么一个需求的分析有：用户第二次选择的时候，3是不用做处理的，4、5是要新插入数据库的，而1、2是要在数据库中删除的，得给标识让数据库脚本识别并进行删除，不然就是垃圾数据对于求对象数组的差集，我是想不到有什么其他高效...
2019-07-05 22:21:41
964
原创 reduce方法高效实现对象数组去重
查阅资料我们可以知道reduce方法的定义> reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值从定义中看到这方法似乎是进行计算的，但其实除此之外，作为一个高级方法，它有很多骚操作关于```reduce```的一些常规使用方法[参考这里](https://blog.csdn.net/hope93/article/details/86528183)reduce语法
2019-07-05 21:44:44
5039
1
原创 jquery使用ajax
$.ajax({ url: '', //注意要加http:// type: 'GET', // jsonp模式只有GET 是合法的 data: { 'name': '张三' }, dataType: 'jsonp', // 数据类型 jsonp: 'backfu...
2019-07-05 16:38:24
84
原创 ajax请求过程
(1)创建ajax对象var xhr = new XMLHttpRequest();(2)打开请求xhr.open('GET', url, true);(3)发送请求xhr.send(); 发送请求到服务器(4)接收响应xhr.onreadystatechange =function(){}(4.1)当readystate值从一个值变为另一个值时，都会触发rea...
2019-07-05 15:32:48
3464
1
原创 Angular响应式表单动态生成表单控件
开发中可能会遇到这种需要：根据后台传过来的数据填入表单中，供用户查看与编辑，如果传过来的数据长度、格式固定，那么很好做，但如果传过来的数据长度是变化的，那么使用普通方式进行创建控件就显得行不通了。要想实现这种需求，只能借助FormArray，根据数据量进行动态创建了。假如后台传过来的数据为： arrData=[ {name:"张三",sex:"男"}, {name:"李四",...
2019-07-05 12:15:57
2082
原创 angular阻止事件冒泡并自定义指令
angualr阻止事件冒泡可以通过显示阻止和自定义指令阻止，但其实本质上都是一致的，都是通过调用stopPropagation实现。显示阻止就是每次都手动调用stopPropagation，Angular事件绑定会通过名叫 $event的事件对象传递关于此事件的信息，如果没有引用其他的东西，一般情况下$event就是DOM事件对象，<div class="one" (click)="on...
2019-07-02 09:35:38
2283
原创 配置npm转到淘宝镜像
国内使用npm如果不翻墙基本上是没法正常使用的，如果没法翻墙又要用，解决办法只有使用淘宝镜像了配置是：npm config set registry https://registry.npm.taobao.org/切换回来是：npm config set registry https://registry.npmjs.org/如果不想直接配置npm，也可以在命令行中配置，在命令的后面...
2019-07-01 15:31:36
3917
1
原创 解决input自动填充的问题
这个问题在谷歌浏览器中出现，最终解决。这个问题查了一些资料说是谷歌浏览器的一个bug，并且一直不解决，不知道其他浏览器有没有，没做测试。出现自动填充大多是因为记住密码的问题而导致，网上的一些方法说这样设置就没没问题了。用户名：<input type='text' autocomplete='off'> 密码：<input type='password' autocomple...
2019-07-01 15:19:41
5188
3
原创 ng2-file-upload+node.js+express实现文件上传并保存本地
ng2-file-upload这个包挺好用的，但是好像没有人维护了，GitHub上的最新记录已经是两年之前了。常规操作：1、装包：npm i ng2-file-upload --save2、注册相应的模块：在angular的根组件中注册CommonModule和FileUploadModule，FileUploadModule这个模块没有智能提示就手动输入import { FileUploa...
2019-06-30 15:17:12
722
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人