node 后端渲染案例(分享)

最新推荐文章于 2024-04-23 08:46:39 发布
最新推荐文章于 2024-04-23 08:46:39 发布
阅读量768 收藏 3
点赞数
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60547084/article/details/123752546
版权

文章目录

1. 案例分析

  • 该案例主要采用后端渲染数据
  • 前端部分：html、css、js、bootstrap
  • 后端部分：node.js
  • 框架：express
  • 模板引擎：art-template、express-art-template
  • 数据库：mysql

2. 案例效果

2.1 主页(唯一页面)

在这里插入图片描述

2.2 添加模态框

在这里插入图片描述

2.3 修改模态框

点击修改按钮时，会包含姓名和台词
在这里插入图片描述

2.3 删除模态框

在这里插入图片描述

3. 代码片段

3.1 目录结构

在这里插入图片描述

3.2 首页、异常页
<!-- 首页 -->
<!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>王者荣耀</title>
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-1"></div>
      <div class="col-10 border box">
        <div class="row header">
          <span class="text-center">王者荣耀英雄信息</span>
        </div>
        <div class="row">
          <form action="searchInfo" method="post" class="row g-3">
            <div class="col-auto username">
              <label for="inputUsername">名称</label>
            </div>
            <div class="col-auto">
              <input type="text" class="form-control" id="inputUsername" placeholder="名称" name="name">
            </div>
            <div class="col-auto">
              <button type="submit" class="btn btn-primary mb-3">搜索</button>
            </div>
            <div class="col-auto">
              <!-- 添加按钮 -->
              <button type="button" class="btn btn-success mb-3" data-bs-toggle="modal"
                data-bs-target="#addModal">添加</button>
            </div>
          </form>
        </div>
        <div class="row">
          <table class="table" text-align="center">
            <thead style="background-color: #dfefd7;">
              <tr>
                <th scope="col">#</th>
                <th scope="col">英雄名称</th>
                <th scope="col">英雄台词</th>
                <th scope="col" width="80">修改</th>
                <th scope="col" width="80">删除</th>
              </tr>
            </thead>
            <tbody style="background-color: #dbeff7;">
              {{each res}}
              <tr>
                <th scope="row" class="userID">{{$index + 1}}</th>
                <td>{{$value.name}}</td>
                <td>{{$value.words}}</td>
                <td>
                  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#updateModal"
                    data-name="{{$value.name}}" data-words="{{$value.words}}" data-id="{{$value.id}}">修改</button>
                </td>
                <td>
                  <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal"
                    data-id="{{$value.id}}">删除</button>
                </td>
              </tr>
              {{/each}}
            </tbody>
          </table>
        </div>
      </div>
      <div class="col-1"></div>
    </div>
  </div>
  
  <!-- 添加模块 -->
  <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <form action="/addInfo" method="post">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">添加英雄</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="mb-3">
              <label for="exampleInputEmail1" class="form-label">姓名:</label>
              <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="name">
            </div>
            <div class="mb-3">
              <label for="exampleInputPassword1" class="form-label">台词:</label>
              <input type="text" class="form-control" id="exampleInputPassword1" name="words">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="submit" class="btn btn-primary">确定</button>
          </div>
        </div>
      </div>
    </form>
  </div>
  <!-- 修改模块 -->
  <div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <form action="/updateInfo" method="get">
    <input name="id" class="okUpdate">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">修改英雄</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="mb-3">
              <label for="updateName" class="form-label">姓名:</label>
              <input type="text" class="form-control" id="updateName" aria-describedby="emailHelp" name="name">
            </div>
            <div class="mb-3">
              <label for="updateWords" class="form-label">台词:</label>
              <input type="text" class="form-control" id="updateWords" name="words">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="submit" class="btn btn-primary">确定</button>
          </div>
        </div>
      </div>
    </form>
  </div>

  <!-- 删除模块 -->
  <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <form action="/delInfo" method="post">
    <input name="id" class="okDel">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">删除英雄</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            确定要删除吗??
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="submit" class="btn btn-primary">确定</button>
          </div>
        </div>
      </div>
    </form>
  </div>
  <script src="./js/index.js"></script>
  <script src="./js/bootstrap.min.js"></script>
</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>{{err}}</h1>
  <script>
    setTimeout(() => {
      window.location.href = "http://localhost:9527/"
    }, 3000);
  </script>
</body>
</html>
3.3 入口文件
// 入口
const express = require("express")
const path = require("path")

const app = express()

// 使用路由
const { router } = require("./router/router")

app.use(express.json())
app.use(express.urlencoded({ extended: true }))

// 后端渲染
app.engine('art', require('express-art-template'));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'art');

// 读取静态文件中的数据
app.use(express.static("public"))

app.use(router)

app.listen(9527, () => {
  console.log("服务也开启: http://localhost:9527");
})
3.4 mysql文件
// 数据库连接
const mysql = require("mysql")

