blog
blog copied to clipboard
大前端技术为主,读书笔记、随笔、理财为辅,做个终身学习者。
![效果图](https://upload-images.jianshu.io/upload_images/12890819-f3b950acbffb944b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) # 前言 此 blog-react-admin 项目是基于 [蚂蚁金服开源的 ant design pro](https://pro.ant.design/index-cn) 之上,用 react 全家桶 + Ant Design 的进行再次开发的,项目已经开源,项目地址在 github 上。 效果预览 [https://preview.pro.ant.design/user/login](https://preview.pro.ant.design/user/login) # 1. 后台管理 ## 1.1 已经实现功能 - [x] 登录...
![项目结构图](https://upload-images.jianshu.io/upload_images/12890819-3348be07c69aa2b9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) # 前言 blog-node 是采用了主流的前后端分离思想的,主里只讲 后端。 blog-node 项目是 node + express + mongodb 的进行开发的,项目已经开源,项目地址在 github 上。 效果请看 [http://biaochenxuying.cn/main.html](http://biaochenxuying.cn/main.html) # 1. 后端 ## 1.1 已经实现功能 - [x] 登录 - [x] 文章管理...
![](https://upload-images.jianshu.io/upload_images/12890819-b26f439121646da3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) # 1. 需求 实现父 div 里面 左右,上下动态分割 div,并上下改变父 div 的高度,并且宽和高都是按百分比(如图) 。 ![](https://upload-images.jianshu.io/upload_images/12890819-afc3e32ece5f4c2b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) # 2. 实现原理 ## 2.1 父布局 ``` ``` - 首先一个父 div 为 hj-wrap,相对定位 。 - 一个改变父 div...
效果图: ![progress.gif](https://upload-images.jianshu.io/upload_images/12890819-a7e03e6afac93c2e.gif?imageMogr2/auto-orient/strip) 项目地址:[https://github.com/biaochenxuying/progress](https://github.com/biaochenxuying/progress) 效果体验地址:[ https://biaochenxuying.github.io/progress/index.html](https://biaochenxuying.github.io/progress/index.html) # 1. 原理 - 一个用于装载进度条内容的 div (且叫做 container)。 - 然后在 container 里面动态生成三个元素,一个是做为背景的 div (且叫做 progress),一个是做为显示进度的 div (且叫做 bar),还有一个是显示文字的 span (且叫做 text)。 - progress 的宽为 100%,bar...
效果图: ![route-origin.gif](https://upload-images.jianshu.io/upload_images/12890819-bcd752c4d96446db.gif?imageMogr2/auto-orient/strip) 项目地址:[https://github.com/biaochenxuying/route](https://github.com/biaochenxuying/route) 效果体验地址: [1. 滑动效果: https://biaochenxuying.github.io/route/index.html](https://biaochenxuying.github.io/route/index.html) [2. 淡入淡出效果: https://biaochenxuying.github.io/route/index2.html](https://biaochenxuying.github.io/route/index2.html) # 1. 需求 因为我司的 H 5 的项目是用原生 js 写的,要用到路由,但是现在好用的路由都是和某些框架绑定在一起的,比如 vue-router ,framework7 的路由;但是又没必要为了一个路由功能而加入一套框架,现在自己写一个轻量级的路由。 # 2. 实现原理 现在前端的路由实现一般有两种,一种是 Hash 路由,另外一种是 History 路由。...
![效果图](https://upload-images.jianshu.io/upload_images/12890819-1a1fd5e2d4f63096.gif?imageMogr2/auto-orient/strip) 需求:在网站上想评论一篇文章,而评论文章是要用户注册与登录的,那么怎么免去这麻烦的步骤呢?答案是通过第三方授权登录。本文讲解的就是 github 授权登录的教程。 效果体验地址:[ http://biaochenxuying.cn](http://biaochenxuying.cn) # 1. github 第三方授权登录教程 先来看下 github 授权的完整流程图 1: ![github 1](https://upload-images.jianshu.io/upload_images/12890819-d29b861c55a6833d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 或者看下 github 授权的完整流程图 2: ![github 2](https://upload-images.jianshu.io/upload_images/12890819-35e7fa768330ae28.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ## 1.1 申请一个 OAuth App **首先我们必须登录上 github 申请一个...
Bumps [browserify-sign](https://github.com/crypto-browserify/browserify-sign) from 4.0.4 to 4.2.2. Changelog Sourced from browserify-sign's changelog. v4.2.2 - 2023-10-25 Fixed [Tests] log when openssl doesn't support cipher [#37](https://github.com/crypto-browserify/browserify-sign/issues/37) Commits Only apps should have lockfiles 09a8995...
Bumps [@babel/traverse](https://github.com/babel/babel/tree/HEAD/packages/babel-traverse) from 7.7.2 to 7.23.2. Release notes Sourced from @babel/traverse's releases. v7.23.2 (2023-10-11) NOTE: This release also re-publishes @babel/core, even if it does not appear in the linked release...
Bumps [fsevents](https://github.com/fsevents/fsevents) from 1.2.9 to 1.2.13. Release notes Sourced from fsevents's releases. Release v1.2.13 Only build on Mac-OSX Release v1.2.11 Removing node-pre-gyp so that building fsevents becomes easier and enabled...