使用fetch封装下载文件方法
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990import fetch from 'dva/fetch’;import { stringify } from 'qs’;import { message } from 'antd’;import { getFormData } from './index’;/** * Requests a URL, returning a promise. * * @param {string} url The URL we want to request * @param {object} [options] ...
react hooks
背后是类组件和函数组件的认知区别函数组件会捕获 render 内部的状态,这是两类组件最大的不同。
####
1、useState12// 基础用法const [state, setState] = useState(initialState);
注意:
12345if(showSex){ const [ sex , setSex ] = useState('男') showSex=false}上面写法会报错,原因是:React Hooks不能出现在条件判断语句中,因为它必须有完全一样的渲染顺序。
####
2、useEffect 允许函数组件执行副作用操作useEffect代替生命周期
123// 基本用法// @params callBack 回调函数 [] 依赖函数useEffect(callBack, [])
#####
每一次渲染都执行1useEffect(callBack)
#####
仅在挂载阶段执行一次1useEffect( ...
git常用命令
1、克隆库1git clone https://github.com/SheriSzeto/learnt.git
2、创建并切换分支1git checkout -b dev
3、创建分支1git branch dev
4、切换分支1git checkout dev
5、合并分支(合并远程库 master 分支)1git merge origin/master
6、推送分支(推送远程库 master 分支)1git push origin master
7、添加所有文件到暂存区1git add .
8、添加和提交文件到本地12git add test.txtgit commit -m 'add some'
9、删除分支1git branch -d feature
10、创建远程分支到本地分支(可追踪)1git checkout -b dev origin/dev
11、取消暂存文件(已经执行 git add)1git reset HEAD README.md
12、从远程库中拉取数据(只拉不合并到本地分支,需手动 merge)1git fetch ...
es6 常用语法
1.常量123const PI = "3.1415926";//常量一旦创建,值将不可以改变,否则会报错PI = 3; //报错
2.作用域12345678// es5作用域const callbacks = [];for (var i = 0; i < 2; i++) { callbacks[i] = function () { return i * 2; };}console.table([callbacks[0](), callbacks[1]()]); //4 4
这里的 for 循环中的 i 会被提前至外部,i 变量为全局变量
123456789//es6的块级作用域,只在括号内有意义const callback = [];for (let j = 0; j < 2; j++) { callback[j] = function () { return j * 2; };}console.table([callback[0](), callba ...
常用linux命令
ls —查看当前目录下有哪些文件
ls -l —查看当前目录下的文件详细信息,还有隐藏的文件
ls -la —查看隐藏与不隐藏的文件
cd /xxx —转换路径
pwd —查看当前所处路径
rm xxx —删除某个文件
cd .. —返回上级目录
rm -r xxx —删除文件夹,同时删除文件夹下的文件,递归删除
pop —查看当前的进程,退出按 q
ps aux —查看进程的详细信息
ps aux | grep ssh —筛选查看所有 ssh 进程的列表
ifconfig(ip add) —查看当前网络信息配置
跨域资源共享CORS
代理请求如果做到这一步,你应该非常欣喜。新技能 get! 但是这里有一个问题被回避了:跨域问题。
请重新审视我们的请求:const endPointURI = ‘https://08ad1pao69.execute-api.us-east-1.amazonaws.com/dev/random_joke';这里我们直接调用了一个「非本地」地址。在实际开发中是比较罕见的。这里能够成功,是因为被调用的 API 做了额外的人为设置,允许一个「非同域」的 ajax 请求。跨域资源共享 CORS 涉及的知识点比较多。我们这里做简单的介绍,目的是让你知道如何在本地开发服务器上增加代理请求的功能。
我们在浏览器中看到的页面是从一个本地开发服务器所伺服的。这个本地开发服务器的地址就是 http://localhost:8000/ 。当我们调用 getRandomPuzzle 时,此时发送 ajax 请求页面的域就是 http://localhost:8000,但是请求的数据在另外一台服务器 https://08ad1pao69.execute-api.us-east-1.amazonaws.co ...
HTML5标准模板
1、HTML5 标准模板12345678<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>HTML5标准模版</title> </head> <body></body></html>
2、移动端模板1234567891011121314151617181920212223242526272829<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1. ...
移动端适配方案对比
目前出现的关于移动端适配的方案有:
通过媒体查询的方式即 CSS3 的 meida queries
以天猫首页为代表的 flex 弹性布局
以淘宝首页为代表的 rem+viewport 缩放
rem 方式
Meida Queries通过查询设备的宽度来执行不同的 css 代码,最终达到界面的配置。
123@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/ /*你的css代码*/}
优点
media query可以做到设备像素比的判断,方法简单,成本低,特别是对移动和 PC 维护同一套代码的时候。目前像Bootstrap等框架使用这种方式布局
图片便于修改,只需修改 css 文件
调整屏幕宽度的时候不用刷新页面即可响应式展示
缺点
代码量比较大,维护不方便
为了兼顾大屏幕或高清设备,会造成其他设备资源浪费,特别是加载图片资源
为了兼顾移动端和 PC 端各自响应式的展示效果,难免会损失各自特有的交互方式
Flex 弹性布局以天猫的实现方式进行说明:它的viewport是固 ...
前端开发命名规范
一、文件规范1、文件归档至约定的目录中
例如:css 分为两大类,通用类和业务类
基本样式库 /css/core通用 ui 元素样式库 /css/libjs 组件相关样式库 /css/ui
二、注释规范1、文件顶部注释(推荐使用)1/* * @description: 中文说明 * @author: name * @update: name (2013-04-13 18:32) */
2、模块注释1/* module: module1 by 张三 */ … /* module: module2 by 张三 */
3、单行注释与多行注释1/* this is a short comment */
单行注释可以写在单独一行,也可以写在行尾,注释中的每一行长度不超过 40 个汉字,或者 80 个英文字符。
1234/* * this is comment line 1. * this is comment line 2. */
多行注释必须写在单独行内
4、特殊注释12/* TODO: xxxx by name 2013-04-13 18:32 *//* BUGFIX: xxxx ...
前端扫盲之打造一个自动化的前端项目
1、创建项目不管做什么开发,我们都应该遵循一定的规范,创建项目同样要注意文件夹的名字和结构。首先创建一个如下的基础项目结构,暂且就将项目命名为 auto-web:简单解释一下:/src 源文件所在地。开发过程中的各种 CSS 和 JS 源文件都往这里面放。/dist 目标文件所在地。上线前通过工具生成的 CSS 和 JS 目标文件都输出到这里。/images 图片文件。/vendor 第三方的 CSS、JS 和字体文件都存放到这里。/viewsHTML 视图文件。当然目前我们是手动创建的,可以设想一下,利用 NodeJS,我们是完全可以做到一条命令创建出这样的文件夹结构。
2、从 index.html 开始首先我们习惯性地创建一个 index.html 页面
Hello world 这是我的个人主页
3、我想用 Jade什么是 Jade ? -Jade是 Node 的一个模板引擎,一句话就是让我们能够更快更简便地写 HTML,大家可以去 Jade 的官网,由于其主要是靠缩进来定义结构,所以一般都能够很快地学会这种写法。类似的模板引擎在 Rails 里面也有一个叫 Sl ...