express+mongoDB（mLab）做一个todolist小项目

2023-08-26 16:15:04

这是在网课上学习的，先建立一个express-todolist文件夹作为项目跟目录

另外，我们直接把项目上用到的css文件和js文件下载下来放在项目里

这里直接贴出来

先建立一个public文件夹，放在根目录中，里面建一个assets文件夹，分别放着style.css和todo-list.js两个文件

内容如下：

express-todolist/public/assets/style.css:

body {

    background: #0d1521;

    font-family: tahoma;

    color: #989898;

}

#todo-table {

    position: relative;

    width: 95%;

    background: #090d13;

    margin: 0 auto;

    padding: 20px;

    box-sizing: border-box;

}

#todo-table form:after {

    margin:;

    content: '';

    display: block;

    clear: both;

}

input[type="text"] {

    width: 30%;

    padding: 20px;

    background: #181c22;

    border:;

    float: left;

    font-size: 20px;

    color: #989898;

}

button {

    padding: 20px;

    width: 30%;

    float: left;

    background: #23282e;

    border:;

    box-sizing: border-box;

    color: #fff;

    cursor: pointer;

    font-size: 20px;

}

ul {

    list-style-type: none;

    padding:;

    margin:;

}

li {

    width: 100%;

    padding: 20px;

    box-sizing: border-box;

    font-family: arial;

    font-size: 20px;

    cursor: pointer;

    letter-spacing: 1px;

}

li:hover {

    text-decoration: line-through;

    background: rgba(0, 0, 0, 0.2);

}

express-todolist/public/assets/todo-list.js:

$(document).ready(function() {

    $('form').on('submit', function(event) {

        event.preventDefault();

        var item = $('form input');

        var todo = { item: item.val().trim() };

        $.ajax({

            type: 'POST',

            url: '/todo',

            data: todo,

            success: function(data) {

                //do something with the data via front-end framework

                location.reload();

            }

        });

        return false;

    });

    $('li').on('click', function() {

        var item = $(this).text().trim().replace(/ /g, "-");

        $.ajax({

            type: 'DELETE',

            url: '/todo/' + item,

            success: function(data) {

                //do something with the data via front-end framework

                location.reload();

            }

        });

    });

});

上诉准备好之后，先初始化一个项目

npm init

安装用到的依赖：

npm install -g nodemon  //用来监听服务器代码 当服务器代码改变时 自启动  全局安装一次即可

npm install --save express

npm install --save ejs body-parser

ejs是模板引擎 body-parser是处理表单数据的

----------------------------------------------------------------------------------------------------------------------

接下来在跟目录中新建一个app.js用来写服务短入口代码

var express = require('express');

var toController = require('./controllers/todoController');//引入路由逻辑代码

var app = express();//建立一个express实例

app.set('view engine','ejs');//设置一下模板引擎

app.use(express.static('./public'));//用中间件来设置一下静态文件路径

toController(app);//执行路由代码将app传递过去

app.listen(3000,function(){

console.dir("you are listening to port 3000");

})

之后运行一下 nodemon app 服务器就运行起来了

-----------------------------------------------------------------------------------------

我们这一次将路由逻辑代码单独放在一个文件中，然后引入到app.js中执行，这样app.js中的代码就不会显的臃肿，这也会模块化的一种体现

在根目录用建立一个controllers文件夹，在里面建立todoController.js

module.exports= function(app){

    app.get("/todo",function(req,res){//访问todolist页面时用到的路由

        res.render("todo")

    });

    app.post("/todo",function(req,res){//新增项时 用到的路由

    })

    app.delete("/todo",function(req,res){//删除项时 用到的路由

    })

    app.get("*",function(req,res){//404页面

        res.send("404")

    })

}

那么这个todoController.js就是mvc中的c，将来引入数据库会重新创建一个model模块专门用来处理数据那么这个模块就是mvc中的m 然后view就是mvc中的v

-------------------------------------------------------------------------------------

接下来我们把页面实现了，我们用了ejs这个模板引擎，所以要在根目录用创建一个views文件，里面存放页面（ejs），这个views是ejs默认的存放目录

里面新建一个todo.ejs

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <!-- 注意引入静态资源的方式  可以查看express.static内置中间件的说明 -->

    <link rel="stylesheet" href="/assets/styles.css">

    <script src="/assets/todo-list.js"></script>

    <title>todolist</title>

</head>

<body>

    <div id="todo-table">

        <form action="">

            <input type="text" name="item" placeholder="add new item" required>

            <button type="submit">Add Item</button>

        </form>

        <ul>

            <li>Item 1</li>

            <li>Item 2</li>

            <li>Item 3</li>

        </ul>

    </div>

</body>

</html>

之后访问localhost:3000/todo 就可以访问到这个页面

----------------------------------------------------------------------------------------------------------------------

接下来我们实现功能

我们现在还未引入数据库，可以先把数据存在node的内存中，把功能先实现了，先更改controllers/todoController.js

var data = [{item:"get milk"},{item:"wolk dog"},{item:"coding something"}]

module.exports= function(app){

    app.get("/todo",function(req,res){//访问todolist页面时用到的路由

        res.render("todo",{todos:data});//将数据传给todo页面

    });

    app.post("/todo",function(req,res){//新增项时 用到的路由

    })

    app.delete("/todo",function(req,res){//删除项时 用到的路由

    })

    app.get("*",function(req,res){//404页面

        res.send("404")

    })

}

