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

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.querylet 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.bodylet 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>

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

nodejs-5.1 ejs模板引擎
ejs官方文档:https://ejs.bootcss.com/ https://github.com/mde/ejs 模板引擎:是一种将数据和页面分离的技术.. 1.什么是 EJS? " ...
Node.js「四」—— 路由 / EJS 模板引擎 / GET 和 POST
本文为 Node.js 系列笔记第四篇.文章参考:nodejs 教程:<深入浅出 Node.js>:阮一峰 nodejs 博客: Node.js v16.13.0 文档文章目录一.路由 ...
node.js Stream(流) 和 EJS 模板引擎——0822
一.node.js 中的 Stream(流) 1.什么是 Stream ? Stream 是一个抽象接口,Node 中有很多对象实现了这个接口.例如,对http服务器发起请求的request 对象就是 ...
node+ejs模板引擎的应用
前言: 最近在开发一个关于后台管理系统的基础开发平台,解释一下就是不管什么管理系统都有一些相同的功能,但是又有一些细节不一样,这个基础平台就是实现对于基础功能可以进行快速开发,主要有自定义的生成功能代 ...
jade模板引擎修改为ejs模板引擎
如果我们使用jade模板引擎,里面的页面应该是这样的: 后缀名都是jade 如果想使用ejs 模板引擎要怎么做呢? (1)安装 ejs npm install ejs --save (2)在项目的ap ...
Express框架中如何引用ejs模板引擎
1.如何在项目中安装ejs模板引擎在NodeJS指南中利用利用以下命令建立网站的基本结构: express -t ejs microblog 运行这个命令后继续运行 cd microblog &am ...
express中ejs模板引擎的使用，consolidate模块的使用
在express动态页面的渲染,用的比较多的模板引擎就是 ejs 还有一种是jade 个人觉得吧 jade是靠缩进来实现代码结构的话像我这种比较喜欢看 htm标签的人来说太难受了如果是使用ex ...
ejs模板引擎和html,模板引擎ejs
ejs模板引擎将数据与标签分离开来,这样就不需要前面写的学生管理系统那样,在页面显示信息通过字符串的拼接的方式,而是直接用ejs模板引擎,将服务器端传过来的数据在页面直接显示出来,不会那样的麻烦了. ...
php模板引擎如何实现,php模板引擎技术简单实现
用了smarty,tp过后,也想了解了解其模板技术是怎么实现,于是写一个简单的模板类,大致就是读取模板文件->替换模板文件的内容->保存或者静态化 tpl.class.php主要解析 as ...

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

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

最新文章

热门文章