ejs模板引擎用法,nodejs路由

nodejs 的路由

通过 url 模块对 url 地址进行解析， 实现路由的操作

const http = requrie('http')
const url = requrie('url')
http.createServer((req, res) => {
    
    
    //  对请求的路径进行解析
    let pathname = url.parse(req.url).pathname;
    if(pathname == '/'){
    
    
        // 相关的处理 
    }else if(pathname == '/login'){
    
    
           // 相关的处理
    }....

}).listen(3000, () => {
    
    
    console.log('server runnning ....')
})

express 动态路由

/zoom/:id

const express = require('express');
const app = express();
//匹配路由
app.get('/', (req, res) => {
    
    
    res.send('首页')
})
app.get('/zoom/:id', (req, res) => {
    
    //zoom后面有值才会跳转
 	 console.log(req.params);//这是获取动态路由的参数
    res.send('这是动态路由下的页面')
})
app.listen(3000, () => {
    
    
    console.log('server....')
})

获取动态路由的参数结果是一个对象
req.params
因为动态路由参数是对象,所以获取方式为
req.params.id给它起个变量名就能用了

官网
https://ejs.bootcss.com/

ejs

ejs 是js的模板引擎， 可以识别一些简单的js语句和使用一些js简单表达式

ejs插件下载

express 使用模板引擎， 安装先关的模板引擎插件，但是不许要引入插件，需要进行相关配置
// 1. 下载安装ejs : npm i ejs --save
// 2. 在项目的根目录下 创建一个 views 的文件夹； 该文件夹自动默认为express 的模板文件的根目录, 创建的文件扩展名为 .ejs ；

ejs 的语法

ejs 是js的模板引擎，可以识别 HTML所有的语法 ； 可以直接使用 ejs 的语法

ejs 的在express中的使用步骤

流程控制语句 if语句 <% js代码 %>

1. if语句

//  js 的if 语句格式
<% if(条件) {
    
     %>
//  处理的逻辑 渲染的HTML结构
<% } %>

2. if-else语句

//  js 的if 语句格式
<% if(条件) {
    
     %>
//  处理的逻辑 渲染的HTML结构
<% }else {
    
     %>
//  处理的逻辑 渲染的HTML结构
<% } %>

3. if-else的嵌套

//  js 的if 语句格式
<% if(条件) {
    
     %>
//  处理的逻辑 渲染的HTML结构
<% }else  if(){
    
     %>
//  处理的逻辑 渲染的HTML结构
<% }else if(){
    
     %>
// .....
<% else {
    
    %>
// ...
<% }%>

流程控制语句 for循环语句 <% js代码 %>

1. for循环

<%for(let i = 0; i < arr.length; i++) {
    
    %>
//  处理的逻辑 渲染的HTML结构
<% } %>

2. forEach 循环

<% arr.forEach(function(item, index) {
    
     %>
//  处理的逻辑 渲染的HTML结构
<% }) %>

插值语句 <%= value %>

<% arr.forEach(function(item, index) {
    
     %>
//  处理的逻辑 渲染的HTML结构
    <li><%= item.title %></li>
<% }) %>

输出非转义的数据到模板

<%- <p>内容<p>%>
可以解析标签

来看一个实例
首先npm init -y 生成一个默认的包管理

然后下载需要用的插件,是可以一起下载的

这是万表项目的一段实例

<ul class="clearfix">
            <% data.forEach(item=>{
    
    %>
                <li class="lister">
                    <a target="_blank" href="#" class="s_s_goods_img">
                        <img src="<%= item.img_url%>" alt="" class=" lazy-load">
                        <div class="yao">
                          <%if(item.small){
    
    %>
                            <img src="<%= item.small%>" alt="" class="tutu">
                         <% }%>
                         <%if(item.small){
    
    %>
                          <span class="dao">￥<%= item.s_price%></span>
                          <%}%>
                        </div>
                    </a>
 <% })%>