使用node.js+express+mysql实现简单的网页数据写入到数据库功能

发表于 | 分类于 | 评论数： | 阅读次数：

前言

最近几天一直在搞这个东西，越学越发现自己的知识太少。从express搭建网页结构开始，发现需要掌握jade的缩进书写规则，真的蛋疼，一不小心就写错了。接着看怎么把数据导入到mysql，又需要ajax方法，由于我没有基础，只能先去看使用jquery封装的ajax方法，本身jquery也不太熟悉，又恶补了一波jquery。另外数据库这方面我也是小白，所以又去看了mysql的基本语句，前后用了将近一星期时间。写下这篇文章，便于以后翻到看看自己有多菜哈哈。

实现的功能

简单的网页数据保存到mysql数据库的功能。（在windows平台）

项目环境准备

1.node.js和npm的安装

2.express的安装

  • express的安装可以使用npm，可以使用命令 npm install express -g 来进行express的全局安装。express是构建网页基本框架的工具。

    mysql数据库的设计

    1.mysql下载安装与启动

    mysql的下载安装可以到mysql官网进行，具体的安装流程要取决于你的电脑，安装方法网上有很多，这里给出一篇我随便在百度搜索到的文章，需要注意到的是注册的时候要填写数据库用户名和密码，请牢记你的用户名和密码，同时建议把mysql添加到系统启动目录，这样可以实现开机自启，避免了每次开机在命令行输入net start mysql 的繁琐步骤。当开机以后在系统进程里面看到一个叫mysqld.exe的进程时，说明mysql启动成功了.

    2.数据库可视化工具的使用

    为了减少操作的难度，我使用了可视化的数据库操作工具，这里推荐一款名为Navicat for MySql的可视化工具，使用起来十分方便。操作也很简单，登陆数据库的时候，用户填root,密码就是配置数据库时的密码， 链接名可以随便起，端口号为3306，主机名默认localhost不用修改。登陆以后可以实现增删数据库，增删表的操作。

3.配置mysql

以我自己的数据库为例，新建数据库azkaban（这是我学弟项目的名字），在这个数据库里新建表excutors。

接着设计表元素，这里我添加了id，host,port,active四个选项接着保存表。

项目设计

我们要实现的目的比较简单。使用express demo1可以新建名为demo1的工程，工程目录如下.

接下来的步骤：

  • 在package.json中田间mysql依赖： "mysql":"latest" ,使用node.js中的npm install 命令安装依赖包。
  • 编写录入信息界面register.jade文件,用来实现简单的信息录入界面以及使用$.ajax()的post方法向服务器发起登陆请求。代码如下： 
doctype html
html
head
title
link(rel='stylesheet', href='/bootstrap-3.3.7-dist/css/bootstrap.min.css')
script(src='/javascripts/jquery-3.1.1.min.js')
script(src='/bootstrap-3.3.7-dist/js/bootstrap.min.js')
body(style='background: #dcd9da')
.container
  .row
    .col-md-4.col-md-offset-4
      .panel.panel-default(style='margin-top: 60px')
        .panel-heading(style='background: #0d6aad')
          h3(align='center', style='color: #ffffff;')
            | azkaban
        .panel-body(style='background: #e0e1ea')
          .form-group
            .input-group
              span.input-group-addon host
              input#host.form-control(type='text')
          .form-group
            .input-group
              span.input-group-addon port
              input#port.form-control(type='port')

          .form-group
            .input-group
              span.input-group-addon active
              input#active.form-control(type='text')
          .form-group
            button#register.btn.btn-success.btn-block(type='button')
              | log in
          #popup.alert.alert-warning
            a#close.close(href='#') ×
            div(align='center')
              strong#popup-content(style='color: #b12e30;')
script(type='text/javascript').
  $(document).ready(function () {
    var host = $("#host");
    var port = $("#port");
    var active = $("#active");
    var register = $("#register");
    var popup = $("#popup");
    var popupContent = $("#popup-content");
    var close = $("#close");
    popup.hide();
    close.click(function () {
      popup.hide();
    });
    register.click(function () {
      if (host.val() == "" || port.val() == "" || active.val() == "") {
        popup.show();
        popupContent.html("can't be empty！");}  
      else {
        $.ajax({
          url: "/register/userRegister",
          data: {
            host: $("#host").val(),
            port: $("#port").val(),
            active: $("#active").val()
                },
          type: "POST",
          timeout: 36000,
          dataType: "text",
          success: function (data, textStatus) {
            var dataJson = eval("(" + data + ")");
            if (dataJson.code == 200) {
              alert("success");
            } else if (dataJson.code == 400) {
              popup.show();
              popupContent.html("fail,please retry！");
            } else {
              popup.show();
              popupContent.html("error！");
            }
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("error:" + textStatus);
          }
        });
      }
    });
  });
  • 编写录入信息路由register.js文件 
var express = require('express');
var router = express.Router();

var mysql = require('mysql');
var config = require('../model/config');

var pool = mysql.createPool(config.mysql);
/* GET home page. */
router.get('/', function (req, res, next) {
  res.render('register', {title: 'register'});
});
router.post('/userRegister', function (req, res, next) {
  var host = req.body.host;
  var port = req.body.port;
  var active = req.body.active; 
  pool.getConnection(function (err, connection) {
var $sql1 = "INSERT INTO executors(id, host, port, active) VALUES(0,?,?,?)";
connection.query($sql1, [host, port, active], function (err, result) {
  console.log(result);
  if (result) {
result = {
  code: 200,
  msg: 'success'
};
  } else {
result = {
  code: 400,
  msg: 'fail'
};
  }
  res.json(result);
  connection.release();
});

});
  });
module.exports = router;
  • 在app.js中增加register的界面和路由

  • 设置连接数据库参数model/config.js 。在这里我使用用户azkaban创建了数据库azkaban。 

    module.exports = {
  mysql: {
host: '127.0.0.1',
user: 'azkaban',
password: '',
database: 'azkaban',
port: 3306
  }
};

  • 项目运行，在命令行输入npm start来启动应用，接着访问http://localhost:3000/register
    查看网页。

  • 输入数据查看是否能录入到数据库



    这样我们就完成一个简单的功能的实现！
thank u !