前端问题
wu_223
哈喽,大家好,我是一名web前端开发工程师,主用框架angular2以上,涉及的技术以地图leaflet方面居多,写的博客是在开发中遇到的问题,欢迎大家随时找我讨论
展开
-
js 特殊字符转义 ,escape ,encodeURI ,encodeURIComponent
1.前端传递参数如果有特殊字符,可以使用以下三个进行转义 escape, encodeURI, encodeURIComponent2. 不编码集合,看需求进行选择 escape不编码字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-ZencodeURI不编码字符有82个:!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a- z,A-Z encodeUR...原创 2021-04-16 14:28:10 · 1190 阅读 · 0 评论 -
js 获取某日期的前n天或者后n天的日期
1. 方法 getDate(someDate, n) {//字符串格式,时分秒没有:'2019-01-01' n是数量,几天 var datt = someDate.split('-');//这边给定一个特定时间 var newDate = new Date(datt[0], datt[1] - 1, datt[2]); var befminuts = newDate.getTime() - 1000 * 60 * 60 * 24 * parseInt(n);//前几天用减,原创 2021-04-16 14:14:22 · 713 阅读 · 0 评论 -
angular9发布流程
1. npm run build"build": "ng build --prod --base-href /lr/",2. index.html<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>Lr</title> <base href=""> <meta name="viewport" cont原创 2021-03-22 13:59:22 · 291 阅读 · 0 评论 -
js删除数组的后三位,获取数组的后三位
1. 获取数组的后三位var data=["a1","a2","a3","a4","a5","a6"]//得出的结果就是["a4","a5","a6"]var arr=data.splice(-3)2. 删除数组的后三位var data=["a1","a2","a3","a4","a5","a6"]//得出的结果就是["a1","a2","a3"]var arr=data.splice(0, data.length - 3)...原创 2021-03-11 16:56:27 · 7107 阅读 · 0 评论 -
angular9 对接接口的方式,form、params
1. form表单提交 const form = new FormData(); form.append("uEmail", user.email); form.append("uRemark", user.uRemark); //headers包含传递的token值 this.http.post("http://地址", form, { headers: headers })2. params方式提交import {HttpParams } from '原创 2021-01-08 16:06:50 · 431 阅读 · 0 评论 -
angular9 sessionStorage存值跟取值(对象)
1. 存一个字符串sessionStorage.setItem("name","小武") //存值sessionStorage.getItem("name"); //取值2. 存对象 1》存值 sessionStorage.setItem( "currentUser", JSON.stringify({ userName: res["data"]["username"],...原创 2021-01-08 15:58:42 · 1124 阅读 · 0 评论 -
vue知识点-store,refs
1. store状态管理 Vuex.Store状态管理,可以供单例模式下,统一调用,更新const state = { islogin: false, this.$store.state.isLogin}const getters = { // 实时监听state值的变化(最新状态) islogin(state) { return state.islogin } }const mutations = { setLogin(state, islogin)...原创 2020-12-01 17:00:39 · 484 阅读 · 0 评论 -
vue 改变iview UI的原样式
/deep/ 加上原样式的css即可,比如input输入框 /deep/ .ivu-input { border-radius: 20px; }原创 2020-11-26 17:25:49 · 720 阅读 · 0 评论 -
vue 父子组件传值,子组件改变子组件的值(通过传回父组件,再从父组件传值给子组件)
1. 父组件调用代码: 其中menuData是传递给子组件的值 ,name对应的方法是子组件传过来的<Left :mData="menuData" @name="nameChange($event)" /> js中 data() { return { leftFlag: false, menuData: [{ title:'修改前' },{ title:'修改前1' }],...原创 2020-11-26 17:16:01 · 1969 阅读 · 1 评论 -
vue 内部点击事件禁止外部点击事件执行 @click.stop
html代码 (内部方法点击加一个.stop即可):div@click="clickWai()">我是小武,外部<div@click.stop="clickNei()">我是内部点击事件</div></div>js代码:methods: { clickWai(){ console.log("外边事件点击"); }, clickNei(){ cons...原创 2020-11-17 11:39:00 · 2263 阅读 · 0 评论 -
vue 中mounted 方法和created的区别
1.created方法是在初始化页面之前对dom的操作。2. mounted方法是在初始化页面之后对dom的操作。3. 那么为什么要有这个区分哪?: 有些需求就是要在页面加载之后才能请求到的,比如id,js中用document.getElementById("")...原创 2020-10-29 15:47:27 · 1791 阅读 · 0 评论 -
angular6 路由复用,路由缓存(RouteReuseStrategy)
实现功能:首页有表单查询,以及查询结果,如果点进去详情,再返回首页的时候,表单查询跟结果的状态要保持原状 注:首次登陆的情况下以及单击其余页面的时候,需要清空1. 首先建一个路由缓存文件AppRoutingCacheimport { RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteS...原创 2020-04-14 15:28:15 · 1629 阅读 · 0 评论 -
angular6 input回车事件-(keydown)
1. html中如下所示:<input style="margin-bottom:5px;" nz-input placeholder="输入关键字" [(ngModel)]="taskName" (keydown)="calAge($event)">2. ts中代码如下所示: calAge(e){ var evt = window.event || e;...原创 2020-03-25 16:05:08 · 3465 阅读 · 0 评论 -
angular2 中引入 angular-in-memory-web-api 以及出现的问题
1. 安装angular-in-memory-web-apinpm install --save angular-in-memory-web-api@0.5.4 注意:此项操作必须安装0.6.0以下,超过此版本会出现数据无法读取等问题(404等路由问题)2. 新建一个文件夹目录如下:src\app\todo\todo-data.tsimport {InMemoryDb...原创 2020-03-05 14:15:58 · 1197 阅读 · 0 评论 -
angular6 xml文件解析成json数据,json数据生成xml
1. 从后台读取xml数据,读取结果,话不多说,直接上代码 var kk = "<root><satellite>GF3</satellite><sensor>SAR</sensor><level>LEVEL1A</level><startTime>2017-01-20 11:02:34....原创 2020-01-08 11:16:28 · 1342 阅读 · 0 评论 -
js input文件上传名字清空
<input type="file" id="fileupload" name="file" />解决方法:var obj=document.getElementById("fileupload")obj.outerHTML=obj.outerHTML;原创 2019-10-24 10:46:56 · 794 阅读 · 0 评论 -
前端页面所需要的css样式-导航条
1. 导航条左边文字和图片布局 display:inline-block跟float的效果一样,不独占一行的块状元素, float:left center right 是不独占一行,在一行中的左 中 右,但是不是块状元素 vertical-align:center是垂直居中, text-align:center是水平居中,<a class="na...原创 2018-08-01 16:03:25 · 1017 阅读 · 0 评论 -
js mouseenter,mouseleave等鼠标怎么能触发两个方法呢?
用分号隔开就好mouseenter="show();hide()"原创 2019-05-22 12:00:09 · 1391 阅读 · 0 评论 -
echarts 数值过大,有些数据会显示不全,log
1. 效果图如下所示:改之前: 改之后: 2. 代码如下:只需要把需要的x轴或者y轴:type:"log",就行 var option = { tooltip: { trigger: 'axis', axisPointer: { type: 's...原创 2019-05-27 12:10:16 · 10877 阅读 · 13 评论 -
leaflet 加载arcgis图层(esri-leaflet.js中的identify方法),点击事件,获取保护区,面积
1.需要用到esri-leaflet.js,然后放到项目中 npm install esri-leaflet --save2. 先保护区放到地图上var envLayer = L.esri.dynamicMapLayer({url:"mapserver的url",opacity: 0.8,transparent: true});map.addLay...原创 2019-05-30 14:51:44 · 3248 阅读 · 4 评论 -
js获取url传递过来的参数
//地址:http://www?username=小武,控制台打印 小武console.log(getParams("username")); function getParams(name) { var pos, str, para, parastr; var array = [] str = window.location.href; if ...原创 2019-06-13 15:17:05 · 1628 阅读 · 0 评论 -
angular6打包出现错误-JavaScript heap out of memory
1. 错误如下所示: 2.解决方法: 在node_modules包中的.bin文件下的ng.cmd、ngc.cmd加入--max-old-space-size=8192 3.这样再重新打包就不会报错了: npm run build...原创 2019-06-13 17:55:50 · 626 阅读 · 0 评论 -
vue 打包发布
1. 打包之前需要先修改config下的index.js文件中build,assetsPublicPath:'./' build: { //index.html路径 index: path.resolve(__dirname, '../dist/project/index.html'), //静态文件的路径 assetsRoot: pat...原创 2019-06-14 12:02:53 · 12708 阅读 · 0 评论 -
1. vue引用cesium步骤详解
页面效果如图:1. 安装npm install cesium --save2.webpack 配置 1> build/webpack.base.conf.js 文件中添加 Cesium 的名称 resolve: { alias: { // 名称 cesium: path.resolve(__dirname, '../...原创 2019-06-14 15:14:04 · 11540 阅读 · 5 评论 -
vue项目用到的资源, ui框架(Element、iView),http的get和post请求(axios),懒加载:(vue-lazyload),轮播图(swiper)
1. UI框架: Element官网:https://element.eleme.cn/#/zh-CN/component/installation iView官网:https://www.iviewui.com/components/tabs2. http请求(get,post) 官网:https://www.npmjs.com/package/axios...原创 2019-06-10 16:35:34 · 1044 阅读 · 0 评论 -
cesium自定义的气泡弹窗(可随球放大缩小,移动)
效果图如下:1. 从后台获取遍历的数据,先遍历循环加上点位 setTimeout(() => { this.UAVpoint.forEach(result => { var pinBuilder = new Cesium.PinBuilder(); var bluePin = this.viewer.en...原创 2019-06-28 10:36:21 · 10128 阅读 · 3 评论 -
angular6中引入cesium
引入结果:1. 下载cesium和cesium-typings包 npm install cesium --savenpm install --save e-ngx-cesium@latest2. 在main.ts中放入 window['CESIUM_BASE_URL'] = 'src/assets/cesium';具体位置要注意i...原创 2019-06-28 11:02:39 · 1212 阅读 · 7 评论 -
js前端读取图片流
直接在src中写上就好:<img src="data:image/png;base64,图片流数据" alt="">原创 2019-07-10 17:06:23 · 15667 阅读 · 4 评论 -
angular6 Cannot read property 'split' of undefined
我遇到这个问题一般都是路由配置有误,我的导航是这样this.router.navigate(["home/ecoloMenu/ecologyEvaluation/ecologicalFactors/mountain/greenRate"]);到ecologyEvaluation这一层的时候,写错了配置const routes: Routes = [ { path:...原创 2019-09-29 10:25:12 · 801 阅读 · 0 评论 -
echart相关操作xAxis,yAxis,series,grid,(包括x轴样式,y轴样式,折现样式,网格样式,折现阴影,折线上方显示数据,x轴文字倾斜,图例,标题, tooltip文字自定义)
样式截图大概如下:1. x,y轴相关操作:xAxis,yAxis (1) x,y轴的颜色: axisLine: { lineStyle: { color: '#2898e5', }, }, (2...原创 2019-05-16 15:49:52 · 22661 阅读 · 8 评论 -
关于做angular引入echarts图表、时间轴
1. echarts图: 1> 首先在项目中需要安装一下npm install echarts --save 2> 然后再引入到项目angular.json的scripts中 "scripts": [ "node_modules/echarts/dist/echarts.min.js", ...原创 2018-03-27 12:11:18 · 2370 阅读 · 0 评论 -
1.angular html+css+js导航条点击样式修改,加跳转页面
1.html页面代码如下: <div class="main-menu" id="L1" (click)="Tab(1)" style="color:#3bb9e2;"> 主页 </div> <div class="main-menu" id="L2" (click)="Tab(2)&q原创 2018-10-10 16:43:13 · 1169 阅读 · 0 评论 -
把阿拉伯数字1,2,3...转化成一,二,三
在angular的onInit中调用onInit(){ this.upper(2)}/** * * @param n 数字转变 */ upper(n) { if (!/(^[1-9]\d*$)/) { return '非法数字'; } var uppercase = '千百亿千百十万千百十个'; var ...转载 2018-10-09 18:07:48 · 7827 阅读 · 0 评论 -
div+css+js滚动显示信息,marquee不留白滚动
1. 横向滚动(往左进行滚动显示): 效果图: html中内容如下<table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td id="header_demo1" nowrap="&qu原创 2018-09-19 18:15:08 · 3375 阅读 · 0 评论 -
git命令总结-提交push,分支合并pull,切换版本checkout
1. git提交命pushgit config --global user.name "git用户名" git config --global user.email "git密码"git add .git commit -m "提交内容介绍"git remote add origin 远程名称(http://.../project.git)git push -u origin m...原创 2018-09-14 16:32:12 · 352 阅读 · 0 评论 -
leaflet聚合(MarkerCluster)-标记过多,缩小后显示数量
1. 参考官方文档:https://github.com/Leaflet/Leaflet.markercluster2. 效果图如图所示: 3.npm install leaflet.markercluster 运行此命令下载leaflet的markercluster插件4. angular4中放入到angular.json中(css样式和js文件)"node_mo...原创 2018-09-14 14:18:27 · 16367 阅读 · 3 评论 -
在首页中,点击一项,如何实现,菜单项的只显示对应的一部分
比如:首页点击首页的大气监测网一项,(angular5+ng-zorro) 怎样跳转到里边菜单项的单独大气监测那一项,其余项给隐藏解决方法:最简单的方法就是多建几个目录组件,每个目录组建中只包括当前要出现的一项 比如:大气检测组件中的菜单就只显示大气监测的那一项...原创 2018-09-10 12:15:51 · 722 阅读 · 0 评论 -
leaflet应用wms加载geoserver地图切片,
1. wms加载geoserver地图切片setTimeout(() => {const bounderLayer =L.tileLayer.wms("url", { layers: layerName, format: "image/png", transparent: true });bounderLayer.addTo(ma...原创 2018-08-23 11:02:55 · 5094 阅读 · 2 评论 -
前端css样式-布局
1. 高度跟宽度设置为百分比,格式设为absolute2. 居中可用 text-align:center(字体居中),margin:0 auto(所写div居中)3. 位居底部可以设置,position:absolute,height:140px;width:100%;margin:0 auto,bottom:140px;距离底部140px,居中,高为140px4. 如果布局中怕最小化...原创 2018-08-23 10:53:37 · 366 阅读 · 0 评论 -
ps抠图过程-通道
1.打开要扣的图片 2. ctrl+J复制背景图片,把背景图保留好,在副本上进行操作 3. 选择图层1 ,然后打开通道,找红绿蓝背景颜色和要抠图颜色差别比较大的那一个,本例我们选择蓝, 4. 然后右击复制蓝副本,选中蓝副本,并且把预览也选中蓝副本,Ctrl+L打开色阶,图中红色框左边是把要扣的图深度变成黑色,比如头发,右边那个是把背景变成白色 ...原创 2018-07-19 16:44:09 · 712 阅读 · 0 评论