module.exports.database = function (sql, parameter = null) {
  // 数据库配置
  var connection = mysql.createConnection({
    host: 主机,
    port: 端口号,
    user: 用户名,
    password: 密码,
    database: 数据库
  });

  // 连接数据库
  connection.connect((err) => {
    if (err) {
      console.error('error connecting: ' + err.stack);
      return;
    }
    console.log('连接次数:' + connection.threadId);
  });
  return new Promise((reslove, reject) => {
    // 访问数据库
    connection.query(sql, parameter, function (error, results, fields) {
      if (error) {
        reject(error)
        return
      }
      reslove(results)
    });
    // 关闭数据库
    connection.end();
  })
}
3.5 路由文件
// 路由
const express = require("express")

// 数据处理模块
const { renderPage, addInfo, delInfo, updateInfo, searchInfo } = require("../mysql/renderData")

const router = express.Router()

// 主页面渲染数据
router.get("/", renderPage)
router.get("/home", renderPage)

// 添加数据
router.post("/addInfo", addInfo)

// 删除数据
router.post("/delInfo", delInfo)

// 更新数据
router.get("/updateInfo", updateInfo)

// 搜索数据
router.post("/searchInfo", searchInfo)

exports.router = router
3.6 渲染数据文件
// 渲染数据
const { database } = require("./database")

function renderPage(request, response) {
  database('select * from info_list where isDel = 0').then(res => {
    response.render("index.art", {
      res
    })
  }).catch(err => {
    renderErr(response, "主页数据出错了")
  })
}

function addInfo(request, response) {
  if (!request.body.name.trim()) {
    renderErr(response, "添加数据名字不能为空")
    return
  }
  database('insert into info_list set ?', request.body).then(res => {
    response.redirect("/home")
    response.send()
  }).catch(err => {
    renderErr(response, "添加数据出错了")
  })
}

function delInfo(request, response) {
  database('update info_list set isDel = 1 where id = ?', request.body.id).then(res => {
    response.redirect("/home")
    response.send()
  }).catch(err => {
    response.send(err)
  })
}

function updateInfo(request, response) {
  if (!request.query.name.trim()) {
    renderErr(response, "修改数据名字不能为空")
    return
  }
  // set 要设置的 
  // where 过滤条件
  // ? 对应数组 索引
  database('update info_list set name = ?, words = ? where id = ?',
    [request.query.name, request.query.words, request.query.id]).then(res => {
      response.redirect("/home")
      response.send()
    }).catch(err => {
      renderErr(response, "修改数据出错了")
    })
}

function searchInfo(request, response) {
  // 如果搜索为空，直接跳到首页
  if (!request.body.name.trim()) {
    response.redirect("/home")
    response.send()
    return
  }
  // like 模糊查询，% 表示零个或多个
  database('select * from info_list where name like ? and isDel = 0', `%${request.body.name}%`).then(res => {
    response.render("index.art", {
      res
    })
  }).catch(err => {
    response.send(err)
  })
}

function renderErr(response, err) {
  response.render("404.art", {
    err: err
  })
}

module.exports = {
  renderPage,
  addInfo,
  delInfo,
  updateInfo,
  searchInfo
}
3.7 修改删除数据关联文件
// 修改
document.querySelector("#updateModal").addEventListener("show.bs.modal", function (e) {
  document.querySelector("#updateName").value = e.relatedTarget.dataset.name
  document.querySelector("#updateWords").value = e.relatedTarget.dataset.words
  this.children[0].children[0].value = e.relatedTarget.dataset.id
})

// 删除
document.querySelector("#deleteModal").addEventListener("show.bs.modal", function (e) {
  this.children[0].children[0].value = e.relatedTarget.dataset.id
})
3.8 css样式文件
body {
  padding-top: 20px;
}

.container .box {
  border-radius: 5px;
  overflow: hidden;
}

.container .header {
  border-bottom: 1px solid #e8e8e8;
  background-color: #f7f7f7;
  font-size: 20px;
  padding: 5px 0;
}

.container .username label {
  font-weight: bold;
  padding-top: 6px;
}

.table {
  margin-bottom: 0px !important;
  border-top: 1px solid #dee2e6;
}

.table tr {
  line-height: 2.5;
}

.table tbody tr td:nth-child(4) {
  background-color: #fbf7e3;
}

.table tbody tr td:nth-child(5) {
  background-color: #f3dfdf;
}

button {
  opacity: 0.8;
}

.okDel {
  display: none;
}

.okUpdate {
  display: none;
}

4. 案例总结

后端渲染每次请求数据都会刷新整个页面，所以后端渲染不太好

