熊丸子

熊丸子 查看完整档案

上海编辑上海大学  |  计算机科学与技术 编辑DXC.Technology (原Hewlett Packard Enterprise)  |  前端leader 编辑 momoko8443.github.io/ukulelejs_website/ 编辑
编辑

现在sf的文章质量堪忧~~~

个人动态

熊丸子 回答了问题 · 2020-10-29

vue.config.js 如何配置动态的代理域名

一模一样的case,是可以的~
首先你启动本地server 使用的命令是

vue-cli-service  serve --mode local

然后你要配置你的.env.local文件,在里面写入一行定义环境变量

MODE=development

最后你就可以在vue.config.js里用三元表达式,来根据不同环境定义proxy地址了

target: process.env.MODE === 'development' ? 'http://domain_a':'http://domain_b',

关注 7 回答 6

熊丸子 回答了问题 · 2020-10-13

解决菜单刷新之后高亮不在此menu,怎么样才能让它在页面刷新之后,menu的高亮样式还是这个menu

遇事不决就用$nextTick大法,再不行就给他setTimeout一下~~~

关注 3 回答 3

熊丸子 回答了问题 · 2020-10-13

解决git 怎样从根部新建分支。(新建分支和master无关的代码)

git checkout --orphan YourBranchName

然后

git reset --hard

参考自https://stackoverflow.com/questions/15034390/how-to-create-a-new-and-empty-root-branch

关注 2 回答 1

熊丸子 赞了文章 · 2020-10-13

JavaScript中的这些骚操作,你都知道吗?

image

引言 🏂

写这篇文章的缘由是上周在公司前端团队的code review时,看了一个实习小哥哥的代码后,感觉一些刚入行不久的同学,对于真实项目中的一些js处理不是很熟练,缺乏一些技巧。

因此整理了自己开发中常用的一些js技巧,灵活的运用,会增强你解决问题的能力,也会对你的代码简洁性有很大的改观。

数组去重 🐻

正常我们实现数组去重大多都是通过双层遍历或者indexOf的方式。

双层for循环去重

