- 博客(35)
- 收藏
- 关注
RSS订阅
原创 移动开发-混合App介绍
3种开发类型的原理和对比什么是混合App（Hybrid App）Hybrid App是指介于web-app（网页APP，如京东web）、native-app（原生应用，如手机上面的APP应用）这两者之间的app,它虽然看上去是一个Native App，但只有一个WebView ( WebView,可以类比成iframe )，里面访问的是一个Web App，就是包了个客户端的壳，其...
2018-06-25 08:56:38
17364
3
原创 webpack打包
webpack是前端开发中比较常用的打包工具之一，另外还有gulp，grunt。之前没有涉及过打包这块，这里介绍一下使用webpack打包的流程。 Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），W
2018-02-07 14:05:44
1793
原创 前端Docker部署实战
前端Docker部署实战背景最近公司架构大佬，一直在培训K8s，跟组内成员大佬，唠嗑的时候顺便提到了Dokcer，回想到接触docker还是17年的时候研究了一番，当时做了许多笔记，到现在为止已经在我的笔记里吃灰了好久。最近自己再弄以前买的服务器就打算操作一番。前言1 安装docker环境准备 1. 需要会一点服务器基础知识。 2. Centos7. 3. 当前使用xshell操作环境查看# 系统内核[root@iZbp1a48kwmva61kyrz5caZ ~]# un
2021-03-23 22:28:07
898
原创 前端数据CryptoJS加密解密
背景 由于上周五开会领导提到对前端数据加密这一块要做处理，跟后台讨论了一下，决定采用CryptotoJS AES+BASE64算法加密。具体实现本方法是在基于vue项目。之前是在localstorage存了用户信息字段采用了AES、DES加密解密，所以对于对象加密也是同样的方法。加密得过程主要是跟后台同步数据，就是我前端加密的方法在后台它可以通过相对应的解密方法进行解密就是密钥要相同，这里主要就是：在这里主要做了一个demo话不多说上代码；<template> <
2020-08-10 10:25:51
2379
原创 css 父元素设置了min-height：100%, 子元素设置height:100%无效
今天遇到的这个问题 解决办法父元素设置display:flex;子元素设置height:auto或者不设置高度就行了
2020-07-27 13:51:53
2485
原创 Nginx从入门到熟悉
Nginx自我修炼1.背景2.Nginx介绍3.Nginx安装1.背景由于最近公司部署代码使用小型工控机，不再使用Tomcat部署而使用Nginx部署前端代码，想起自己在三年前学pyhton的时候使用Nginx，现在前端生态环境发展这么迅速，所以这段时间集中学习了一下 Nginx，同时做了一些笔记，希望也可以帮助到大家～2.Nginx介绍Nginx 是开源、高性能、高可靠的 Web 和反向代理服务器，而且支持热部署，几乎可以做到 7 * 24 小时不间断运行，即使运行几个月也不需要重新启动，还能
2020-07-05 22:31:15
336
2
原创 Vue-cli3+Typescript+Element搭建项目
由于vue3.0已经发布beta版本，vue3.0将会支持typescript,加上之前angular2.0已经支持typescript。纵观几个框架，TS已经是一个趋势。能够熟练掌握TS并可以应用到项目中去，就可以成为前端开发中的优势。因为vue2.0对TS不太友好，所以就一直搁置没有去重构。有个vue3.0本菜鸡在休息时间也准备重构一下自己得项目，在实践中不断摸坑。1.使用vue-cli快速搭建项目本人工作项目中使用得vue-cli3,所以打算用vue-cli3脚手架来搭建整个项目，与vue-cli
2020-05-19 11:34:35
3177
原创 Mongodb数据库基本操作API
修改器1.$set 设置某一个字段的值。db.collections.update({查找的数据},{$set:{要修改的数据}})例子：db.test.update({name:"zzz"},{$set:{sex:1,age:10}})2.$unset 删除字段。db.collections.update({查找的数据},{$unset:{要删除的数据}})例子：db.tes...
2020-02-05 11:15:33
357
原创 初识Cmder
1.为什么使用Cmder在做项目时，有些时候我想复制控制台上面的代码时，cmd有的时候复制粘贴很麻烦，Cmder则不会，并且Cmder可以分屏多开窗口，可以设置窗口颜色,字体大小，并且很多快捷键和谷歌浏览器操作类似,等等很多功能作者：500薪水程序员链接：https://www.jianshu.com/p/5b7c985240a7来源：简书著作权归作者所有。商业转载请联系作者获得授权，非...
2019-12-30 15:38:05
408
原创 nodejs连接mongodb数据
Node连接Mongodb数据库1.在自己的项目下安装相对应对的包 npm install mongodb --save-dev cnpm install mongodb --save-dev(淘宝镜像)2 连接数据库地址 const MongoClient = require('mongodb').MongoClient; //使用mongodb的MongoClien...
2019-02-28 10:07:06
1665
原创 webpack得介绍
Webpack的介绍Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 CMD 模块、ES6 模块、CSS、图片、 JSON、Coffeescri...
2018-12-22 16:18:26
176
原创 移动开发-触屏事件
#触屏事件1.事件类型touchstart: 手指触摸屏幕时触发touchmove: 手指在屏幕上移动时触发touchend: 手指离开屏幕时触发2.TouchEvent对象touches: 位于屏幕上的所有手指的列表targetTouches: 位于该元素上所有手指的列表changedTouches: touchstart时包含刚与触摸屏接触的触点，touchend时包含离...
2018-11-05 13:54:11
1387
1
原创 offset-边距
三大系列offset-位移scroll-卷页client-可视区js中有一套方便的获取元素尺寸的办法：offset系列offset常用属性（5个）###offsetWidth和offsetHeight————（检测盒子自身宽高+padding+border）###offsetLeft和offsetTop————（检测距离父盒子有定位的左/上面的距离）###offsetPar...
2018-11-05 13:50:13
184
原创 正则表达式
##小案例1：匹配电话号<body>请输入电话号：<input type="text"/><script> //需求：当input失去插入条光标，判断input中的内容是否符合固定电话的标准 // 直辖市： 010-12345678 (3位-8位) // 普通市： 0771-1234567 (4位-7位) document.ge...
2018-11-05 13:47:14
92
原创 cookie和session的区别
1、cookie和session的相关概念http会话机制请求响应无状态实际是需要有状态的cookie与session通过cookie可以向客户端存储数据多次设置cookie可以累加设置多个cookie键值对document.cookie = ‘username=lisi’document.cookie = ‘age=12’document.cookie //usernam...
2018-10-08 09:42:29
314
原创 angulr ui-router路由
angularJS里面的ngRoute并不能满足我们的开发需求因为angular的ng-view在写多个的情况下，不能控制内容的显示，渲染出来的内容都是一样的。所以用第三方插件ui-routerui-router由第三方编写的路由模块，相比之前的ngRoute更加灵活多变网址： http://angular-ui.github.io/可以在页面挖多个坑,填不同的内容ui-rotu...
2018-10-08 09:41:21
2001
原创 移动开发-两栏自适应
左边固定，右边自适应的3种总结:左边左浮动，右边加个overflow:hidden; #lt{ float: left;width:200px; background: #ff0;} #rt{ overflow: hidden; background: #f0f;}左边左浮动，右边加个margin-left; #lt{ float: left; width:200px; backgr...
2018-07-16 09:43:13
318
原创 移动开发-bootstrap
编码规范1.1 HTML约定在head中引入必要的CSS文件，优先引用第三方的CSS，方便我们自己的样式覆盖。在body末尾引入必要的JS文件， 优先引用第三方的JS， 注意JS文件之间的依赖关系， 比如bootstrap.js依赖jQuery， 那就应该先引用jquery.js 然后引用bootstrap.js。1.2CSS约定除了公共级别样式，其余样式全...
2018-07-16 09:42:15
3058
原创 移动开发-rem适配问题
浏览器默认的字体大小一般是16px,但是可以自己设置。 em 基于父元素的字体大小 rem的大小是基于html字体的大小1、px和em的区别？px像素（pixel）——px像素是相对于显示器屏幕分辨率em相对于当前对象内文本的字体尺寸。如果当前对象内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，任意浏览器的默认字体高都是16px。 IE无法...
2018-07-16 09:39:16
420
原创 移动开发-媒体查询
CSS3中的Media Query（媒介查询）通过查询screen的宽度来指定某个宽度区间的网页布局。 超小屏幕（移动设备） 768px以下 小屏设备 768px-992px 中等屏幕 992px-1200px 宽屏设备 1200px以上 媒体类型将不同的终端设备划分为不同的类型，称为媒体类型s...
2018-07-16 09:38:30
581
原创 移动开发-屏幕适配
视口（viewport）是用来约束网站中最顶级元素html的，即它决定了html的大小。1、 PC端viewportPC设备上，viewport的大小取决于浏览器窗口的大小，以CSS像素作为度量单位。获取viewport的大小(即浏览器可视区域)：document.documentElement.clientWidth;document.documentElement.cli...
2018-07-16 09:37:47
248
原创 移动开发-01
移动开发包括：原生APP，混合APP，webApp移动端开发和pc端开发有什么不同？移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。屏幕和分辨率屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸度量）分辨率一般用像素来度量，表示屏幕水平和垂直方向的像素数，PC端常见1366*768。移动端多种，比如960*640.长度单位绝...
2018-07-16 09:37:05
196
原创 对git的一些理解
Git那些年踩过的坑Workspace：工作区Index / Stage：暂存区Repository：仓库区（或本地仓库）Remote：远程仓库文件几种状态untracked：git未跟踪的文件，新增的文件未 git add 就会处于这种状态 not staged：被索引过又被修改了的文件 staged：通过 git add后即将被提交的文件 创建新仓库在当前
2018-06-25 09:00:13
501
原创 搭建vue框架
1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)2.基于node.js,利用淘宝npm镜像安装相关依赖在cmd里直接输入：npm install -g cnpm –-registry=https://registry.npm.taobao.org，回车，等待安装…3.安装全局vue-cli脚手架,用于
2018-06-25 08:59:31
1014
1
原创 webpack的配置
1.npm install -g webpack 2.配置webpack.config.js文件，文件的配置类似于gulp 3.通过配置文件中的entry获取到文件，output将文件输出 4.webpack通过loader（加载器）和plugin（插件）处理文件 eslint做js的文件检测webpack的项目打包webpack主要是以模块化的方式打包整个...
2018-06-25 08:58:36
238
原创 移动端-ionic
Ionic介绍*= 官网地址 - Ionic官网 - Ionic中文网首先要认识Ionic框架？ IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web ...
2018-06-25 08:57:35
701
原创 仿jq封装-框架的核心机构开发
在开发框架时，为了防止变量以及全局对象的污染，要使用沙箱模式。 沙箱模式: 代码自执行，分割作用域 将常用的全局对象，通过参数传递到沙箱内 好处：在一定程度上提高变量的搜索性能； 有利于代码压缩(function(global) { // 独立的作用域，与外界隔离}(window));<script>(function (global) { ...
2018-06-25 08:52:37
268
原创 移动APP环境配置
移动App环境配置使用Ionic开发需要安装的基本工具NodeGitJAVA JDKAndroid SDKIonic cordovareact native 需要以下文件python Visual Studio 2015 （当你安装失败就需要c++环境）如果没有安卓设备建议买一个，也可以选虚拟机Genymotion （最快的虚拟机）bluestacks （最傻瓜式...
2018-06-13 09:40:42
792
原创 ionic
Ionic介绍*= 官网地址 - Ionic官网 - Ionic中文网首先要认识Ionic框架？ IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web ...
2018-06-13 09:37:49
341
原创 MVC、MVP、MVVM的图示
1、MVCMVC是一种开发模式，由模型（Model）、视图（View）、控制器（Controller）3部分构成。模型（Model）数据保存。一般用来处理数据（读取/设置），一般指操作数据库。视图（View）用户界面。一般用来展示数据，比如通过HTML展示。控制器（controller）业务逻辑。一般用做链接模型和视图的桥梁。各部分之间的通信方式如下: 1. View...
2018-05-15 09:30:54
170
原创 ES6-fetch的用法
事实标准，并不存在与ES6规范中，基于Promise实现。 目前项目中对Promise的兼容性尚存在问题，如果在项目中应用fetch，需要引入es6-promise和fetch。当我们谈及Ajax技术的时候，通常意思就是基于XMLHttpRequest的Ajax，它是一种能够有效改进页面通信的技术。 XMLHttpRequest的最新替代技术——Fetch API， 它是W3C...
2018-05-15 09:14:50
11037
原创 ajax-jsonp跨域解决办法
说起Ajax，不可避免面临两个问题： 第一个是Ajax以何种格式来交换数据？ 第二个是跨域的需求如何解决？ 首选方案：JSON来传数据，靠JSONP来跨域jsonp : JSON with Padding用json去填充,填充什么？填充函数。返回的是一个函数调用!jsonp原理剖析本质是利用了标签具有可跨域的特性...
2018-05-11 09:30:40
568
原创 Dom对象的属性以及方法
原生DOM的属性和方法只能自己用。不能混用jQuery的属性和方法只能自己用。不能混用 要想混用，只能转换 案例body代码： <body> <div></div> <div id="box"></div> <div>&l
2018-05-02 10:10:13
348
原创 Parceljs初探 ...
Parceljs初探 https://parceljs.org/Parceljs是一款新的web应用打包工具，是一款零配置，以html为核心的打包工具。web应用从最初的无打包，到grunt,yoman,gulp,webpack等以js为核心，需要复杂配置的打包工具，尤其是当下最火的webpack，大有一种前端工程师即是配置工程师的窘境。parceljs一改前辈风格，零配置，轻装上阵，虽...
2018-02-25 10:32:37
2531
原创 CSS内容垂直居中
在我们写前端静态页面的时候我们不免会遇到很多次的左边图片右边文字的情况，以及如何让div里面的文字水平垂直居中呢？本人自己在开发者遇到的几种来简单说一下 1.适合响应式布局首先就是通过先给父元素设置display:flex;justity-content:center;子元素设置align-self:center;这一种一般比较适合于响应式布局 2.transform布局
2018-02-07 14:58:34
190
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人