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

杭州 seo网站建设 网络服务/合肥百度关键词排名

杭州 seo网站建设 网络服务,合肥百度关键词排名,马可波罗网站做外贸,什么是网站结构优化目录Next.jsnext.js的实现1,nextjs初始化2, 项目结构3, 数据注入getInitialPropsgetServerSidePropsgetStaticProps客户端注入3,CSS Modules4,layout组件5,文件式路由6,BFF层的文件式路由7&…

目录

  • Next.js
    • next.js的实现
      • 1,nextjs初始化
      • 2, 项目结构
      • 3, 数据注入
        • getInitialProps
        • getServerSideProps
        • getStaticProps
        • 客户端注入
      • 3,CSS Modules
      • 4,layout组件
      • 5,文件式路由
      • 6,BFF层的文件式路由
      • 7,路由跳转
      • 8,header的修改
      • 9, 移动端适配---css适配
      • 10, 移动端适配--js
      • 11,大图优化 ---webp
    • Nextjs服务端开发
      • 1,BFF层开发

Next.js

学习之前应该了解的知识: 页面的几种渲染方式指路网址

对于SSR的实现,如下图所示,是一个比较复杂和繁琐的事情。
那nextjs就是作为一个基于react的框架,来进行更好的服务端渲染的。
在这里插入图片描述

next.js的实现

是一个前后端一体化的一个框架。
在这里插入图片描述

1,nextjs初始化

创建nextjs项目命令:

npx create-next-app@latest --typescript 

2, 项目结构

在这里插入图片描述
其中:
pages中放置的是模板页面
public: 放置的静态资源
next-env.d.ts: 确保typescript 编译器选择Net.js类型,可以放置到.gitignore中,不需要变更
next.config.js: 就是nextjs 的配置,我们可以补充webpack的一些配置进行。比如是补充一些别名。

3, 数据注入

和客户端开发最不同的地方,就是数据注入的部分。
比如我们在csr模式中,可以在一个生命周期钩子里面,向后端获取数据,将得到的数据放到一个声明的state里面,这样我们就可以使用这个数据。
在这里插入图片描述
但是在ssr模式里面,尽量不使用在生命周期钩子里面去获取数据,而是会有单独的数据注入的一个方式。
下面就是next提供的三个数据注入的方式:
在这里插入图片描述

getInitialProps

在服务器端执行,只能在页面层面进行绑定,采用的同构ssr渲染,说明一套代码要在服务端运行一次,又要在客户端运行一次,首次渲染是服务器端渲染,路由跳转时是使用的客户端路由,
该方法在路由跳转使用客户端路由,意味着如果使用router跳转当前页,会在客户端执行这部分逻辑。

在刷新页面的时候,会走服务器端的代码,来保证seo
在进行内部路由跳转的时候,会走客户端的代码。

比如下面的代码,当直接刷新页面,是不会进行degugger的,但是当跳转路由的时候,就会进行debugger。

在这里插入图片描述
不好的地方是,因为node引擎和v8引擎是在变量和方法中 是不相同的,同一套代码在node引擎中和v8引擎中都要走一遍的话,就会在编写代码时比较麻烦,要进行代码兜底。

getServerSideProps

与getInitialProps不同的是,即使使用router跳转当前页,也只会在服务端执行这部分逻辑,这就弥补了getInitialProps的缺点。
这个和getInitialProps 不同的地方就是,在返回数据的时候,需要使用props字段,将数据进行包裹起来。
在这里插入图片描述

getStaticProps

这个就是使用的SSG,在服务端构建时执行的, ssg就是一个静态页面, 当访问的时候,就直接将一个页面返回。

SSG,是在服务器端构建时执行的
如果涉及到动态路由(带参数), 需要使用getStaticPaths配置所有可能的参数情况。

客户端注入

就是上面内容写的,使用生命周期钩子, 在钩子方法中,去获取数据。

3,CSS Modules

Next.js支持使用文件命名约定的CSS 模块

写法: [name].module.css
使用方式: 使用上面的写法来为css文件进行命名,然后再js文件中直接import进行普通引用即可。

在打包后的html里面,都会为class加上一个哈希值,为了避免类名重复。
在这里插入图片描述

4,layout组件

