Nodejs完成一个待办事项的实例教程

最新推荐文章于 2024-07-12 10:45:41 发布

Adronfan

最新推荐文章于 2024-07-12 10:45:41 发布

阅读量2.8k

点赞数 2

分类专栏：网站计算机文章标签：示例 demo 代码待办事项详细教程

本文链接：https://blog.csdn.net/yangfanacc/article/details/43386465

版权

本文提供一个使用Node.js构建的待办事项应用详细教程，涵盖项目思路、所需类库、数据库操作、路由转发及Ajax使用。项目支持手机和PC，包括添加、删除、查看待办事项功能，利用MongoDB存储数据，Express框架，EJS模板和Amaze前端框架。附带代码下载链接和在线预览地址。

摘要由CSDN通过智能技术生成

这是一个用Node完成的待办事项的Demo，支持手机端和PC浏览器端同时查看。下载地址：https://github.com/yangfanacc/Todo 在线查看效果可以访问这个网址：http://123.56.44.245:3460 效果图如下：首先介绍一个这个待办事项示例项目的搭建环境：

    1.Nodejs版本：v0.10.35
    2.Mongodb(使用Mongoose连接Mongodb数据库)
    3.前台使用了国内比较好用的开源框架[Amaze](http://amazeui.org/)

项目的结构二级截图如下：

项目思路

首先，需要一个网址可以用来访问我们的待办事项首页（对数据库的读操作）。然后我们需要有添加和删除待办事项的对数据库的增加和删除（更新）操作。其实，也就这么多了，很简单的是不是？不过这里我们可不是真的删除，因为我们有可能需要保存我们的待办事项历史，大家可以访问这个网址：http://123.56.44.245:3460/all 是的，我们在删除待办事项的时候，是需要一个bool参数在数据库中，只是把数据变为false不在读取，而不是真的删除。这和我们使用腾讯的QQ空间是一样的效果嘛，哈哈：）

第一步

我们需要确定使用那些类库，我们这里使用的类库如下：

    1.body-parser  
    2.cookie-parser  
    3.debug  
    4.ejs  
    5.express  
    6.mongoose  
    7.morgan  
    8.serve-favicon

大家也看到了，除了第6个是我自己加的以外，其他的都是我们在使用express -e TodoList这个express模板的使用express所需要的。我们我们只是需要添加这个mongoose模块就好了cnpm install mongoose --save。如果上面的添加mongoose模块中的cnpm和--save你还不知道是什么意思，建议你去google一下喽.

第二步

从上面我们可以看到，我们使用的是ejs模板。但是在使用ejs的时候，我很不习惯加上ejs这个后缀，我知道不止我一个人有这样的爱好：）。所以这里我们开始将ejs转换为html的后缀使用。方法大家可以去Google一下，这里贴出了：

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

修改app.js文件中的相关代码就可以了：）然后，就是确定我们需要用到几个html页面了。其实就是上面的网址我们看到的，一个是主页面,还有一个是历史查看页面。这两个页面的差别真的不大啦，其实是可以用一个页面来完成的，但是这里我用的两个页面用一个页面会更方便，我这里当时没有想到。然后就是我们需要一个前端的框架，那就是前文提到的Amaze，还不会使用的小伙伴们可以去官网使用一下，很简单的，用一下就会了。上面的assets文件夹里面的就是Amaze所必须的相关文件，我们放到public文件夹就好了，这个静态文件目录我们是可以直接读取到的。之后我们就可以在html页面使用前端的框架了。
index.html文件代码如下：

<!doctype html>  
<html class="no-js">  
<head>  
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>随时记事</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="assets/i/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable"