Node.js + Express + mongodb 的博客项目之保持用户登录,区分管理员账户,及用户登出(四)

前言

在上一节中,完成了用户的注册与登录,但是并没有保持用户登录,一刷新浏览器登录状态就没有了。所以在本节内容中将实现用户登录状态的保持,同时进行普通用户与博客管理员的区别,并且实现用户登出接口。



Node.js + Express + mongodb 的博客项目之模板引擎的配置及用户登录、注册(三)

前言

在这一节中,我们将会进行模板引擎的配置,以及博客前台的界面设计、并且设计博客的用户数据结构及连接数据库,实现用户的注册、登录。写得比较的详细,所以篇幅会较长,



Node.js + Express + mongodb 的博客项目之初始化项目及安装依赖文件(二)

前言

在这一节中,将会初始化项目,并安装相关依赖模块,同时启动第一个服务。这是一切的开始,后面所做的一切都是在这个基础上添砖加瓦。



Node.js + Express + mongodb 的博客项目之前言(一)

前言

学习 Node.js 也有一段时间了,整个过程断断续续的,在学习过程中感觉内心还有点浮躁,所以就准备写一个 Node.js 的实战系列,让自己静下心来,同时这个过程也不断的巩固自己之前所学的知识,之后也方便自己进行知识回顾。



记一次 Node.js 的 formidable 模块上传文件时 files 为空的问题, 顺便整理下相关内容

前言

使用原生来写 POST 的处理, 比较复杂, 而且文件上传业务比较的难写, 所以肯定有人造好了相关的轮子, 也就是 Node.js 的第三方模块 formidable , 使用 formidable 当做中间件用来处理文件上传非常方便, 而且可以配合其他模块对文件进行相应的命名。
不过在对 formidable 学习过程中出现了一个问题, 就是上传文件时, form.parse() 回调函数中 files 对象是个空对象。 就排查了挺久, 然后就以为问题是出在服务器端的代码上, 百度上关于这个问题也是寥寥无几, 众说纷纭。 没想到最后是前台页面 form 表单的问题, 也就是在 <\form> 标签中我少写了一个 enctype 属性, 在使用包含文件上传控件的表单时,必须使用 enctype=”multipart/form-data” 也就是不对字符进行编码。



对第四种布局 flex 弹性盒子布局的总结

谈谈 flex

flex 是 css3 中新增的一种布局方式,也就是弹性盒模型布局。弹性盒子中子元素可以在各个方向上进行布局,并且能以弹性尺寸来适应空间。

而之前 css 标准中为我们提供了 3 中布局方案,也就是标准文档流布局、浮动布局、和定位布局。这几种布局方式搭配,可以搞定布局上常见的需求,但比如水平居中,和垂直居中,采用定位布局的方式,它不够语义化,并且不够灵活。所以在这种情况下,第 4 种布局方式:flex 布局就诞生了。它可以设置一个属性就能实现居中,并且可以随着窗口的缩放自适应。

使用 flex 布局的话,首先需要设置父元素的 display 的值为 flex 或 inline-flex,也就是定义一个弹性容器。flex 的核心概念就是 容器,容器包含外层的父容器和内层的子容器,轴包括主轴交叉轴,可以说 flex 布局的特性全都构建在这两个概念上。flex 布局涉及的 css 属性除了 display 的值为 flex 和 inline-flex 外,共有 12 个属性,其中,父容器和子容器各 6 个。不过,常用的属性只有 4 个,子容器和父容器各 2 个。


JavaScript 中的继承总结

前言

由于 JavaScript 并不是那些“传统意义上”的面向对象的语言, 它在 ES5 中并没有类的概念, 没有真正意义上的继承, 但我们去可以进行模拟, 来实现所谓的继承。
在 JavaScript 中, 实现继承的过程中总感觉很有趣, 至少在 ES5 中是这样的, ES5 中自己亲自要通过原型链去实现继承, 而在 ES6 中则将这些需要自己写的封装成了一个接口, 其本质上还是一样, 都是通过原型链实现继承。



谈谈 JS 中 __proto__ 和 prototype

前言

关系图
在学习 JavaScript 的过程中, 深感这门语言的一些奇葩设定, 在学习 __proto__ 和 prototype 时, 遇到了一些困惑, 思考了挺久也查阅了很多资料, 于是写了这篇博客来记录。



JavaScript 数组对象 Array

前言

在 JavaScript 中引用类型除了 Object 外,最常用的恐怕就是 数组 Array 了。 都说 JavaScript 中万物基于对象(但我觉得这句话有些时候也是有些坑的), 所以 Array 对象也有很多它内置的方法。
JavaScript 是弱类型语言, 所以我们不用声明就可以直接使用了, 但这样是比较不推荐的。 JavaScript 中的数组也是个有序列表, 但和其他语言有所不同的是, JavaScript 数组中的每一项都可以保存任何类型的数据。 有点像 Python 中的列表, 我们可以用数组中的第一项保存一个数字, 第二项保存一个字符串, 而第三项可以保存一个 Object, 没有任何限制。 并且其数组大小是动态调整的, 可以随数据增长而自动增大数组大小。



关于 HTML5 中 CSS 设置 Canvas 画布的大小所遇到的问题

前言

在学习 HTML5 的 Canvas 标签时, 看了文档后, 自己写了一下, 发现遇到了一个问题。
当我想改变画布的的大小的时候, 通常想到的是通过 CSS 样式来改变, 如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
#test-canvas {
width: 300px;
height: 300px;
background-color: #ccc;
}
</style>

<canvas id="test-canvas">
<p>你的浏览器不支持Canvas</p>
</canvas>

<script>
var canvas = document.getElementById("test-canvas");
// 拿到CanvasRenderingContext2D对象
var ctx = canvas.getContext("2d");
// 绘制一个边长为100像素的张方形
ctx.strokeRect(0, 0, 100, 100);
</script>


Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×