通过在入口文件导入layout,可以实现每个页面公共的页眉页尾。
在这里插入图片描述
页面的页眉页尾:
在这里插入图片描述

5,文件式路由

Nextjs 有一个基于页面概念的基于文件系统的路由器,当一个文件被添加到pages目录中时,它会自动作为一个路径可用。
比如下面的pages文件夹中,

  • api文件就是作为数据的中间层,用来重组数据的。
  • article就是一个路由文件,是以/article路径存在的。其中在这个文件夹下面,有一个[articleId].tsx,articleId就是作为一个参数
    在这里插入图片描述
    文件式路由的格式:
./pages/demo/index.tsx 对应的路由格式: /demo
./pages/demo/[id].tsx 对应的路由格式: /demo/:id
./pages/demo/[a,b,c].tsx 对应的路由格式: /demo/a/b/c

上面的路由是有优先级的
当文件中,以上三种文件都存在,则第一种文件会先优先
第一种路由其实就是预定义路由。优先级就会更高。

6,BFF层的文件式路由

在这里插入图片描述
BFF,作为服务器构建包,不影响客户端构建bundle体积,相同的router生成方式,不过是作为API层访问,而不是page

7,路由跳转

nextjs路由跳转使用方式1:

import Link from "next/link";<Link href={item.link} key={index}><div className={styles.card}><h2>{item.label} &rarr;</h2><p>{item.info}</p></div></Link>

路由跳转使用方式2:
使用useRouter钩子进行跳转
在这里插入图片描述

其他方式:
除了这些之外,还可以使用远程方法进行跳转,不过远程的方法不会进行DIff比对渲染,性能上Nextjs提供的路由跳转会更好。

8,header的修改

对于seo来说,一个页面的header是非常重要的,
nextjs就暴露出来这样一个组件Head,进行对header的内容进行修改。就修改的内容,放在Head组件里面即可
在这里插入图片描述

9, 移动端适配—css适配

一般是使用rem来进行适配。rem是根据当前的页面的font-size来决定1rem的大小。

// 极小分辨率移动端设备
@mixin media-mini-mobile {@media screen and (max-width: 25.875rem) {@content;}
}// 介于极小分辨率和正常分辨率之间的移动端设备
@mixin media-between-mini-and-normal-mobile {@media screen and (min-width: 25.876rem) and (max-width: 47.9375rem) {@content;}
}// 移动端设备
@mixin media-mobile {@media screen and (max-width: 47.9375rem) {@content;}
}// ipad
@mixin media-ipad {@media screen and (min-width: 47.9375rem) and (max-width: 75rem) {@content;}
}使用@include来判断情况。

如下: 当进行移动端适配的时候,需要将css文件导入进来,
使用@include关键字来进行判断
当时手机端的时候,就可以对页面进行一些调整。
当时ipad端的时候,对应的进行页面调整。
在这里插入图片描述

10, 移动端适配–js

当PC端和移动端项目的同一个功能,由于适配的问题,导致组件的更换。
那使用css适配方式,已经无法去满足。
只能是使用js方式,来进行适配。
适配的方式: 就是在store中保存一个变量 用来记录 当前屏幕的宽度 或者是屏幕环境(是移动端还是pc)等,

  1. 监听屏幕宽度变化,使用resize方方法,
  2. 当屏幕发生变化的时候,获取屏幕的宽度,
  3. 用宽度去判断,不同的宽度有不同的样式
  4. 添加none类型来缓冲默认类型样式切换时候的视觉冲突。
    在这里插入图片描述

11,大图优化 —webp

webP其实就是一个图片格式,类似于png等。
对于大图片来说,当用户的网络特别卡的时候,就会导致图片加载不出来,为了缓解这种情况,那么就提供了webp的这种图片格式。webp的图片格式的大小是非常小的,可以更好的加载出来。但是有趣的是,当快网的时候,webp的解析时间是大于png的解析时间。
这个需要注意兼容性的问题。可以通过方法来进行判断该浏览器是否兼容webP格式

export const getIsSupportWebp = (context: AppContext) => {const { headers = {} } = context.ctx.req || {};return headers.accept?.includes("image/webp");
};

对于目前转换成webp格式,都有软件或者网页可转,可以自行百度。

Nextjs服务端开发

1,BFF层开发

