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 观察网页并 ...
随机推荐
- v8 引擎的内存
一.nodejs查看内容使用情况: process.memoryUsage() 单位为 Btye 转化函数: var format = function(bytes) { return (bytes/ ...
- 运输计划[二分答案 LCA 树上差分]
也许更好的阅读体验 \(\mathcal{Description}\) 原题链接 概括一下题意 给一颗有\(n\)个点带边权的树,有\(m\)个询问,每次询问\(u,v\)两点间的权值和,你可以将树中 ...
- vue npm run build 失败
之前删除过 node-moudel 文件夹,然后 npm install 重新安装,一切OK.打包的时候,报错,找不到caniuse什么的.再删除node-moudel,重新cnpm install ...
- 表单送件按钮代码(一)cs（C#）(未完)
protected void BtnRequest_Clich(object sender, EventArgs e) { lblMsg.Text= " " ; lblfmsg.T ...
- 【转载】C#使用Trim方法去除字符串前后的所有空格
在C#语言程序开发过程中,很多时候需要对字符串对象的前后空格进行去除,此时就需要使用到Trim()方法来实现这个功能,Trim()方法可以快速去除字符串前端和后端的所有空格. 例如有个字符:strin ...
- 解决在web.xml中配置server服务器启动失败问题
一.问题"Server Tomacat v8.5 Server at locallhost failed to start" 二.解决方法:删除注释@webServlet 三.分析 ...
- 监听iframe加载完成
用 @load="loading" 在Vue里面写了一个界面,有一个iframe标签, iframe加载其他网站, <iframe @load="loading&q ...
- git使用——准备工作
参考:如何在 Git 中重置.恢复,返回到以前的状态 初次运行 Git 前的配置 安装好Git后首先要做的便是配置Git环境.每台计算机上只需要配置一次,程序升级时会保留配置信息. 你可以在任何时候再 ...
- Redis未授权访问漏洞复现及修复方案
首先,第一个复现Redis未授权访问这个漏洞是有原因的,在 2019-07-24 的某一天,我同学的服务器突然特别卡,卡到连不上的那种,通过 top,free,netstat 等命令查看后发现,CPU ...
- python函数名的应用、闭包和迭代器
一.函数名的应用(第一类对象) 函数名是一个变量,但它是一个特殊的变量,与括号配合可以执行函数变量. 1.函数名的内存地址 def func(): print("哈哈") prin ...