当前位置： 首页 > news >正文

我们一起做过的SPA——Nuxt.js介绍

news 2025/7/8 8:10:28

Nuxt.js

1 我们一起做过的SPA

  • SPA（single page web application）单页 Web 应用，Web 不再是一张张页面，而是一个整体的应用，一个由路由系统、数据系统、页面（组件）系统等等，组成的应用程序。

  • 我们之前学习的Vue就是SPA中的佼佼者。

  • SPA 应用广泛用于对SEO要求不高的场景中

    在这里插入图片描述

2 什么是SEO

  • SEO：搜索引擎优化（Search Engine Optimization）, 通过各种技术（手段）来确保，我们的Web内容被搜索引擎最大化收录，最大化提高权重，最终带来更多流量。

  • 非常明显，SPA程序不利于SEO

    在这里插入图片描述

  • SEO解决方案：提前将页面和数据进行整合

    • 前端：采用SSR
    • 后端：页面静态化 （freemarker 、thymeleaf、velocity）

3 什么是SSR技术

  • 服务端渲染（Server Side Render），即：网页是通过服务端渲染生成后输出给客户端。

    • 在SSR中，前端分成2部分：前端客户端、前端服务端
    • 前端服务端，用于发送ajax，获得数据
    • 前端客户端，用于将ajax数据和页面进行渲染，渲染成html页面，并响应给调用程序（浏览器、爬虫）

    在这里插入图片描述

  • 如果爬虫获得html页面，就可以启动处理程序，处理页面内容，最终完成SEO操作。

4 SPA和SSR对比

SPA单页应用程序SSR服务器端渲染
优势1.页面内容在客户端渲染
2. 只关注View层，与后台耦合度低，前后端分离
3.减轻后台渲染画面的压力		1.更好的SEO，搜索引擎工具可以直接查看完全渲染的画面
2.更快的内容到达时间 (time-to-content)，用户能更快的看到完整渲染的画面
劣势1.首屏加载缓慢
2.SEO(搜索引擎优化)不友好		1.更多的服务器端负载
2.涉及构建设置和部署的更多要求，需要用Node.js渲染
3.开发条件有限制，一些生命周期将失效
4.一些常用的浏览器API无法使用

