shaolin

悟已往之不谏,知来者之可追!

0%

上篇介绍了注册的基本流程,下篇简单的讲讲登录的流程以及Cookie的出现

实现登录的小功能

当你在浏览器的输入框里输入localhost:8080/sign_in的时候,会发起GET请求,去访问sign_in.html

if (path === '/sign_up' && method === 'GET') {
  let string = fs.readFileSync('./sign_up.html', 'utf8')
  response.statusCode = 200
  response.setHeader('Content-Type', 'text/html;charset=utf-8')
  response.write(string)
  response.end()
}

CSS布局与上篇的布局基本一样,略去不表~

阅读全文 »

cookie 如果非要用汉语理解的话应该是 一段小型文本文件,由网景的创始人之一的卢 蒙特利在93年发明。

上篇是熟悉一下注册的大致流程,下篇熟悉登录流程以及真正的Cookie

实现基本的注册功能

我们打开网站,浏览网站,最常见的两个操作就是注册以及登录,所以有必要探索一下这两个功能如何实现的。

本地模拟,当输入localhost:8080/sign_up的时候,浏览器发起get请求,服务器给你响应sign_up.html

//服务器端代码
if (path === '/sign_up' && method === 'GET') {
    let string = fs.readFileSync('./sign_up.html', 'utf8')
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(string)
    response.end()
 }
阅读全文 »

科学上网

如何科学上网是个很严肃的问题(⊙o⊙)哦

以Linux为例

sudo apt-get install python-pip; 
sudo pip install shadowsocks;
  • 如果你遇到 _cleanup 不存在的提示,可能是遇到 bug 了,你要将 openssl.py 中的 _cleanup 全部改为 _reset 才行。

如图的bug

  • 如果你不会改,使用
sed -i 's/_cleanup/_reset/g' xxxxxxxxxxxxxxxxxxxxxx/openssl.py  
// 注意把 xxxxxxxxxxxxxxxxxxxxxx/openssl.py 改成图中的 openssl.py 文件的路径

创建sslocal 配置文件

创建 sslocal 配置文件(如果你不知道在哪创建就创建在 ~/.ssconf.json),配置文件的内容可使用我的服务器,你也可以自己买服务器(显然自己买服务器更靠谱)

 {
     "server":"45.76.180.233", //自己买
     "server_port":27148, //自己买
     "local_address": "127.0.0.1",
     "local_port":1080,
     "password":"A7#x8Jyzme)jkFfc", //自己买
     "timeout":300,
     "method":"aes-256-cfb",
     "fast_open": false
 }

可以使用了

  1. 使用 ss-local -c ~/.ssconf.jsonsslocal -c ~/.ssconf.json 开启代理,其中 ~/.ssconf.json 是配置文件的路径-

XMLHttpRequest JSON AJAX CORS 四个名词来开会

** http://shaolin.com:8002

如何发请求

在前端的世界里也逛荡了不少日子了,目前已经get到大约5种发起请求的方式,主流的、非主流的。

何种方式 请求方法
最常见的form表单 默认GET,多用POST,只此两种 会刷新页面或者新开页面
a 标签 GET请求 也会刷新页面或者新开页面
imgsrc属性 GET 只能以图片的形式展现
link标签 GET 只能以CSSfavicon的形式展现
script标签 GET 只能以脚本的形式运行

可是

  • 我们可能想用GET POST PUT DELETE 方法
  • 不想刷新整个页面,想用一种更易于理解的方式来响应
阅读全文 »

本文是在了解了浏览器的同源规则之后,学习了破解这个规则的一个简单有效的方法->JSONP。主要通过阮一峰老师的博客学习

浏览器的同源规则

  • 有这样一个背景,如果你通过银行的网站进行的取钱的交易,而其他用户可以通过某个渠道获得你在银行网站的信息,那将是很可怕的。

阅读全文 »

记录一下安装node-sass的过程.关于CSS是不是一门编程语言,这里不讨论,但是它没有变量 语句 函数(反正我觉得他不是编程语言).于是程序员们发明了CSS预处理器(css preprocessor),它是一种专门的编程语言,可以使用你会的基本的编程知识进行编程,然后再转化成css文件.

12月更新

本次重新安装node-sass是因为电脑换了固态重装系统了,在新系统下很长时间内没有用过sass,一切都是那个风平浪静,直到11月的最后一晚,想折腾一下博客,看到一个好看的主题,这个主题需要安装两个插件,其中有一个需要node-sass的加持。

$ git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
$ npm install hexo-renderer-pug --save
$ npm install hexo-renderer-sass --save  #就是这货