其实是和express等开发类似,区别是并没有参数可以区别请求类型。
在BFF层请求数据的时候,不去规定其post方法和get方法
位置主要是写在pages下面的api里面。
在这里插入图片描述
BFF,作为服务器构建包,不影响客户端构建bundle体积,相同的router生成方式,不过是作为API层访问,而不是pages

 axios.get(`${CMSDOMAIN}/api/article-introductions`, {params: {pageNo,pageSize,},})

由于BFF层是在服务器端跑的,你在代码中dugger是不起作用的,下面有两种方式进行调试:
一个是JS的Debug 终端:
在这里插入图片描述
直接在调试终端 ,去跑代码即可。在浏览器是不起作用的,而是在vscode中可见。
在这里插入图片描述
第二个是: 直接在node终端中运行下面这个命令即可。

npm run debugger

相关文章:

Nextjs了解内容

目录Next.jsnext.js的实现1&#xff0c;nextjs初始化2&#xff0c; 项目结构3&#xff0c; 数据注入getInitialPropsgetServerSidePropsgetStaticProps客户端注入3&#xff0c;CSS Modules4&#xff0c;layout组件5&#xff0c;文件式路由6&#xff0c;BFF层的文件式路由7&…...

从事功能测试1年,裸辞1个月,找不到工作的“我”怎么办?

做功能测试一年多了裸辞职一个月了&#xff0c;大部分公司都要求有自动化测试经验&#xff0c;可是哪来的自动化测试呢&#xff1f; 我要是简历上写了吧又有欺诈性&#xff0c;不写他们给的招聘又要自动化优先&#xff0c;将项目带向自动化不是一个容易的事情&#xff0c;很多…...

机器学习基本原理总结

本文大部分内容参考《深度学习》书籍&#xff0c;从中抽取重要的知识点&#xff0c;并对部分概念和原理加以自己的总结&#xff0c;适合当作原书的补充资料阅读&#xff0c;也可当作快速阅览机器学习原理基础知识的参考资料。 前言 深度学习是机器学习的一个特定分支。我们要想…...

JVET-AC0315:用于色度帧内预测的跨分量Merge模式

ECM采用了许多跨分量的预测&#xff08;Cross-componentprediction&#xff0c;CCP&#xff09;模式&#xff0c;包括跨分量包括跨分量线性模型&#xff08;CCLM&#xff09;、卷积跨分量模型&#xff08;CCCM&#xff09;和梯度线性模型&#xff08;GLM&#xff09;&#xff0…...

Session与Cookie的区别(二)

脸盲症的困扰 小明身为杂货店的店长兼唯一的店员&#xff0c;所有大小事都是他一个人在处理。传统杂货店跟便利商店最大的差别在哪里&#xff1f;在于人情味。 就像是你去菜市场买菜的时候会被说帅哥或美女&#xff0c;或者是去买早餐的时候老板会问你&#xff1a;「一样&#…...

疫情开发,软件测试行情趋势是怎么样的?

如果说&#xff0c;2022年对于全世界来说&#xff0c;都是一场极大的挑战的话&#xff1b;那么&#xff0c;2023年绝对是机遇多多的一年。众所周知&#xff0c;随着疫情在全球范围内逐步得到控制&#xff0c;无论是国际还是国内的环境&#xff0c;都会呈现逐步回升的趋势&#…...

Java中间件描述与使用,面试可以用

myCat 用于切分mysql数据库&#xff08;为什么要切分&#xff1a;当数据量过大时&#xff0c;mysql查询效率变低&#xff09; ActiveMQ 订阅&#xff0c;消息推送 swagger 前后端分离&#xff0c;后台接口调式 dubbo 阿里的面向服务RPC框架&#xff0c;为什么要面向服务&#x…...

[OpenMMLab]AI实战营第七节课

语义分割代码实战教学 HRNet 高分辨率神经网络 安装配置 # 选择分支 git branch -a git switch 3.x # 配置环境 conda create -n mmsegmentation python3.8 conda activate mmsegmentation pip install torch1.11.0cu113 torchvision0.12.0cu113 torchaudio0.11.0 --extra-i…...

面向对象的设计模式

