# nodejs-crud
**Repository Path**: bingohello/nodejs-crud
## Basic Information
- **Project Name**: nodejs-crud
- **Description**: 一个简单的增删改查demo
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-03-15
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 基于Express4.x的增删改查应用
## 1.项目搭建
### 1.1 初始化package.json文件
> 在项目根目录下执行如下命令
npm init
所有配置项默认，一直按“Enter”键即可。
完成初始化，此时在项目根目录下生成package.json文件。
### 1.2 安装express模块支持
> 在项目根目录下执行如下命令
npm install express
完成安装后，在根目录下生成node_modules文件夹，表示之后可以在项目中调用express模块的功能。
### 1.3 创建第一个完整应用
> 在项目根目录下新建app.js文件
'use strict';
var express = require('express');
var app = express();
app.listen(3000);
> 执行 node app.js 命令启动第一个服务，执行完后控制台处于等待状态（这里不报错就表示成功）。
### 1.4 设置IDEA的ES6支持
File-->Settings-->Languages&Frameworks-->JavaScript
修改选项JavaScript language version为ECMAScript 6
## 2. 具体功能实现
### 2.1 连接json数据
> 新建data.json
//data.json
[{"name":"zhaozb"}]
> 新建db.js
//db.js
'use strict';
const repos = require('./data');
const fs = require('fs');
module.exports = {
store(){
fs.writeFileSync(__dirname+'/data.json', JSON.stringify(repos));
},
get(index){
return repos[index];
},
list(){
return repos;
},
add(name){
repos.push(name);
this.store();
},
del(index){
repos.splice(index, 1, newName);
this.store();
},
update(index, newName){
repos.splice(index, 1, newName);
this.store();
}
}
> 修改app.js引入db.js依赖并创建一个路由
'use strict';
const express = require('express');
const app = express();
const db = require('./db');
app.get('/', function (req, res) {
res.send(db.list());
})
app.listen(3000);
> 重启node服务，http://localhost:3000查看结果（data.json的数据通过路由返回到网页上）
### 2.2 完善列表功能
> 新建views文件夹
> 在views下新建index.ejs文件
//index.ejs
<%= title%>
> 修改app.js,增加ejs模板引擎支持
'use strict';
const express = require('express');
var path = require('path');
const app = express();
const db = require('./db');
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.get('/', function (req, res) {
res.render('index', {title: 'Express'}); //向index.ejs的页面返回一个title变量，值为Express
})
app.listen(3000);
重启node服务，查看网页标题变为Express，说明项目成功支持ejs
> 修改index.ejs
<% list.forEach(function(item, index){%>
-
<%= item.name %>
<%})%>
> 修改app.js
'use strict'; //采用严格模式，支持ES6语法
const express = require('express');
var path = require('path');
const app = express();
const db = require('./db');
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.get('/', function (req, res) {
res.render('index', {list: db.list()});
})
app.listen(3000);
重启node服务，重新刷新页面
### 2.3 添加功能
> 在app.js中增加新增路由，与json解析支持
npm install body-parser
app.js
'use strict'; //采用严格模式，支持ES6语法
const express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
const app = express();
const db = require('./db');
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.get('/', function (req, res) {
res.render('index', {list: db.list()});
});
app.post('/add', function (req, res) {
console.log(req);
db.add({name: req.body.name});
res.redirect('/');
})
app.listen(3000);
> 在页面中增加新增功能（新增按钮+表单弹窗）
添加
<% list.forEach(function(item, index){%>
-
<%= item.name %>
<%})%>
操作测试
### 2.4 删除功能
> 在app.js中增加删除路由
'use strict'; //采用严格模式，支持ES6语法
const express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
const app = express();
const db = require('./db');
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.get('/', function (req, res) {
res.render('index', {list: db.list()});
});
app.post('/add', function (req, res) {
console.log(req);
db.add({name: req.body.name});
res.redirect('/');
});
app.get('/del', function (req, res) {
let index = req.query.index;
db.del(index);
res.redirect('/');
})
app.listen(3000);
> 修改界面，增加删除按钮
添加
<% list.forEach(function(item, index){%>
-
<%= item.name %>
删除
<%})%>
### 2.5 修改功能
> 在app.js中增加根据索引获取数据的路由和修改的路由
'use strict'; //采用严格模式，支持ES6语法
const express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
const app = express();
const db = require('./db');
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.get('/', function (req, res) {
res.render('index', {list: db.list()});
});
app.post('/add', function (req, res) {
console.log(req);
db.add({name: req.body.name});
res.redirect('/');
});
app.get('/del', function (req, res) {
let index = req.query.index;
db.del(index);
res.redirect('/');
});
app.post('/update', function (req, res) {
var index = req.body.index;
var name = req.body.name;
db.update(index, {name});
res.redirect('/');
});
app.get('/get/:index', function (req, res) {
var index = req.params.index;
var name = db.get(index);
res.send(name);
});
app.listen(3000);
> 调整界面，增加修改按钮，增加修改弹窗界面
添加
<% list.forEach(function(item, index){%>
-
<%= item.name %>
删除
修改
<%})%>
操作测试
### 2.6 登陆功能
> 增加session支持
npm install express-session
> 在app.js中引入session依赖，增加登陆路由
'use strict'; //采用严格模式，支持ES6语法
const express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var session = require('express-session');
const app = express();
const db = require('./db');
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(session({
secret: 'keyboard cat',
resave: false,
saveUninitialized: true
}));
app.get('/', function (req, res) {
res.render('index', {list: db.list(), logined: req.session.logined});
});
app.post('/add', function (req, res) {
console.log(req);
db.add({name: req.body.name});
res.redirect('/');
});
app.get('/del', function (req, res) {
let index = req.query.index;
db.del(index);
res.redirect('/');
});
app.post('/update', function (req, res) {
var index = req.body.index;
var name = req.body.name;
db.update(index, {name});
res.redirect('/');
});
app.get('/get/:index', function (req, res) {
var index = req.params.index;
var name = db.get(index);
res.send(name);
});
app.post('/login', function (req, res) {
let loginname = req.body.loginname;
let password = req.body.password;
if(loginname === 'qishon' && password === '123456'){
req.session.logined = true;
res.send("success");
}else{
res.send("error");
}
});
app.listen(3000);
> 修改界面，增加登陆按钮，增加登陆弹窗，及权限控制
<%if(logined){%>
添加
<%}else{%>
登陆
<%}%>
<% list.forEach(function(item, index){%>
-
<%= item.name %>
<%if(logined){%>
删除
修改
<%}%>
<%})%>
操作测试
### 2.6 退出功能
> 在app.js中增加退出路由
'use strict'; //采用严格模式，支持ES6语法
const express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var session = require('express-session');
const app = express();
const db = require('./db');
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(session({
secret: 'keyboard cat',
resave: false,
saveUninitialized: true
}));
app.get('/', function (req, res) {
res.render('index', {list: db.list(), logined: req.session.logined});
});
app.post('/add', function (req, res) {
console.log(req);
db.add({name: req.body.name});
res.redirect('/');
});
app.get('/del', function (req, res) {
let index = req.query.index;
db.del(index);
res.redirect('/');
});
app.post('/update', function (req, res) {
var index = req.body.index;
var name = req.body.name;
db.update(index, {name});
res.redirect('/');
});
app.get('/get/:index', function (req, res) {
var index = req.params.index;
var name = db.get(index);
res.send(name);
});
app.post('/login', function (req, res) {
let loginname = req.body.loginname;
let password = req.body.password;
if(loginname === 'qishon' && password === '123456'){
req.session.logined = true;
res.send("success");
}else{
res.send("error");
}
});
app.get('/logout', function (req, res) {
req.session.logined = false;
res.redirect('/');
});
app.listen(3000);
> 修改界面，增加退出按钮
<%if(logined){%>
添加
退出
<%}else{%>
登陆
<%}%>
<% list.forEach(function(item, index){%>
-
<%= item.name %>
<%if(logined){%>
删除
修改
<%}%>
<%})%>
操作测试
