Express框架实现的简单CRUD

  准备工作假定已经做好。下面直接进入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 文件：

    
    



    姓名：
    年龄：
    
    添加


    <% for (var i = 0; i < data.length; i++) { %>
    
    <% } %>

    

        
编号
        
姓名
        
性别
        
年龄
        
操作
    

        
<%= data[i].id %>
        
<%= data[i].name %>
        
<%= data[i].gender %>
        
<%= data[i].age %>
        
删除
        
修改
    

• 在 views 文件夹下创建 add.ejs 文件:

    
    



    姓名：

    性别：

    年龄：

    

这样再启动项目，便可以看到下面的图片：

列表页面

新增页面

图中 删除 与 修改 代码中并未实现，留给读者自己实践吧～