Node.js 从入门到放弃（五）

最新推荐文章于 2024-04-08 08:45:03 发布

guizi0809

最新推荐文章于 2024-04-08 08:45:03 发布

阅读量191

点赞数

分类专栏： node.js 文章标签： node.js

本文链接：https://blog.csdn.net/guizi0809/article/details/120395447

版权

node.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

ejs模板引擎

下面是一个最简单的node.js路由：根据不同的url请求，处理不同的业务逻辑

import http from 'http'
import url from 'url'

http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/html;charset=utf8'})
    const pathName = url.parse(req.url).pathname
    if (pathName === '/login') {		// 根据pathName路径的不同，处理对应不同的业务逻辑
       	res.end('登录页面')
    } else if (pathName === '/register') {
        res.end('注册页面')
    } else {
        res.end('404页面')
    }
}).listen(3000)

1.安装ejs模板引擎

npm install ejs --save

2.使用ejs模板引擎

创建一个views目录，用来存在ejs模板。在views目录中新建一个login.ejs文件，如下，我们发现ejs文件和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>
</body>
</html>

使用ejs.reanderFile方法渲染刚刚创建的login.ejs模板文件

import http from 'http'
import url from 'url'
import ejs from 'ejs'
http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/html;charset=utf8'})
    const pathName = url.parse(req.url).pathname
    if (pathName === '/login') {
       ejs.renderFile('./views/login.ejs', {}, (error, data) => {
           res.end(data)
       })
    } else if (pathName === '/register') {
        res.end('注册页面')
    } else {
        res.end('404页面')
    }
}).listen(3000)

浏览器渲染的效果如下：
在这里插入图片描述
3.给ejs模板引擎传值

// 假装从数据库获取数据
const data = 'hello world!'
const list = [{id: 1, name: '诸葛亮'}, {id: 2, name: '孙悟空'}]
// renderFile方法第二个参数传递数据
ejs.renderFile('./views/login.ejs', {title: data, list}, (error, data) => {
    res.end(data)
})

修改login.ejs文件，接收传递过来的数据

1.接收变量<%=prop%>， prop表示变量
2.循环，js代码写在<%js代码%>中
3.ejs模板引擎具体用法请查阅 ejs中文文档

<h1>登入页面</h1>
<h2><%=title%></h2>
<ul>
	<% for(let i = 0; i < list.length; i++) {%>
		<li><%=list[i].name%></li>
	<%}%>
</ul>

浏览器渲染的效果如下：
在这里插入图片描述

get/post获取数据

登录模板页面 login.ejs

<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="handleLogin" method="get">
        <label for="userName">用户名：</label><input type="text" name="userName" id="userName"/> 
        <label for="password">密码：</label><input type="password" name="password" id="password"/>
        <button type="submit">登录</button>
    </form>
</body>
</html>

首页模板页面 index.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>
</body>
</html>

服务器 server.js

import http from 'http'
import url from 'url'
import ejs from 'ejs'
import fs from 'fs'
http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/html;charset=utf8'})
    const pathName = url.parse(req.url).pathname
    // 根据路由渲染ejs登录页面
    if (pathName === '/login') {
        ejs.renderFile('./views/login.ejs', (error, data) => {
            res.end(data)
        })
    } else if (pathName === '/handleLogin') {
        let str = ''
        // get请求获取query参数
        if (req.method === 'GET') {
            const query = url.parse(req.url, true).query
            // 跳转首页
            ejs.renderFile('./views/index.ejs', { data: query }, (error, data) => {
                res.end(data)
            })
        }
        // post请求获取参数
        if (req.method === 'POST') {
            req.on('data', chunk => {
                str+=chunk
            })
            req.on('end', () => {
            	// 写入文件，模拟将用户信息存储数据库
                fs.appendFile('user.txt', `${str}\n`, () => {})
                res.end('登录成功！')
            })
        }
    } else {
        res.end('404页面')
    }
}).listen(3000)

登录页面form表单method属性设置为get或post
在这里插入图片描述

get请求参数在url上，获取参数并渲染在ejs模板上
在这里插入图片描述
post请求参数在FormData上，获取参数并写入user.txt文件，模拟存入数据库

题外话：
在简单的登录场景中，我们一般将用户注册的用户信息存在数据库，用户登录时，先从数据库中查询用户是否存在，若不存在，则提醒用户去注册。若存在，则匹配用户输入的账号和密码，和数据库存储的用户信息不一致说明用户登录输入的账号或密码错误。
然而在实际开发中，登录场景往往比较复杂且多样化，比如扫码登录，单点登录，手机验证码登录，手机号一键登录等等，为了安全起见，登录的账号和密码往往需要加密处理，有时需要用户手动滑动图片验证以防止自动化程序攻击等等，考虑的问题需要全面和深入。宏伟的长城是一块一块砖修建成的，同样一个完整的项目也是一段一段代码相辅相成构成的，所以需要我们一步一脚印学会基础知识，不积跬步无以至千里。学无止境，请不要放弃，加油！

guizi0809

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Node.js 从入门到放弃（五）

ejs模板引擎下面是一个最简单的node.js路由：根据不同的url请求，处理不同的业务逻辑import http from 'http'import url from 'url'http.createServer((req, res) => { res.writeHead(200, {'Content-Type': 'text/html;charset=utf8'}) const pathName = url.parse(req.url).pathname if (
复制链接

扫一扫

专栏目录