"万丈高楼平地起&#xff0c;7种模式打地基"&#xff0c;模式是一种规范&#xff0c;我们应该站在巨人的肩膀上越看越远&#xff0c;接下来&#xff0c;让我们去仔细了解了解面向对象的7种设计模式7种设计模式设计原则的核心思想&#xff1a;找出应用中可能需要变化之…...

里氏替换原则|SOLID as a rock

文章目录 意图动机:违反里氏替换原则解决方案:C++中里氏替换原则的例子里氏替换原则的优点1、可兼容性2、类型安全3、可维护性在C++中用好LSP的标准费几句话本文是关于 SOLID as Rock 设计原则系列的五部分中的第三部分。 SOLID 设计原则侧重于开发 易于维护、可重用和可扩展…...

【C++】右左法则,指针、函数与数组

右左法则——判断复杂的声明对于一个复杂的声明&#xff0c;可以用右左法则判断它是个什么东西&#xff1a;1.先找到变量名称2.从变量名往右看一个部分&#xff0c;再看变量名左边的一个部分3.有小括号先看小括号里面的&#xff0c;一层一层往外看4.先看到的东西优先级大&#…...

打通数据价值链,百分点数据科学基础平台实现数据到决策的价值转换 | 爱分析调研

随着企业数据规模的大幅增长&#xff0c;如何利用数据、充分挖掘数据价值&#xff0c;服务于企业经营管理成为当下企业数字化转型的关键。 如何挖掘数据价值&#xff1f;企业需要一步步完成数据价值链条的多个环节&#xff0c;如数据集成、数据治理、数据建模、数据分析、数据…...

C++之多态【详细总结】

前言 想必大家都知道面向对象的三大特征&#xff1a;封装&#xff0c;继承&#xff0c;多态。封装的本质是&#xff1a;对外暴露必要的接口&#xff0c;但内部的具体实现细节和部分的核心接口对外是不可见的&#xff0c;仅对外开放必要功能性接口。继承的本质是为了复用&#x…...

ThingsBoard-RPC

1、使用 RPC 功能 ThingsBoard 允许您将远程过程调用 (RPC) 从服务器端应用程序发送到设备,反之亦然。基本上,此功能允许您向/从设备发送命令并接收命令执行的结果。本指南涵盖 ThingsBoard RPC 功能。阅读本指南后,您将熟悉以下主题: RPC 类型;基本 RPC 用例;RPC 客户端…...

java分治算法

分治算法介绍 分治法是一种很重要的算法。字面上的解释是“分而治之”&#xff0c;就是把一个复杂的问题分成两个或更多的相同或 相似的子问题&#xff0c;再把子问题分成更小的子问题……直到最后子问题可以简单的直接求解&#xff0c;原问题的解即子问题 的解的合并。这个技…...

【Flutter】【Unity】使用 Flutter + Unity 构建(AR 体验工具包)

使用 Flutter Unity 构建&#xff08;AR 体验工具包&#xff09;【翻译】 原文&#xff1a;https://medium.com/potato/building-with-flutter-unity-ar-experience-toolkit-6aaf17dbb725 由于屡获殊荣的独立动画工作室 Aardman 与讲故事的风险投资公司 Fictioneers&#x…...

MC0108白给-MC0109新河妇荡杯

MC0108白给 小码哥和小码妹在玩一个游戏&#xff0c;初始小码哥拥有 x的金钱&#xff0c;小码妹拥有 y的金钱。 虽然他们不在同一个队伍中&#xff0c;但他们仍然可以通过游戏的货币系统进行交易&#xff0c;通过互相帮助以达到共赢的目的。具体来说&#xff0c;在每一回合&a…...

求职(JAVA程序员的面试自我介绍)

背景 在找工作的过程中&#xff0c;在面试的环节&#xff0c;大多数面试官首先都会叫你自我介绍一下。一般是3到5分钟内。不过经过我面试的无数的公司还有曾经也面试过大多数的求职者。国内很多的程序员面试都极其不专业。有一种很随心所欲的感觉。所以经常遇到求职者吐槽遇到了…...

金三银四季节前端面试题复习来了

vue3和vue2的区别有哪些 Diff算法的改进Tree Sharing优化主要的API双向绑定改为es6的proxy原生支持tscomposition API移除令人头疼的this 说说CSS选择器以及这些选择器的优先级 !important 内联样式&#xff08;1000&#xff09; ID选择器&#xff08;0100&#xff09; 类选…...

