跳至主要內容

电商购物网站 - 实现注册

梁晨大约 6 分钟mongoosemongoosemongodbexpressnode.js

电商购物网站 - 实现注册

1、项目启动

简单启动

首先，新建一个项目工程目录，然后在目录下创建启动文件 app.js 。

这里会用到 Express 框架来实现相关功能，所以，需要先安装它。

在启动文件添加如下内容，来测试 Express 框架是否引用成功。

let express = require('express');
let app = express();
app.get('/', function (req, res) {
    res.send('Hello World!');
});
app.listen(80);

浏览器查看结果显示 "Hello World!" ，如收到响应信息则表明我们项目的第一步已经成功搞定。

2、创建目录

项目已经启动成功，下面我们开始创建相关目录，用于存储不同的文件。

  1. public 目录：存放静态文件。

  2. routes 目录：存放路由文件。

  3. views 目录： 存放页面文件。

  4. common 目录：存放公共文件。

  5. public 目录(可不选)，新建 javascripts 、 stylesheets 、 images 三个目录用以存储 js 、 css 、 img 相关文件。

这里我们内置了一些 js 、 css 文件来实现简单页面样式和操作，在页面视图中直接使用即可，引用方法如下：

<link href="example/css/bootstrap.min.css" rel="stylesheet" >    

<script src="example/js/jquery.min.js" type="text/javascript"></script> 

<script src="example/js/bootstrap.min.js" type="text/javascript"></script>

3、添加注册视图页面

添加文件

有了目录，我们开始添加文件，先来添加一个登录页面 register.html ，便于管理和开发，统一把视图页面放到 views 目录下。

views 目录，添加 register.html 注册视图页，如下简单效果图：

有了视图页面，我们就可以访问它了，那要如何访问呢，这里就要使用到 ejs 模板了，安装方法 npm install ejs --save ，引用如下：

app.set('view engine', 'html');
app.engine('.html', require('ejs').__express);

使用 engine 函数注册模板引擎并指定处理后缀名为 html 的文件。

设定视图存放的目录：

app.set('views', require('path').join(__dirname, 'views'));

如果是在本地项目中，我们还要指定本地静态资源访问的路径,如下设置：

app.use(express.static(require('path').join(__dirname, 'public')));

4、访问注册视图页面

访问注册页

有了视图页面，下面我们就开始访问它， app.js 文件部分内容，引入相关模块资源，然后简单访问如下：

app.get('/', function (req, res) {
    res.render('register');
});
app.listen(80);

启动访问 80 端口，如成功看到注册页面则表示项目已经运行成功，如未看到，查看相关错误信息，是否缺少相关模块，安装和引用即可。

5、定义user集合Schema

定义Schema

首先在 common 目录内添加 models.js 文件用来保存各个集合的 Schema 文件(集合属性)，也便于我们查看和访问，具体内容如下所示：

module.exports = {
    user: {
        name: {type: String, required: true},
        password: {type: String, required: true},
        gender: {type: Boolean, default: true}
    }
};

有了集合的 Schema 文件，如何访问呢，接着我们会介绍如何使用 Model 模型操作这些属性。

6、创建公共方法

还是 common 目录，我们在新建一个公共方法 —— dbHelper.js 文件，来操作这些 Schema ，因为后面还会涉及此问题，所以我们写成一个公共的方法， dbHelper 文件内容如下：

let mongoose = require('mongoose'),
    Schema = mongoose.Schema,
    models = require('./models');

for (let m in models) {
    mongoose.model(m, new Schema(models[m]));
}
module.exports = {
    getModel: function (type) {
        return _getModel(type);
    }
};
let _getModel = function (type) {
    return mongoose.model(type);
};

如上所示我们通过 getModel 可获取集合的 Model 模型就可以对数据库有实质性的操作了。

关于 Model ，简单介绍：由 Schema 构造生成的模型，具有数据库操作的行为。

7、添加注册页单击函数

添加函数

关于 dbHelper.js 文件里方法的访问很简单，如下所示：

global.dbHelper = require('./common/dbHelper');

