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 观察网页并 ...
随机推荐
- 使用 pykafka 进行消费
kafka连接脚本 环境:python3,用到的模块有 pykafka,kazoo # coding=utf-8 import pykafka class KafkaReaderThread(obje ...
- flask之蓝图BulePrint使用
之前flask启用程序代码和逻辑代码都是在一个页面,这样代码多了很自然不利于关于,如果要将逻辑代码和进行分离,这里需要用到Falsk的蓝图(Blueprint) 项目结构 app文件夹为项目最外层文件 ...
- Dubbo面试
DUBBO原理.应用与面经总结 SPI 你是否了解SPI,讲一讲什么是SPI,为什么要使用SPI? SPI具体约定:当服务的提供者,提供了服务接口的一种实现之后,在jar包的META-INF/serv ...
- LNMP环境中的数据库迁移为独立的服务器
环境: centos 6.5 ip:192.168.0.118 nginx.php.mysql centos 6.5 ip:192.168.0.117 mysql 现在我们需要把数据库迁移到192. ...
- C# - 常见问题整理
关于循环和try{}..catch{}的嵌套使用 foreach(var item in items) { try { try{ } catch(Exception ex) { throw; // 将 ...
- python之匿名函数、递归与二分法
一.匿名函数 什么是匿名函数? 顾名思义就是没有名字的函数,在我们声明一个函数时会想起个什么函数名好,这个问题我想有时候会困惑大家的吧? def func(): #正常函数声明 pass prin ...
- 缓存数据库memcache、redis原理对比
一.问题: 数据库表数据量极大(千万条),要求让服务器更加快速地响应用户的需求. 二.解决方案: 1.通过高速服务器Cache缓存数据库数据 2.内存数据库 (这里 ...
- 第七届蓝桥杯C/C++程序设计本科B组决赛 ——凑平方数(填空题)
凑平方数 把0~9这10个数字,分成多个组,每个组恰好是一个平方数,这是能够办到的.比如:0, 36, 5948721 再比如:10985247361, 25, 63907840, 4, 289, 1 ...
- 《AlwaysRun!团队》第四次作业：项目需求调研与分析
项目 内容 这个作业属于哪个课程 http://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daiz ...
- mailto标签来调用邮箱客户端
最近项目需要使用mailto标签来调用客户端,并且把邮件模板填到客户端. mailto 的用法: a标签直接调用: <a href="mailto:example@qq.com?cc= ...