function unique(arr) {
  for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) {
      if (arr[i] == arr[j]) {
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}

利用indexOf去重

function unique(arr) {
  if (!Array.isArray(arr)) {
    console.log("type error!");
    return;
  }
  var array = [];
  for (var i = 0; i < arr.length; i++) {
    if (array.indexOf(arr[i]) === -1) {
      array.push(arr[i]);
    }
  }
  return array;
}

但其实有一种更简单的方式:利用Array.fromset去重

function unique(arr) {
  if (!Array.isArray(arr)) {
    console.log("type error!");
    return;
  }
  return Array.from(new Set(arr));
}

这种代码的实现是不是很简洁 😉

数组转化为对象(Array to Object)🦑

数组转化为对象,大多数同学首先想到的就是这种方法:

var obj = {};
var arr = ["1","2","3"];
for (var key in arr) {
    obj[key] = arr[key];
}
console.log(obj)

Output:
{0: 1, 1: 2, 2: 3}

但是有一种比较简单快速的方法:

const arr = [1,2,3]
const obj = {...arr}
console.log(obj)

Output:
{0: 1, 1: 2, 2: 3}

一行代码就能搞定的事情为什么还要用遍历呢?😛

合理利用三元表达式 👩‍👦‍👦

有些场景我们需要针对不同的条件,给变量赋予不同的值,我们往往会采用下面这种方式:

const isGood = true;
let feeling;
if (isGood) {
  feeling = 'good'
} else {
  feeling = 'bad'
}
console.log(`I feel ${feeling}`)

Output:
I feel good

但是为什么不采用三元表达式呢?

const isGood = true;
const feeling = isGood ? 'good' : 'bad'
console.log(`I feel ${feeling}`)

Output:
I feel good

这种也就是所谓的Single line(单行)思想,其实就是代码趋向于简洁性

转换为数字类型(Convert to Number)🔢

这种是很常见的,大家用的比较多的可能是parseInt()Number()这种:

const age = "69";
const ageConvert = parseInt(age);
console.log(typeof ageConvert);

Output: number;

其实也可以通过+来实现转换:

const age = "69";
const ageConvert = +age;
console.log(typeof ageConvert);

Output: number;

转换为字符串类型(Convert to String)🔡

转换为字符串一般会用toString()String()实现:

let a = 123;

a.toString(); // '123'

但也可以通过value + ""这种来实现:

let a = 123;

a + ""; // '123'

性能追踪 🥇

如果你想测试一段js代码的执行耗时,那么你可以尝试下performance

let start = performance.now();
let sum = 0;
for (let i = 0; i < 100000; i++) {
  sum += 1;
}
let end = performance.now();
console.log(start);
console.log(end);

合并对象(Combining Objects)🌊

两个对象合并大家用的比较多的可能就是Object.assign了:

const obj1 = { a: 1 }
const obj2 = { b: 2 }
console.log(Object.assign(obj1, obj2))

Output:
{ a: 1, b: 2 }

其实有一种更简洁的方式:

const obj1 = { a: 1 }
const obj2 = { b: 2 }
const combinObj = { ...obj1, ...obj2 }
console.log(combinObj)

Output:
{ a: 1, b: 2 }

也就是通过展开操作符(spread operator)来实现。

短路运算(Short-circuit evaluation) 🥅

我们可以通过&&||来简化我们的代码,比如:

if (isOnline) {
  postMessage();
}
// 使用&&
isOnline && postMessage();

// 使用||
let name = null || "森林";

数组扁平化(Flattening an array)🍓

数组的扁平化,我们一般会用递归reduce去实现

递归

var arr = [1, [2, [3, 4]]];

function flatten(arr) {
  var result = [];
  for (var i = 0, len = arr.length; i < len; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flatten(arr[i]));
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

console.log(flatten(arr));

reduce

var arr = [1, [2, [3, 4]]];

function flatten(arr) {
  return arr.reduce(function (prev, next) {
    return prev.concat(Array.isArray(next) ? flatten(next) : next);
  }, []);
}

console.log(flatten(arr));

但是es6提供了一个新方法 flat(depth),参数depth,代表展开嵌套数组的深度,默认是1

let arr = [1, [2, 3, [4, [5]]]];
arr.flat(3); // [1,2,3,4,5]

求幂运算 🍜

平时我们实现指数运算,用的比较多的应该是Math.pow(),比如求2^10

console.log(Math.pow(2, 10));

ES7中引入了指数运算符****具有与Math.pow()一样的计算结果。

console.log(2 ** 10); // 输出1024

浮点数转为整数(Float to Integer)🦊

我们一般将浮点数转化为整数会用到Math.floor()Math.ceil()Math.round()。但其实有一个更快的方式:

console.log(~~6.95); // 6
console.log(6.95 >> 0); // 6
console.log(6.95 << 0); // 6
console.log(6.95 | 0); // 6
// >>>不可对负数取整
console.log(6.95 >>> 0); // 6

也就是使用~, >>, <<, >>>, |这些位运算符来实现取整

截断数组

如果你有修改数组长度为某固定值的需求,那么你可以试试这个
let array = [0, 1, 2, 3, 4, 5];
array.length = 3;
console.log(array);

Output: [0, 1, 2];

获取数组中的最后一项 🦁

通常,获取数组最后一项,我们用的比较多的是:

let arr = [0, 1, 2, 3, 4, 5];
const last = arr[arr.length - 1];
console.log(last);

Output: 5;

但我们也可以通过slice操作来实现:

let arr = [0, 1, 2, 3, 4, 5];
const last = arr.slice(-1)[0];
console.log(last);

Output: 5;

美化你的JSON 💄

日常开发中,我们会经常用到JSON.stringify,但大家可能并不大清楚他具体有哪些参数。

他有三个参数:

  • json: 必须,可以是数组或Object
  • replacer: 可选值,可以是数组,也可以是方法
  • space: 用什么来进行分隔

而我们恰恰可以指定第三个参数space的值去美化我们的JSON

Object.create(null) 🐶

VueVuex的源码中,作者都使用了Object.create(null)来初始化一个新对象。为什么不用更简洁的{}呢?
我们来看下Object.create()的定义:
Object.create(proto, [propertiesObject]);
  • proto:新创建对象的原型对象
  • propertiesObject:可选。要添加到新对象的可枚举(新添加的属性是其自身的属性,而不是其原型链上的属性)的属性。

我们对比分别通过Object.create(null){}创建对象的不同:

从上图可以看到,通过{}创建的对象继承了Object自身的方法,如hasOwnPropertytoString等,在新对象上可以直接使用。

而使用Object.create(null)创建的对象,除了自身属性a之外,原型链上没有任何属性。

也就是我们可以通过Object.create(null)这种方式创建一个纯净的对象,我们可以自己定义hasOwnPropertytoString等方法,完全不必担心会将原型链上的同名方法覆盖掉。

拷贝数组 🐿

日常开发中,数组的拷贝是一个会经常遇到的场景。其实实现数组的拷贝有很多骚技巧。

Array.slice

const arr = [1, 2, 3, 4, 5];
const copyArr = arr.slice();

展开操作符

const arr = [1, 2, 3, 4, 5];
const copyArr = [...arr];

使用 Array 构造函数和展开操作符

const arr = [1, 2, 3, 4, 5];
const copyArr = new Array(...arr);

Array.concat

const arr = [1, 2, 3, 4, 5];
const copyArr = arr.concat();

避免多条件并列 🦀

开发中有时会遇到多个条件,执行相同的语句,也就是多个||这种:

if (status === "process" || status === "wait" || status === "fail") {
  doSomething();
}

这种写法语义性、可读性都不太好。可以通过switch caseincludes这种进行改造。

switch case

switch (status) {
  case "process":
  case "wait":
  case "fail":
    doSomething();
}

includes

const enum = ["process", "wait", "fail"];
if (enum.includes(status)) {
  doSomething();
}

Object.freeze() 🃏

Vue 的文档中介绍数据绑定和响应时,特意标注了对于经过 Object.freeze() 方法的对象无法进行更新响应。
Object.freeze() 方法用于冻结对象,禁止对于该对象的属性进行修改。

正是由于这种特性,所以在实际项目中,他有很多的适用场景。

像一些纯展示类的页面,可能存在巨大的数组或对象,如果这些数据不会发生更改,那么你就可以使用Object.freeze()将他们冻结,这样Vue就不会对这些对象做settergetter的转换,可以大大的提升性能。

❤️ 爱心三连击

1.如果觉得这篇文章还不错,来个分享、点赞、在看三连吧,让更多的人也看到~

2.关注公众号前端森林,定期为你推送新鲜干货好文。

3.特殊阶段,带好口罩,做好个人防护。

查看原文

赞 47 收藏 35 评论 6

熊丸子 回答了问题 · 2020-10-13

混合前后端分离的用户登录状态如何同步?

牵涉到单点登录,不管你访问a.abc.com还是b.abc.com, 一般都要拿着已经完成login的center这个site的session去center绕一圈(使用get方法重定向到center,自带cookie里的sessionid)。然后由center判断是否已经登录,并告诉a说,您放心的让他访问吧。。。

具体可以google下sso的saml协议~也可以自己实现。

关注 3 回答 2

熊丸子 回答了问题 · 2020-10-12

前后端分离项目中的csrfToken获取问题

前后分离架构,一般token都是 service端生成,redirect回前端的时候带在url的参数里的。理论上黑客侵入了浏览器当前域名下执行的js是可以获取到token的。比如tamperMonkey这类插件执行的脚本

关注 2 回答 1

熊丸子 回答了问题 · 2020-09-10

vue 对象更新,视图不更新的问题

chrome装个 Vue debug插件,看看传入detail控件 props的值有没有变化。
detail控件里写watch,immediate:true看看有没有被调用。
你还是要上代码~否则说不清楚。

关注 9 回答 8

熊丸子 赞了文章 · 2020-07-30

typescript项目css modules

typescript项目中我们使用typings-for-css-modules-loader来替代css-loader实现css modules。

1、typings-for-css-modules-loader加载器介绍

Webpack加载器,用作css-loader的替代产品,可动态生成CSS模块的TypeScript类型

这句话是什么意思呢?就是编译时处理css文件,为这些css文件生成对应的.d.ts声明文件并且具有css-loader功能,用import/require处理css引用资源(url和@import),使得css模块化,配置modules字段可以启用css modules

为什么需要为css文件生成声明文件呢?因为在typescript项目中无论是我们自己写的代码还是导入第三方库和样式,都应该符合typescript语言规范,就比如在react+typescript项目中,安装了react、react-dom后还得安装@types/react、@types/react-dom,这两个库是react、react-dom的声明文件。

2、typings-for-css-modules-loader加载器使用

typescript项目webpack配置如下:

{
    test: /\.(sc|sa|c)ss$/,
    include: [path.join(__dirname, '../', './src')],
    use: [
      // 'style-loader', // style-loader将第二步编译出来的代码转为js代码
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: (resourcePath, context) => {
            // resourcePath = E:\学习项目\从零搭建typescript+react项目\ts-react\src\index.scss
            // context = E:\学习项目\从零搭建typescript+react项目\ts-react
            return path.relative(path.dirname(resourcePath), context) + '/';
          },
        }
      },
      // css-loader将编译出来的代码再次编译成为符合CommonJS的代码
      {
        loader: 'typings-for-css-modules-loader',
        options: {
          modules: true, // 使用css modules
          namedExport: true, // 类名导出
          camelCase: true, // 支持驼峰
          sass: true, // 是否使用sass
          localIdentName: '[name]__[local]__[hash:base64:5]' // 定义类名
        }
      },
      {
        // 给css加上前缀
        loader: 'postcss-loader',
        options: {
          plugins: [require('autoprefixer')]
        }
      },
      'sass-loader' // sass-loader将sass代码编译为css(默认使用node-sass)
    ]
}

