基于nodejs+express+mysql+webstorm+html的 增删改查

一、工具准备

　　Nodejs框架,WebStorm、Mysql服务、Navicat。此篇文章只讲项目的搭建过程，至于Nodejs，WebStorm、Mysql的下载、安装与配置网上资源很多，请自行查阅，本文重点讲述 增删改查，此文为学习笔记，我也是初学者，很多代码没有做过多解释，以免误导他人。

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

二、打开WebStorm创建项目-项目名称自定义，这里我按年月日做项目名称。

1、选怎File-->New-->Project

2、选择nodejs框架、输入项目名称、选择前端模版的引擎（后面会修改为Html）、点击创建。

3、创建的项目目录如下图所示

4、打开app.js，找到模版引擎设置并进行修改

三、上述过程都是准备工作，接下来开始增删改查的讲述，这里我采用数据库、路由、视图的顺序讲解

此处为了方便下面文章的阅读，先给出一个完成后的项目目录截图。

1、数据库  创建数据库的连接

　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;

　　

2、路由（就是映射地址，做过编程开发的都懂，简单举例  "/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;

3、视图 删除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>

四、仅有上述文件，项目还是不能运行起来的，最终要的一个文件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;

五、经过上述步骤之后，点击运行，可能会报错模块缺失的错误，这个问题很容易解决，只需要使用node自带的npm下载对应的模块到 node_modules,至此项目配置结束。

浏览器地址栏输入：http://localhost:3000/persons，地址中的persons是在app.js中配置的模块，如果不写persons。

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

运行界面如下图所示：

　　1、列表页/查询页（支持姓名和职业的模糊查询、年龄的精确查询）

　　2、新增页面，这里只做了简单的功能，没有注意太多的样式。

　　

　　3、更新页面

　　

时间： 2024-10-25 21:53:44

基于nodejs+express+mysql+webstorm+html的 增删改查的相关文章

应用node+express+mysql 实现简单的增删改查

记录下来备忘 1.准备好webstrom编辑器,编辑器调整字体大小等在file->settings->editor下设置 注册码 来源网上: 2017.2.27更新 选择"license server" 输入:http://idea.imsxm.com/ 2.准备好 mysql 因为我本机有安装xampp 所以不需要单独准备mysql数据库 如果没有需要安装,安装了mysql的Navicat Premium管理工具. 3.查看下本机node和express是否安装 版本no

Mysql的基本操作（增删改查）

以下是MySQL最基本的增删改查语句,创建索引,删除索引,查看索引.数据库里表的关联.很多IT工作者都必须要会的命令,也是IT行业面试最常考的知识点,由于是入门级基础命令 增 > create database school; 创建数据库school > use school; 进入数据库 > create table class (id int,name char(10),score decimal(5,2)); 创建一个表class(id整数 name字符串10个 成绩 数据长度5

(原理篇)基于SQLite3轻量级封装,一行代码实现增删改查

最近写的项目中有用到数据库,写了不少蛋疼的sql语句,每次都是好几行代码,而且每次都是重复的没有一点技术含量的代码,虽然也有不少基于sqlite的封装,不过用起来还是感觉不够面向对象! 为了不再写重复的代码,花了几天时间,基于SQLite3简单封装了下,实现了一行代码解决增删改查等常用的功能!并没有太过高深的知识,主要用了runtime和KVC: 首先我们创建个大家都熟悉的Person类,并声明两个属性,下面将以类此展开分析 @interface Person : NSObject @prope

PHP+Mysql 实现数据库的增删改查

PHP和Mysql可以对数据库进行简单的增删改查,本文介绍了新闻列表的后台管理. Mysql数据库创建 创建一个新闻列表的数据库: 1. 查询数据库 1.1. 创建文件dbconfig.php,保存常量 <?php define("HOST","localhost"); define("USER","root"); define("PASS","********"); define

myeclipse中JDBC连接mysql和简单的增删改查

废话不多说,直接上操作图,操作起来理解会更彻底 1.myeclipse中项目结构,先在web-inf-lib下导入jar包,注意Web App Libraries这个目录,下面会有用到的地方 2.连接语句 package utils; import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql

mysql 数据表的增删改查 目录

mysql 表的增删改查 mysql 表的增删改查 修改表结构 mysql 复制表 mysql 删除表 原文地址:https://www.cnblogs.com/mingerlcm/p/10502647.html

Node.js + MySQL 实现数据的增删改查

通过完成一个 todo 应用展示 Node.js + MySQL 增删改查的功能.这里后台使用 Koa 及其相应的一些中间件作为 server 提供服务. 初始化项目 $ mkdir node-crud && cd $_ $ yarn init -y && npx gitignore node 上面的命令创建了一个空文件夹 node-crud,进入之后初始化一个 package.json 以及创建 .gitignore 文件. 安装 Koa 并创建 app.js 以启动一个

48.Python中ORM模型实现mysql数据库基本的增删改查操作

首先需要配置settings.py文件中的DATABASES与数据库的连接信息, DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'orm_intro_dem', 'USER': 'root', 'PASSWORD': 'root', 'HOST': '127.0.0.1', 'PORT': '3306', } } 之后将创建的app添加到settings.py文件中的INSTALLED_APPS中

java使用原生MySQL实现数据的增删改查

一.工具类及配置文件准备工作 1.1 引入jar包 使用原生MySQL,只需要用到MySQL连接的jar包,maven引用方式如下: <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.48</version> </dependency> 1.2 jdbc.propert