手记

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 文件:

<!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

0人推荐
随时随地看视频
慕课网APP