文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端技术的发展与演变

当前后端分离后，通过API获取到的数据，需要填充到页面中，原生DOM操作非常消耗性能，且传统JS使用字符串拼接的方式不太好用 CSS不能像其他程序语言一样，通过变量、计算、继承等方式很好的管理。...JS原生API不好用，还存在浏览器兼容等问题。 　　这些问题，前端开发者通过多年的填坑，花费巨大的精力封装了各种框架层，用来减少开发工作量。...二、框架层（各类前端库） JQuery、YUI、Zepto、以及针对H5中canvas的游戏库Lufylegend等等，主要为了解决浏览器原生API不好用和兼容问题，即对原型API做了二次封装，使其更易于开发和掌握...通过HTTPrequest与后台交互数据，然后通过拼接字符串的方式，生成浏览器识别的DOM结构与样式。...随着自动化工具glup、webpack的火热，多种多样的预编译程序（如HTML模板引擎jade、Ejs等，CSS预处理器Sass、Less等），以及前端MVC、MVVM框架angular、react、vue

1.5K60

如何使用Vue.js和Axios来显示API中的数据

API经常公开其他开发人员可以在自己的应用程序中使用的数据，而不必担心数据库或编程语言的差异。 开发人员经常从API返回数据，该数据返回JSON格式的数据，并将其集成到前端应用程序中。...Vue.js非常适合使用这些类型的API。 在本教程中，您将创建一个使用Cryptocompare API的Vue应用程序来显示两个主要加密货币的当前价格：比特币和Etherium。...了解更多如何将JavaScript添加到HTML 。 熟悉JSON数据格式，您可以在JavaScript中了解如何使用JSON来了解更多信息。 熟悉向API发出请求。...> 我们最终将使用API​​中的实时数据替换此硬编码值。...结论 在少于五十行中，您只使用三个工具创建了一个耗用API的应用程序：Vue.js，Axios和Cryptocompare API。

8.7K20
您找到你想要的搜索结果了吗？
是的
没有找到

2024年Node.js精选：50款工具库集锦，项目开发轻松上手（五）

48、简单高效的动态HTML生成：EJS模板引擎 在Web开发中，生成动态HTML是一个常见需求，而EJS（嵌入式JavaScript模板）正是一个流行的模板引擎，能够帮助开发者无缝地将动态内容集成到HTML...模板中。...EJS的强大功能 EJS能够帮助开发者实现以下功能： 生成动态HTML：将JavaScript变量和对象的值注入到HTML模板中。 控制流逻辑：利用条件语句和循环，根据数据或用户操作控制内容显示。...EJS的使用场景与示例代码 1. 基本EJS模板 一个简单的EJS模板，展示如何插入动态内容： html复制代码 <!...EJS：一个嵌入式JavaScript模板引擎，帮助你生成动态HTML。 Cheerio：一个用于解析和操作HTML的库，非常适合网页抓取和HTML测试。

11010

Nodejs学习笔记（五）--- Express安装入门与模版引擎ejs

所以http模块也不单讲了，可以去看官方API：http://nodejs.org/api/http.html 　　下面我们直接从Express框架着手去进行Web开发，它实现好了更高层的接口，让Web...ejs 　　在上面创建的testWebApp中express默认使用的模版擎为jade，个人觉得jade虽然简洁但不直观，所以选择了更易上手的ejs。 　　...在这里，我们还没有讲express的一些东西，所以大家先不要管太多细节部分，只要知道上面示例中当通过http://localhost:8100访问时， 　　会转到index.js，而index.js而index.ejs...，有大量的中间件，可以通过app.use来使用；path参数可以不填，默认为'/'  (项目中用到的就不分别解释了，用到的时候自已查一API的中间件部分) 　　app.use(express.static...index.ejs中可以使用，那么加上ejs的部分，就会返回最终生成的页面展现！

3.6K100

带你零基础入门express

