自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(33)
  • 收藏
  • 关注

原创 Redux Hooks actions 调用方式优化(一)

在用toolkit 搭建前端框架后,给人的感觉就是比原先的connect 那一套好些,但用起来还是挺繁琐的

2022-12-13 20:04:59 568 1

原创 react 项目框架的搭建(二)

一 vscode 配置搭建好基本的框架后,需要统一下vscode 配置。具体内容可以参照vscode 官网的Workspace recommended extensions部分。在项目路径下面添加一个.vscode 文件夹,里面新建一个extensions.json 文件。然后把自己好用的插件列进去{ "recommendations": [ "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "steoates.autoim

2021-03-10 22:26:13 588 3

原创 react 项目框架的搭建(一)

1.下载和安装create-react-app faceback 提供的基础手脚架在本地新建一个文件夹,然后启动powershell,敲yarn create react-app my-app如果安装失败,应该就是墙的问题。这时可以考虑切换npm的源。方法一:npm config set registry https://registry.npm.taobao.org方法二:在同层目录下新建一个.npmrc 的文件,里面写上sass_binary_site=https://npm.taob

2021-03-07 22:33:11 1530 4

原创 go iris+jwt-go +redis+mysql 实现账号登录功能(二)

一 go redis 的连接移入redis模块,并重命名redigo。设置redis 连接池import ( redigo "github.com/garyburd/redigo/redis")var pool *redigo.Pool// 设置redis 连接池func init() { redis_host := "xxx.xxx.xxx.xxx" redis_port := 6379 pool_size := 20 pool = redigo.NewP

2021-01-10 16:48:26 693

原创 go iris+jwt-go +redis+mysql 实现账号登录功能(一)

go iris+redis+mysql 实现账号登录功能设计思路:1.postman 访问login 接口, 生成token 和refresh token 并设置各自的有效时间(token 15分钟、refresh 7天)2. token 在后续的接口访问中需要携带,且用户每次访问接口后台都需要持续更新token 的时效。3. refresh 过期后,不允许继续刷新对应token 的有效是时间。前端跳转到登录页面让用户重新登录。一:go iris 的login 接口go 环境的安装步骤,可以查看

2021-01-02 10:39:47 1307

原创 使用mapboxgl 实现特定的地图效果

使用mapboxgl 实现特定的地图效果最近完成的一个项目,dashboard 地图模块的需要和第三方对接,对接要求使用mapboxgl 来对接。以前的项目一直用leaflet库来处理地图需求,mapboxgl 库对我来说很陌生。学习研究一段时间,再基本实现了产品设计的地图交互功能后,我在这里写记录。先上张设计图:一、要求实现的功能1.加载深圳地图瓦片、颜色采用暗色调2.地图附有蓝色遮罩层,鼠标hover时 ,该区域高亮并展示相应的数据3. 摄像头点位在地图上显示,两种类型,一个绿色一个蓝色,要

2020-12-05 18:05:00 6867 14

原创 app ziroom 的 Vue 重构(三)

源代码地址:https://github.com/BokeChen/Vue-ziroom 接着讲:合租/整租 home页面的实现 4.编写Footer 公共组件 从页面布局来看,可以看出Footer是通过position:fixed来定位的,而且其他页面都有。所以把它归类为公共组件。 在src 的components下面新建Footer.vue 文件。<template&gt...

2018-06-21 18:02:59 314 2

原创 app ziroom 的 Vue 重构(二)

上篇文章已经配置好了:vue+vue-router+vuex,先开始进入编写页面的实现。 代码已经同步到github上:https://github.com/BokeChen/Vue-ziroom 一、H5 一些特效 在index.html 里面添加一些meta<meta name="viewport" content="wid

2018-06-20 16:23:24 271

原创 app ziroom 的 Vue 重构(一)

自学Vue有一段时间了,一直没有完成一个完整的作品。现在打算拿自如app来练手,完成一个完整的作品。选择自如的原因有两点:1.自如app的界面风格比较简约美观 2. 我在自如租过房子,有它的登陆账户,方便截图然后用ps切取素材。 一、在做开始开发之前,需要对整个作品进行了解和评估。 自如app的首页如下图: 从底部导航栏,可看到:合租/整租 自如寓 民宿/驿栈 生活服务 我的 ...

2018-06-19 21:25:59 461

原创 微信H5开发(三)

微信H5开发在使用微信SDK,会碰到很多问题,特别是由于微信文档的介绍不够细致或者某些功能被限制但在文档上没有提及。我这篇文不提微信上的这些小小的坑,只讲H5和iOS 、安卓 的一些兼容问题。 微信H5 单页面项目有个很多情况下都无法避免的问题就是页面跳转控制。你可能会想页面控制应该很简单,像react-router 一样只要配置好path就可以了。为了更好的解释页面控制跳转问题,我举个例...

2018-06-03 14:36:36 2232

原创 微信H5开发(二)

这篇主要讲解微信H5 常用到的微信模块和微信文件的引入及微信公众号、微信商务平台、微信开放平台的相关配置。 第一次使用微信开发文档的时候,感觉文档里面写的内容不算太难,但在实际开发中会碰到很多预想不到的问题。 微信开放平台、微信商务平台 有什么用?都在哪里用? 首先从微信公众号讲起,期间用到微信商务平台和微信开放平台再穿插着讲。 一、 微信...

2018-04-23 10:13:33 6118

原创 微信H5开发(一)

H5开发,一般是指移动端的页面开发。移动端可分为app和普通浏览页面。从嵌入的环境来归类:可以分为app、微信H5及手机浏览器里面打开的页面。 以前粗略的涉略过h5开发的一些知识,感觉H5并不是很难。在这半年内,接手并完成了两个微信H5项目(一期)的过程中,发觉h5开发过程中需要注意的细节有很多,碰到的兼容问题也有一些。在这里我先总结下,H5项目的一些思路及碰到的难点和解决方法。 在刚接到H5...

2018-04-14 11:31:29 16697

转载 jQuery 插件开发

昨天被别人问懂不懂jQuery 自定义控件,没能答的上来,感觉自己有点low。所以今天百度下把这块知识补上。 原文:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html。jQuery插件有三种开发模式:1.通过.extend()来扩展,仅仅在jQuery命名空间添加一个静态方法。可直接用.extend() 来扩展,仅仅在jQue

2017-12-29 15:06:18 190

转载 浏览器兼容性-前端开发

浏览器兼容性问题是指不同浏览器的内核(渲染引擎和js引擎)对同一段代码解析的差异,造成页面显示效果的不统一的情况。 浏览器内核有 Triden(IE内核)、Gecko(火狐内核)、Webkit(苹果、谷歌内核)、Blink(谷歌、opera内核)。 国内浏览器没有自己的内核,都集成别人的内核来用。所以现在考虑的浏览器兼容性,都是考虑五大浏览器:IE、Safari、chrome、Firefox、O

2017-12-27 09:57:22 610

转载 前端性能优化

前端性能优化

2017-12-25 09:54:30 1008

原创 Android studio 混合编程(二)

Android studio 混合编程-如何加入自己的h5代码

2017-12-08 17:40:10 1076

原创 Android studio 混合编程(一)

Android studio 混合编程

2017-12-08 14:58:28 2879

原创 React+webpack 的开发环境配置步骤(五)

React+webpack 的开发环境配置步骤(五) 项目包github库的地址为:https://github.com/BokeChen/webpackReact.git目录 五、React 的异步 1.React组件按需加载 2.React异步通信前面讲redux和router的时候并未涉及到组件按需加载及异步通信,在这继续补上。下面所讲的内容都是在上面git包的基础上做更改。 1.

2017-10-12 17:55:06 372

原创 gulp 自动化构建工具

一、gulp 和webpack 的区别 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack。 grunt 和gulp 是一个优化前端流程的工具,而webpack是一个预编译模块的方案同时也是一个打包工具。具体关系如下图: js的规范有两个 AMD 和CMD,在线编译模块方案分为requireJs 和seaJs,预编译模块方案分为:browser

2017-09-12 08:55:29 448

原创 svg 地图 及path的渲染

SVG绘制地图图 并在地图实现一些特效 难点: 1.在web上渲染地图,省市坐标定位。效果如上图:A省画黄色圈,B省画蓝色圈, 2.path计算描绘、颜色渐变及path的动态效果。效果如上图:路径由黄色渐变成蓝色,路径上有个白色箭头由A省向B省移动。

2017-08-22 17:06:43 9180

原创 React+webpack 的开发环境配置步骤(四)

Webpack(dll +happy+server)+ React 项目包共享

2017-08-15 08:49:18 716

原创 React+webpack 的开发环境配置步骤(三)

目录 四、React 配置 1. React 组件2. React router 模块3. React 和Redux 配合

2017-08-10 13:07:52 3674

原创 React+webpack 的开发环境配置步骤(二)

配置步骤(一):目录 二、webpack 升级篇 6. ES6 转ES5模块 7. url和file模块 三、 webpack 高级篇 1.语法检查器eslint 2.uglify 源代码加密压缩 3.moduleconcatenationPlugin 4.devtool 5.happypack 6.dll(略)6.ES6 转ES5模块由于部分浏览器对ES6的部分语法没有完全兼容

2017-07-25 09:25:51 2010 2

原创 React+webpack 的开发环境配置步骤(一)

这里先分解每一步的做法和原因,后面的其他文章会讲怎么快速的搭建webpack。目录: 一基础篇 1.环境需求 2.NODE_PATH的配置 3.创建项目文件夹 4.安装webpack全局包 5.创建package.json 文档 6.webpack.config.js 配置 二 升级篇 1. 引入自动生成html的插件 2. webpack-dev-server 3. C...

2017-07-24 08:29:45 3822 2

原创 Webpack 安装配置步骤

目录安装配置步骤:安装nodejs全局安装webpack建立项目,进入项目根目录配置Webpack在配置webpack-dev-server添加css-loader style-loader 来支持css样式添加url-loader file-loader来支持图片和其他静态文件添加第三方库文件(jquery moment)添加ES6 的支持webpack的推广的缘由:web网站

2017-07-17 08:33:08 685

转载 JavaScript 对象

面向对象的创建,封装,继承,及涉及到一些小知识点

2017-07-05 10:04:31 188

原创 JavaScript 函数

JavaScript 函数的3中创建方法,函数的递归,匿名函数的API定义,闭包,类构造函数

2017-07-04 10:53:49 359

转载 web移动端viewport的理解

1. viewport 概念 meta viewport 标签:首先是由苹果公司在其safar浏览器中引入的,目的是解决移动设备显示网页大小的问题。viewport概念上有人提出了,visual viewport、layout viewport、ideal viewport 三个概念。

2017-07-01 19:13:30 544

转载 HTML PC端常见布局

PC端常见的布局技术: 1. margin:0 auto ; 自动居中 2. text-align /vertical-align 和line-height 3. float:left/right +overflow:hidden 浮动 4. display:table/table-cell /inline-block 通过转换元素的哦属性来实现布局 5. 固定定位\相对定位\绝对定位

2017-07-01 04:40:12 9984 2

原创 html 基础篇

html 定义、语法、常用标签

2017-06-30 10:04:46 570

转载 CSS书写规范

web前端必然会接触到html CSS 和Javascript,规范化编程不仅能提升阅读体验。

2017-06-25 15:48:55 479

转载 JavaScript 编程规范

摘自:http://www.cnblogs.com/polk6/p/4660195.html 编程规范化的是为了易于阅读和交流。这个也是一个程序员应该注意的地方。 本篇主要介绍JS开发规范:1. 命名规则驼峰式命名法:驼峰式命名法是由小(大)写字母开始,后续每个单词首字母都大写。 首字母大写为大驼峰,eg: StudentInfo、UserInfro。 首字母小写为小驼峰,eg:stud

2017-06-24 18:50:25 384

转载 程序员成熟的标志

要点:1.技术标志:掌握程序设计语言个数及精通个数外,程序的编写能力及规范化。函数编写能力(命名、格式、大小、分类、参数、复用等),面向过程的能力,面向对象的能力,数据库技术能力,效率处理能力,安全处理能力,网络处理能力,软件构架能力,人机交互能力,通用软件能力,软件文档能力 。(程序编写规范,我会另起一片文章)2.思维能力:这个既涉及到技术内容,也涉及到交流沟通方面。

2017-06-24 12:04:30 258

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除