简单解释下三个 Loader 的作用:

  1. sass-loader 的作用当然是把 SASS 文件编译成 CSS 文件;
  2. typings-for-css-modules-loader 是在 css-loader 上包了一层,它的选项完全兼容 css-loader。除此之外,它会为每个 SASS 文件生成对应的 xxx.scss.d.ts 的解释文件,这样在 TypeScript 中就可以正确解析,编辑器里面也能有非常友好的代码提示。
  3. style-loader 就是把样式使用<style>标签打到页面上。

整个过程就是,读到一个 SCSS 文件,丢给 sass-loader(调用node-sass) 处理成 css,然后给 typings-for-css-modules-loader 生成 xxx.scss.d.ts 文件并且把 css 处理成 JavaScript 可以使用的样子(这步其实是 css-loader 在处理,为啥要把 css 文件处理成 JavaScript 可以用的样子呢,因为 webpack 只能处理 JavaScript,所以需要做转换),最后把处理好的给 style-loader,页面加载的时候就会打到页面上。

其实 loader 的本质就是anything to JavaScript,因为 Webpack 只处理 JavaScript。记住这一点,就对为什么要用这个 loader 那个 loader 有个清晰的认识了。

比如在react + typescript项目中,配置好typings-for-css-modules-loader后,我们定义index.scss、index.tsx两个文件,并在index.tsx中导入index.scss样式。由于启用了css modules,所有的样式类名都会以hash字符串替换,如果我们import './index.scss'导入样式,那么只能在元素中className="填写对应类名对应hash字符串",但是类名的hash字符串是编译时生成的,而我们在写代码时并不知道我们需要的类名会编译成哪个hash字符串,并且hash字符串很长不方便书写和记忆。

