一、安装express框架

"dependencies": {
    
    
  "body-parser": "^1.19.0",
  "express": "^4.17.1",
  "mysql": "^2.18.1"
}

express是一款基于node的web应用开发框架。

二、搭建本地服务

1.引入post请求body参数中间件

var express = require('express'); 
var bodyParser = require('body-parser') 

var app = express();
app.use(bodyParser.urlencoded({
    
     extended: false }))
app.use(bodyParser.json())

2.设置请求头

//设置跨域访问
app.all('*', function(req, res, next) {
    
    
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "X-Requested-With");
   res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
   res.header("X-Powered-By",' 3.2.1');
   res.header("Content-Type", "application/json;charset=utf-8");
   next();
});

3.连接数据库

// 连接数据库
var mysql = require('mysql');
var connection = mysql.createConnection({
    
    
  host     : 'localhost',
  user     : 'root',
  password : '12345678',
  database : 'test'
});
connection.connect(function(err){
    
    
    if (err) {
    
          
		console.log('连接数据库出错:' + err);
		connection.end();
		return;
	};
	console.log('数据库连接成功');    
});

4.用node实现简单的注册登录接口

// 登录
app.post("/login",function(req,res){
    
    
    let {
    
    name,password} = req.body
    var  userGetSql = `SELECT * FROM register WHERE name = '${
      
      name}' AND password = '${
      
      password}'`;
    //查 query
    connection.query(userGetSql,function (err, result) {
    
    
        if (err) throw err;
        console.log("result",result)
        if(result.length==0){
    
    
            console.log(("用户名或密码错误"))
            res.send({
    
    
                code:0,
                message:"用户名或密码错误"
            })
        }else{
    
    
            console.log(("登录成功"))
            res.send({
    
    
                code:200,
                message:"登录成功"
            })
        }
    });
})
// 注册
app.post("/register",function(req,res){
    
    
    var {
    
    name,password} = req.body
    var userGetSql = `SELECT * FROM register WHERE name = '${
      
      name}'`;
    var addSql = `INSERT INTO register (id,name,password) VALUES (0,?,?)`
    //查 query
    connection.query(userGetSql,function (err, result) {
    
    
        if (err){
    
    
            console.log('查询出错:' + err);
			return;
        };
        console.log("result",result)
        if(result.length==0){
    
    
            var inserInfo = [name, password]
            console.log(("注册成功"))
            connection.query(addSql,inserInfo,function (error, result){
    
    
                if (error){
    
    
                    console.log('注册出错:' + error);
					return;
                };
                res.send({
    
    
                    code:200,
                    message:"注册成功"
                })
            })
        }else{
    
    
            console.log(("用户已存在"))
            res.send({
    
    
                code:0,
                message:"用户已存在"
            })
        }
    });
})

三、构建简易的前端页面

这里需要三个页面，注册页登录页和首页
通过jquery的ajax去请求本地服务的接口

$('.login').click(function(){
    
    
            let username = $(".username").val()
            let password = $(".password").val()
            if(username && password){
    
    
                $.ajax({
    
    
                    url:"http://localhost:3000/login",
                    dataType:"json",
                    type:"post",
                    data:{
    
    name:username,password},
                    success:(res)=>{
    
    
                        if(res.code == 200){
    
    
                            alert("登录成功")
                            window.location.href = "./home.html"
                        }else{
    
    
                            alert(res.message)
                        }
                    },
                    error:(err)=>{
    
    
                        console.log("fail",err)
                    }
                })
            }else{
    
    
                alert("用户名密码不能为空")
            }
        })