从无到有,用Nodejs+express+mongodb搭建简易登陆系统

前端处理server表示很蛋疼,初学Node,虽然感觉异常强大,但是学起来还是有些吃力的,Node是工具,它不是万能的,搭建一个系统还是需要借助其他一些工具,对于我这个没怎么接触server的前端来说,挑战是有的。昨天参考一些资料尝试用Node+express+mongodb搭建一个简易的登陆系统,在此记之。

express是一个灵活的nodejs web应用框架, 提供一系列强大特性帮助你创建各种Web应用。

Mongodb是数据库。

1、安装express,express安装比较简单,直接用npm install -g express-generator,一定要用这个,如果用npm install -g express就会出现express not found的问题。

2、安装mongodb, 在官网下下在程序,然后一步步安装,我是在D盘新建一个Mongodb的文件夹,安装在该文件夹内。

3、将安装文件目录下bin下面的文件复制到Mongodb根目录。

4、启动mongodb,cmd中命令如下:

如果看到下面的内容,恭喜启动成功。最好建一个cmd文件,每次启动运行该文件即可。

mongodb.cmd文件:

:: 定位到D盘
d:

:: 切换到mongodb的数据库目录
cd Mongodb

:: 删除数据库锁定记录文件
if exist mongod.lock del mongod.lock missing

:: 配置mongodb的文档存储目录
mongod --dbpath "D:\Mongodb\data"

5、在Mongodb目录下运行mongo,默认链接到test

到这里整个环境配置完毕并且已经启动。

下面看具体的Node。

安装完express后在某个目录下运行express Login -e就会自动创建一个项目,然后npm install会下载依赖包。

1、新建一个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集合关联

2、在views下面建index.ejs, errors.ejs, login.ejs, logout.ejs, homepage.ejs。 (index是自带的,不用建)

index.ejs:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Welcome to <%= title %></p>
    <p><a href="login">登陆</a></p>
  </body>
</html>

login.ejs:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Welcome to <%= title %></p>
    <form action="homepage" method="post">
        <p>
            <span>userId:</span>
            <br>
            <input id="userid" name="userid" type="text">
        </p>
        <p>
            <span>password:</span>
            <br>
            <input id="password" name="password" type="password">
        </p>
        <p><input type="submit" value="submit"></p>
    </form>
  </body>
</html>

loginout.ejs:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Welcome to <%= title %></p>
    <p>正在登出...</p>
    <script type="text/javascript">
        setTimeout(function(){
            window.location.href = "/";
        }, 500);
    </script>
  </body>
</html>

homepage.ejs:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Welcome to <%= title %></p>
    <p><a href="logout">登出</a></p>
  </body>
</html>

3、在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后在Login项目下运行npm start。然后在浏览器输入https://localhost:3000就能看到界面了:

漏了一点,需要在mongodb创建用户名和密码,不然没法登陆进去。步骤如下:

时间: 2024-08-24 12:28:57

从无到有,用Nodejs+express+mongodb搭建简易登陆系统的相关文章

使用nodejs+express+mongodb开发web的例子

介绍:简单的介绍下nodejs+express+mongodb这三者. nodejs:是运行在服务器端的程序语言,表面上看过去就是javascript一样的东西,实际是由c++开发是服务器语言. express:是nodejs的一种web框架,node有很多的开源框架,express是一个大神开发的(这尊神已经移驾到go语言的开发去了).express可以让你更方便的操作node(因为直接用nodejs写web比较麻烦,nodejs是事件驱动的,所以有很多异步回调,写多了就看着晕...) mon

【重点突破】—— Nodejs+Express+MongoDB的使用基础

前言:最近学习vue和react的高阶项目,都需要和Nodejs+Express+MongoDB结合实现全栈开发.这里结合实例Demo和所学项目集中总结一下这部分服务端的基础知识. 一.Express+mongodb开发web后台接口Demo Express开发web接口 Express:基于nodejs,快速.开放.极简的web开发框架  [官网] 安装express npm install express --save 新建server目录:server.js编写后端代码 const exp