image.png

我们改用以模块的方式导入样式文件,但这会遇到一个问题TS2307: cannot find module '.xxx',因为样式文件不是AMD/CMD规范文件,不支持模块导入,typescript语法可以使用declare module声明模块,我们定义一个.d.ts文件,然后写样式模块声明,项目编译过程中会自动去读取.d.ts这种类型的文件,所以不需要我们手动地加载他们。当然.d.ts文件也不能随便放置在项目中,这类文件和ts文件一样需要被typescript编译,所以一样只能放置在tsconfig.jsoninclude属性所配置的文件夹下。

// typed-css.d.ts
// scss模块声明
declare module '*.scss' {
  const content: {[key: string]: any}
  export = content
}
// less模块声明
declare module '*.less' {
  const content: { [key: string]: any }
  export default content
}

这样,样式文件就可以使用模块导入的方式了。

image.png

参考:
https://blog.csdn.net/weixin_...
https://www.npmjs.com/package...

查看原文

赞 3 收藏 1 评论 0

熊丸子 发布了文章 · 2020-03-12

啊!这磨人的小妖精 !node-sass在docker镜像中安装的正确姿势

背景

最近笔者发现ali_cloud上的gitlab CICD build 前端vue工程docker镜像一直很慢,快的时候7,8分钟,慢的时候40分钟,慢就慢了且常常40多分钟的时候给我来下个failed