5 什么是Nuxt.js

  • Nuxt.js 是一个基于 Vue.js 的通用应用框架。

    • Nuxt支持vue的所有功能，此类内容为前端客户端内容。
    • Nuxt特有的内容，都是前端服务端内容。

  • 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。
    `内容。

  • 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。

  • Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

相关文章：

我们一起做过的SPA——Nuxt.js介绍

Nuxt.js 1 我们一起做过的SPA SPA（single page web application）单页 Web 应用，Web 不再是一张张页面，而是一个整体的应用，一个由路由系统、数据系统、页面（组件）系统等等，组成的应…...

编程日记 2023/12/14 11:01:22

java导出word使用模版与自定义联合出击解决复杂表格！

1. 看一下需要导出什么样子的表格 如图所示，这里的所有数据行都是动态的，需要根据查询出来的数据循环展示。 如果只是这样的话，使用freemarker应该都可以搞定，但是他一列中内容相同的单元格，需要合并。 这对于表格样式…...

编程日记 2023/12/14 10:59:21

GO设计模式——9、过滤器模式（结构型）

目录 过滤器模式（Filter/Criteria Pattern） 代码实现 过滤器模式（Filter/Criteria Pattern） 过滤器模式（Filter Pattern）或标准模式（Criteria Pattern）是一种设计模式，…...

编程日记 2023/12/14 10:58:20

fastadmin 导出

php 接收数据 set_time_limit(0);ini_set(memory_limit, -1);$ids $this->request->post(ids);$filter $this->request->post(filter);$op $this->request->post(op);$search $this->request->post(search);$whereIds $ids all ? 11 : [id >…...

编程日记 2023/12/14 10:57:19

六、CM4树莓派USBRS转485串口通讯

一、串行通讯接口 串行通讯接口简称串口（UART） 采用串行通信方式的扩展接口，数据位一位一位的按照顺序传送 优点：通信线路简单，只要一对传输线就可以实现双向通信能够大大降低成本，适合远距离通信。 缺点…...

编程日记 2023/12/14 10:51:14

c++知识总结

一 细碎知识 1.27 # 1.27.1 # pragma once 参考 C++学习笔记之pragma once的理解_pragma once什么意思-CSDN博客https://blog.csdn.net/lynnlee_36/article/details/105322937作用 保证只被编译一次，和#ifndef，#define，#endif功能相同 1.27.2 #if defined(__cplusplus…...

编程日记 2023/12/14 10:49:12

python-爬取壁纸

代理池的，防止IP 被封 找到图片真实地址 现在看到的只是图片的预览地址 (previews) 1.检查： 2.鼠标变为箭头时查看网页源代码 关于怎样在源代码中找到图片的真实地址 ??? 为什么在源代码界面 ctrl f 时候搜索的是 .png ??? 首先图片地址是以 .j…...

编程日记 2023/12/14 10:45:10

第31期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区，集成了生成预训练Transformer（GPT）、人工智能生成内容（AIGC）以及大型语言模型（LLM）等安全领域应用的知识。在这里，您可以…...

编程日记 2023/12/14 10:43:08

湖仓一体架构理论与实践汇总

湖仓一体架构理论与实践汇总 软件研发本质上属于“手工业”。软件研发在很大程度上还是依赖于个人的能力。当软件规模较小时，依赖“手工业”可以解决问题，但是当软件规模大了之后再依赖“手工业”就不行了。 软件的复杂度包含两个层面：软件…...

编程日记 2023/12/14 10:41:06

Redission从入门到入门

1. Redisson简介 Redisson 是一个在 Java 环境中使用的 Redis 客户端库。它提供了丰富的功能，使得在 Java 应用中与 Redis 交互变得更加简单和高效。Redisson 不仅提供了基本的 Redis 操作，还提供了许多高级功能，使其成为在 Java 项目中实现…...

编程日记 2023/12/14 10:39:04

PHP对接企业微信

前言 最近在做项目中，要求在后台管理中有企业微信管理的相关功能。相关准备工作，需要准备好企业微信账号，添加自建应用，获得相应功能的权限，以及agentid、secre等。 参考文档： 企业微信开发文档 功能实现 因…...

编程日记 2023/12/14 10:38:03

【原创】录剪视频的折腾之路

制作视频的起因 本人为IT男，IT发展快，需要学习的东西又多。往往为了一个技术小问题，花好几天时间学习，接下来十来分钟把事情做完。下次遇到这个同样的问题的时候，可能是几个月后，甚至是几年以后了。这些技…...

编程日记 2023/12/14 10:37:02

【BI】FineBI功能学习路径-20231211

FineBI功能学习路径 https://help.fanruan.com/finebi/doc-view-1757.html 编辑数据概述 1.1 调整数据结构 1.2 简化数据 2.1上下合并 2.2其他表添加列 2.3左右合并 新增分析指标 函数参考 https://help.fanruan.com/finereport/doc-view-1897.html 数值函数 日期函数 文…...

编程日记 2023/12/14 10:36:02

pytorch之torch.utils.data学习

1、概述 PyTorch 数据加载利用的核心是torch.utils.data.DataLoader类 。它表示在数据集上 Python 可迭代，支持 map-style and iterable-style datasets（地图样式和可迭代样式数据集）， customizing data loading order&#xff…...

编程日记 2023/12/14 10:32:59

Spring Boot 3中一套可以直接用于生产环境的Log4J2日志配置

文章目录 一 Log4J2 相关概念及基本特点二 Spring Boot3 中启用Log4J2的pom.xml配置三 application.properties 的配置四 完整配置 一 Log4J2 相关概念及基本特点 Log4J2是Apache Log4j的升级版，参考了logback的一些优秀的设计，并且修复了一些问题&…...

编程日记 2023/12/14 10:30:57

iOS按钮控件UIButton使用

1.在故事板中添加按钮控件,步聚如下: 同时按钮Shift+Commad+L在出现在控件库中选择Button并拖入View Controller Scene中 将控件与变量btnSelect关联 关联后空心变实心 如何关联?直接到属性窗口拖按钮变量到控件上,出现一条线,然后松开,这样就关联成功了 关联成功后属性窗口…...

编程日记 2023/12/14 10:29:56

小程序开发实战案例之三 | 小程序底部导航栏如何设置

小程序中最常见的功能就是底部导航栏了，今天就来看一下怎么设置一个好看的导航栏～这里我们使用的是支付宝官方小程序 IDE 做示范。 官方提供的底部导航栏 第一步：页面创建 一般的小程序会有四个 tab，我们这次也是配置四个 tab 的…...

编程日记 2023/12/14 10:28:55

Android : 序列化 JSON简单应用

1. JSON介绍 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于阅读和写入，同时也易于机器解析和生成。它基于JavaScript的子集，采用完全独立于语言的文本格式来存储和表示数据。JSON是纯文本&#x…...

编程日记 2023/12/14 10:27:54

Java小案例-RocketMQ的11种消息类型，你知道几种？（普通消息和批量消息）

前言 这篇给大家讲普通消息和批量消息，主要配合代码进行讲解，关于RocketMQ的基础知识已经在上篇给大家讲过需要回顾的点击下面这个链接去看 RocketMQ基础知识 普通消息 普通消息其实就很简单，是Apache RocketMQ中最基础的消息形式&#x…...

编程日记 2023/12/14 10:26:53

前端小技巧: 设计一个简版前端统计 SDK

统计 sdk 如何设计 1 ) 概述 客户端一个sdk ，把数据发送给服务端(第三方统计平台)服务端产生一个统计的报表 2 ）需求点 访问量：pv自定义事件：用户的一切行为我们都可以自定义采集性能，错误 3 ) 代码实现 const P…...

编程日记 2023/12/14 10:23:50

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述 地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2025/7/6 20:47:25

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系，主要是分成几个表，用户表我们是记录用户的基础信息，包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题，不同的角色&#xf…...

编程新知 2025/7/7 18:46:09

【决胜公务员考试】求职OMG——见面课测验1

2025最新版！！！6.8截至答题，大家注意呀！ 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:（ B ） A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/7/4 19:02:29

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/7/6 11:42:31

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj，再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/7/6 12:01:31

蓝桥杯 冶炼金属

原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V，是一个正整数，表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2025/6/21 11:16:25

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称：Apache Flink REST API 任意文件读取漏洞CVE编号：CVE-2020-17519CVSS评分：7.5影响版本：Apache Flink 1.11.0、1.11.1、1.11.2修复版本：≥ 1.11.3 或 ≥ 1.12.0漏洞类型：路径遍历&#x…...

编程新知 2025/7/8 0:52:29

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2025/7/6 20:28:07

Go语言多线程问题

打印零与奇偶数（leetcode 1116） 方法1：使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/7/6 18:03:30

6个月Python学习计划 Day 16 - 面向对象编程（OOP）基础

第三周 Day 3 🎯 今日目标 理解类（class）和对象（object）的关系学会定义类的属性、方法和构造函数（init）掌握对象的创建与使用初识封装、继承和多态的基本概念（预告） &a…...

编程新知 2025/7/7 9:39:54