nodejs篇 express(4) express + art-template创建网站基础

已于 2023-11-09 16:33:34 修改
阅读量692 收藏 1
点赞数 1
分类专栏： nodeJS 文章标签： express 前端 javascript
于 2023-04-06 17:33:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/glorydx/article/details/129988790
版权
本文介绍了如何使用Node.js的Express框架结合art-template模板引擎来构建网站。首先，文章探讨了前后端分离的历史背景，然后详细讲解了art-template的安装、基本使用和在项目中的集成。此外，还提到了静态资源的管理，如创建public文件夹来存放css、js等资源，并展示了如何在HTML中引入这些资源。最后，文章还提及了Node.js的一些核心模块，如fs、path和events等。
摘要由CSDN通过智能技术生成

目录

前言

在这里插入图片描述

为了适用越来越复杂的网站业务和用户交互，前后端分离已经好多年，但在web发展的最初，并没有什么vue、react之类的mvvm的框架，也没有所谓的单一页面响应（SPA），那网页的渲染是如何实现的呢？

一个网站所需的资源统一由服务端直接在本地库中读取文件(以index.html为例)，然后，根据用户的不同，替换所读取文件index.html中的文本。

当然除了html，服务端也会返回所有网站所需的静态资源，css，js，字体图标等等。

今天，通过express建立服务器，由node的fs模块读取文件，再用art-template模板引擎来实现html文件与数据的绑定，并放入接口返回。

模板引擎

实际上模板引擎众多，比较好用的有ejs和art-template，这两个相对来说也比较出名。

ejs官网：h