'); /* view处理,还记得我们开头的时候说，express可以向模板传递参数来动态渲染html页面， 那么在这里我选择 ejs 来当模板，用ejs来渲染出第一个Hello World页面。...,现在在项目目录下新建一个 view 目录，用于存放我们的页面模板, 目录里创建一个test.ejs文件，这个语句里test是我们的模板页面，后面的对象是我们手 动创建用来注入的数据，下面会在模板里调用...里放前端css和js代码，views是我们的模板文件。...然后回到shell面板，执行 node test.js 命令 4.jpg 这时候我们在浏览器里打开 127.0.0.1:9527 5.jpg 可以看到title就是我们注入到模板的数据对象，我们的...在routers/api下面新建一个addMod.js文件，用来做第一个接口文件。

4.9K570

从零开始写一个Hexo主题

：资源文件目录，包括页面样式，js脚本等 _config.yml：主题配置文件 局部模板 我们通过分析常见的博客网站可以知道，大部分的博客网站都由三部分组成：顶部导航栏，中间内容区域，以及底部信息展示区域...head.ejs,header/ejs和footer.ejs文件，layout.ejs文件是通用的布局文件模板，我们在后面新增的ejs文件都会继承layout.ejs，并将其内容填充到body中。...我们在 layout 中创建 index.ejs 文件，index.ejs首页将会继承layout.ejs布局模板生成 HTML 文件。...，并获取文章的标题，内容等数据填充到模板中。...总结 其实说白了，Hexo就是把那些 Markdown 文件，按照我们编写的对应布局模板，填上对应的数据生成 HTML 页面，然后在编译的过程中将JS/CSS等文件引入HTML，然后生成每个页面的对应HMTL

4.1K40

EJS模板在express中的使用攻略及应用实例（建议收藏）

将数据放到模板中，转为HTML数据 let html = ejs.render(template, data); // 将数据在浏览器进行展现 res.send(html);})app.listen...代码解析： ejs.render()方法：用于将数据（data）在指定的模板（template）中进行展示，生成HTML ：用于将数据的属性在模板中进行输出 注意：数据的类型需要是对象...---- 三、以文件形式使用模板 在上个例子中，我们将模板放到变量template中，数据量少的话还可以，倘若数据量比较大的话，将是一件十分恐怖的事情。...比如，我们要将模板文件放置到html文件夹内： 1、创建html文件夹 2、将上个示例中的one.ejs移入html文件夹内 3、上示例中的demo.js添加如下代码： // 设置模板文件夹为htmlapp.set...执行demo.js, 你会发现现在模板所采用的的文件变更为了html文件 七、如何开启模板缓存 需要进行以下配置： app.set('view cache', true); demo.js: const

4.6K21

Web前端模板引擎之字符串模板

对于下面的代码： 我们正处于刀耕火种的石器时代 如果我们需要修改container里面的内容，一般有2种方法： 通过JS的DOM API直接操作...这些模板又可以细分为2类：一种是不包含逻辑处理，只作数据绑定用的，如mustache.js；另一种是既有逻辑处理，也有数据绑定的，如EJS。 下面，我以EJS的语法为例，实现一个简单的字符串模板引擎。...模版引擎的编译流程如下： 1.首先，需要编译模板字符串，将其转换为JS能够理解的语法。第一步是利用正则表达式，区分出字符串中哪些是模板语法，哪些是正常的HTML标签。...四、字符串模板的优缺点 字符串模板之所以能够更新页面，最核心的原理是使用innerHTML这个api将字符串直接插入到DOM节点中。...由于innerHTML是直接替换掉原有元素，因此就涉及到相应节点和对应事件的卸载，然后再装载新的节点和事件。在这个过程中，界面也会被重排和重绘，对性能是严重的损耗。 不智能。

1.3K20

技术干货丨Web前端字符串模板浅析