codeCat!
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序开发-猫眼电影含node后端案例源码.zip
08-15
在这个名为“微信小程序开发-猫眼电影含node后端案例源码.zip”的压缩包中，包含了一个完整的猫眼电影预订系统的开发实例，涵盖了微信小程序前端及Node.js后端的源代码。通过深入学习和理解这个案例，我们可以系统地...
Node案例-动态表格
weixin_44764207的博客
02-24 205
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> table{ border: 1px solid; margin: auto; width: 500px; } td, th{ text-align: center;
前端渲染和后端渲染
qq_40992225的博客
07-26 3303
了解什么是前端渲染什么是后端渲染，这要从网页的发展历史开始说起。
一篇文章带你了解Next.js
最新发布
唯见青山不见君
04-23 1973
Next.js
服务端渲染与客户端渲染详解（vue）
m0_52669454的博客
07-14 2689
服务端渲染与客户端渲染详解（vue）
一文搞懂什么是前端渲染和后端渲染以及两者的区别
m0_51358164的博客
08-13 4518
一文搞懂什么是前端渲染和后端渲染以及两者的区别
传统网站开发Node实战 --1. 3补充：详细解释后端是如何渲染出页面的整个流程
weixin_47505105的博客
03-02 284
详细解释后端是如何渲染出页面的整个流程
node学习-3:服务器渲染和客户端渲染
坚持不懈的大白的博客
02-16 1386
nodejs学习,服务端渲染和客户端渲染
node+express+bootstrap博客案例
06-04
这个案例主要展示了如何使用Node.js（通过Express）作为后端处理数据，Bootstrap作为前端界面设计，构建一个完整的博客系统。学习者可以了解到如何设置路由来处理不同的HTTP请求（如GET、POST），如何使用模板引擎...
看书阅读带后端 (2).zip
01-10
《看书阅读带后端》微信小程序案例开发是一个综合性的项目，涵盖了移动开发、后端开发以及用户界面设计等多个方面的知识。这个案例适用于学生进行毕业设计或课程设计的学习，旨在提升开发者在小程序领域的实践能力。...
微信小程序开发-天气预报带后端案例源码.zip
12-12
6. **后端服务**：此案例还包括了后端部分，可能采用了Node.js、Python、Java等技术栈。后端的主要职责是处理来自小程序的请求，比如验证用户身份、调用第三方天气API（如OpenWeatherMap、AccuWeather等）、处理数据...
微信小程序开发-实时巴士带后端案例源码.zip
12-12
4. **后端服务**：后端服务器可能是用Node.js、Python、Java等语言实现，负责接收小程序的请求，处理数据，并将结果返回给前端。可能使用了RESTful API设计原则，确保接口的简洁和可复用性。数据库如MySQL、MongoDB...
什么是后端渲染？什么是前端渲染？后端渲染和前端渲染又有什么区别呢？
weixin_48681975的博客
01-11 4143
什么是后端渲染？什么又是前端渲染呢？后端渲染和前端渲染又有什么区别呢？ 最近在学习Vue的时候接触到了这个话题，我觉得还挺有意思的，所以写下来，记下来。 一、什么是后端渲染？ 我们都知道现在的网页都由html+css+js组成，但是在比较早的时候是没有js(JavaScript)的。所以那时候网页开发一般都是用html+css+jsp(java server page)/php来开发。我自学前端写的第一个算是有网络交互功能的东西(留言板)用的就是html+css+php来完成的（php代码的作用是从数据库
前后端分离的前端部署渲染方案总结
Qensq的博客
06-05 627
前后端分离后后端只需要提供接口，前端则必须要完成对接口的调用和数据交互的处理。但是在部署上则是完全与之前不同，作为一个后端和前端都开发的人，我总结了三种前后端的部署方案
【项目】前端实习——后端接口数据获取与渲染
zhaohb2016的博客
08-18 1411
实习项目开发与自己平时练习的项目最大的不同就是有接口数据，通过发起一定的请求获取到后端的数据。
vue服务端渲染
高山景行，一尘不染
04-01 462
什么是服务器端渲染 (SSR)？ Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。 服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都...
基于node渲染前台后台页面
ll522430的博客
09-15 344
首先写好一个前台首页，一个登陆页面，一个后台首页，一个后台列表页 需要做的事，下载好express框架，然后在下载4个npm包（express-session art-template express-art-template multer），然后对app.ja中的代码稍作修改将他的引擎改为（‘express-art-template’） app.engine('html', require('express-art-template')); app.set('views', path.join(__
后端渲染
weixin_45677987的博客
03-29 440
1： 后端渲染的概念： 后但渲染： jsp (java server page): 后端渲染对于SEO优化会好一点。 htm + css + java： java 代码： 作用是从数据库中读取数据， 并且将它动态的放在页面上。 后端路由： 后端处理URL 和页面之间的映射关系。 2： 前后端分离阶段： 2.1： 随着ajax 的出现， 有了前后端分离的开发模式。 2.2： 后端只是提供API来返回数据， 前端通过Ajax 获取数据， 并且通过javascript 将数据渲染...
Vue基础知识总结 11：前端路由vue-router
热门推荐
学Java，找哪吒
10-13 4万+
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
Full Stack GraphQL Applications With React, Node.js, and Neo4j
03-13
Full Stack GraphQL Applications With React, Node.js, and Neo4j

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值