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

Posted 2020-09-17 lastnigtic

一、登录页面

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

二、服务器端

用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