初涉全栈：Node+MySQL实现登录的简单功能_小铭子的专栏文章_微信文章

一、几种node的典型应用

自动化脚手架工具：vue-cli、webpack-cli和定制化脚手架工具开发。
中间层
保持前后端分离的前提下，使用node搭建Web Server简易服务器，用来做页面的服务端渲染和数据接口的合并。
灵活运用node辅助项目架构
比如使用node做cache缓存。
全栈开发
使用node做小型的商业项目、个人博客的全栈。

二、安装mysql

mysql官网下载安装MySQL Server。安装好后，登陆mysql，看mysql是否连接成功，如下图所示：

三、实现登录的简单功能

1、创建数据库和表

create DATABASE user;

use user;

create table userlist(
id int primary key auto_increment,
username char(30) unique,
password char(30)
);
复制代码

2、向用户表中插入数据

insert into userlist values(1,'zhangsan','123456');
复制代码

执行插入SQL语句后，userlist表中有如下数据：

3、node项目中安装mysql包连接数据库

node项目中使用npm先安装mysql工具包：

npm install mysql --save
复制代码

创建server.js，用mysql包连接mysql：

const mysql = require('mysql');

// 建立数据库连接池
const pool = mysql.createPool({
    host: '127.0.0.1',
    port: '3306',
    user: 'root',
    password: 'root123456',
    database: 'user'
})
复制代码

4、使用express框架实现登录功能

client端： 创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
</head>
<body>
    <input type="text" id="username"/>
    <input type="password" id="password"/>
    <button id="login">登录</button>
    
    <script type="text/javascript">
    $('#login').click(function(){
        $.ajax({
            type: 'POST',
            url: '/login',
            dataType: 'json',
            data: JSON.stringify({
                username: $('#username').val(),
                password: $('#password').val()
            }),
            success: function (data) {
                if(data.success) {
                    window.location.href = '/welcome';
                }else{
                    alert('账号密码错误')
                }
            }
        });
    })
    </script>
</body>
</html>
复制代码

server端：

var fs = require('fs');
var mysql = require('mysql');
var express = require('express');
var app = express();

// 建立数据库连接池
const pool = mysql.createPool({
    host: '127.0.0.1',
    port: '3306',
    user: 'root',
    password: 'root123456',
    database: 'user'
})

app.get('/', function(req, res) {
    fs.readFile('./index.html', function(err, data){
        res.setHeader('Content-type','text/html;charset=UTF-8')
        var _data = data.toString();
        res.send(_data);
    })
})

app.post('/login', function(req, res) {
    var reqData = "";
    res.setHeader('Content-type','text/json;charset=UTF-8')
    req.on('data', function(data){
        reqData += data
    });
    req.on('end', function(){ 
        var dataOb = JSON.parse(reqData);
        var word = "select * from userlist where username='";
        word += dataOb.username + "'";
        word += " and password='";
        word += dataOb.password + "'";

        pool.query(word, function(error, result, fields){
            if (error) throw error;

            if(result && result.length > 0) {
                // 如果要在express里面使用session需安装express-session
                res.setHeader('Set-Cookie', 'username='+result[0].username)
                res.send(JSON.stringify({
                    success: true,
                    message: '登录成功！'
                }))
            }else{
                res.send(JSON.stringify({
                    success: false,
                    message: '登录失败！'
                }))
            }
        })
    })
})

app.get('/welcome', function(req, res) {
    res.send('Login success!')
})

app.listen(3000);
复制代码

登录功能结果图：