Express框架实现的简单CRUD
标签：
JavaScript
准备工作假定已经做好。下面直接进入express项目的创建。
全局安装express，命令如下：
nom install express-generator -g
然后使用express在目的文件夹创建项目：
express demo
进入到项目的根目录，安装项目依赖：
npm install
这样，项目就可以运行了，输入命令：
npm start
在 localhost:3000 端口便可访问到项目了
新项目运行结果
由于需要使用mysql数据库，还需要安装mysql数据库的依赖（可在根目录下 package.json 文件中查看依赖版本）：
nom install mysql -save
在根目录下新建 config 目录，在该目录下新建 db.js 文件，文件如下：
var mysql = require('mysql'); // 引入mysql数据库模块 // 配置数据库线程池连接 var pool = mysql.createPool({ host: 'localhost', user: 'root', password: '*******', database: 'database_name' }); function query(sql, callback) { pool.getConnection(function (err, connection) { connection.query(sql, function (err, rows) { callback(err, rows); connection.release(); }); }); } exports.query = query;当然还需要数据库，我简单建了一个表：
user表
这里需要注意一个问题，我这里使用的是ejs模版，而项目创建时默认的是jade模版。（注意你的项目的默认模版），如我想我一下的话，需要在 app.js 文件中做这样的修改：
// view engine setup app.set('views', path.join(__dirname, 'views')); // app.set('view engine', 'jade'); app.set('view engine', 'ejs');并使用
npm install ejs
安装ejs模版模块。
然后修改 routes 文件夹下的 users.js 文件如下：
var express = require('express'); var router = express.Router(); var db = require('../config/db'); // 引入数据库配置文件，默认后缀名 /** * 展示列表页 */ router.get('/', function (req, res) { db.query('select * from user', function (err, rows) { if (err) { res.render("users", {title: '用户列表1', data:[]}); } else { res.render("users", {title: '用户列表2', data:rows}); } }); }); /** * 添加用户 */ // get请求，跳转到添加的页面 router.get('/add', function (req, res) { res.render('add'); }); // post请求，提交表单数据 router.post('/add', function (req, res) { var name = req.body.name; var gender = req.body.gender; var age = req.body.age; db.query("insert into user(name, age, gender) values(' "+ name + " ', ' "+ age +" ', '" + gender + " ' )", function (err, rows) { if (err) { res.send('新增失败' + err); } else { res.redirect('/users'); } }); }); // ... // 这里仅仅实现了两个功能作为示例 module.exports = router;在 views 文件夹下创建 users.ejs 文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title><%= title%></title> </head> <body> <form action="/users/search" method="post"> 姓名：<input type="text" name="s_name" value="<%= data.name %>"> 年龄：<input type="text" name="s_age" value="<%= data.age %>"> <input type="submit" value="查询"> <a href="/users/add">添加</a> </form> <table> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>操作</th> </tr> <% for (var i = 0; i < data.length; i++) { %> <tr> <td><%= data[i].id %></td> <td><%= data[i].name %></td> <td><%= data[i].gender %></td> <td><%= data[i].age %></td> <td><a href="/users/delete/<%= data[i].id %>">删除</a></td> <td><a href="/users/update/<%= data[i].id %>">修改</a></td> </tr> <% } %> </table> </body> </html>在 views 文件夹下创建 add.ejs 文件:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新增页面</title> </head> <body> <form action="/users/add" method="post"> 姓名：<input type="text" name="name"><br> 性别：<input type="text" name="gender"><br> 年龄：<input type="text" name="age"><br> <input type="submit" value="提交"> </form> </body> </html>
这样再启动项目，便可以看到下面的图片：
列表页面 
新增页面
作者：偏偏注定要落脚丶
链接：https://www.jianshu.com/p/ada2f135bbaf
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