基於nodejs+express+mysql+webstorm+html的增刪改查

時間 2019-11-19

標籤基於 nodejs+express+mysql+webstorm+html nodejs express mysql webstorm html 增刪欄目 MySQL 简体版

原文原文鏈接

1、工具準備html

　　Nodejs框架,WebStorm、Mysql服務、Navicat。此篇文章只講項目的搭建過程，至於Nodejs，WebStorm、Mysql的下載、安裝與配置網上資源不少，請自行查閱，本文重點講述增刪改查，此文爲學習筆記，我也是初學者，不少代碼沒有作過多解釋，以避免誤導他人。前端

Github 地址：https://github.com/Spqin/Nodejs_Websto_Mysql_CRUDnode

2、打開WebStorm建立項目-項目名稱自定義，這裏我按年月日作項目名稱。mysql

一、選怎File-->New-->Projectgit

二、選擇nodejs框架、輸入項目名稱、選擇前端模版的引擎（後面會修改成Html）、點擊建立。github

三、建立的項目目錄以下圖所示sql

四、打開app.js，找到模版引擎設置並進行修改數據庫

3、上述過程都是準備工做，接下來開始增刪改查的講述，這裏我採用數據庫、路由、視圖的順序講解express

此處爲了方便下面文章的閱讀，先給出一個完成後的項目目錄截圖。npm

一、數據庫建立數據庫的鏈接

　1.1　在routes目錄下建立 db.js,此模塊負責數據庫的鏈接

//db.js
// 鏈接MySQL
var mysql = require('mysql');
var pool = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: '1qaz2wsx',
    database: 'nodejs'
});

function query(sql, callback) {
    pool.getConnection(function (err, connection) {
        // Use the connection
        connection.query(sql, function (err, rows) {
            callback(err, rows);
            connection.release();//釋放連接
        });
    });
}
exports.query = query;

　　1.2 建立數據庫表（person）

/*
Navicat MySQL Data Transfer

Source Server         : nodejs
Source Server Version : 50717
Source Host           : localhost:3306
Source Database       : nodejs

Target Server Type    : MYSQL
Target Server Version : 50717
File Encoding         : 65001

Date: 2017-09-05 16:18:45
*/

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for person
-- ----------------------------
DROP TABLE IF EXISTS `person`;
CREATE TABLE `person` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `age` int(11) DEFAULT NULL,
  `professional` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of person
-- ----------------------------
INSERT INTO `person` VALUES ('1', '武大', '25', '計算機科學與技術');
INSERT INTO `person` VALUES ('2', '王二', '25', '計算機科學與技術');
INSERT INTO `person` VALUES ('3', '張三', '25', '計算機科學與技術');
INSERT INTO `person` VALUES ('4', '李四', '25', '計算機科學與技術');
INSERT INTO `person` VALUES ('5', '孫五', '25', '計算機科學與技術');
INSERT INTO `person` VALUES ('6', '錢六', '25', '計算機科學與技術');
INSERT INTO `person` VALUES ('7', '趙七', '25', '計算機科學與技術');
INSERT INTO `person` VALUES ('8', '劉八', '25', '計算機科學與技術');
INSERT INTO `person` VALUES ('9', '張九', '25', '計算機科學與技術');
INSERT INTO `person` VALUES ('10', '鄭十', '25', '計算機科學與技術');
SET FOREIGN_KEY_CHECKS=1;

二、路由（就是映射地址，作過編程開發的都懂，簡單舉例 "/business/person/getPersonById.do"）

　　在routes目錄下建立 person.js，此模塊負責映射地址的註冊，簡言之就至關MVC的Controller層，這裏並非傳統的MVC模式，此處只作了功能實現。

var express = require('express');
var router = express.Router();
//引入數據庫包
var db = require("./db.js");

/* GET  listing. */
// router.get('/', function(req, res, next) {
//   res.send('respond with a resource');
// });

/**
 * 查詢列表頁
 */
router.get('/', function (req, res, next) {
    db.query('select * from person', function (err, rows) {
        console.log(rows);
        if (err) {
            res.render('persons', {title: '人員管理', datas: []});  // this renders "views/persons.html"
        } else {

            res.render('persons', {title: '人員管理', datas: rows});
        }
    })
});
/**
 * 新增頁面跳轉
 */

router.get('/add', function (req, res) {
    res.render('add');
});
router.post('/add', function (req, res) {
    var name = req.body.name;
    var age = req.body.age;
    var professional = req.body.professional;
    db.query("insert into person(name,age,professional) values('" + name + "'," + age + ",'" + professional + "')", function (err, rows) {
        if (err) {
            res.end('新增失敗：' + err);
        } else {
            res.redirect('/persons');
        }
    })
});

/**
 * 刪
 */
router.get('/del/:id', function (req, res) {
    var id = req.params.id;
    db.query("delete from person where id=" + id, function (err, rows) {
        if (err) {
            res.end('刪除失敗：' + err)
        } else {
            res.redirect('/persons')
        }
    });
});
/**
 * 修改
 */
