尚硅谷_谷粒学苑-微服务+全栈在线教育实战项目之旅

SpringBoot+Maven+MabatisPlus+Vue

底层原理
图解
idea快捷键
SpringBoot,SpringMVC和Spring的关系
VUE+SpringBoot运作过程
编程工具,插件以及依赖下载安装的注意事项
JSON字符串作为前后端之间信息传递载体
访问Window版Redis的IP配置
Linux虚拟机版的Redis可能遇见的问题
修改文件时单词拼写错误
上传阿里云视频时间操作过快，导致上传失败。
后端
- Spring的@注解
- - @Autowired无法注入,异常:NullPointerException: null
- 启动类位置注意事项（一定要注意文件结构）
- @MapperScan
- maven在新建springboot项目引入RELEASE版本出错
- 重新编译整个project项目
- pom.xml文件存在非法字符
- MP主键 ID_WORKER/ID_WORKER_STR和AUTO注意事项
- 自定义统一返回JSON字符串以及配置使用
- MYSQL高低版本的不同连接配置
- 统一数据库和项目传递的SQL语句的编码规则为UTF-8
- 新建项目后java文件夹是普通文件夹类型
- springboot项目启动时加载配置文件出错
- maven默认加载机制不识别mapper.xml文件
- SpringBoot缓存Redis注解导错包
- 腾讯云实现验证码服务
- import导包时选错包
- Import *.*爆红
- application.properties配置文件造成的汉字乱码问题解决（编码与解码方式不一致导致中文乱码）
- - 腾讯验证码：FailedOperation.SignatureIncorrectOrUnapproved
  - 疑问？
- 中文乱码问题
- Feign.FeignException$NotFound: status 404 reading 错误原因分析
- MySQL单表能存储多少条数据（Insert失灵的原因）？
前端
- 前端不同VS终端环境下使用babel和webpack等工具
- npm模块化处理ES6语法的js文件出错
- webpack打包错误提示 Error: Can't resolve 'css-loader'或Error: Can't resolve 'style-loader'
- npm install安装vue框架的package.json中依赖出错
- 无法跨域（不同协议，IP，端口无法通信）问题（Access-Control-Allow-Origin）
- Network Error（403状态码）
- nginx安装配置后启动出错
- 前端标识符属性值和后端接口参数名称不一致
- el-radio设置默认值以及数据回显
- nginx转发请求时对转发的http数据包大小限制（POST，文件上传）
- 在Nuxt中使用幻灯片插件swiper无法编译并且无法找到css文件。
- vue-awesome-swiper无法编译问题
- - swiper无法找到css文件
- vue-server-renderer 要和 vue 的版本一致，否则报错
- Nuxt实现swiger图片轮播功能
- JSON parse error: Unexpected character ('}' (code 125))
- Required request body is missing:public
- vue报错 Can‘t resolve ‘js-cookie‘
- cookie的键值对存取值必须为字符串类型
- (HttpServletRequest) failed and no fallback available.
- TypeError: Cannot read property 'xxxx' of undefined的解决方法
- cnpm : 无法加载文件 C:\Users\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本
- 网关失败（Network error）
- VS终端NPM安装VUE组件
- Nuxt框架import组件导致document is not defined
- element ui select 后台赋值后无法选中的问题
- 下拉框的Int类型和字符串类型判断

大家好我是前端CV工程师，后端CRUD工程师。
美工是写css、js页面特效和页面整体布局的前端是写vue数据显示和前后端数据交互。
改bug的过程才是真正学习的过程，因为改bug过程中你会将代码思维逻辑推导一遍又一遍进行找错误。

底层原理

默认情况下：SpringBoot编码UTF-8—》可执行文件—》tomcat解码ISO进行解码运行。（会导致中文乱码，将tomcat改为utf-8）

VUE前后端交互的底层是基于封装axios（ajax），而SpringMVC后端则是基于框架封装servlet的req和rep进行的前后端交互