找原因

顶着屏幕看了下docker build image的log打印过程。。。找到原因了。
卡在了这一步

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.12.0/linux-x64-64_binding.node

时常会下载node-sass binary包timeout,并导致走另外一条路去下载它的source,做一个漫长的gyp编译过程。

如何解决

查了下一下node-sass的官网,对于获取binary,支持自定义的site和path
sass-binary-site
sass-binary-path
既然这样就好办了,我们可以自行下载对应版本的binding.node文件,并在Dockerfile里加上SASS-BINARY-PATH,这样就不用去不稳定的外网下载了。
来看下Dockerfile

FROM node:10.16.3 as builder

# Create and go into app home
WORKDIR /usr/src/app
COPY package.json ./
ARG envArg=devserver 
RUN npm config set registry=https://registry.npm.taobao.org
RUN mkdir -p /usr/src/app/node-sass
COPY binding.node /usr/src/app/node-sass
ENV SASS_BINARY_PATH /usr/src/app/node-sass/binding.node
RUN npm install
COPY . .  

关键加入了这2两行

RUN mkdir -p /usr/src/app/node-sass
COPY binding.node /usr/src/app/node-sass
ENV SASS_BINARY_PATH /usr/src/app/node-sass/binding.node

结果

这样问题就迎刃而解啦,docker build十分顺畅。你看到以下log就说明你的配置生效啦!这个配置环境变量的方式也适用于单机安装哦。

\> node-sass@4.13.1 install /usr/src/app/node\_modules/node-sass  
\> node scripts/install.js  
  
node-sass build Binary found at /usr/src/app/node-sass/binding.node

...
\> node-sass@4.13.1 postinstall /usr/src/app/node\_modules/node-sass  
\> node scripts/build.js  
  
Binary found at /usr/src/app/node-sass/binding.node  
Testing binary  
Binary is fine
查看原文

赞 2 收藏 0 评论 0

熊丸子 收藏了文章 · 2020-02-19

nginx配置location总结及rewrite规则写法

location正则写法

一个示例:

location  = / {
  # 精确匹配 / ,主机名后面不能带任何字符串
  [ configuration A ] 
}

location  / {
  # 因为所有的地址都以 / 开头,所以这条规则将匹配到所有请求
  # 但是正则和最长字符串会优先匹配
  [ configuration B ] 
}

location /documents/ {
  # 匹配任何以 /documents/ 开头的地址,匹配符合以后,还要继续往下搜索
  # 只有后面的正则表达式没有匹配到时,这一条才会采用这一条
  [ configuration C ] 
}