router.get('/toUpdate/:id', function (req, res) {
    var id = req.params.id;
    console.log(id);
    db.query("select * from person where id=" + id, function (err, rows) {
        if (err) {
            res.end('修改頁面跳轉失敗：' + err);
        } else {
            res.render("update", {datas: rows});       //直接跳轉
        }
    });
});
router.post('/update', function (req, res) {
    var id = req.body.id;
    var name = req.body.name;
    var age = req.body.age;
    var professional = req.body.professional;
    db.query("update person set name='" + name + "',age='" + age + "',professional= '" + professional + "' where id=" + id, function (err, rows) {
        if (err) {
            res.end('修改失敗：' + err);
        } else {
            res.redirect('/persons');
        }
    });
});
/**
 * 查詢
 */
router.post('/search', function (req, res) {
    var name = req.body.s_name;
    var age = req.body.s_age;
    var professional = req.body.s_professional;

    var sql = "select * from person";

    if (name) {
        sql += " and name like '%" + name + "%' ";
    }
    if (age) {

        sql += " and age=" + age + " ";
    }
    if (professional) {
        sql += " and name like '%" + professional + "%' ";
    }
    sql = sql.replace("and","where");
    db.query(sql, function (err, rows) {
        if (err) {
            res.end("查詢失敗：", err)
        } else {
            res.render("persons", {title: '人員管理', datas: rows, s_name: name, s_age: age});
        }
    });
});


module.exports = router;

三、視圖刪除views下的.ejs文件，建立項目截圖中的對應html文件，此處只有對persons.html、add.html、update.html 作講述。

3.1 persons.html 這個文件是人員管理列表頁面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
    <style>
        div{width:800px;margin: 0 auto;}
        table {border-collapse:collapse;border-spacing:0;width:800px;}
        table tr td ,table tr th {border-top:solid 1px #ccc;border-left:solid 1px #ccc;line-height: 40px;text-align: center;}
        table tr td:last-child, table tr th:last-child {border-right:solid 1px #ccc;}
        table tr:last-child td{border-bottom:solid 1px #ccc;}
        a{text-decoration: none;font-size: 14px;}
        .text{width:150px;}
    </style>
</head>
<body>
<div>
    <div style="">
        <div style="float: left;width:10%;">
            <a href="/persons/add">新增</a>
        </div>
        <div style="float: right;width:90%;">
            <form action="/persons/search" method="post">
                姓名：<input type="text" name="s_name" value="" class="text"> &nbsp;&nbsp;
                年齡：<input type="text" name="s_age" value=""  class="text"> &nbsp;&nbsp;
                職業：<input type="text" name="s_professional" value="" class="text"> &nbsp;&nbsp;
                <input type="submit" value="查詢">
            </form>
        </div>
    </div>

    <table style="">
        <tr>
            <th width="10%">編號</th>
            <th width="15%">操做</th>
            <th width="15%">姓名</th>
            <th width="10%">年齡</th>
            <th width="50%">職業</th>
        </tr>
        <% if (datas.length) { %>
        <% datas.forEach(function(person){ %>
        <tr>
            <td><%= person.id %></td>
            <td><a href="/persons/del/<%= person.id %>">刪除</a>&nbsp;&nbsp;<a href="/persons/toUpdate/<%= person.id %>">修改</a></td>
            <td><%= person.name %></td>
            <td><%= person.age %></td>
            <td><%= person.professional %></td>
        </tr>
        <% }) %>
        <% } %>
    </table>
</div>

</body>
</html>

3.2 add.html 添加人員的頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增頁面</title>
</head>
<body>
    <div style="width: 800px;margin: auto;">
        <form action="/persons/add" method="post">
            姓名：<input type="text" name="name">
            年齡：<input type="text" name="age">
            職業：<input type="text" name="professional">
            <input type="submit" value="提交">
        </form>
    </div>
</body>
</html>

3.3 update.html 更新人員信息的頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改頁面</title>
</head>
<body>
    <div style="width: 800px;margin: auto;">
        <form action="/persons/update" method="post">
            <input type="hidden" value="<%= datas[0].id %>" name="id">
            姓名：<input type="text" name="name" value="<%= datas[0].name %>">
            年齡：<input type="text" name="age" value="<%= datas[0].age %>">
            職業：<input type="text" name="professional" value="<%= datas[0].professional %>">
            <input type="submit" value="提交">
        </form>
    </div>
</body>
</html>

4、僅有上述文件，項目仍是不能運行起來的，最終要的一個文件app.js，此文件事node.js服務的總配置文件，它告訴框架文件模塊的加載順序。

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var  persons= require('./routes/person');

var app = express();

// view engine setup
// app.set('views', path.join(__dirname, 'views'));
// app.set('view engine', 'ejs');

//註釋掉默認的，本身手動修改默認引擎
app.set('views', path.join(__dirname, 'views'));
app.engine('.html', require('ejs').__express);
app.set('view engine', 'html');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/persons',persons );

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

5、通過上述步驟以後，點擊運行，可能會報錯模塊缺失的錯誤，這個問題很容易解決，只須要使用node自帶的npm下載對應的模塊到 node_modules,至此項目配置結束。

瀏覽器地址欄輸入：http://localhost:3000/persons，地址中的persons是在app.js中配置的。

app.use('/', index);
app.use('/persons',persons );

運行界面以下圖所示：

　　一、列表頁/查詢頁（支持姓名和職業的模糊查詢、年齡的精確查詢）

　　二、新增頁面，這裏只作了簡單的功能，沒有注意太多的樣式。

　　三、更新頁面

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

基於nodejs+express+mysql+webstorm+html的 增刪改查

基於nodejs+express+mysql+webstorm+html的增刪改查