Node.js 使用expresss，ejs模板引擎实现简单的登录注册

枕着光的她

已于 2023-09-20 10:57:40 修改

阅读量722

点赞数

分类专栏： nodejs 文章标签： node.js 服务器 java

于 2022-11-29 11:46:13 首次发布

本文链接：https://blog.csdn.net/m0_69838795/article/details/128094796

版权

nodejs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

express下如何使用ejs模板引擎：

1-安装ejs

2-express下不需要导入ejs 只需要配置模板引擎 app.set("view engine","ejs")

3-在服务器下创建模板引擎

模板引擎的默认路径 views 在该目录下创建ejs模板文件

4--使用render方法进行ejs模板文件的渲染

render( "xxx.ejs" , {数据} )

如何更改模板引擎的默认路径：

app.set( "views" , __dirname + "/" + "static" )

express服务器下配置ejs模板文件的静态资源目录

app.use( express.static( "public" ) )

基础搭建express服务器:

/* 使用express搭建服务器 */
const express = require("express")

//创建express对象 
const app = express()

//配置ejs模板引擎
app.set("view engine","ejs")

//更改模板引擎的默认路径
app.set( "views" , __dirname + "/" + "static" )
 
//配置静态资源目录
app.use( express.static( "public" ) )


//配置路由 express 支持多种请求方式 get post  put delete  patch head...
app.get("/home",(req,res)=>{
    res.render("home",{
        name : "张三",
        age : 19
    })
})

//配置端口号
app.listen(3000,()=>{
    console.log("服务器已启动，端口号为3000");
})

登录注册：

注册需要获取前端的数据，注册get请求，使用res,query 就可以获取前端通过get请求注册的数据信息。

具体代码实现：

express服务器代码：

const url =  require("url")
const fs = require("fs")
const bodyParser = require("body-parser")
// 使用express创建服务器
const express = require("express")

// 创建express对象
const app = express()
app.use(bodyParser())
//配置ejs模板引擎
app.set("view engine","ejs")

//更改模板引擎的默认路径
// app.set( "views" , __dirname + "/" + "static" )
 
//配置静态资源目录
// app.use( express.static( "public" ) )

//配置路由 express 支持多种请求方式 get post  put delete  patch head...
app.get("/home",(req,res)=>{
    res.render("home")
})
//注册页面
app.get("/config",(req,res)=>{
    res.render("config")
})
//点击注册get请求收集账号密码
app.get("/zhu",(req,res)=>{
    let data = req.query
    let datapath = JSON.parse(fs.readFileSync("./data.json"))
    console.log(datapath)
    //判断用户名是否唯一
    if(datapath.some(item => item.username == data.username )){
        res.end("该用户名已经存在")
    }else{
        datapath.push(data)
        fs.writeFileSync("./data.json",JSON.stringify(datapath))
        res.end("成功")
    }
})

//登录接口
app.get("/login",(req,res)=>{
    res.render("login")
})
//点击登录请求接口
app.post("/deng",(req,res)=>{
    let data = req.body
    let pathdata = JSON.parse(fs.readFileSync("./data.json"))
    let one =  pathdata.find(item=> item.username == data.username )
    if(one){ //判断用户名是否存在
        if(data.password == one.password){ //验证密码是否正确
            res.send("登录成功")
        }else{
            res.send("密码不正确")
        }
    }else{
        res.send("没有此账号")
    }
    
})
//配置端口号
app.listen(3000,()=>{
    console.log("服务器已经启动")
})

ejs模块部分：

注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>注册页面</h1>
    <form action="/zhu" method="get">
        <input type="text" name="username" placeholder="请输入用户名">
        <input type="text" name="password" placeholder="请输入密码">
        <input type="submit" value="注册">
    </form>
</body>
</html>

登录：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>登录页面</h1>
    <form action="/deng" method="post">
        <input type="text" name="username" placeholder="请输入用户名">
        <input type="text" name="password" placeholder="请输入密码">
        <input type="submit" value="登录">
    </form>
</body>
</html>

枕着光的她

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Node.js 使用expresss，ejs模板引擎实现简单的登录注册

登录，是post请求，需要安装 body-parser, npm i body-parser, 使用创建的服务器，app.use(body-parse), 这时候可以使用req.body 获取前端通过post请求登录的数据信息。注册需要获取前端的数据，注册get请求，使用res,query 就可以获取前端通过get请求注册的数据信息。2-express下不需要导入ejs 只需要配置模板引擎 app.set("view engine","ejs")4--使用render方法进行ejs模板文件的渲染。
复制链接

扫一扫