【C/C++基础练习题】简单语法使用练习题

&#x1f349;内容专栏&#xff1a;【C/C要打好基础啊】 &#x1f349;本文内容&#xff1a;简单语法使用练习题&#xff08;复习之前写过的实验报告&#xff09; &#x1f349;本文作者&#xff1a;Melon西西 &#x1f349;发布时间 &#xff1a;2023.2.10 目录 1、输入三个数…...

堆排序

章节目录&#xff1a;一、相关概述1.1 基本介绍1.2 排序思想二、基本应用2.1 步骤说明2.2 代码示例三、结束语一、相关概述 1.1 基本介绍 堆排序是利用堆这种数据结构而设计的一种排序算法&#xff0c;堆排序是一种选择排序。它的最坏最好平均时间复杂度均为 O(nlogn)&#x…...

PLC是什么?PLC相关知识小科普

欢迎各位来到东用知识小课堂1.PLC是什么&#xff1a;●PLC就是可编程控制器&#xff0c;它应用于工业环境&#xff0c;必须具有很强的抗干扰能力、广泛的适应能力和应用范围。●PLC是“数字运算操作的电子系统”&#xff0c;也是一种计算机&#xff0c;它是“专为在工业环境下应…...

BERT简介

BERT&#xff1a; BERT预训练模型训练步骤&#xff1a; 使用Masked LM方式将语料库中的某一部分的词语掩盖住&#xff0c;模型通过上下文预测被掩盖的信息&#xff0c;从而训练出初步的语言模型在语料库中选出连续的上下语句&#xff0c;并使用Tranformer模块识别语句的连续性通…...

OpenStack云平台搭建(5) | 部署Nova

目录 1、登录数据库配置 2、安装nova 3、计算节点上安装nova 4、在controller节点上 nova组件是用来建虚拟机的&#xff08;功能&#xff1a;负责响应虚拟机创建请求、调度、销毁云主机&#xff09; nova主要组成&#xff1a; (1).nova api service------安装在controlle…...

【重要】2023年上半年有三AI新课程规划出炉,讲师持续招募中!

2023年正式起航&#xff0c;想必大家都已经完全投入到了工作状态中&#xff0c;有三AI平台今年将在已有内容的基础上&#xff0c;继续进行新课程开发&#xff0c;本次我们来介绍今年上半年的课程计划&#xff0c;以及新讲师招募计划。2023年新上线课程我们平台的课程当前分为两…...

【正点原子FPGA连载】第八章UART串口中断实验 摘自【正点原子】DFZU2EG_4EV MPSoC之嵌入式Vitis开发指南

1&#xff09;实验平台&#xff1a;正点原子MPSoC开发板 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id692450874670 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/thread-340252-1-1.html 第八章UART串口中…...

【云原生】解读Kubernetes三层网络方案

在上一篇文章中&#xff0c;我以网桥类型的 Flannel 插件为例&#xff0c;为你讲解了 Kubernetes 里容器网络和 CNI 插件的主要工作原理。不过&#xff0c;除了这种模式之外&#xff0c;还有一种纯三层&#xff08;Pure Layer 3&#xff09;网络方案非常值得你注意。其中的典型…...

elasticsearch8.3.2搭建部署

Elasticsearch8.3.2搭建部署详细步骤 0.过往文章 ES-6文章&#xff1a; Elasticsearch6.6.0部署、原理和使用介绍: https://blog.csdn.net/wt334502157/article/details/119515730 ES-7文章&#xff1a; Elasticsearch7.6.1部署、原理和使用介绍: https://blog.csdn.net/wt…...

MySQL_InnoDB引擎

InnoDB引擎 逻辑存储结构 表空间&#xff08;ibd文件&#xff09;&#xff0c;一个mysql实例可以对应多个表空间&#xff0c;用于存储记录、索引等数据。 段&#xff0c;分为数据段&#xff08;Leaf node segment&#xff09;、索引段(Non-leaf node segment)、回滚段(Rollba…...

json-server使用

文章目录json-server使用简介安装json-server启动json-server操作创建数据库查询数据增加数据删除数据修改数据putpatch配置静态资源静态资源首页资源json-server使用 简介 github地址 安装json-server npm install -g json-server启动json-server json-server --watch db…...