location ~ /documents/Abc {
  # 匹配任何以 /documents/ 开头的地址,匹配符合以后,还要继续往下搜索
  # 只有后面的正则表达式没有匹配到时,这一条才会采用这一条
  [ configuration CC ] 
}

location ^~ /images/ {
  # 匹配任何以 /images/ 开头的地址,匹配符合以后,停止往下搜索正则,采用这一条。
  [ configuration D ] 
}

location ~* \.(gif|jpg|jpeg)$ {
  # 匹配所有以 gif,jpg或jpeg 结尾的请求
  # 然而,所有请求 /images/ 下的图片会被 config D 处理,因为 ^~ 到达不了这一条正则
  [ configuration E ] 
}

location /images/ {
  # 字符匹配到 /images/,继续往下,会发现 ^~ 存在
  [ configuration F ] 
}

location /images/abc {
  # 最长字符匹配到 /images/abc,继续往下,会发现 ^~ 存在
  # F与G的放置顺序是没有关系的
  [ configuration G ] 
}

location ~ /images/abc/ {
  # 只有去掉 config D 才有效:先最长匹配 config G 开头的地址,继续往下搜索,匹配到这一条正则,采用
    [ configuration H ] 
}

location ~* /js/.*/\.js
  • =开头表示精确匹配
    如 A 中只匹配根目录结尾的请求,后面不能带任何字符串。
  • ^~ 开头表示uri以某个常规字符串开头,不是正则匹配
  • ~ 开头表示区分大小写的正则匹配;
  • ~* 开头表示不区分大小写的正则匹配
  • / 通用匹配, 如果没有其它匹配,任何请求都会匹配到

顺序 no优先级:
(location =) > (location 完整路径) > (location ^~ 路径) > (location ~,~* 正则顺序) > (location 部分起始路径) > (/)

上面的匹配结果
按照上面的location写法,以下的匹配示例成立:

  • / -> config A
    精确完全匹配,即使/index.html也匹配不了
  • /downloads/download.html -> config B
    匹配B以后,往下没有任何匹配,采用B
  • /images/1.gif -> configuration D
    匹配到F,往下匹配到D,停止往下
  • /images/abc/def -> config D
    最长匹配到G,往下匹配D,停止往下
    你可以看到 任何以/images/开头的都会匹配到D并停止,FG写在这里是没有任何意义的,H是永远轮不到的,这里只是为了说明匹配顺序
  • /documents/document.html -> config C
    匹配到C,往下没有任何匹配,采用C
  • /documents/1.jpg -> configuration E
    匹配到C,往下正则匹配到E
  • /documents/Abc.jpg -> config CC
    最长匹配到C,往下正则顺序匹配到CC,不会往下到E

实际使用建议

所以实际使用中,个人觉得至少有三个匹配规则定义,如下:
#直接匹配网站根,通过域名访问网站首页比较频繁,使用这个会加速处理,官网如是说。
#这里是直接转发给后端应用服务器了,也可以是一个静态首页
# 第一个必选规则
location = / {
    proxy_pass http://tomcat:8080/index
}
# 第二个必选规则是处理静态文件请求,这是nginx作为http服务器的强项
# 有两种配置模式,目录匹配或后缀匹配,任选其一或搭配使用
location ^~ /static/ {
    root /webroot/static/;
}
location ~* \.(gif|jpg|jpeg|png|css|js|ico)$ {
    root /webroot/res/;
}
#第三个规则就是通用规则,用来转发动态请求到后端应用服务器
#非静态文件请求就默认是动态请求,自己根据实际把握
#毕竟目前的一些框架的流行,带.php,.jsp后缀的情况很少了
location / {
    proxy_pass http://tomcat:8080/
}

http://tengine.taobao.org/book/chapter_02.html
http://nginx.org/en/docs/http/ngx_http_rewrite_module.html

Rewrite规则