这里我们使用 global 来定义全局变量 dbHelper ，那么 dbHelper 就可以在任何模块内调用了。

然后我们就开始修改 register 视图页面，添加单击事件，例如：

<input type="button" onclick="register()" value="注 册">

对应 register() 函数，大致如下：

function register() {
    //通过serialize()方法进行序列化表单值，创建文本字符串。
    var data = $("form").serialize();
    //例如："username=张三&password=12345"
    $.ajax({
        url: '/register',
        type: 'POST',
        data: data,
        success: function (data, status) {
            if (status == 'success') {
                location.href = 'register';
            }
        },
        error: function (res, err) {
            location.href = 'register';
        }
    })
}

8、添加注册页请求路由

添加路由

这里我们需要新建一个文件 register.js ，专门用来处理来自 register 页面的 post 请求， 在后面还会有多个不同处理文件，所以统一管理在 routes 目录下，在实际开发中我们可能需要针对不同文件请求给出相应文件的处理，所以我们就做分开处理。

这里 register.js 文件处理 get 和 post 请求的相关代码如下：

//app：express对象
module.exports = function (app) {
    app.get('/register', function (req, res) {
        res.render('register');
    });
    app.post('/register', function (req, res) {
        var User = global.dbHelper.getModel('user'),
            uname = req.body.uname;
        User.findOne({name: uname}, function (error, doc) {
            if (doc) {
                req.session.error = '用户名已存在！';
                res.send(500);
            } else {
                User.create({
                    name: uname,
                    password: req.body.upwd
                }, function (error, doc) {
                    if (error) {
                        res.send(500);
                    } else {
                        req.session.error = '用户名创建成功！';
                        res.send(200);
                    }
                })
            }
        })
    })
};

9、模块的加载和引用

register 的 post 请求处理中，我们使用了 session(express-session模块) 还有处理 post 请求数据的 body 属性( body-parser和multer模块 )，需先安装他们，然后引用即可，如下参考：

//引用模块
var bodyParser = require('body-parser');
var multer = require('multer');
var session = require('express-session');

//调用中间件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(multer());

后面还会再次添加多个路由记录，所以便于管理和访问，我们可以把他们统一放到一起，比如 routes 目录下新建 index.js 文件专门用来存放添加的文件，代码如下：

module.exports = function (app) {
    require('./register')(app);
};

那么我们在 app.js 文件中直接引用 index.js 文件就可以访问这些文件了，在 index.js 下写入：

require('./routes')(app);//app:express对象

10、中间件传递信息

这里我们就一步到位，在 register 的 post 请求处理中我们使用了 express-session模块 来保存相关信息，这里我们就使用中间件来传递这些提示信息，中间件内容如下所示：

app.use(function (req, res, next) {
    res.locals.user = req.session.user;//保存用户信息
    var err = req.session.error;//保存结果响应信息
    res.locals.message = '';//保存html标签
    if (err) {
        res.locals.message = '<div class="alert alert-danger" style="margin-bottom: 20px;color: red;">' + err + '</div>'
    } else {
        next();
    }
});

这里注意中间件的安放位置，还有我们设置了变量 message 并为其简单添加了样式，这里我们在 register 视图里就用它来作为操作结果的信息提示，直接添加 <%- message %> 到视图第一个 div 内即可。

关于注册我们基本已经准备就绪，开始打开连接数据库并设置用户过期时间(注意执行顺序，应放置在首个中间件位置)， app.js 条件内容如下：

mongoose.Promise=global.Promise;
mongoose.connect("mongodb://127.0.0.1/test");

app.use(session({
    secret: 'secret',
    cookie: {
        maxAge: 1000 * 60 * 30
    }
}));

到这里，注册功能已经完毕，在用户注册的信息录入中，我们没有进行相关的为空、两次密码的不匹配等等验证等等(可自行添加)，赶紧注册试试吧，本地的话可以通过 MongoVUE (可视化客户端)来查看数据是否成功写入数据库。

技术才是力量
Copyright © 2024 梁晨