mongoDB入门教程五：搭建一个简单的登陆注册界面

王小婷

发布于 2025-05-18 16:11:29

3380

一：数据库开启开始连接连接MongoDB

1：打开一个cmd窗口(右键以管理员身份)来运行mongo.exe。同样打开bin文件，执行mongo.exe

cd\
cd Program Files\MongoDB\Server\4.0\bin

2：输入连接命令

mongo

3:我们的连接链接： connecting to: mongodb://127.0.0.1:27017 来到浏览器测试一下 http://localhost:27017 当然了，可以设置每次开机自动连接数据库。

二：项目创建及其运行

1：初始化一个项目进入D盘，使用命令，开始创建一个项目

d:
express loginproject  -e

项目创建成功

我们可以看见D盘多了一个刚刚的项目文件夹

2：执行提示命令，进入项目，在项目里面安装相关依赖，把项目跑起来

cd loginproject
npm install
npm start

可以发现项目里面多出了两个自动生成的依赖文件

启动命令：npm start

3:打开浏览器，输入：http://localhost:3000/，可以访问到初始项目

三：打开项目，了解项目目录开始写页面代码

1：查看项目自动生成的目录

简单的介绍一下啊

项目创建成功之后，生成四个文件夹，主文件app.js与配置信息文件packetage.json

bin是项目的启动文件，配置以什么方式启动项目，默认 npm start

public是项目的静态文件，放置js css img等文件

routes是项目的路由信息文件,控制地址路由

views是视图文件，放置模板文件ejs或jade等（其实就相当于html形式文件啦~)

express这样的MVC框架模式，是一个Web项目的基本构成。

2：开始写一些简单的界面代码，在views下面建一些需要用到的界面，所有代码就不一一的展示了，有兴趣的可以去我的github上面下载一下。

3：新建一个models文件夹，在该文件夹下新建user.js并且写好代码

var mongoose = require("mongoose");  //  顶会议用户组件
var Schema = mongoose.Schema;    //  创建模型
var userScheMa = new Schema({
    userid: String,
    password: String
}); //  定义了一个新的模型，但是此模式还未和users集合有关联
exports.user = mongoose.model('users', userScheMa); //  与users集合关联

4:：在routes目下的index.js配置路由：

var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var user = require('../models/user').user;
mongoose.connect('mongodb://localhost/admin');
 
/* GET home page. */
router.get('/', function(req, res) {
      res.render('index', { title: 'index' });
});
 
/*login*/
router.get('/login', function(req, res) {
    res.render('login', { title: 'login' });
});
 
/*logout*/
router.get('/logout', function(req, res) {
      res.render('logout', { title: 'logout' });
});
 
/*hompage*/
router.post('/homepage', function(req, res) {
    var query_doc = {userid: req.body.userid, password: req.body.password};
    (function(){
        user.count(query_doc, function(err, doc){
            if(doc == 1){
                console.log(query_doc.userid + ": login success in " + new Date());
                res.render('homepage', { title: 'homepage' });
            }else{
                console.log(query_doc.userid + ": login failed in " + new Date());
                res.redirect('/');
            }
        });
    })(query_doc);
});
 
module.exports = router;

好了

四：在mongoDB数据库里面创建用户名和密码

use admin
//插入用户名和密码
db.users.insert({userid:"super",password:"123"})
//查看所有
db.users.find()

在插入一个用户名和密码，这两个用户名密码都可以登陆。

db.users.insert({userid:"admin",password:"123456"})

打开可视化工具可以看到创建的用户名密码

五：一切准备就绪，回到浏览器，查看效果

从登陆界面登陆进去，再退出来，一套流程就是如此。css就不写了，时间不多，如果感兴趣的可以自己写。

项目github地址：https://github.com/wangxiaoting666/loginproject

原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019-01-09，如有侵权请联系 cloudcommunity@tencent.com 删除

配置

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度