这些模板又可以细分为两种情况：一种是不包含逻辑处理，只作数据绑定用的，如 mustache.js ；另一种是既有逻辑处理，也有数据绑定的，如 EJS 。...下面，我以 EJS 的语法为例，实现一个简单的字符串模板引擎。模版引擎的编译流程如下： 首先，需要编译模板字符串，将其转换为 JS 能够理解的语法。...第一步是利用正则表达式，区分出字符串中哪些是模板语法，哪些是正常的 HTML 标签。...字符串模板的优缺点 字符串模板之所以能够更新页面，最核心的原理是使用 innerHTML 这个 api 将字符串直接插入到 DOM 节点中。...由于 innerHTML 是直接替换掉原有元素，因此就涉及到相应节点和对应事件的卸载，然后再装载新的节点和事件。在这个过程中，界面也会被重排和重绘，对性能是严重的损耗。 不智能。

66520

纵览全局垂直打击的组织模式（下）

（在渲染前构造、借助.post对象） 关于位置，在ejs模板中放置构造代码当然可以，但是不优雅，Hexo中建议的插入方式是： 在专门放置自定义JavaScript处理逻辑的文件中（plugin.js）放入代码...在ejs（或其他）模板的相关位置，使用方式调用上述内建函数 使用console.log在渲染html时（hexo generate时的黑框）输出至Console里，拿到输出数据，放入到可视化的页面中即可...可视化页面 这里采用的是 D3.js 进行的可视化呈现，基本上是复用的 d3 的官方模板，但将文本信息一并和节点进行可视化展示。...Hexo的辅助函数来完成，将构造数据的代码封装成一个函数，然后在适当的ejs模板中调用一下，即可在 hexo generate 之后，从Console中拿到构造好的数据。...可以手动放置数据到可视化页面 return JSON.stringify(d3str).trim(); //或按第四步，将数据返回至ejs模板中，直接渲染出可视化页面 }); 注意上述代码中的注释

91810

nodejs模板引擎ejs

nodejs的后台模板引擎主要分为两种ejs和jade.简单说一下两者区别吧,ejs学习成本低,效率不是很高(主要是先把模板中内容解析字符串),jade学习成本比较大,后期维护成本低,效率相对于ejs较好...语句,但是在输出内容(纯数据的调用)的时候需要使用,这里的数据在案例中包含在shuju这个变量中,总体调取的是new数组下面的对象,在调取数据的时候无需强调shuju...下面的news,直接使用news.对象属性就行,因为在ejs处理的时候已经声明了shuju是调取的数据文件,而读取的ejs文件是一个模板文件....ejs一个常用api,上面取用就是下面这个api,options无需理会,传入模板字符串和数据的参数就行!...ejs.render(str, data, options);// => Rendered HTML string ejs模板引擎api地址:https://www.npmjs.com/package/

1.5K10

73个超棒且可提高生产力的 NPM 包

9.Sails[27] Sails 是最流行的 Node.js MVC 框架，支持现代应用程序的需求：具有可扩展的，面向服务结构的数据驱动 API。...14.GraphQL[35] 用于 api 的查询语言和用于对运行时的现有数据执行查询。提供 API 中数据的完整描述，使客户端能够准确地要求他们所需要的数据。 ?...31.EJS[52] EJS 是一种简单的模板语言，可让你使用简单的语法，快速的执行和简单的调试 JavaScript 来生成 HTML 标记。...EJS 拥有大量的活跃用户社区，并且该库正在积极开发中。 ?...39.Faker[62] 实用的 npm 包，用于在浏览器和 Node.js 中制造大量假数据。 ✅ 校验工具 40.Validator[63] 便捷的字符串验证器，使程序更加健壮的库。

4.5K20

73个强无敌的NPM软件包

构建起数据驱动型 API，并辅以可扩展且面向服务的架构。...GraphQL 在 API 中提供完整的数据描述，使客户端能够准确获取其需要的信息。 项目链接： https://www.npmjs.com/package/graphql ?...项目链接： https://www.npmjs.com/package/handlebars 31.EJS EJS 是一种简单的模板语言，允许您通过简单语法、快速执行与简单调试等便捷优势生成以 JavaScript...项目链接： https://www.npmjs.com/package/formik 43.Multer Multer 是一款 Node.js 中间件，用于处理上传文件中的多部分 / 表单数据。...CLI 与调试器 58.Commander 提供流畅的 API，用于定义 CLI 应用程序中的各类元素，包括命令、选项、别名及帮助等。简化了命令行应用程序的创建过程。

