基于原生JS+node.js+mysql打造的简易前后端分离用户登录系统

一、登录页面

这个没什么说的，就放两张图

二、服务器端

用 express（文档）搭建服务器，数据裤用 mysql(基础语句），新建一个 users，再新建一张 users 表，我们用这张表。

服务器主要是编写一个简单的接口用来处理页面发过来的请求。

// 引入依赖
var express = require('express');
var url = require('url');
var bodyParser = require('body-parser');
var app = express();
// 核心逻辑模块
var sql = require('./login.js');

app.use(bodyParser.urlencoded({
    extended: true
}));

// 设置响应头
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header('Access-Control-Allow-Headers','x-requested-with,content-type,Access-Control-Allow-Origin');
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

// 暴露接口
app.post('/user',function(req, res){
    var query = url.parse(req.url,true).query;
    switch(query.ctr){
        case 'add':
            sql.catchres({type:'INSERT',data:req.body},function(msg){
                res.send(msg);
            });
            break;
        case 'update':
            sql.catchres({type:'UPDATE',data:req.body},function(msg){
                res.send(msg);
            });
            break;
        case 'delete':
            sql.catchres({type:'DELETE',data:req.body},function(msg){
                res.send(msg);
            });
            break;
        case 'login':
            sql.catchres({type:'SELECT',data:req.body},function(msg){
                res.send(msg);
            });
            break;
        default:
            res.send('undefined contrl!');
    }

});

// 监听端口
app.listen('8080',function(){
    console.log('listen at 8080')
})

三、运行

node app.js

我们的服务器就启动了，监听 8080 端口，我们向 8080 端口发起请求：

原码在我的 github 仓库，欢迎下载：https://github.com/lastnigtic/node-login