不出意外的,国内不采取特殊途径,hexo-renderer-sass安装报错,根据log日志,很容易的发现,他需[email protected]支持,但是下载失败。

  1. 解决方案1:先在global下安装node-sass

    • 重装后我全是采用的nvm管理的node版本,所有的包都在.nvm目录下,避免权限不够的错误(或者采取分割线以下的阮一峰老师的方法避免包权限的问题)。
    • 配置.npmrc,先touch ~/.npmrc。这次直接采取node-sass官方推荐的方式npm install -g mirror-config-china --registry=http://registry.npm.taobao.org,所有的国内有问题的包全都避免了。
    • 结果竟然无法下载,log日志提醒我可能是代理的问题,可能是我的FQ的系统代理有问题,去控制台一看,果然SOCKETS 有个错误,尝试使用npm添加代理的方式,均告失败,毕竟以后也不能总靠代理过日子,这个方式不可取。这次想找个一劳永逸的方式彻底解决这个垃圾问题。
    • 终于发现了,直接使用下载好的Realease包去安装,先去node-sass主页下载系统需要的类型,这个完全可以解决系统不同的问题,很具用普适性。
    • 到底你的系统需要那个具体的包呢,这个就是最关键的了,我的方式是:先安装,失败后会提示你哪个版本的node包无法下载,这个时候再去下载这个包。通过如下代码去安装:
    npm i -g [email protected] --sass_binary_path=/home/wsl/Downloads/chromeDownloads/linux-x64-64_binding.node
    # path需要替换成你系统的那个包名字

    But我以为下载成功了,就万事大吉了呢,发现我真是太天真了。安装完后第一件事就是检验安装的包能不能用,node-sass -v一下,最不济出现个node-sass not found这种类似的初级错误啊,结果报了个无语的错误。

    找不到vendor目录

    这个目录是node-sass规定的

    node-sass-package.json

    为啥没有这个目录呢,因为通过 我采用的是设置本地下载路径,没有通过网上的下载。所以需要手动建立一个vendor目录(issues里面通过npm rebulid node-sass可以解决,但是我没生效),接着会报第二个新错误,这就很合理了,报错一点不可怕,能看懂并解决掉就很是进步。

找不到binding文件

新的错误是需要binding.node文件,刚才建立的vendor是个空目录所以找不到,在其内部建立二级目录,并把刚才下载的包改名为binding.node,即vendor/linux-X64-64/binding.node

至此,本地安装node-sass完毕,以后可以随便玩node-sass了,管你能不能翻墙,能不能设置镜像。

  1. 本来以为全局安装完毕就可以在博客目录下直接安装hexo-renderer-sass,竟然还是报错。没办法,在newBlog目录下又按照上述的方法安装了一个[email protected],因为hexo-render-sass需要4.10.0版本。最后终于成功了。

安装成功

分割线以下为传统解决方法,尤其针对Linux用户


介绍

主流的CSS预处理器有8种,我们今天介绍sass.它的官网,不过需要安装ruby.

阅读全文 »

本文探索一下Event的冒泡过程和初学遇到的几个小bug

DOM Event概述

Event接口是检测在DOM中的发生的所有事件,我们一直在用,而且从DOM的很早的版本就一直在用着。早期的网景(后来的火狐)和IE是各自为战,直到W3C一统江湖,DOM版本一路发展而来,经历了DOM-0(洪荒时代)、DOM-1(只有两章核心内容)、DOM-2(划时代的一个版本,我们学的Event就在这个版本,而且目前的用的也是这个版本)、DOM-3、DOM-4(草案阶段)。

阅读全文 »

  • 终于换到liunx啦

原生DOM接口挺多的,需要花点时间研究下,不过先把基础整好,后面框架估计好学点。

1. DOM是啥

1.1 知识回顾

先回顾一下HTML的基本结构

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
</head>
<body>
</body>
</html>

以上就是最简单的HTML 5的结构。一般我们会把它处理成一棵树,一棵节点树。

阅读全文 »

什么是函数

函数是对象的一种,也是一段可以重复使用的代码块,开发人员为了完成某项功能,把相关代码块放到一起。

函数内部可以传参,也可以被当做参数传递

阅读全文 »

学习任何编程语言,数组都是绕不过去的坎,每个编程语言都在其标准库里面内置了功能强大的Array对象。通过参考阮一峰教程和MDN,我把数组常见的方法以及一些误区总结如下,内容较多,而且会继续补充,希望这一篇文章可以把数组的知识一网打尽。

阅读全文 »