SpringMVC框架 : 是基于servlet实现的。
Struts2 框架: 是基于Filter实现的（Struts1基于servlet）

浏览器也是编译器的一种负责需求的发送和接收数据包并显示。（浏览器内核进行前端代码程序的解析和运行----类比记忆node.js）

SpringBoot框架内置服务器：微服务配置启动端口就是内置服务器的启动端口。
每个微服务都是基于SpringBoot框架的maven项目，运行在自带tomcat服务器上。
一个微服务内置一个tomcat服务器。

SpringBoot项目带启动类的是微服务项目，若是不带web.xml则该服务只是后端服务，没有前端界面等

图解

本项目通过各个微服务运行不同的本地端口号模拟各个微服务的不同地址
从而模拟实现SpringCloud的请求转发，负载均衡

开发过程中，前后端属于应用层，信息交互基于http协议

若想用计算机处理数据都要先将数据加载到内存中再进行CPU数据处理，因此远程网络资源必然要先加载到本地内存（或者内存-下载->磁盘-读取->内存）中再进行CPU处理。
而本地访问网络资源的方式关闭后，内存中的远程网络资源是否清除则是缓存的问题了。
例如：本地上网冲浪时，所有的可视化的娱乐页面等等信息都是远程运行商先将数据发送到本地内存中（此操作也是经过CPU处理运行的）然后CPU处理后才会显示，运行。
并且本地http请求也都是需要加载到内存后经过CPU处理后才会网络发送等等。

因为大多数情况下CPU只能和内存中程序进行数据计算交互，实现程序功能。

maven项目之间若想要相互调用使用则需要通过maven导入
父maven不可以有启动类。
添加不同项目（微服务），具有不同的端口号
文件上传：图片上传到OSS，文件上传到后端处理数据后存到数据库

nginx和redis等组件是独立于项目的只需要配置好加载到内存中运行就可以实现相应功能。

idea快捷键

crtl+shift+R 来replaceAll，
把atguigu和拼错的security全局换成正确的就好了

SpringBoot,SpringMVC和Spring的关系

Spring Boot 是 Spring 的一套快速配置脚手架，本质上SpringBoot就是配置好的Spring。Spring Boot 使用了默认大于配置的理念，很多集成方案已经帮你选择好了，能不配置就不配置。
SpringBoot是配置好的Spring所以可以快速整合其余Spring可以整合的（SSM，SSH等）框架（导入依赖就行）因此就有了脚手架称号。
SpringMVC就是管理controller对象的容器，Spring就是管理service和dao对象的容器,两者都存在于一个Spring开源框架。
SpringMVC基于Servlet

VUE+SpringBoot运作过程

编程工具,插件以及依赖下载安装的注意事项

编程插件或者依赖的下载安装路径和项目命名最好是全英文：保证不会出错，中文可能会出错
IDEA编译器通过import导入外部项目的时候项目路径也不能存在中文
开发过程中尽量减少中文的使用，例如工具安装路径，文件夹命名，包命名等等
除注释外不要使用中文

JSON字符串作为前后端之间信息传递载体

前后端进行信息传递前都要先将数据转化为json形式才可以进行数据传输。
例如：前端向后端传递对象参数时需要将对象转为json字符串形式，而后端return数据时，也要将数据转化为json字符串形式或者转化为json对象形式

访问Window版Redis的IP配置

localhost 、 127.0.0.1 、0.0.0.0 、本地IP的区别
因为配置的是Window版本地的Redis所以只需要127.0.0.1回访自身指定端口就行，反之若是使用linux虚拟机运行的Redis就需要写虚拟机的IP地址和运行端口号。
IP：定位服务器位置
端口号：定位程序在服务器运行位置

spring.redis.host=127.0.0.1
spring.redis.port=6379
spring.redis.database= 0
spring.redis.timeout=1800000
spring.redis.lettuce.pool.max-active=20
spring.redis.lettuce.pool.max-wait=-1
#最大阻塞等待时间(负数表示没限制)
spring.redis.lettuce.pool.max-idle=5
spring.redis.lettuce.pool.min-idle=0

