从nodejs小白到结合mongoDB，express的移动端小项目制作

关注

原创最新推荐文章于 2026-04-08 10:33:43 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

Node.js+Express+MongoDB从零实现博客管理系统全栈实战在Web开发中，选择合适的技术栈是构建可靠应用的基础。Node.js以其事件驱动和非阻塞I/O模型，成为处理高并发请求的理想运行时；Express作为经典Web框架，通过中间件机制让HTTP请求处理链路清晰可控；MongoDB的文档模型则与内容型数据天然契合，减少Join开销。三者组合构成了轻量级Web应用的黄金技术栈。从环境配置到数据库设计，从分页搜索到Session与JWT认证，每个环节都蕴含着可复用的工程实践。以博客管理系统为实战载体，可以完整覆盖增删改查、分类标签、登录鉴权等典型场景，帮助开发者打通阅读详情

分享自己如何从小白了解node，感谢nswbmw大神github上https://github.com/nswbmw/N-blog这一项目让小白可以搭建数据库跑起一个简单项目。直接进入本人学习心得，自己学了大神github项目后大概整理了一个快速学习版，希望能帮助到跟我一样node不知道如何入手的，整个node搭建流程如下

(ps：期间对express的封装突然疑惑了下，疑问express的封装原理等，具体疑问跟解答链接为下，有兴趣可以点击看下https://www.jianshu.com/p/797a4e38fe77，https://cnodejs.org/topic/5396cd60c3ee0b5820f00e2a，https://nodejs.org/dist/latest-v8.x/docs/api/http.html，https://www.cnblogs.com/dabinglian/p/6874290.html）

一、MongoDB安装和启动

1、mongoDB的安装https://www.mongodb.com/download-center#community

2、启动mongoDB(本人安装在了d盘下的MongDB目录，启动前需要在mongodb下新建一个data目录)

window+R启动命令窗口，执行下列命令

二、上面两个步骤启动MongoDB数据库后就是项目搭建，我们搭建一个express框架，接下来的流程均为参考nswbmw大神进行浓缩。

1、新建项目

(1)安装淘宝镜像

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
(2)新建目录e-own,用gitbash直接进入目录，执行

新建好后，手动添加到目录结构如下

models: 存放操作数据库的文件
public: 存放静态文件，如样式、图片等
routes: 存放路由文件
views: 存放模板文件
index.js: 程序主文件
package.json: 存储项目名、描述、作者、依赖等等信息

(3)安装依赖模块

npm i config-lite connect-flash connect-mongo ejs express express-session marked moment mongolass objectid-to-timestamp sha1 winston express-winston --save
npm i https://github.com:utatti/express-formidable.git --save # 从 GitHub 安装 express-formidable 最新版，v1.0.0 有 bug

express: web 框架
express-session: session 中间件
connect-mongo: 将 session 存储于 mongodb，结合 express-session 使用
connect-flash: 页面通知的中间件，基于 session 实现
ejs: 模板
express-formidable: 接收表单及文件上传的中间件
config-lite: 读取配置文件
marked: markdown 解析
moment: 时间格式化
mongolass: mongodb 驱动
objectid-to-timestamp: 根据 ObjectId 生成时间戳
sha1: sha1 加密，用于密码加密
winston: 日志
express-winston: express 的 winston 日志中间件

(4)config/default.js

module.exports = {
  port:3001,
  session:{
    secret:'own',
    key:'own',
    maxAge:2592000000
  },
  mongodb:'mongodb://localhost:27017/own'
}

port: 程序启动要监听的端口号
session: express-session 的配置信息，后面介绍
mongodb: mongodb 的地址，以 mongodb:// 协议开头，myblog 为 db 名

(5)路由(routes/index.js)

module.exports = function(app){
  app.get('/',function(req,res){
    res.send('hello,this is a simple test');
  })
}

(6)项目启动文件index.js(该文件设置了session存储位置，路由，模版引擎)

const path = require('path')
const express = require("express")

const session = require('express-session')
//connect-mongo用于将session持久化到mongodb数据库
const MongoStore = require('connect-mongo')(session)

//flash报错框(flash 中间件应该放到 session 中间件之后加载，因为 flash 是基于 session 实现的。)
const flash = require('connect-flash')

const config = require('config-lite')(__dirname)//读取config下default.js配置项
const routes = require('./routes')
const pkg = require('./package')
const app = express()

//设置模板目录
app.set('views',path.join(__dirname,'views'))
//设置模板引擎为ejs
app.set('view engine','ejs')

//设置静态文件目录
app.use(express.static(path.join(__dirname,'public')))

//session中间件
app.use(session({
  name:config.session.key,//设置cookie中保存session id 的字段名字
  secret:config.session.secret,//通过设置secret来计算hash值并放在cookie中，使产生的signedCookie防篡改
  resave:true,//强制更新
  saveUninitialized:false,//设置为false,强制创建一个session，即使用户未登录
  cookie:{
    maxAge:config.session.maxAge//过期时间，过期后cookie中的sessionid删除
  },
  store:new MongoStore({
    url:config.mongodb
  })
}))
//flash中间件
app.use(flash())
//路由
routes(app)

// 监听端口，启动程序
app.listen(config.port, function () {
  console.log(`${pkg.name} listening on port ${config.port}`)
})

上面几个配置好后，确保已经开启Mongodb的同时在进入e-own目录下下面命令启动项目

在浏览器中输入网址localhost:3001,查看到界面如下，则可继续进行下一步，否则请确保程序正确运行后再继续下面的操作。

三、上面的简单的三步骤只是简单的进行页面跳转，接着我们以实现登录注册为例子，通过连接数据库跟操作数据跟界面的搭建基本的了解整个流程

checkLogin: 当用户信息（req.session.user）不存在，即认为用户没有登录，则跳转到登录页，同时显示 未登录 的通知，用于需要用户登录才能操作的页面
checkNotLogin: 当用户信息（req.session.user）存在，即认为用户已经登录，则跳转到之前的页面，同时显示 已登录的通知，如已登录用户就禁止访问登录、注册页面

（1）路由设置routes/index.js(打开页面后直接进入登录页)

module.exports = function(app){
  app.get('/',function(req,res){
    res.redirect('/signin')
  })
  app.use('/signin',require('./signin'))
}

routes/signin.js

const express = require('express');
const router = express.Router()


//get/signin登录页
router.get('/',checkNotLogin,function(req,res,next){
  res.render('signin')
})

module.exports = router;

signin.js中res.render（'signin')用户渲染界面，index.js下通过app.set("views",path.join(__dirname,'views'))。app.set('view engine','ejs')设置了模板引擎为ejs，模板目录，app.use(express.static(path.join(__dirname,'public')))指定了静态文件目录，直接上本人的signin.ejs代码，个人比较想通过nodejs制作一个移动端项目，因此引入rem.js跟reset.css

