后端渲染——nodejs

最新推荐文章于 2024-05-27 12:50:02 发布

Eason ZhangF

最新推荐文章于 2024-05-27 12:50:02 发布

阅读量1k

点赞数 1

分类专栏： nodejs 文章标签： nodejs

本文链接：https://blog.csdn.net/html5xiaoxiao/article/details/107418769

版权

nodejs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

页面渲染

前端渲染
由前端写好静态的html页面然后通过http的请求获取到数据将数据更新渲染到页面上
json数据格式

后端渲染
前端写好静态页面将静态页面交给后端
后端将html部分复制进动态文件中 php jsp asp(模板引擎)
对数据进行查询操作交换给浏览器端(html)

后端渲染案例：

项目环境目录
在这里插入图片描述

dao/mysqlserver.js——连接数据库的配置

const mysql=require('mysql');

var pool = mysql.createPool({
    connectionLimit: 10, // 最大连接数
    host: 'localhost',//主机名
    user: 'root',//数据库用户名
    password: 'root',//数据库密码
    database: 'users'//数据库名
});

module.exports = pool;

routes/admin.js——配置路由

const express=require('express');

const router=express.Router();

const mysql=require('../dao/mysqlserver');//引入连接数据库的模块 里面写的是连接数据库的配置

//查询数据库 用get方式
router.get('/',(req,res,next)=>{
    mysql.query('select * from users', function (error, results, fields) {
        if (error) throw error;
          // res.render()  渲染模板引擎
          // 第一个参数  模板引擎的路径和名称
          // 第二个参数  渲染模板需要传递的数据
        res.render('admin',{data:results});
    });
});

module.exports=router;

app.js

// 引入路由模块
var adminRouter=require('./routes/admin');

// 使用路由中间件 加载路由
app.use('/admin',adminRouter);

views/admin.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1>用户信息表</h1>
    <table class="table table-bordered table-hover">
        <tr>
            <td>user_id</td>
            <td>user_name</td>
            <td>user_password</td>
            <td>user_email</td>
            <td>user_phone</td>
            <td>user_add</td>
        </tr>

        <% for(var i=0;i<data.length;i++){ %>
            <tr>
                <td><%= data[i]['id']%></td>
                <td><%= data[i]['name']%></td>
                <td><%= data[i]['password']%></td>
                <td><%= data[i]['email']%></td>
                <td><%= data[i]['phone']%></td>
                <td><%= data[i]['add']%></td>
            </tr>
        <% } %>
    </table>
</body>
</html>

viwes文件夹里放的就是模块引擎
我们访问localhost:3000/admin 其实访问的就是admin.ejs这个模块引擎
为什么我们能够访问到这个模块引擎呢？
是因为我们有一个路由指引过来的，路由在routes里的admin.js
ejs.js 的意思就是可以在html里写js

效果图：
在这里插入图片描述

另外补充说一下：

express 脚手架 — 搭建项目目录

$ npm install -g express-generator

在需要创建项目的地方执行命令

$ express 项目名 [模板引擎]

创建项目时不写模板引擎默认引擎是jade
express 项目名 -e ejs引擎模块

项目目录结构

[bin] 存放执行程序
- www 服务
[public] 存放静态文件
- [images]
- [javascripts]
- [stylesheets]
[routers] 存放路由文件
- index.js
- users.js
[views] 存放视图文件(模板文件)
- error.jade
- index.jade
- layout.jade
app.js
package.json

Eason ZhangF

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
后端渲染——nodejs

页面渲染前端渲染由前端写好静态的html页面然后通过http的请求获取到数据将数据更新渲染到页面上json数据格式后端渲染前端写好静态页面将静态页面交给后端后端将html部分复制进动态文件中 php jsp asp(模板引擎)对数据进行查询操作交换给浏览器端(html)后端渲染案例：项目环境目录dao/mysqlserver.js——连接数据库的配置const mysql=require('mysql');var pool = mysql.createPool({
复制链接

扫一扫