注意：若是Redis还有密码记得把密码配置上。

Linux虚拟机版的Redis可能遇见的问题

修改文件时单词拼写错误

localtion是错误的，正确的是location
localhost是正确的

上传阿里云视频时间操作过快，导致上传失败。

此处注意选用套餐，我选的是按照流量收费，所以上传慢一点，并且当时网络也比较差，然后操作过快会导致未上传成功，因此也不会返回对应视频ID。
流量收费是根据上传后观看视频产生的用户流量进行计算的。
变更计费方式

可以通过idea控制台观察是否上传完成

后端

Spring的@注解

spring

简单粗暴介绍：使用注解的类都是交给spring管理，需要spring实例化出bean对象，这样才能调用对应实例方法处理前端需求。
于是可以发现serviceImpl，controller以及配置类的类名上面都是带@注解的
spring中的bean都是项目装配启动时要实例化的bean，这样才能使用bean调用实例化方法提供服务。
任何框架都是先运行配置文件，该实例化实例化，该注入注入，该配置配置之后再通过前端触发进行使用，凡是所写类只有实例化才能使用对应的实例方法。
只有spring可以使用注解进行实例化bean，其余框架都需要基于spring（被spring整合）才能使用注解，而使用注解的类都要在项目装配启动加载到内存时实例化然后提供服务。
java网站开发（请求-响应模型）：url触发Controllerbean然后调用实例方法从而进行逻辑处理最后返回结果，而框架会根据设置的单例或者多例进行bean的管理。
（除去main函数，其余java实例方法都是被动触发执行）
例如：
@controller，只有项目启动时提前实例化bean才能对前端传递的需求进行处理。
@service，在serviceImpl层添加注解，service层为接口层无需添加注解，注入的时候会将实现service层的Impl层注入。
Spring Boot 是 Spring 的一套快速配置脚手架，本质上SpringBoot就是Spring

@Autowired无法注入,异常:NullPointerException: null

