基於原生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