(views/header.ejs)

<!--移动端项目，头部需引入rem.js跟样式重置文件-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <title><%= blog.title %></title>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/font/iconfont.css">
    <link rel="stylesheet" href="/css/custom.css">
    <script src="/js/rem.js"></script>
  </head>
  <body>

(views/footer.ejs)

</body>
</html>

(views/signin.ejs)

<%- include('header') %>
<div class="login-content">
  <div class="logo-content">
      <div><img src="/img/logo.png"></div>
      <div class="login-title">HAPPY 一起</div>
  </div>
  <form action="" method="post">
    <div class="input-content"><input type="text" class="input-radius" placeholder="请输入邮箱或手机号" name="name"></div>
    <div class="input-content"><input type="password" class="input-radius" placeholder="请输入密码" name="password"></div>
    <a style="float:right;color:#fff;font-size:1.5rem;cursor:pointer;" href="">无账号,点击注册>></a>
    <input type="submit" class="ui button fluid btn-login" value="登录">
  </form>
</div>
<%- include('footer') %>

public/css/custom.css

/*登录页面样式*/
.login-content{
  /*背景渐变*/
  background:#d4a112;
  background: -webkit-gradient(linear, left top,left bottom, color-stop(0, rgb(231, 194, 194)),
  color-stop(1, #d4a112));
  background: -ms-linear-gradient(right, #F5DA91, #d4a112);
  background: -o-linear-gradient( #F5DA91, #d4a112);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5DA91', endColorstr
  ='#d4a112', GradientType=0);
  box-shadow: none;
  text-align:center;
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  padding:0 10%;
}
.logo-content{
  text-align:center;  
  padding:7rem 0;
}
.login-title{
  color:#fff;
  font-size:3rem;
}
.input-content{
  line-height:7rem;
  text-align: center;
}
.input-radius{
  width:100%;
  height:4rem;
  padding:0.3rem;
  font-size:1.5rem;
  margin:0 auto;
  border-radius:10px;
  border:1px solid #fff;
}
.btn-login{
  width:100%;
  height:5rem;
  margin-top:5rem;
  text-align:center;
  font-size:2rem;
  color:#fff;
  border-radius:10px;
  outline:none;
  background-color:#DF7614;
  border:none;
}

public/css/reset.css

@charset 'utf-8';

html{color:#000;background:#FFF;font-family:'Microsoft YaHei',sans-serif,Arial;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,strong{padding:0;margin:0;font-family:'Microsoft YaHei',sans-serif,Arial;}
table{border-collapse:collapse;border-spacing:0;}img{border:0;}a{text-decoration:none; color:#000; outline:none;}a:hover{text-decoration:underline;}
var,em,strong{font-style:normal;}
em,strong,th,var{font-style:inherit;font-weight:inherit;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style: inherit;font-weight:inherit;}

input,button,textarea,select{*font-size:100%;}

.clearfix {*zoom:1}
.clearfix:after {content:'\200B';clear:both;display:block;height:0px}

public/js/rem.js

(function (doc, win) {
  console.log("dpr:" + win.devicePixelRatio);
  var docEle = doc.documentElement,
      isIos = navigator.userAgent.match(/iphone|ipod|ipad/gi),
      dpr = Math.min(win.devicePixelRatio, 3);
  scale = 1 / dpr,

      resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';
  docEle.dataset.dpr = dpr;

  var metaEle = doc.createElement('meta');
  metaEle.name = 'viewport';
  metaEle.content = 'user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale;
  docEle.firstElementChild.appendChild(metaEle);

  var recalCulate = function () {
      var width = docEle.clientWidth;
      if (width / dpr > 640) {
          width = 640 * dpr;
      }
      docEle.style.fontSize = 20 * width / 750 + 'px';

  };

  recalCulate();
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvent, recalCulate, false);
})(document, window);

上面文件确保正确后，确保mongodb开启的同时进入文件目录执行node index即可得到下图登录页

点击登录，需验证账号密码是否已填，填写后需请求数据库是否存在该用户，若存在这进入主页，若不存在则进入注册页面，该逻辑在sigin.js里路由进行处理

routes/signin.js

const sha1 = require('sha1')
const express = require('express')
const router = express.Router()

const UserModel = require('../models/users')
const checkNotLogin = require('../middlewares/check').checkNotLogin

// GET /signin 登录页
router.get('/', checkNotLogin, function (req, res, next) {
  res.render('signin')
})

// POST /signin 用户登录
router.post('/', checkNotLogin, function (req, res, next) {
  const name = req.fields.name
  const password = req.fields.password

  // 校验参数
  try {
    if (!name.length) {
      throw new Error('请填写用户名')
    }
    if (!password.length) {
      throw new Error('请填写密码')
    }
  } catch (e) {
    req.flash('error', e.message)
    return res.redirect('back')
  }

  UserModel.getUserByName(name)
    .then(function (user) {
      if (!user) {
        req.flash('error', '用户不存在')
        return res.redirect('back')
      }
      // 检查密码是否匹配
      if (sha1(password) !== user.password) {
        req.flash('error', '用户名或密码错误')
        return res.redirect('back')
      }
      req.flash('success', '登录成功')
      // 用户信息写入 session
      delete user.password
      req.session.user = user
      // 跳转到主页
      res.redirect('/posts')
    })
    .catch(next)
})

module.exports = router

上面通过mongodb查询数据库，接着便进入数据库的相关操作，lib/mongo.js链接数据库并建立User集合

lib/mongo.js

const config = require('config-lite')(__dirname)
const Mongolass = require("mongolass")
const mongolass = new Mongolass()
const moment = require('moment')
const objectIdToTimestamp = require("objectid-to-timestamp")

//根据id生成创建时间created_at
mongolass.plugin("addCreatedAt",{
  afterFind:function(results){
    results.forEach(function(item){
      item.created_at = moment(objectIdToTimestamp(item._id)).format("YYYY-MM-DD HH:mm")
    })
    return result
  },
  afterFindOne:function(result){
    if(result){
      result.created_at = moment(objectIdToTimestamp(item._id)).format("YYYY-MM-DD HH:mm")
    }
    return result
  }
})
mongolass.connect(config.mongodb)
exports.User = mongolass.model('User', {
    name: { type: 'string', required: true },
    password: { type: 'string', required: true },
    avatar: { type: 'string', required: true },
    gender: { type: 'string', enum: ['m', 'f', 'x'], default: 'x' },
    bio: { type: 'string', required: true }
  })
  exports.User.index({ name: 1 }, { unique: true }).exec()// 根据用户名找到用户，用户名全局唯一

对数据库的创建查询方法在models文件夹下处理

models/users.js


const User = require('../lib/mongo').User

module.exports = {
  // 注册一个用户
  create: function create (user) {
    return User.create(user).exec()
  },

  // 通过用户名获取用户信息
  getUserByName: function getUserByName (name) {
    return User
      .findOne({ name: name })
      .addCreatedAt()
      .exec()
  }
}

至此，我们已经实现了登录后进入主页的流程，其他流程类比一下登录页，创建数据库相关集合在lib/mongo.js,数据库处理逻辑，增删改查均在models文件夹下创建对应的文件进行处理，界面均为views下的ejs文件，且通过res.render引入。

(小插曲)期间踩坑两小时，报如下错误，只因为

解决：确保此处正确书写

router.post("/",checkNotLogin,function(req,res,next){
  const name = req.fields.name
  const password = req.fields.password
  console.log("name passwprd",name,password);
})

由于时间关系，可能有些地方不够详细，有错之处请指出。接下来自己将这个移动端项目完善再写该博客后续，再次感谢大神们对知识的分享，让小白有了更多的学习资源来研究新的技术

收录于