NodeJs连接MySQL数据库 | Joyde·zhong的博客

参加了两次FCC线下活动，主题偏向于后端数据分析，后端大神们分享的如python、julia，对于我这个前端小菜更是一窍不通，好在有大神分享了一些工作上面的宝贵经验，最后总结一点：代码语言只是工具，最重要的是思维方式。例如：当拿到这批数据的时候，我想的是怎么在我现有的技术栈前提下把需要的数据提取出来，当然首选NodeJs+MySQL提取数据，之后再在前端显示出来。好，下面就来看看怎么实行的把。

一.安装所需模块

想要Nodejs数据显示在前端，有两种方式：一是纯原生拼接HTML字符串，渲染到某个页面；二是使用模板引擎渲染。

安装NodeJs，点击官网下载安装即可。

安装MySQL数据库，点击官网下载安装即可。当然，为了更直观的可视化操作MySQL数据库，也可以选择安装SQLyog可视化工具。

安装Express框架，npm install express --save，框架默认搭载ejs模板，当然也可以选择jade。

安装ejs模板，npm install ejs --save。

安装Node的mysql数据库模块，npm install mysql --save，–save是否本目录保存还是全局安装的区别。

依赖模块如package.json:

{
  "dependencies": {
    "ejs": "^2.5.8",
    "express": "^4.16.2",
    "mysql": "2.6.2"
  }
}

二.连接MySQL数据库

新建settings.js文件，写入连接配置。

var settings = {};
settings.db = {
    host: 'localhost',
    user: 'root',
    password: '123456',
    database: 'datasname'
}
module.exports = settings;

二.NodeJs后台文件

新建contact.js文件，写入后台配置。

//导入相应模块
var express = require('express');
var mysql = require('mysql');
var app = express();
var settings = require('./settings');

// 设置模板路径，默认为./views  
app.set('views', __dirname + '/views');	//视图文件目录
app.set('view engine', 'ejs');
 
var connection = mysql.createConnection(settings.db);
//创建一个connection
connection.connect(function(err){
    if(err) throw err;
    console.log('-----------connection connect succeed!------------');
}); 

//执行SQL
var sql = 'SELECT col1,col2 from tablename';
arr = [];
connection.query(sql, function(err,result){
        
    if(err) throw err;
    //处理数据
    for(var index in result){
        arr.push(result[index]);
    }
});

//设置根目录文件
app.get('/', function(req, res){
    res.render('index',{title:'Express模板', data: arr});
    
});

//api接口 抛出数据
app.get('/pageApi', function(req, res){
    res.send({page:1});  //发送响应数据
});

//输出值 ajax所在的请求页
app.get('/ajaxtest', function(req, res){
    res.render('ajaxtest',{});
    
});

//关闭connection
connection.end(function(err){
    if(err) throw err;
    console.log('-----------connection end succeed!----------------');
});

//监听服务
app.listen(3000);

三.视图文件

由于上面文件配置，在项目目录下新建views。

新建index.ejs。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>
            <%=title%>
        </title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <style>
            span{
                display: block;
                width: 90px;
                float: left;
            }
            li{
                width: 330px;
                float: left;
            }
        </style>
    </head>
    <body>
        <ul>
            <% for(var i in arr){ %>
            <li>
                <span>playerID：<%= data[i].col1 %></span>
                <span>yearID：<%= data[i].col2 %></span>
            </li>
            <% } %>
        </ul>
    </body>
</html>

新建pageApi.ejs，作为api的载体。

其实不需要写任何东西，实在过意不去就写个HTML5骨架吧。

新建ajaxtest.ejs，作为api数据显示页。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <div><p>这是ajax渲染nodejs数据页面</p></div>
        <div id="content">Page:<p></p></div>
    </body>
</html>

$(function(){
    $.ajax({
        type: "GET",
        url: 'http://localhost:3000/pageApi',
        dataType: 'json',
        success: function(data){
        	$("#content p").text(data.page);
            console.log(data);
        },
        error: function(err){
            console.log(err);
        }
    })
})

四.运行

cmd进入终端，cd到项目所在目录，node contact.js运行启动服务。
在浏览器中输入localhost:3000，即可查看首页效果。
在浏览器中输入localhost:3000/ajaxtest，即可查看请求api数据显示效果，在控制台也把数据console.log()出来了。

最后小结一下，涉及知识：nodejs、npm、mysql、ajax、ejs、express等。