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 观察网页并 ...
随机推荐
- 第二次用map23333
度熊所居住的 D 国,是一个完全尊重人权的国度.以至于这个国家的所有人命名自己的名字都非常奇怪.一个人的名字由若干个字符组成,同样的,这些字符的全排列的结果中的每一个字符串,也都是这个人的名字.例如, ...
- [JZOJ5281]钦点题解--瞎搞+链表
[JZOJ5281]钦点题解--瞎搞+链表 题目链接 于 暴 力 过
- TCP粘包/拆包（Netty权威指南）
无论是服务端还是客户端,当我们读取或者发送消息的时候,都需要考虑TCP底层的粘包/拆包机制. TCP粘包/拆包 TCP是个“流”协议,所谓流,就是没有界限的一串数据.大家可以想想河里的流水,是连成一片 ...
- kvm第三章--虚拟化存储管理
- springboot 打包发布(war包)
版本关系: 软件名称 版本号 软件名称 版本号 spring boot 2.x jdk 1.8 tomcat 9.x springboot中的pom.xml文件 打包:右键点击项目,选择如下图: 填写 ...
- Go数据类型之基本数据类型
不想沦为芸芸众生的人只需做一件事,便是对自己不再散漫:他应当听从良知的呼唤:“成为你自己!” ---尼采 1.整型 有符号整数类型:int8.int16.int32和int64 无符号整数类型:uin ...
- Redis数据缓存淘汰策略【FIFO 、LRU、LFU】
FIFO.LFU.LRU FIFO:先进先出算法 FIFO(First in First out),先进先出.在FIFO Cache设计中,核心原则就是:如果一个数据最先进入缓存中,则应该最早淘汰掉. ...
- 开源框架---tensorflow c++ API 一个卡了很久的问题
<开源框架---tensorflow c++ API 运行第一个“手写字的例子”> 中可以说明tensorflow c++ API是好用的,.......
- 利其器：无法在 ".vscode" 文件夹()内创建 "launch.json" 文件。
无法在 ".vscode" 文件夹()内创建 "launch.json" 文件. https://www.cnblogs.com/lidabo/p/588899 ...
- master-worker常驻型程序代码修改哪些需要重启master或者worker
之前在yii的项目里用redis作为消息队列,现在很多任务需要延迟需求,于是把之前redis的消息队列替换成了rabbitmq 于是使用yii的yii2-queue这个组件 但是由于提供的yii qu ...