express+mongoDB（mLab）做一个todolist小项目
这是在网课上学习的，先建立一个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用来写服务短入口代码
之后运行一下 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);
});
});
}
以上是简单的数据库应用 重在理解 感受一下
express+mongoDB（mLab）做一个todolist小项目的更多相关文章
- 又见angular----步一步做一个angular4小项目
这两天看了看angular4的文档,发现他和angular1.X的差别真的是太大了,官方给出的那个管理英雄的Demo是一个非常好的入门项目,这里给出一个管理个人计划的小项目,从头至尾一步一步讲解如何去 ...
- Extjs6（一）——用sencha cmd建立一个ExtJs小项目
本文基于ext-6.0.0 一.用sencha cmd建立一个ExtJs小项目 首先,需要一个命令行工具.进入extjs所在目录. 然后,输入:sencha -sdk [ExtJs6.0文件夹地址] ...
- 创建第一个spirngmvc小项目
题外: 设置目录为源代码目录 1.进入:file->project structure->modules->soures 进入这个里面,选择相应的文件夹.例如src/java里的ja ...
- Vue.js基础篇实战--一个ToDoList小应用
距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 使用vuex 纯粹基础,没有用到web pack,vuex,npm,下次把它改造一下 ...
- 基于vue 、vue-router 、firebase的todolist小项目
第一次写博客,都不知道改怎么写的好. 本着一颗学习的心,也希望一段时间后再回来在看看自己写的代码,会不会让自己有种不忍直视的念头 *-* 还是先上图吧~ 这是首页,主要是展示所有的列表页面,可以通过输 ...
- [js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist
promise主要是用来解决异步回调问题,其实还有好几种比promise更好的方案,后面再说,这节,我们先用promise来改造下,我以前写的一篇文章[js高手之路]javascript腾讯面试题学习 ...
- 突发奇想想学习做一个HTML5小游戏
前言: 最近一期文化馆轮到我分享了,分享了两个,一个是关于童年教科书的回忆,一个是关于免费电子书的.最后我觉得应该会不敌web,只能说是自己在这中间回忆了一下那个只是会学习的年代,那个充满梦想的年代. ...
- 一个WPF小项目小结
一:缘起 老板有做PC桌面客户端的需求,做的是能耗的计算和评估,要算能耗,就有很多环节,最后对这些环节数据进行一些简单计算.我想要是做的话就用比较熟的wpf,就去聊了下,对方给了1张比较复杂的Exce ...
- scrapy的一个简单小项目
使用scrapy抓取目标url下所有的课程名和价格,并将数据保存为json格式url=http://www.tanzhouedu.com/mall/course/initAllCourse 观察网页并 ...
随机推荐
- 在论坛中出现的比较难的sql问题：24(生成时间段)
原文:在论坛中出现的比较难的sql问题:24(生成时间段) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉得有必要记录下来 ...
- VC 中的ATL ActiveX 和 MFC ActiveX 有什么区别
原文转自 https://www.cnblogs.com/zhwl/archive/2012/11/29/2794509.html ATL是ActiveXTemplateLibrary的缩写,它是一套 ...
- ABP 基于DDD的.NET开发框架 学习（五）中使用DevExpress插件
1.DevExpress安装 安装步骤1:开始安装 安装步骤2:选择需要安装的模块 安装步骤3:修改安装路径 安装步骤4:正在安装 安装步骤5:安装完成 2.Vs中设置 1)DevExtremeBun ...
- MySQL存储引擎的介绍
数据库存储引擎是数据库底层软件组件,数据库管理系统使用数据引擎进行创建.查询.更新和删除数据操作.不同的存储引擎提供不同的存储机制.索引技巧.锁定水平等功能,使用不同的存储引擎还可以获得特定的功能. ...
- 转载 AI-Talking 图算法
https://mp.weixin.qq.com/s/2XRgJr-ydxHA3JxAZ_5HeA 图算法在风控业务的实践 直播行业中有很多业务风控问题,比如说批量注册.刷热度.垃圾信息以及薅羊毛等. ...
- 多线程之NSOperation简介
在iOS开发中,为了提升用户体验,我们通常会将操作耗时的操作放在主线程之外的线程进行处理.对于正常的简单操作,我们更多的是选择代码更少的GCD,让我们专注于自己的业务逻辑开发.NSOperation在 ...
- sql server with as只能查询一次
WITH Emp AS (SELECT acc.* FROM GXSpreadDB.dbo.gxs_account acc LEFT JOIN RYAccountsDB.dbo.AccountsInf ...
- django工作原理简介
django工作原理简介 先简单的介绍一下django的工作原理,其中还会涉及到Middleware(中间件,包括request, view, exception, response),URLConf ...
- PAT基础级-钻石段位样卷2-7-7 危险品装箱 (25 分)
集装箱运输货物时,我们必须特别小心,不能把不相容的货物装在一只箱子里.比如氧化剂绝对不能跟易燃液体同箱,否则很容易造成爆炸. 本题给定一张不相容物品的清单,需要你检查每一张集装箱货品清单,判断它们是否 ...
- linux网络编程之posix条件变量
今天来学习posix的最后一个相关知识----条件变量,言归正传. 下面用一个图来进一步描述条件变量的作用: 为什么呢? 这实际上可以解决生产者与消费者问题,而且对于缓冲区是无界的是一种比较理解的解决 ...