@Autowired为自动装配,将对象自动注入到类中使用.
@Autowired注意事项：Autowired注入对象时，需要确保对应的对象已经被实例化出来即对应对象的类已被注解或者spring配置文件已经将其实例化。
@Autowired注入有两个条件,被注入的类的对象交给了spring管理(注解或者spring配置文件）;同时使用@Autowired的类的对象也要交给spring管理.两个条件都满足才能注入(注解或者spring配置文件）.
serviceImpl层还有controller层类名上都有spring@注解

———————————————— 版权声明：本文为CSDN博主「黑白格tt」的原创文章，遵循CC 4.0
BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sqlgao22/article/details/100100314

启动类位置注意事项（一定要注意文件结构）

AppApplication 一定要在包的最外层，否则Spring无法对所有的类进行托管，会造成@Autowired 无法注入。
这是因为SpringBoot项目的Bean装配默认规则是根据AppApplication 类所在的包位置从上往下扫描！即只会扫描AppApplication 所在的包及其子包，其他包路径不会被扫描！！！

若想扫描其他包中配置类则需要配置@ComponentScan。

@MapperScan

作用：指定要变成实现类的接口所在的包，然后包下面的所有接口在编译之后都会生成相应的实现类。
配置扫描的是java接口不是xml文件，而maven默认不扫描xml文件，需要单独配置maven扫描xml文件。
@MapperScan注解

———————————————— 版权声明：本文为CSDN博主「哈6哈6」的原创文章，遵循CC 4.0
BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/baidu_27636661/article/details/90487066

maven在新建springboot项目引入RELEASE版本出错

maven笔记

springframework.boot:spring-boot-starter-parent:2.2.1.RELEASE’ not found
若出现jar包下载不了只有两个办法
要么换个仓库,要么换个版本
解决办法

因为RELEASE版本是不稳定的，于是需要指定spring的仓库，在pom.xml最后，project里面添加如下代码,然后保存pom.xml文件,就会重新从repo.spring.io中引入jar包：`

<repositories><repository><id>spring-snapshots</id><url>http://repo.spring.io/libs-snapshot</url></repository>
</repositories><pluginRepositories><pluginRepository><id>spring-snapshots</id><url>http://repo.spring.io/libs-snapshot</url></pluginRepository>

maven导入失败后，解决完bug，idea点击右上角小锤子直接重新配置整个project

或者

或者在pom文件Reimport，maven重新导入依赖

重新编译整个project项目

maven导入失败后，解决完bug，idea点击右上角小锤子直接重新配置整个project

或者

pom.xml文件存在非法字符

报错：Element ‘project’ cannot have character [children], because the type’s content type is element-only.
原因：pom中存在非法字符

MP主键 ID_WORKER/ID_WORKER_STR和AUTO注意事项

自定义统一返回JSON字符串以及配置使用

构造方法私有：单例模式

最后返回一个R的实例对象，封装为JSON形式。

MYSQL高低版本的不同连接配置

IntelliJ IDEA连接SQL server和MySQL数据库管理系统

高版本依赖和低版本的操作代码可能产生冲突，因此安装依赖尽量不选择最高版本，上网搜一下选择一个经典版本就可以了。

统一数据库和项目传递的SQL语句的编码规则为UTF-8

url=jdbc:mysql://localhost:3306/education?useUnicode=true&characterEncoding=utf-8
涉及汉字操作需要设置?useUnicode=true&characterEncoding=utf-8用来统一编码规则。
因为有关汉字的编码规则有很多，需要统一编码规则才不会解码出错。
而乱码的原因就是编码和解码的规则不统一
之前无汉字不会出错的原因是UTF-8兼容ASCALL编码。
信息编码部分

# mysql数据库连接
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/education?useUnicode=true&characterEncoding=utf-8
#涉及汉字操作需要设置?useUnicode=true&characterEncoding=utf-8用来统一编码。
spring.datasource.username=root
spring.datasource.password=
#mybatis日志,可以查看使用的SQL语句
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

新建项目后java文件夹是普通文件夹类型

若是普通文件夹则编译加载时不会加载到target文件夹中，target文件夹是SpringBoot项目编译打包整合后运行的文件夹，可以手动将对应未加载进去的文件cv进去，也可以如下图所示。

springboot项目启动时加载配置文件出错

Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured.
错误原因：springboot项目启动的时候加载resources中的application.properties全局配置文件，默认加载时需要加载配置文件中数据库配置。
但是当前项目不需要使用数据库配置，所以没有配置数据库，导致出错。
解决办法如图所示。

maven默认加载机制不识别mapper.xml文件

SpringBoot缓存Redis注解导错包

腾讯云实现验证码服务

最全腾讯云实现短信验证码步骤
FailedOperation.TemplateIncorrectOrUnapproved

  /* 当出现以下错误码时，快速解决方案参考* [FailedOperation.SignatureIncorrectOrUnapproved](https://cloud.tencent.com/document/product/382/9558#.E7.9F.AD.E4.BF.A1.E5.8F.91.E9.80.81.E6.8F.90.E7.A4.BA.EF.BC.9Afailedoperation.signatureincorrectorunapproved-.E5.A6.82.E4.BD.95.E5.A4.84.E7.90.86.EF.BC.9F)* [FailedOperation.TemplateIncorrectOrUnapproved](https://cloud.tencent.com/document/product/382/9558#.E7.9F.AD.E4.BF.A1.E5.8F.91.E9.80.81.E6.8F.90.E7.A4.BA.EF.BC.9Afailedoperation.templateincorrectorunapproved-.E5.A6.82.E4.BD.95.E5.A4.84.E7.90.86.EF.BC.9F)* [UnauthorizedOperation.SmsSdkAppIdVerifyFail](https://cloud.tencent.com/document/product/382/9558#.E7.9F.AD.E4.BF.A1.E5.8F.91.E9.80.81.E6.8F.90.E7.A4.BA.EF.BC.9Aunauthorizedoperation.smssdkappidverifyfail-.E5.A6.82.E4.BD.95.E5.A4.84.E7.90.86.EF.BC.9F)* [UnsupportedOperation.ContainDomesticAndInternationalPhoneNumber](https://cloud.tencent.com/document/product/382/9558#.E7.9F.AD.E4.BF.A1.E5.8F.91.E9.80.81.E6.8F.90.E7.A4.BA.EF.BC.9Aunsupportedoperation.containdomesticandinternationalphonenumber-.E5.A6.82.E4.BD.95.E5.A4.84.E7.90.86.EF.BC.9F)* 更多错误，可咨询[腾讯云助手](https://tccc.qcloud.com/web/im/index.html#/chat?webAppId=8fa15978f85cb41f7e2ea36920cb3ae1&title=Sms)*/

import导包时选错包

标志：可以实例化需要的对象但是定义的对象无法使用需要的方法。（部分正确）

Import .爆红

若确定import语句没错的情况下
import语句爆红必然是因为项目中不存在对应导入的jar包以及路径，因为项目中未导入对应jar包或者jar包版本错误。若是maven项目则可能因为导入jar包失败或者忘记导入jar包，需要查看pom.xml文件。

application.properties配置文件造成的汉字乱码问题解决（编码与解码方式不一致导致中文乱码）

腾讯验证码：FailedOperation.SignatureIncorrectOrUnapproved

官方解决办法
实际原因是因为通过配置文件读取的SignName会导致中文乱码，从而引发签名不一致问题。
乱码的原因：编码与解码方式不统一

解决办法
网上有很多改变配置文件编码方式为UTF-8等等都无用，问题的原因是springboot默认的编码格式就是UTF-8，然而Tomcat解码方式不是UTF-8所以中文乱码。

默认情况下，tomcat使用的是iso8859-1的编码解码方式，如果包含中文，采用这种编码方式就会出现乱码问题。
tomcat服务器默认使用ISO编解码，但是ISO无法显示汉字，所以导致中文乱码。

默认情况下：SpringBoot编码UTF-8—》可执行文件—》tomcat解码ISO进行解码运行。

中文乱码的原因：编码和解码方式不一致。
信息编码部分
汉字乱码问题
解决办法：
修改tomcat下的conf/server.xml文件，找到Connector标签，添加useBodyEncodingForURI=“true”

<Connector port="8080" useBodyEncodingForURI="true" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" />

疑问？

SpringBoot内嵌Tomcat所以可以自定义微服务端口号，但为什么我改了本地Tomcat解码方式却可以影响到SpringBoot的内嵌Tomcat解码方式呢？

首先可以确定修改本地Tomcat解码方式为UTF-8可以解决乱码问题，由此可得，本地Tomcat的conf/server.xml文件配置会影响SpringBoot内嵌Tomcat配置。

中文乱码问题

乱码的原因就是编码与解码的方式不一致导致的。
编码和解码方式不一致时大多数情况只会出现中文乱码，因为基本所有编码方式都兼容ASCALL编码。
解决办法：全部改为UTF-8（目前最好用的编码解码方式）

Feign.FeignException$NotFound: status 404 reading 错误原因分析

Client的方法URL和Controller层不一致
参数名未用注解指定@PathVariable(“参数名”)
传参时，String为空字符串（str=“”）

Feign传参为空串时导致的Feign调用错误
结论：new String();创建的对象并不为空，系统是分配了内存空间的，只是它没有赋值；String str=“”;str也不为空，只是赋值为空的字符串；String str=null;str为空，没有内存空间，什么也没有，不能调用它的属性，会有异常抛出

MySQL单表能存储多少条数据（Insert失灵的原因）？

问题背景：我的某一个MySQL数据库表有三百条记录，然后我insert新记录的时候无论如何都insert不了但是IDEA控制台却显示没错，然后我直接在Navicat进行insert也是显示插入成功但是表中数据还是没变化，最后一怒之下
DELETE FROM statistics_daily
删除表中所有记录，然后就插入成功了。
原因：MySQL单表的存储记录条数是有限的。
MySQL单表能存储多少条数据？

MySQL是中小型网站普遍使用的数据库之一，然而，很多人并不清楚MySQL到底能支持多大的数据量，甚至对它产生误解。MySQL单表的上限，主要与操作系统支持的最大文件大小有关。
事实上MySQL能承受的数据量的多少主要和数据表的结构有关，并不是一个固定的数值。表的结构简单，则能承受的数据量相对比结构复杂时大些。

前端

前端不同VS终端环境下使用babel和webpack等工具

在powershell中使用babel --version
babel : 无法加载文件 C:\Users\hp\AppData\Roaming\npm\babel.ps1，因为在此系统上禁止运行脚本。
powershell和cmd
个人猜测cmd可以运行babel的原因是因为cmd的配置简单，所以缺少插件的识别作用，可以直接运行babel，而powershell工作详细，识别权限然后阻止babel运行。

总结：powershell安装配置前端工具，cmd使用前端工具。

npm模块化处理ES6语法的js文件出错

ES6入门
Cannot use import statement outside a module

解决办法
在package.json中添加
“type”:“module”
声明要进行ES6语法的模块化处理。
若是处理ES5语法的模块化就不需要声明了，否则会导致以下问题
require is not defined in ES module scope, you can use import instead
拓展：

ES5使用exports 和require 来导出、导入模块
ES6使用 export 和 import 来导出、导入模块

webpack打包错误提示 Error: Can’t resolve 'css-loader’或Error: Can’t resolve ‘style-loader’

原答案
报错提示

1.网上查资料发现原来’css-loader’和’style-loader’未安装

2.正确做法cnpm install css-loader style-loader --save

3.打包运行成功

npm install安装vue框架的package.json中依赖出错

npm8.3.1版本-这个解决方案是使用的是未安装依赖的vue-admin-template-master。如果想看自己安装依赖的话
这边小结一下：

需要使用cnpm，可以看成的npm升级版:cnpm安装命令：npm install cnpm -g

本来是打算自己下载依赖的，结果发现下载不了，转成使用现成的vue-element-admin-master，也就是视频中的1010项目。

这个项目和npm7版本可能有冲突，因为我这里启动的时候发现找不到命令，解决办法是删除node_modules文件夹，使用cnpm install重新安装.

具体步骤：

导入下载好依赖的步骤
安装cnpm ：npm install cnpm -g
安装 node-sass： cnpm install node-sass
继续安装 : cnpm i node-sass -D
删除node_modules文件夹
根据package.json重新安装依赖：cnpm install
启动项目：npm run dev

无法跨域（不同协议，IP，端口无法通信）问题（Access-Control-Allow-Origin）

前后端分离的项目：前后端运行的协议，IP，端口号不一致，会有跨域问题
当一个请求 URL 的协议、域名、端口三者之间任意一个与当前页面 URL 不同即为跨域

cookie不能实现跨域所以前后端分离的项目中不能通过cookie传值：因为前端项目和后端项目运行端口不一样属于跨域类型
九种跨域方式实现原理（完整版）
解决办法：编写所有的controller层时都记得加上@CrossOrigin
跨域问题的本质就是前后端交互失败，比如：忘记开nginx以致于无后端响应以及前端请求路径，get/post方式，参数出错，也会导致跨域问题
http:本地的协议
https：认证过的协议

@CrossOrigin//解决跨域问题
端口号，协议，IP地址不同会导致跨域，但是同一个电脑前后端分离的项目端口号又不能相同，否则会导致占用问题，不能同时使用一个端口号
跨域问题：也可能是后端和前端的请求方式不对应。

Network Error（403状态码）

前端需求没有映射到后端接口自然是无法处理导致前后端无法交互。

路径错误：基本就是前端的请求URL和后端的controller映射的URL不匹配，导致的前后端无法交互，从而出错。
跨域问题的报错也是NetWork Error，因为前后端无法交互。
后端项目没有启动自然也是Network Error

若是由后端返回的其他报错例如统一异常处理或者特定，自定义异常处理则就是后端问题了，需要看idea控制台的报错了。

nginx安装配置后启动出错

nginx: [emerg] bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions)
nginx的配置文件一开始默认是80端口，出现这个错误多半是80端口已经被占用。这时候只需要把

server {
listen 80;
server_name localhost lcsf.com;#charset koi8-r;#access_log logs/host.access.log main;location / {
proxy_pass http://lcsf.com;
proxy_redirect default;
}

这个地方的listen改成一个没有被占用过的端口然后重启nginx就可以解决，例如81

前端标识符属性值和后端接口参数名称不一致

前端标识符属性值和后端参数名称（实体类中属性名）保持一致，否则无法直接映射传参，导致后端接收不到数据。
路径映射的值也要和后端接口参数名称一一对应。
实体类中的变量属性还要设置public set/get方法（可以用lombok插件的@Data）
若无lombok插件且使用了@Data注解则大量set/get报错且@Data不报错。
同理：前端data中对象接收后端return的对象数据时也要做好属性的一一对应。
前端data数据显示到element-ui组件上也是注意绑定的属性名一致，否则会导致不显示。

el-radio设置默认值以及数据回显

注意此处video.free变量名和后端实体类中的变量名需要保持一致。
label属性值类型也要和后端实体类中的变量类型需要保持一致。

前端<el-radio-group v-model="video.free"><el-radio  :label="true">免费</el-radio><el-radio  :label="false">默认</el-radio></el-radio-group>
后端private Boolean free;

nginx转发请求时对转发的http数据包大小限制（POST，文件上传）

注意：配置完nginx后需要在任务管理器中关闭全部nginx进程再重新启动才可以启动新配置（或者直接电脑重启）。

在Nuxt中使用幻灯片插件swiper无法编译并且无法找到css文件。

vue-awesome-swiper无法编译问题

Error:Could not compile…Could not compile template,
用npm install vue-awesome-swiper@3.1.3版本即可解决

npm install vue-awesome-swiper下载的是最新4.x版本，这个版本两个月之前突然冒出来的，视频中用的是3.1.3版本，已下载各位去package.json文件中把对应的组件修改为^3.1.3版本，重新npm install就行，没下载的可以直接npm install vue-awesome-swiper@3.1.3下载

swiper无法找到css文件

npm install swiper

Error：Package subpath ‘swiper\dist\css\swiper.css’ is not defined by “exports” in …\node_modules\swiper\package.json
解决问题的思路

因为我们导入的 'swiper/css/swiper.css'在低版本中有，Swiper 6.0.0或者更高版本就不是这个导入地址了。
因此可以使用低版本swiper：npm install swiper@低版本

// i(>= Swiper 6.x)'swiper/swiper-bundle.css'
//  (<= Swiper 5.x)'swiper/css/swiper.css'

或者分析报错原因导入高版本Swiper的css文件

由上图可见我用的swiper是8.0版本，所以也没有上述解决办法链接的css文件，
于是分析报错信息，npm下载的swiper的package.json管理的依赖中没有对应的css文件
所以我去swiper的package.json中寻找存在的css文件。

注意：导入的不是全部属性名（key）:属性值（value），而是只导入属性名（key）。
运行时会直接映射key:value进行处理。而我最后找到对应的css文件却一直报错就是因为我将全部key:value都导入了。

vue-server-renderer 要和 vue 的版本一致，否则报错

解决办法
报错信息：

Nuxt实现swiger图片轮播功能

注意swiper和vue-awesome-swiper版本需要符合搭配，
先下载对应版本的vue-awesome-swiper@版本
然后直接下载swiper不指定版本号，会自动适配对应的版本。
下图是我最终版本匹配。

最终循环轮播图配置代码

JSON parse error: Unexpected character (‘}’ (code 125))

JSON parse error: Unexpected character (‘}’ (code 125)): was expecting double-quote to start field name; nested exception is com.fasterxml.jackson.core.JsonParseException: Unexpected character (‘}’ (code 125)): was expecting double-quote to start field name
分析报错信息可以得到，Json字符串错误，而json字符串只存在于前后端交互过程时使用，并且因为是后端报错，所以肯定是前端向后端传递的Json字符串然后后端解析时出现问题。
于是

Required request body is missing:public

vue报错 Can‘t resolve ‘js-cookie‘

import 引入使用js-cookie但是没有下载js-cookie.

这个就是js-cookie在当前项目没安装，只要重新安装js-cookie就行了:
npm install --save js-cookie

cookie的键值对存取值必须为字符串类型

存储用户信息到cookie中进行跨页面传值时注意cookie只能保存字符串的"key":“value”
JSON.stringify(response.data.data.item)进行类型转化（对象-》字符串）。
cookie只能存的是字符串，session保存的是对象
至于第一个为什么token存入cookie不用转为字符串，因为token本来就是字符串

(HttpServletRequest) failed and no fallback available.

传递HttpServletRequest参数有问题
上述问题是因为Feign调用有问题于是触发熔断器，然而熔断器我没配置所以两重错误。
配置文件开启了熔断器机制，未实现配置熔断器

Feign调用报错：failed and no fallback available

TypeError: Cannot read property ‘xxxx’ of undefined的解决方法

出现这种报错，首先你要明白原因是什么，大多数情况下是’xxxx’的调用者为null或者undefined才报出来的错。
因为前端JS声明即定义所以只会报xxxx出错不会报调用者出错

容易进入一个误区就是你认为这个’xxxx’是undefined，可能就花时间去确认或怎样，这样其实你处理问题的方向就发生了错误。

明确调用者为空的或undefined的话就好办了，当然你不确信的话可以去验证，使用console.log()将对象打印出来在浏览器的控制台看结果。

发现第二个大坑就是，js的引入顺序不正确可能会导致js引不进来。

js的引入顺序不正确可能会导致js引不进来的情况。

js的引入顺序不正确可能会导致js引不进来的情况。

问题解决方式：ctrl+f在页面查找xxxx然后锁定其调用者是否定义。

cnpm : 无法加载文件 C:\Users\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本

提示信息：系统禁止运行脚本。这时我们需要更改系统的执行策略，使得淘宝镜像脚本cnpm能够在我们的系统上执行。

解决办法

网关失败（Network error）

注意注意注意若是网关失败（Network error）必然是因为最终拼凑的URL出错或者拼凑URL的过程出错。
例如：Gateway网关，网关配置文件中我将微服务在Nacos注册的服务名写错，导致最终URL拼凑出错。
还有种可能对应微服务没有注册Nacos，无法映射服务名对应的运行端口，拼凑URL出错。
当然也可能因为对应微服务没启动或者Gateway服务没启动。
还有可能未去掉Controller类上@CrossOrigin导致跨域出错。

VS终端NPM安装VUE组件

Nuxt框架import组件导致document is not defined

原因是Node服务端加载渲染NUXT对象时失败。
起因是Node服务端加载渲染时无法渲染import的某些插件，从而服务端整体渲染NUXT对象时出错失败。
解决办法
写一个import对应插件的js文件放入 plugins 文件夹中
将该文件进引入 nuxt.config.js，并将ssr选项设置为false，这样Node服务端渲染时就不会渲染这个组件了。
并且组件并非数据所以可以不在服务端渲染。

element ui select 后台赋值后无法选中的问题

问题原因

加一个强制刷新就行了

下拉框的Int类型和字符串类型判断