nodeJS+Express+MongoDB

目录 一.MongoDB 1.1.安装MongoDB 1.1.1.配置运行环境 1.1.2.运行MongoDB 1.2.数据库操作 1.2.1.创建数据库与查看数据库 1.2.2.删除数据库 1.2.3.插入数据 1.2.4.查询数据 1.2.5.修改 1.2.6.删除 二.NodeJS访问MongoDB 2.1.安装MongoDB访问驱动 2.2.添加数据 2.3.修改数据 2.4.查询数据 2.5.删除数据 三.NodeJS+Express+MongoDB示例 四.示例下载 一.MongoD

React第六篇: 搭建React + Router + antd + nodejs + express框架搭建(nodejs做前后端server)

前提: nodejs >= 10.0;  这里不推荐用官网的yarn安装antd的模块,因为后续会出错,错误如图: 也不推荐用npx方法来搭建react骨架,也会出错,让我们开始吧!!   前端React+Antd框架搭建 1.安装并启动create-react-app骨架应用 打开cmd按顺序执行以下指令: npm install -g create-react-app   (全局安装create-react-app, 默认会安装在C盘个人用户下) create-react-app my-ap

【转】nodejs+express+mongodb简单的例子

简单的介绍下node+express+mongodb这三个东西.node:是运行在服务器端的程序语言,表面上看过去就是javascript一样的东西,但是呢,确实就是服务器语言,个人觉得在一定层次上比c灵活,java就不提了.反正你只要认为node可以干很多事就行了,绝对不只是web开发.express:这货呢,就是node的一种框架,node有很多的开源框架,express是一个大神开发的(这尊神已经移驾到go语言的开发去了).express可以让你更方便的操作node(因为原生的node写起

nodejs+express+mongodb简单的例子

简单的介绍下node+express+mongodb这三个东西.node:是运行在服务器端的程序语言,表面上看过去就是javascript一样的东西,但是呢,确实就是服务器语言,个人觉得在一定层次上比c灵活,java就不提了.反正你只要认为node可以干很多事就行了,绝对不只是web开发.express:这货呢,就是node的一种框架,node有很多的开源框架,express是一个大神开发的(这尊神已经移驾到go语言的开发去了).express可以让你更方便的操作node(因为原生的node写起

vue+express+mongodb搭建移动端网站

从零开始一步步搭建移动端网站,持续更新,github代码如下,因为放了视频文件,下载可能有点慢,记得点星星~ https://github.com/lanleilin/myHomepage 前端采用Vue2+vuex+vue-cli全家桶搭建,后端采用nodejs+express,数据库采用mongodb.使用部分豆瓣API 下载好后,安装模块,npm国外的网站较慢,建议采用cnpm国内镜像: npm install -g cnpm --registry=https://registry.npm

2015年12月12 Node.js实战(一)使用Express+MongoDB搭建多人博客

序,Node是基于V8引擎的服务器端脚本语言. 基础准备 Node.js: Express:本文用的是3.21.2版本,目前最新版本为4.13.3,Express4和Express3还是有较大区别,可以去官网查看wiki:https://github.com/strongloop/express MongoDB: 一.使用Express搭建一个站点 1 快速开始安装Express Express是Node上最流行的Web开发框架,通过它可以快速开发一个Web应用.全局模式下输入命令: $ npm

基于NodeJS+Express+mongoDB+Bootstrap的全栈式工程化开发前后端分离博客系统实战

课程目标本课程通过一个完整的项目,让学员了解如何使用Jade+Node.js+Express+mongoDB+Bower+Gulp+Yeoman的组合开发Web应用.可以让学员更深入地掌握Node.js和Express技术. 适用人群node.js程序员,express程序员,JAVAscript程序员 课程简介本系统是一款博客系统,拥有博客必要的功能,如用户注册.用户登录.用户退出.文章列表,文章查看.添加文章,删除文章,修改文章.文章搜索.后台权限控制等. -----------------