4.4K10

【译】73个超棒且可提高生产力的 NPM 包

9.Sails[27] Sails 是最流行的 Node.js MVC 框架，支持现代应用程序的需求：具有可扩展的，面向服务结构的数据驱动 API。...14.GraphQL[35] 用于 api 的查询语言和用于对运行时的现有数据执行查询。提供 API 中数据的完整描述，使客户端能够准确地要求他们所需要的数据。 ?...31.EJS[52] EJS 是一种简单的模板语言，可让你使用简单的语法，快速的执行和简单的调试 JavaScript 来生成 HTML 标记。...EJS 拥有大量的活跃用户社区，并且该库正在积极开发中。 ?...39.Faker[62] 实用的 npm 包，用于在浏览器和 Node.js 中制造大量假数据。 ✅ 校验工具 40.Validator[63] 便捷的字符串验证器，使程序更加健壮的库。

5.9K30

前台模板underscore.js配合Ajax渲染页面数据

前几次介绍node的ejs后台模板进行数据渲染们今天简单介绍一下咱们前端的模板引擎underscore的数据渲染!...underscore.js文件cdn地址:https://cdn.bootcss.com/underscore.js/1.9.0/underscore.js 本次配合Ajax渲染页面数据,让前台页面的数据根据效果...);//tpl为刚才得到的封装模板 Ajax请求数据以及完成模板的填充 $.get("/api",function (data,status) {     console.log(data);     ....append(mbString)//将得到的模板追加到相应的区域(main内)     } 由于ajax无法跨域,所以请求的地址使用相对路径,循环得到的ajax中data数据,进行模板填充!...之前的使用ejs模板填充,后台需要前台页面修改为ejs,用户访问页面审查元素中所有模板全部被后台解析相应内容,而前台模板的审查元素还是对应的,浏览时候请求ajax后填充模板!

2K20

深入浅出mongodb之实战

，我们创建的项目模板引擎使用的是jade，个人感觉ejs[2]模板引擎比较好用，所以我们可以通过修改模板引擎的方式创建项目 express backend -e 创建好项目之后，我们express骨架已经搭建好了...routes这个文件是存放路由的，主要编写前端发送请求和响应数据给前端 views这个文件夹中ejs文件结尾的文件是后端的模板文件 app.js是入口文件，模板配置和总路由文件 package.json...数据库 安装 npm i mongoose -S 完成安装之后我们需要在app.js里引入并且配置数据库 //app.js //引入数据库 const mongoose = require('mongoose...在express中有这么一句话一切皆为中间件，我们在设置路由的时候，需要在app.js中注册之后才能使用 //app.js var api = require("..../routes/api"); app.use("/api",api) 配置routes文件夹下的api.js文件 const express = require("express"); const router

1.7K10

犹他州空气质量分析-从EPA的空气质量服务站API中抓取数据

州代码：在这个分析中，我们对犹他州（49 - 犹他州）感兴趣。 郡代码：我们想要检索犹他州所有郡的空气质量数据，但是将此参数留空会导致 API 调用失败，因此我们需要单独请求每个郡的数据集。...让我们分解这个例子中的操作： 第1步： 导入 Python 库 ? pandas：由于数据来自API，我们将使用 Pandas 将数据存储在 DataFrame 中。...将用于构造 API 调用的基本配置信息包含在名为 config.py 的文件中，此文件作为基本配置文件运行，您要从主项目代码中抽象出来的任何细节都可以放到里面。 ?...API连接详细信息，如在config.py中定义的 apiURL 和 apiUser 。 构造 API 字符串的示例 ?...第7步： 输出全部结果 最后，在我们为州中的每个县提出API请求并将每个API调用的响应组合到我们的主 DataFrame df之后，我们现在可以将结果输出到 csv 文件中。

1.2K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券