了解本专栏 订阅专栏 解锁全文 超级会员免费看
可缺不可滥
关注
专栏目录
订阅专栏
nodejs+express+i18n+art-template国际化，语言切换
小码的博客
06-29 911
要做中英文翻译，参考了大批nodejs国际化方法，也没有找到art-template和i18n运用方法。所以只能自己阅读i18n npm，了解i18n用法规则柔和到art-template里面去。 因为平时要开发微信小程序，所以web端选用art-template模板引擎，写法相似，所用的环境是nodejs+express+art-template 先安装i18n npm npm install i18n --save i18n npm用法规则：https://www.npmjs.com/pack
node.js中Express模板
qq_44216701的博客
07-19 1246
什么是Express Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。 使用 Express 可以快速地搭建一个完整功能的网站。 Express 框架核心特性： 可以设置中间件来响应 HTTP 请求。 定义了路由表用于执行不同的 HTTP 请求动作。 可以通过向模板传递参数来动态渲染 HTML 页面。 安装Express 模板和其他的模板一样 cnpm install express --save 和Ex
express以及art-template
_fan的博客
01-23 164
express快速入门 安装 npm install express --save 创建你的第一个hello world var express = require('express') var app = express(); //路由 app.get('/',(req,res)=>{ res.send('hello world') }) app.listen(3000,()=>{ console.log('app running at localhost:3000');
express中使用art-template
qq_40526866的博客
02-05 1059
介绍 art-template 是一个简约、超快的模板引擎。 它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器 特性 拥有接近 JavaScript 渲染极限的的性能 调试友好：语法、运行时错误日志精确到模板所在行； 支持在模板文件上打断点（Webpack Loader）支持 Express、Koa、Webpack 支持模板继承与子模板 浏览器版本仅 6KB 大小 安装 npm install --save art-te
在 Express中配置使用 art-template 模板引擎 --- express-art-template
weixin_47505105的博客
03-02 630
关于在 Express中配置使用 art-template 模板引擎express-art-template的安装，配置，基础使用，还介绍了 app.locals对象的应用场景，将公共数据作为locals下面的属性。
nodeJS +Express + art-template实现简单服务
weixin_41374628的博客
05-17 625
开始 1、Express 1.1、安装 $ npm install express --save # 安装 express 并保存在项目依赖列表中 $ npm install express --no-save # 临时使用 express 不保存在项目依赖列表中 1.2 使用 // 引入 express const express = require('express'); // 创建服务 ...
MCS是一个后台管理系统，由NodeJs + koa2 +Mongodb + Art-template模板组合开发完成
08-03
2. **项目初始化**：使用`npm init`创建项目，安装Koa2、Mongoose、Art-template等相关依赖。 3. **数据库设计**：根据需求设计MongoDB的集合（collections）和文档结构。 4. **接口设计**：定义API接口，包括GET、...
在node和express中配置使用art-template
webchang的博客
05-02 781
在node和express中使用art-template
Nodejs基础之Express框架和art-template引擎(四)，2024年最新阿里前端二面是什么
最新发布
m0_63174529的博客
04-10 700
cookie 是存储于访问者的计算机中的变量。可以让我们用同一个浏览器访问同一个域名的时候共享数据。HTTP 是无状态协议。简单地说，当你浏览了一个页面，然后转到同一个网站的另一个页面，服务器无法认识到这是同一个浏览器在访问同一个网站。每一次的访问，都是没有任何关系的。Cookie 是一个简单到爆的想法：当访问一个页面的时候，服务器在下行HTTP 报文中，命令浏览器存储一个字符串;浏览器再访问同一个域的时候，将把这个字符串携带到上行HTTP 请求中。第一次访问一个服务器，不可能携带cookie。
NodeJs-Express-Template:节点Js的模板
03-28
节点Js Express模板 使用Express.js作为Node.js框架的后端模板。 版本 当前应用程序版本为v1.0。 用法 # Install dependencies npm install # Create .env copy the .env.examples and rename it to .env and place your environment there # Run in development npm run dev # Run in production npm run build npm start # Unit/Integration testing npm run test # Formating npm run lint:js 快乐代码布鲁！ 用爱制造〜Irfan
nodejs的express框架+ejs开发步骤
03-31
一个nodejs的express框架+ejs的开发步骤，适合入门。
【NodeJs】使用Express框架快速搭建一个web网站
TA远方
05-06 1211
如果电脑有安装使用Nodejs，用得次数少的话，忘了怎么弄，可以看看这个文章，按照步骤，能快速搭建一个web网站服务器...
node——express-art-template使用方法
weixin_30430169的博客
08-27 256
Express 安装 npm install --save art-template npm install --save express-art-template 我们在使用时可能在文件中只引用express-art-template,但是我们也需要安装art-template，因为express-art-template需要依赖art-template Eample 在node文件内...
node express模板
平安喜乐
09-15 315
快速生成express模板
Express+art-template通过文件读取写入实现增、删、改、查
weixin_41374628的博客
07-08 656
Express 原生的 http 在某些方面不能满足开发需求，需要使用框架来提升开发效率。 http://expressjs.com/ 作者是 tj, 他写了很多库 ==> www.github.com/tj 1、安装 $ mkdir myapp # 创建目录 $ cd myapp # 进入目录 $ npm init [--yes] # 初始化创建 package.json 文件 ...
最新版本express 4.2.0的快速建站--简单举例
07-28 182
express是Node.js的官方唯一推荐的框架，它扩展了http工具以及一些好用的功能。如此好用的东西，赶紧的安装起来： npm install express -g 新版本的express的命令集中到了另一个插件中，简单的如同以前一样的express -V运行的返回不是它的版本号，而是提示“express不是内部或外部命令”了，所以还要安装expre...
Nodejs基础之Express框架和art-template引擎(四)，2024年最新
2401_84094868的博客
04-04 920
cookie 是存储于访问者的计算机中的变量。可以让我们用同一个浏览器访问同一个域名的时候共享数据。HTTP 是无状态协议。简单地说，当你浏览了一个页面，然后转到同一个网站的另一个页面，服务器无法认识到这是同一个浏览器在访问同一个网站。每一次的访问，都是没有任何关系的。Cookie 是一个简单到爆的想法：当访问一个页面的时候，服务器在下行HTTP 报文中，命令浏览器存储一个字符串;浏览器再访问同一个域的时候，将把这个字符串携带到上行HTTP 请求中。第一次访问一个服务器，不可能携带cookie。
学习记录---04nodejs---express模板
poppy995的博客
07-09 328
字段验证规则-捕获错误信息-集合关联-art-template-模板语法-express框架-中间件-错误处理中间件-一些补充内容
将nodejs+express+vue3+vite发布到阿里云上
07-17
要将Node.js + Express + Vue3 + Vite应用程序部署到阿里云上，您可以按照以下步骤进行操作： 1. 在阿里云上创建一个ECS实例，选择适合您需求的操作系统和配置。确保您在安全组中打开了HTTP（80端口）和HTTPS（443端口）的访问权限。 2. 在本地开发环境中构建Vue3应用程序。在项目根目录下打开终端或命令提示符，运行以下命令： ```bash npm run build ``` 这将使用Vite构建工具编译和打包Vue3应用程序，并将生成的静态文件保存在`dist`目录中。 3. 将Vue3应用程序的静态文件上传到阿里云ECS实例。您可以使用FTP工具（如FileZilla）将`dist`目录中的文件上传到ECS实例的`/var/www/html`目录（或您自定义的web目录）。 4. 在ECS实例上安装Node.js和npm。您可以通过SSH远程连接到ECS实例并使用以下命令安装它们： ```bash # 安装Node.js curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash - sudo apt-get install -y nodejs # 安装npm sudo apt-get install -y npm ``` 5. 在ECS实例上创建一个名为`server.js`的文件，并添加以下内容： ```javascript const express = require('express'); const path = require('path'); const app = express(); // 静态文件托管 app.use(express.static(path.join(__dirname, 'html'))); // 所有路由重定向到index.html app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'html', 'index.html')); }); // 启动服务器 const port = process.env.PORT || 80; app.listen(port, () => { console.log(`Server is running on port ${port}`); }); ``` 在上述示例中，我们使用Express创建了一个简单的服务器。我们通过`express.static`中间件来托管上传的Vue3应用程序的静态文件，然后将所有路由重定向到`index.html`以支持Vue的单页应用。最后，我们使用`app.listen`方法来启动服务器，并指定端口号为80。 6. 在ECS实例上运行以下命令来安装Express和其他项目依赖： ```bash npm install express ``` 7. 在ECS实例上运行以下命令启动Express服务器： ```bash node server.js ``` 这将在ECS实例上启动Express服务器，并监听端口80。 8. 现在，您的Node.js + Express + Vue3 + Vite应用程序已经在阿里云ECS实例上运行起来了。您可以在浏览器中访问ECS实例的公网IP地址来查看应用程序。 请注意，上述示例仅提供了一个简单的部署流程，并且假设您已经完成了阿里云ECS实例的设置和配置。在实际部署过程中，您可能还需要考虑安全性、性能优化、域名绑定等方面的问题。另外，您可能还需要使用Nginx等工具来配置反向代理或实现负载均衡等功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

可缺不可滥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值