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

最新推荐文章于 2023-12-29 15:05:41 发布

weixin_30302609

最新推荐文章于 2023-12-29 15:05:41 发布

阅读量205

点赞数

文章标签：数据库 javascript json ViewUI

原文链接：http://www.cnblogs.com/lastnigtic/p/6846173.html

版权

一、登录页面

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

二、服务器端

用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')
})