用express创建接口

chuyuni

于 2024-01-05 21:01:31 发布

阅读量344

点赞数 10

文章标签： express

本文链接：https://blog.csdn.net/chuyuni/article/details/135356180

版权

今天我们就来看一篇我们老师为我们听写所写的一个题。首先我们看一下这个题目是：

请使用express创建服务，端口号为81，需解决跨域问题，需托管静态文件名称为es6，创建一个get接口，接口名称为/login，接口中需要验证账号为admin密码123456,验证成功返回登录成功页面路径http://127.0.0:81/es6/day01.html，否则登录失败访问http://127.0.0:81/es6/day02.html，使用jq中ajax调取服务，需要验证输入不能为空

首先第一步我们要创建服务然后题目要求要托管文件名称es6，则用app.use("/es6",express.static("es6"))解决跨域问题。

然后创建get接口语法为app.get(接口名称,function（）{})

const express = require("express");

const cors = require("cors");

const app = express();

app.use("/es6",express.static("es6"))

app.use(cors());

app.get("/login",(req,res)=>{

    console.log(req.query);

    let data = req.query;

    if(data.userName=="admin"&&data.passWord=="123456"){

        res.send("http://127.0.0.1:81/es6/day01.html

");

    }else{

        res.send("http://127.0.0.1:81/es6/day02.html

");

    }

})

app.listen(81,()=>{

    console.log("express服务启动成功");

})

接下来就是我们首先要敲打的样式

然后我们最基本的就要保证账号密码可以输入我们就需要用<input></input>标签可以设置属性我们知道

账号一般都是数字或者是文字类那我们就可以给他的type设置number属性值或者text属性值；

密码我们也可以给它的type设置text属性值或者number属性值再或者password属性值。

我们账号和密码的最基本输入框有了那我们还差一个登录的。

那一般我们都用按钮<button></button>标签来写登录或者取消确定键。

css样式可以根据自己的喜好来写，如果有规定要求那就根据要求来完成我们需要写的页面一切根据自己的需求。

最后我们需要用jq调取接口

语法如下：

$.ajax({
            type:"get",-------------------------（调取接口的方法）
            url:`${base}/login`,-----------------（路径）base= "http://127.0.0.1:81"
            data:{ ------------------------内容
                userName:user,
                passWord:pass
            },
            success:(req)=>{---------------------------------------函数

            }
        })
    })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
     * {
				margin: 0;
				padding: 0;
			}
     input{
                width: 300px;
				height: 30px;
				font-size: 20px;
                background-color:pink;
        }
     .btn{
                width: 30px;
				height: 20px;
				font-size: 16px;
                background-color:greenyellow;

         }




    </style>
</head>
<body>
    请输入账号：<input type="text" name="" id="" class="zh"><br>
    请输入密码：<input type="text" name="" id="" class="mm"><br>
    <button class="btn">登录</button>

</body>
<script src="../es6/jquery-1.8.3.js"></script>
<script>
    let base = "http://127.0.0.1:81";
    $(".btn").click(function(){
        let user = $(".zh").val();
        let pass = $(".mm").val();
        if(!user && !pass){
            console.log("请输入账号密码");
            return;
        }
        $.ajax({
            type:"get",
            url:`${base}/login`,
            data:{
                userName:user,
                passWord:pass
            },
            success:(req)=>{
                console.log(req);
           location.href = req;

            }
        })
    })
</script>
</html>

chuyuni

关注

10
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
用express创建接口

语法如下：$.ajax({type:"get",-------------------------（调取接口的方法）url:`${base}/login`,-----------------（路径）base= "http://127.0.0.1:81"data:{ ------------------------内容},success:(req)=>{---------------------------------------函数})
复制链接

扫一扫