设为首页 加入收藏

TOP

Node.js 入门:Express + Mongoose 基础使用(一)
2017-10-10 16:11:37 】 浏览:9313
Tags:Node.js 入门 Express Mongoose 基础 使用

原文地址:http://blog.gdfengshuo.com/2017/07/29/20

前言

Express 是基于 Node.js 平台的 web 应用开发框架,在学习了 Node.js 的基础知识后,可以使用 Express 框架来搭建一个 web 应用,实现对数据库的增删查改。

数据库选择 MongoDB,它是一个基于分布式文件存储的开源数据库系统,Mongoose 是 MongoDB 的对象模型工具,可以在异步环境里工作。

接下来就使用 Express + Mongoose 来实现简单的增删查改,在实现的过程中来学习 Express 和 Mongoose 的基础知识。

原文作者:林鑫,作者博客:http://blog.gdfengshuo.com/

准备

既然是基于 Node.js 的框架,那么肯定需要装 node.js,还有 MongoDB,网上有很多安装教程。然后使用 express-generator 来快速生成一个 Express 项目。那么先安装一下 express-generator

npm install -g express-generator

然后初始化一个名为 express-demo 的项目

express express-demo

目前 Express 已经发布到了 4.x 版本,接下来也是基于这个版本来实现的。

cd express-demo
npm install
npm start

浏览器打开 http://localhost:3000 ,就可以看到已经可以访问了。

目录

├─bin/      // 启动文件
├─public/   // 资源文件
├─routes/   // 路由
├─views/    // 视图
├─app.js
└─package.json

初始化的项目目录简单明了,接下来我们来看看 app.js 里是写了什么。

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

这是设置模板引擎,使用了 jade 模板引擎,views/ 目录下都是 .jade 格式文件,这种写法我并不熟悉,那么来改一下,改成 ejs 引擎,.html 格式的视图文件。(需要 npm 安装 ejs 模块)

var ejs = require('ejs');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('html', ejs.__express);
app.set('view engine', 'html');

实现

以上准备都好了之后,我们就来看看如何实现用户信息的增删查改。这里我们先把视图和路由搭建起来,能访问页面之后再来实现数据库操作的功能。

用户列表

在 view/ 视图目录下创建以下文件: UserList.html

<!DOCTYPE html>
<html>
<head>
    <title>用户列表页面</title>
</head>
<body>
    <table>
        <tr>
            <th>用户名</th>
            <th>邮箱</th>
            <th>操作</th>
        </tr>
        <% for(var i in user){ %>
            <tr>
                <td><%= user[i].username %></td>
                <td><%= user[i].email %></td>
                <td>
                    <div>
                        <a href="/users/detail/<%= user[i]._id %>"> 查看 </a>
                        <a href="/users/edit/<%= user[i]._id %>"> 编辑 </a>
                        <a href="#" class="del" data-id="<%= user[i]._id %>"> 删除 </a>
                    </div>
                </td>
            </tr>
        <% } %>
    </table>
</body>
</html>

<% %> 就是 ejs 模板引擎的语法,user 是在路由渲染页面的时候传过来的,它是如何传的,待会再看。
接下来实现上面视图对应的路由,项目中默认已经给我们生成了两个路由。在 routes/ 路由目录下已经有了两个路由文件:index.js 和 users.js。

app.js 中,已经帮我们设置好了这两个路由:

var index = require('./routes/index');
var users = require('./routes/users');
app.use('/', index);
app.use('/users', users);

只要浏览器访问 http://localhost:3000/users ,就能访问到 users 对应的页面了。我们来看看路由里 users.js 是如何写的。

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

router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

express.Router 类创建模块化、可挂载的路由句柄。我们修改上面代码来创建用户列表的路由 users/list

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

router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

router.get('/list', function(req, res, next) {
  var list = [{_id: 1, username: 'linxin', email: '123123@qq.com'}];
  res.render('UserList',{
      user: list
  })
});

module.exports = router;

还记得在 UserList.html 视图中的 user 变量吗,这里用到了 res.render() 响应方法,功能就是渲染视图模板,第一个参数为视图文件名,第二个参数为对象,用于向模板中传递数据,user 就是在这里传过去的。更改完路由之后重启服务器,访问 http://localhost:3000/users/list 就可以看到用户列表页面了。

但是这用户信息是写死的,要怎么从数据库中读取呢?

连接数据库

我们这里用到了 Mongoose,需

首页 上一页 1 2 3 下一页 尾页 1/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇HTTP协议 下一篇Angular4.0 实现数据绑定举例

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目