rewrite功能就是,使用nginx提供的全局变量或自己设置的变量,结合正则表达式和标志位实现url重写以及重定向。rewrite只能放在server{},location{},if{}中,并且只能对域名后边的除去传递的参数外的字符串起作用,例如 http://seanlook.com/a/we/index.php?id=1&u=str 只对/a/we/index.php重写。语法rewrite regex replacement [flag];

如果相对域名或参数字符串起作用,可以使用全局变量匹配,也可以使用proxy_pass反向代理。

表明看rewrite和location功能有点像,都能实现跳转,主要区别在于rewrite是在同一域名内更改获取资源的路径,而location是对一类路径做控制访问或反向代理,可以proxy_pass到其他机器。很多情况下rewrite也会写在location里,它们的执行顺序是:

  1. 执行server块的rewrite指令
  2. 执行location匹配
  3. 执行选定的location中的rewrite指令

如果其中某步URI被重写,则重新循环执行1-3,直到找到真实存在的文件;循环超过10次,则返回500 Internal Server Error错误。

flag标志位

  • last : 相当于Apache的[L]标记,表示完成rewrite
  • break : 停止执行当前虚拟主机的后续rewrite指令集
  • redirect : 返回302临时重定向,地址栏会显示跳转后的地址
  • permanent : 返回301永久重定向,地址栏会显示跳转后的地址

因为301和302不能简单的只返回状态码,还必须有重定向的URL,这就是return指令无法返回301,302的原因了。这里 last 和 break 区别有点难以理解:

  1. last一般写在server和if中,而break一般使用在location中
  2. last不终止重写后的url匹配,即新的url会再从server走一遍匹配流程,而break终止重写后的匹配
  3. break和last都能组织继续执行后面的rewrite指令

if指令与全局变量

if判断指令
语法为if(condition){...},对给定的条件condition进行判断。如果为真,大括号内的rewrite指令将被执行,if条件(conditon)可以是如下任何内容:

  • 当表达式只是一个变量时,如果值为空或任何以0开头的字符串都会当做false
  • 直接比较变量和内容时,使用=!=
  • ~正则表达式匹配,~*不区分大小写的匹配,!~区分大小写的不匹配

-f!-f用来判断是否存在文件
-d!-d用来判断是否存在目录
-e!-e用来判断是否存在文件或目录
-x!-x用来判断文件是否可执行

例如:

if ($http_user_agent ~ MSIE) {
    rewrite ^(.*)$ /msie/$1 break;
} //如果UA包含"MSIE",rewrite请求到/msid/目录下

if ($http_cookie ~* "id=([^;]+)(?:;|$)") {
    set $id $1;
 } //如果cookie匹配正则,设置变量$id等于正则引用部分

if ($request_method = POST) {
    return 405;
} //如果提交方法为POST,则返回状态405(Method not allowed)。return不能返回301,302

if ($slow) {
    limit_rate 10k;
} //限速,$slow可以通过 set 指令设置

if (!-f $request_filename){
    break;
    proxy_pass  http://127.0.0.1; 
} //如果请求的文件名不存在,则反向代理到localhost 。这里的break也是停止rewrite检查

if ($args ~ post=140){
    rewrite ^ http://example.com/ permanent;
} //如果query string中包含"post=140",永久重定向到example.com

location ~* \.(gif|jpg|png|swf|flv)$ {
    valid_referers none blocked www.jefflei.com www.leizhenfang.com;
    if ($invalid_referer) {
        return 404;
    } //防盗链
}