然后在todo.ejs中拿到数据将它渲染出来

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <!-- 注意引入静态资源的方式  可以查看express.static内置中间件的说明 -->

    <link rel="stylesheet" href="/assets/styles.css">

    <script src="/assets/todo-list.js"></script>

    <title>todolist</title>

</head>

<body>

    <div id="todo-table">

        <form action="">

            <input type="text" name="item" placeholder="add new item" required>

            <button type="submit">Add Item</button>

        </form>

        <ul>

            <% todos.forEach(function(todo){ %>

                <li><%= todo.item %></li>

            <% }) %>

        </ul>

    </div>

</body>

</html>

现在点击Add Item 按钮会向服务器发送一个post请求，具体代码见express-todolist/public/assets/todo-list.js

会将表单中输入框中的内容传给服务器，我们现在需要在服务端拿到这个传过来的数据，将这个值放进data中

下面来更改一下todoController.js中的代码

var bodyParser = require("body-parser");

var urlencodedParser = bodyParser.urlencoded({extended:false});//用来处理表单数据的中间件

var data = [{item:"get milk"},{item:"wolk dog"},{item:"coding something"}]

module.exports= function(app){

    app.get("/todo",function(req,res){//访问todolist页面时用到的路由

        res.render("todo",{todos:data});//将数据传给todo页面

    });

    app.post("/todo",urlencodedParser,function(req,res){//新增项时 用到的路由

        data.push(req.body);

        res.json(data)

    })

    app.delete("/todo",function(req,res){//删除项时 用到的路由

    })

    app.get("*",function(req,res){//404页面

        res.send("404")

    })

}

然后我们就完成了添加item的功能，刷新页面数据是不会变的，因为数据是存在服务器的内存中的，只要服务器不重启，数据就不会变，我们可以在终端输入rs让服务器重启一下，数据就重置了

----------------------------------------------------------------------------------------------------------------------------------

下面来实现删除项的功能

根据express-todolist/public/assets/todo-list.js中的代码可以知晓，我们点击某一项时，会取到这一项的内容，将内容中的空格替换成-，这是为了不让路由看起来怪异

下面来看一下todoController.js中怎么删除这个数据

var bodyParser = require("body-parser");

var urlencodedParser = bodyParser.urlencoded({extended:false});

var data = [{item:"get milk"},{item:"wolk dog"},{item:"coding something"}]

module.exports= function(app){

    app.get("/todo",function(req,res){//访问todolist页面时用到的路由

        res.render("todo",{todos:data});//将数据传给todo页面

    });

    app.post("/todo",urlencodedParser,function(req,res){//新增项时 用到的路由

        data.push(req.body);

        res.json(data)

    })

    app.delete("/todo/:item",function(req,res){//删除项时 用到的路由

        data = data.filter(function(todo){

            return todo.item.replace(/ /g,"-") !== req.params.item;

        });

        res.json(data);

    })

    app.get("*",function(req,res){//404页面

        res.send("404")

    })

}

然后打开一面删除一下某一项 ok 成功删除，那么我们的删除功能就实现了

--------------------------------------------------------------------------------------------------------------------

我们以上部分是将数据存在了node的内存中，当服务器重启就会消失，为了避免存在这样的问题，我们将数据存在一个地方，这个地方就是数据库

mongoDB是属于noSQL类型的数据库它不像mySQL一样有 table 列行的概念，mongoDB的存储是用json的形式存储数据的，这样用js操作会比较方便，属于散乱行数据库。使用时也得安装，这次我们为了快速了解和使用，可以借用一个线上的服务来存储数据，这个服务提供了线上的地址，我们用账号和密码就可以登录使用，每个用户有512MB的磁盘容量，跳过了安装的步骤，重在使用和理解，那么这个服务就是mLab，线上地址：https://mlab.com/

创建账号后，整整等了好几十分钟才出来页面，之后创建连接账号和密码，

下面我们需要安装一个插件来连接mongoDB，这个插件叫：mongoose

安装：

npm install mongoose --save

更改todoController.js代码

var bodyParser = require('body-parser');

var urlencodedParser = bodyParser.urlencoded({ extended: false });

var mongoose = require('mongoose');

mongoose.connect('mongodb://hfpp2012:hfpp2012@ds151068.mlab.com:51068/todos');

var todoSchema = new mongoose.Schema({

  item: String

});

var Todo = mongoose.model('Todo', todoSchema);

// var itemOne = Todo({item: 'buy flowers'}).save(function(err) {

//   if (err) throw err;

//   console.log('item saved');

// });

//

// var data = [ {item: 'get milk'}, {item: "walk dog"}, {item: 'kick some coding ass'} ];;

module.exports = function(app) {

  app.get('/todo', function(req, res) {

    Todo.find({}, function(err, data) {

      if (err) throw err;

      res.render('todo', { todos: data });

    });

  });

  app.post('/todo', urlencodedParser, function(req, res) {

    var itemOne = Todo(req.body).save(function(err, data) {

      if (err) throw err;

      res.json(data);

    });

  });

  app.delete('/todo/:item', function(req, res) {

    // data = data.filter(function(todo) {

    //   return todo.item.replace(/ /g, "-") !== req.params.item;

    // });

    Todo.find({item: req.params.item.replace(/-/g, " ")}).remove(function(err, data) {

      if (err) throw err;

      res.json(data);

    });

  });

}

以上是简单的数据库应用重在理解感受一下

码农公寓

相关文章