Express练习

01.express----用get和post实现登陆

需求：前端2个页面(登陆/注册)，登陆使用get请求，注册使用post请求

前端页面：

后台：

const express=require('express');
const app=express();
let bodyParser=require('body-parser');
let urlencodedParser=bodyParser.urlencoded({extended:false});

//  路径是/自动跳转到index.html(登陆页面)
app.use('/',express.static('./www/form'));
//  路径是/sign自动跳转到sign.html(注册页面)
app.use('/sign',express.static('./www/form/sign.html'));

//是get处理get，是post处理post
app.get('/submit',(req,res)=>{
    res.send(req.query);
});

app.post('/submit',urlencodedParser,(req,res)=>{
    res.send(req.body);
});

app.listen('8989');

效果：

02.express—ajax实现登陆

通过ajax实现登陆

index.html:

success.html:

js代码：

 $('button').click(()=>{
    $.ajax({
    	//url：请求的地址
        url:'http://localhost:8989/submit',
        //get方法
        method:'get',
        data:{//向后台发送输入的数据
            user:$('input[type=text]').val(),
            pass:$("input[type=password]").val()
        },
        success(res){
            if(res==''){//如果没输入用户名
                $("span").html('您输入的用户名有误');
            }else{//输入了用户名(仅测试没验证)
                $("span").html('√');
                //跳转到登陆成功页面
                location.href='success.html';
            }
        }   
    });
});

后台部分:

const express=require('express');
const app=express();
let bodyParser=require('body-parser');
let urlencodedParser=bodyParser.urlencoded({extended:false});

app.use('/',express.static('./www/form'));
//注意呈递静态资源！！！！
app.use('/public',express.static('./public'));

app.get('/submit',(req,res)=>{
    console.log(req.query);
    res.send(`${req.query.user}`);
});

app.post('/submit',urlencodedParser,(req,res)=>{
    res.send(req.body);
});

app.listen('8989');

效果：


空用户名测试(注释了else跳转)