全局变量
下面是可以用作if判断的全局变量

  • $args : #这个变量等于请求行中的参数,同$query_string
  • $content_length : 请求头中的Content-length字段。
  • $content_type : 请求头中的Content-Type字段。
  • $document_root : 当前请求在root指令中指定的值。
  • $host : 请求主机头字段,否则为服务器名称。
  • $http_user_agent : 客户端agent信息
  • $http_cookie : 客户端cookie信息
  • $limit_rate : 这个变量可以限制连接速率。
  • $request_method : 客户端请求的动作,通常为GET或POST。
  • $remote_addr : 客户端的IP地址。
  • $remote_port : 客户端的端口。
  • $remote_user : 已经经过Auth Basic Module验证的用户名。
  • $request_filename : 当前请求的文件路径,由root或alias指令与URI请求生成。
  • $scheme : HTTP方法(如http,https)。
  • $server_protocol : 请求使用的协议,通常是HTTP/1.0或HTTP/1.1。
  • $server_addr : 服务器地址,在完成一次系统调用后可以确定这个值。
  • $server_name : 服务器名称。
  • $server_port : 请求到达服务器的端口号。
  • $request_uri : 包含请求参数的原始URI,不包含主机名,如:”/foo/bar.php?arg=baz”。
  • $uri : 不带请求参数的当前URI,$uri不包含主机名,如”/foo/bar.html”。
  • $document_uri : 与$uri相同。

例:http://localhost:88/test1/test2/test.php
$host:localhost
$server_port:88
$request_uri:http://localhost:88/test1/test2/test.php
$document_uri:/test1/test2/test.php
$document_root:/var/www/html
$request_filename:/var/www/html/test1/test2/test.php

常用正则

  • . : 匹配除换行符以外的任意字符
  • ? : 重复0次或1次
  • + : 重复1次或更多次
  • * : 重复0次或更多次
  • \d :匹配数字
  • ^ : 匹配字符串的开始
  • $ : 匹配字符串的介绍
  • {n} : 重复n次
  • {n,} : 重复n次或更多次
  • [c] : 匹配单个字符c
  • [a-z] : 匹配a-z小写字母的任意一个

小括号()之间匹配的内容,可以在后面通过$1来引用,$2表示的是前面第二个()里的内容。正则里面容易让人困惑的是\转义特殊字符。

rewrite实例

例1

http {
    # 定义image日志格式
    log_format imagelog '[$time_local] ' $image_file ' ' $image_type ' ' $body_bytes_sent ' ' $status;
    # 开启重写日志
    rewrite_log on;

    server {
        root /home/www;

        location / {
                # 重写规则信息
                error_log logs/rewrite.log notice; 
                # 注意这里要用‘’单引号引起来,避免{}
                rewrite '^/images/([a-z]{2})/([a-z0-9]{5})/(.*)\.(png|jpg|gif)$' /data?file=$3.$4;
                # 注意不能在上面这条规则后面加上“last”参数,否则下面的set指令不会执行
                set $image_file $3;
                set $image_type $4;
        }

        location /data {
                # 指定针对图片的日志格式,来分析图片类型和大小
                access_log logs/images.log mian;
                root /data/images;
                # 应用前面定义的变量。判断首先文件在不在,不在再判断目录在不在,如果还不在就跳转到最后一个url里
                try_files /$arg_file /image404.html;
        }
        location = /image404.html {
                # 图片不存在返回特定的信息
                return 404 "image not found\n";
        }
}

对形如/images/ef/uh7b3/test.png的请求,重写到/data?file=test.png,于是匹配到location /data,先看/data/images/test.png文件存不存在,如果存在则正常响应,如果不存在则重写tryfiles到新的image404 location,直接返回404状态码。

例2

rewrite ^/images/(.*)_(\d+)x(\d+)\.(png|jpg|gif)$ /resizer/$1.$4?width=$2&height=$3? last;

对形如/images/bla_500x400.jpg的文件请求,重写到/resizer/bla.jpg?width=500&height=400地址,并会继续尝试匹配location。

例3
ssl部分页面加密

参考


原文链接地址:http://seanlook.com/2015/05/17/nginx-location-rewrite/


查看原文

认证与成就

  • 获得 593 次点赞
  • 获得 28 枚徽章 获得 2 枚金徽章, 获得 8 枚银徽章, 获得 18 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

注册于 2015-08-27
个人主页被 5.9k 人浏览