Node.js+Express框架

最新推荐文章于 2024-08-16 13:37:37 发布

阳光葡萄

最新推荐文章于 2024-08-16 13:37:37 发布

阅读量562

点赞数

分类专栏： express+node+ejs 文章标签： node.js 前端 javascript 前端框架

本文链接：https://blog.csdn.net/qq_33274031/article/details/124434797

版权

express+node+ejs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

快速初始化package.json文件 npm init -y

保存到生产环境中 cnpm install express --save

设置自启动 nodemon demo01-express.js

//下载Express模块
//cnpm init -y 初始化一个package.json文件
// cnpm install express --save 
let express = require("express");
//创建一个服务器对象app
let app = new express(); //可以省略new关键字

//配置express路由
// 路由是分发页面的--不同的路由对应的是不同的的内容
// 主域名  目录 跳转不同的路由连接
//http://localhost:3000/login 登录路由
//http://localhost:3000/register 注册路由
//http://localhost:3000/home  首页路由

//获取home页面，req请求 res响应
// request 请求
// response 响应
//配置一个首页路由来获取首页信息
app.get("/home", (req, res) => {
    let arr = [1, 2, 3, 4, 5, 66, 7];
    let lis = "";
    arr.forEach((item) => {
        lis += `<li>${item}</li>`
    })
    let oHtml = `<!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>
        <ul>${lis}</ul>
    </body>
    
    </html>`;
    res.send(oHtml); // 给前台响应首页内容
})
app.listen(3000, () => {
    console.log("3000runing")
})

优雅写法

除了内置模块，其他模块要下载相应的-引擎，这里在npm中了解ejs使用方法

npm install ejs

package.json文件中已经显示ejs版本，默认是最高版本；指定版本： npm install ejs@版本号

从demo02-express-ejs.js渲染views-home.ejs模板

demo02-express-ejs.js文件

//下载Express模块
//cnpm init -y 初始化一个package.json文件
// cnpm install express --save 
let express = require("express");

//cnpm install express --save
//ejs是一个模板引擎
//注意事项：使用的模块必须放到页面最顶部引入，或者所有变量之上引入
let ejs = require("ejs");



//创建一个服务器对象app
let app = new express(); //可以省略new关键字

// 使用ejs模板步骤：
// 1-下载引入（引入在页面的最顶部）let ejs = require("ejs");
// 2-配置模板引擎类型  app.set("view engine",ejs)
//3-配置模板所在目录 在根目录中建一个views文件夹，将模板放在该文件夹中便于将来自动读取

//给服务器对象设置 ejs引擎
// view engine 视图引擎
app.set("view engine", ejs);
app.set("views", __dirname + "/views"); //如果模板在views文件夹中，此处可省略【此处没有省略】
// console.log(__dirname); //当前文件所在目录F:\target2022\pd\nodeJs\day5\test
// 如果是template模块文件夹，可以把views换成template


//配置express路由
// 路由是分发页面的--不同的路由对应的是不同的的内容
// 主域名  目录 跳转不同的路由连接
//http://localhost:3000/login 登录路由
//http://localhost:3000/register 注册路由
//http://localhost:3000/home  首页路由

//获取home页面，req请求 res响应
// request 请求
// response 响应
//配置一个首页路由来获取首页信息
app.get("/home", (req, res) => {
    //引用ejs模板引擎
    let arr = [11, 22, 33, 45, 66, 78, 88, 99];
    let userList = [{
        id: 1,
        username: "大家好1"
    }, {
        id: 2,
        username: "大家好2"
    }, {
        id: 3,
        username: "大家好3"
    }, {
        id: 4,
        username: "大家好4"
    }, {
        id: 5,
        username: "大家好5"
    }, {
        id: 6,
        username: "大家好6"
    }, {
        id: 7,
        username: "大家好7"
    }, {
        id: 8,
        username: "大家好8"
    }]
    res.render("home.ejs", {
        list: arr,
        userList: userList
    }); //渲染模板文件，给浏览器   
    //list:arr,将数据渲染给模板，list是给模板的属性，为了模板识别，list可以是其他的单词；arr是数据
})
app.listen(3000, () => {
    console.log("3000runing")
})

views-->home.ejs文件  
// ejs文件中不可以写注释
// <% js代码开始 %>
//   <h2><%= 写数据或变量 %></h2>
//   <%  js代码结束 %>



<!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>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
        <li>列表6</li>
        <li>列表7</li>
        <li>列表8</li>
        <li>列表9</li>
        <li>列表10</li>
    </ul>
    <ul>
        <% for(let i=0;i<list.length;i++) { %>
        <li><%=list[i]%></li>
        <% } %>
    </ul>
    <ul>
        <% for(let i=0;i<userList.length;i++) { %>
        <li><%=userList[i].username%></li>
        <% } %>
    </ul>
</body>

</html>