引子
- 上一篇主要讲解了本项目开发使用的数据库
MongoDb
,MongoDB 的可视化管理工具Robomongo
,MongoDB 的驱动库Mongolass
,已经具备了功能开发的基本条件。 - 本篇我主要讲解用户注册功能的开发。
目录结构
目录说明
对应的主要文件及文件夹用处如下说明:
- app.js: 程序主文件
- models: 存放操作数据库的文件
- package.json: 存储项目名称、描述信息、作者、依赖等等信息
- public: 存放静态文件,如样式、图片等
- routes: 存放路由文件
- views: 存放模板文件
Tip
我们遵循了MVC的开发模式:
config-lite
config-lite
模块正是你需要的。关于config-lite
的介绍和使用可以点这里: config-lite 。
config-lite 会根据环境变量(NODE_ENV)的不同从当前执行进程目录下的 config 目录加载不同的配置文件。如果不设置 NODE_ENV,则读取默认的 default 配置文件,如果设置了 NODE_ENV,则会合并指定的配置文件和 default 配置文件作为配置,config-lite 支持 .js、.json、.node、.yml、.yaml 后缀的文件。
安装config-lite
|
|
即可。
建配置文件
在根目录下面,新建config/default.js文件,代码如下:
参数解释:
- port: 程序启动时要监听的端口号
- session:express-session 的配置信息,后面会介绍
mongodb:mongodb 的地址,myblog 为 db 名
express-session
由于 HTTP 协议是无状态的协议,所以服务端需要记录用户的状态时,就需要用某种机制来识别具体的用户,这个机制就是会话(Session)。关于会话(Session)的介绍在网上有比较多的资料,大家可以自行查找。
我们通过引入
express-session
中间件来实现对会话的支持。安装
express-session
1npm i express-session --save使用
express-session
12var session = require('express-session')app.use(session(options))使用给出的配置项来创建一个会话中间件。
更多关于options的详细参数可以看API。
解释
session 中间件会在 req 上添加 session 对象,即 req.session 初始值为 {},当我们登录后设置 req.session.user = 用户信息,返回浏览器的头信息中会带上 set-cookie 将 session id 写到浏览器 cookie 中,那么该用户下次请求时,通过带上来的 cookie 中的 session id 我们就可以查找到该用户,并将用户信息保存到 req.session.user。
express-formidable
我们的注册功能里要求想要注册的用户必须上传头像,所以用到了上传功能。
Express
是一个快速的,不收约束的,简约的nodejs的web框架;Formidable
是一个解析表单数据的nodejs模块,包括多部分/格式文件上传;所以,
express-formidable
是他们之前的一座桥梁,是一个强大的Express
中间件使用express-formidable
1234567891011const express = require('express');const formidable = require('express-formidable');var app = express();app.use(formidable());app.post('/upload', (req, res) => {req.fields; // contains non-file fieldsreq.files; // contains files});不包含文件的字段值使用 req.fields来接收;
文件字段的值使用req.files来接收;
配置项
1app.use(formidable(opts));例如:
12345app.use(formidable({encoding: 'utf-8',uploadDir: '/my/dir',multiples: true, // req.files to be arrays of files});注:想了解更多,可以点击这里。
用户模型设计
用户注册时,需要的字段有:
- 用户名
- 用户密码
- 用户确认密码
- 用户性别
- 用户微博头像
用户简介
在了解了基本字段后,我们在lib/mongo.js里添加如下代码:
123456789// 用户模型设计exports.User = mongolass.model('User',{name : {type : 'string'},password : {type : 'string'},gender : {type : 'string',enum : ['m','f','x']},avatar : {type : 'string'},intro : {type : 'string'}});exports.User.index({ name : 1},{unique : true}).exec(); // 根据用户名找到用户,用户名全局唯一说明
- 我们创建了用户的schema
- 生成并导出了User这个model
设置name为唯一索引,防止用户名重复
摞代码
好了,到这一步,差不多该准备的工作都准备完了,那么就开始到编码阶段。
用户注册页
在views/reg.js里添加如下代码:
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071<%- include('header') %><form class="well form-horizontal" method="post" enctype="multipart/form-data"><fieldset><legend>用户注册</legend><div class="form-group" style="padding-left:15px"><div style="float:left"><label class="control-label" for="name">用户名</label></div><p class="text-danger" style="color:red">*</p><div class="controls"><input type="form-control" class="form-control" id="name" name="name"style="width:20%;" placeholder="用户名"><p class="help-block">你的帐号的名称,用于登录和显示</p></div></div><div class="form-group" style="padding-left:15px"><div style="float:left"><label class="control-label" for="password">密码</label></div><p class="text-danger" style="color:red">*</p><div class="controls"><input type="password" class="form-control" id="password" name="password"style="width:20%;" placeholder="密码"></div></div><div class="form-group" style="padding-left:15px"><div style="float:left"><label class="control-label" for="repassword">重复密码</label></div><p class="text-danger" style="color:red">*</p><div class="controls"><input type="password" class="form-control" id="repassword" name="repassword"style="width:20%;" placeholder="再次输入密码"></div></div><div class="form-group" style="padding-left:15px"><div style="float:left"><label class="control-label" for="gender">性别</label></div><p class="text-danger" style="color:red">*</p><div class="controls"><select class="form-control" name="gender" style="width:20%"><option value="m">男</option><option value="f">女</option><option value="x">保密</option></select></div></div><div class="form-group" style="padding-left:15px"><div style="float:left"><label class="control-label" for="exampleInputFile">头像</label></div><p class="text-danger" style="color:red">*</p><div class="controls"><input type="file" id="exampleInputFile" name= "avatar"></div></div><div class="form-group" style="padding-left:15px"><div style="float:left"><label class="control-label" for="introduction">简介</label></div><p class="text-danger" style="color:red">*</p><div class="controls"><textarea class="form-control" rows="5" id="introduction" name="intro"style="width:60%"></textarea></div></div><button type="submit" class="btn btn-primary">注册</button></fieldset></form><% include footer.ejs %>路由文件
在routes目录下新建reg.js文件,代码如下:
123456// 用户注册router.get('/',function (req, res, next) {res.render('reg', {title: '用户注册'});});现在访问:localhost:3000/reg 可以看到用户注册页的效果了,如下图:
未完待续,敬请关注