vue报错streammusthavedata

Posted 2023-03-13

1.环境&资源问题
1.1.如果生成私钥提示没有这个目录

一般git安装成功之后，会在C:\Users\下创建.ssh目录。如果没有就会出现上述问题。
检查是否安装成功：cmd中执行：git --version (两个-)
如果没有正确提示版本号，则配置一下git环境变量（看问题1.5）
如果电脑用户名是中文名字，需要修改为英文
https://jingyan.baidu.com/article/59703552843c458fc0074005.html
可能是中文名字，导致没有创建.ssh目录
如果改完电脑用户名之后，执行ssh-keygen还是不行的话，就重装git
但是经过测试，很多同学的电脑用户名都无法修改，如果是这样，只能重装系统_
给电脑起中文名，多么痛的领悟…
1.2.无法导入mydb.sql问题
解决方法：

找到my.ini文件 ；
修改内部的数据库引擎为INNODB
#默认为MyISAM
#default-storage-engine=MyISAM
#改为INNODB
default-storage-engine=INNODB
#支持 INNODB 引擎模式。修改为　default-storage-engine=INNODB　即可。
#如果 INNODB 模式如果不能启动，删除data目录下ib开头的日志文件重新启动。

重新导入mydb.sql

1.3.导入mysql另一个问题

如果出现这个问题，说明是mysql没有启动
通过php软件启动mysql
或者cmd命令中执行，net start mysql
1.4.git环境变量配置
参考 —> Windows10下Git环境变量配置
最后一步是重启cmd
1.5.第一次push时，输错密码
删除windows凭据：Win10系统如何删除Windows凭据
1.6.postman不需要注册
1.7.vscode保存代码，直接报错

分析
这是因为默认保存时，自动格式化代码给代码前，添加了一个tab键，而tab键是4个空格，但是eslint语法要求只能是2个空格。
以及双引号，末尾分号，这些eslint都不允许。
如果我们一个一个自己修改，太麻烦了。
我们可以通过一个插件：eslint
然后在用户设置中增加：（vscode版本：1.19.1测试OK）
“eslint.autoFixOnSave”: true,
这样以上问题都可以解决：空格问题，引号问题，末尾分号问题。

补充:
如果VSCode版本比较高（1.42.1测试OK）,则换成
“editor.codeActionsOnSave”:
“source.fixAll.eslint”: true
,
还有一种方式，可以不让代码报错，但是保存代码时不会修复空格引号问题
补充：或者我们可以直接关闭eslint的语法校验

这样做之后，末尾分号，双引号等等问题，不会再报错。
保存之后，生成了一个配置：（如果出现了关闭之后，自动打开，就自己添加如下配置
1.8.iconfont 无法正常显示，出现口
这是素材中的资源有兼容问题，我重新下载了，大家找fonts_new.zip
注意：打开demo_index.html，切换Font class，然后按照后续步骤操作
2. 项目
2.1. Cannot read property ‘$createElement’ of undefined
错误如下：不能读取undefined对象的$createElement属性

解决：路由规则component写成了components，注意没有s
由于是通过components指定了/login的组件，所以相当于没指定，那么在路由初始化的时候要调用/login对应组件的 c r e a t e E l e m e n t 属 性 ， 所 以 报 错 了 。 没 指 定 ， 那 就 是 u n d e f i n e d ， 所 以 就 是 不 能 读 取 u n d e f i n e d 对 象 的 createElement属性，所以报错了。没指定，那就是undefined，所以就是不能读取undefined对象的 createElement属性，所以报错了。没指定，那就是undefined，所以就是不能读取undefined对象的createElement属性

2.2.git命令无法执行
问题如下：没有一个git仓库，没有.git文件夹

问题分析：
通过脚手架创建的项目，已经默认勾选了git初始化，所以默认在项目根目录会有一个.git文件夹，有了这个文件夹就说明我们的项目已经被git管理起来了
如果想执行，git相关命令，需要在有.git文件夹的目录下才能执行、
出现上述问题，可能有两个原因：
1.创建项目时，没有勾选git初始化
2.执行git命令时，项目目录进错了
问题解决：
找到包含.git文件夹的目录，再执行git命令
或者：在vue_shop目录下执行git init命令，进行git初始化，它会帮助你创建.git文件夹
2.3.this relative module was not found
问题如下：这个相关的模块没有找到
问题分析：
在main.js中没找到iconfont.css，这种问题，一般都是路径问题
问题解决：
在mian.js中确定引入iconfont.css的路径，看是否有误

2.4.代码切换分支合并分支时被删除
问题描述: 当我们切换master分支之后，发现login分支的代码消失
问题分析：
login分支，创建login.html
当切换到master的时候，login.html消失（这是因为master本来就没有这个文件，肯定会消失）
但是，在merge login之后，login.html就回来了
如果想回退版本：
git log（查看想要回退的版本号）
git reset --hard 版本号
git reset --hard f31cf29afe79a6374e12183541994624221a0e1d 902b8494192a9bc8c3947e39c8494ee6d3878ec8

2.5. POST http://localhost:8080/login 404 （Not Found）其他问题雷同
问题描述:

问题分析：
发送的接口请求地址错了
解决问题：
检查两个地方：
A）main.js中配置请求的根路径是否出错，包括单词大小写：
axios.defaults.baseURL = ‘http://127.0.0.1:8888/api/private/v1/’
B）Login.vue中发送的请求接口地址是否写错：
const data:res = await this.$http.post(“login”, this.loginForm);
2.6.Element-ui表单总结
2.6.1.表单数据双向绑定
在这里进行双向数据绑定的时候，我们是将要绑定的data属性放到了loginForm对象中，然后再进行的绑定，这样做方便后续数据的提交，等到提交数据的时候，直接将loginForm对象提交到后台即可

2.6.2.表单校验规则
loginFormRules是一个对象，在对象中可以指定多个字段的校验规则
username是其中一个校验规则，而这个校验规则是有必填和长度这两个校验规则组成的
每一个校验规则都是一个对象，对象中有三项信息
1.校验规则：required必填，min-max长度
2.校验失败时的提示信息：message
3.何时触发校验：trigger（触发器）：blur（失去焦点），意味失去焦点触发此校验规则

2.6.3.表单提交
失去焦点需要校验表单，但是最后表单提交的时候，也需要再次校验表单
因为程序员可以通过程序，让表单数据自动填充，所以界面的失去焦点方法校验表单并不完全可靠
其实最后表单提交的时候再次校验，程序员也是可以跳过的，比如通过postman发起请求，不通过界面发起请求，所以前端所有的校验都不靠谱，后端servlet收到数据之后，也还是会重新校验的
注意：这里的validate是el-form的方法，我们需要获取el-form对象之后才能调用，如何获取呢？因为Vue不再通过原始方式获取DOM元素对象，所以采用ref引用名的方式：
只要标签添加ref属性，就会给当前标签创建对象，并且将对象存储到$refs中
vue实例有一个属性 $refs , 存储当前界面中所有带有ref属性的标签的对象
比如此界面中有俩标签添加有ref：
(1)
那么$refs对象就长这样： “loginForm”:el-form,“item1”:el-form-item
所以可以通过如下方式获取：
(1)this. r e f s . l o g i n F o r m t h i s . refs.loginForm this. refs.loginFormthis.refs.item1
(2)this. r e f s [ " l o g i n F o r m " ] t h i s . refs["loginForm"] this. refs["loginForm"]this.refs[“item1”]（这个$refs比较特殊，可以通过中括号方式获取属性）
validate方法的参数是一个回调函数，函数的参数是校验结果
校验通过，valid=true
校验失败，valid=false
最后需要注意，validate方法内部用到了el-form的model属性，所以如果没有写如下属性：
会报错：

model是校验工作必须的属性
2.6.4.表单数据重置
el-form还有一个方法resetFields，重置字段，会将用户输入的信息以及校验信息都清空 。

3.
3.1. TypeError: cannt read property ‘cancelToken’ of undefined
问题描述：

问题分析：
在main.js的拦截器中没有return返回值
解决问题：
在main.js的拦截器中return config,固定写法
3.2.bug调试-network
如果写完代码没有出现你想要的效果，排错步骤如下：
1.右键，查看console，如果有错误，其实是好事，因为最起码有错误提示
2.仔细查看错误，在此文档中查找看有没有类似的错误，如果有按照笔记解决
3.如果没有，那么就将错误翻译成中文，尝试理解错误是什么意思
4.实在不行，将错误放入百度，进行搜索
5. 3-5分钟搞不定的，立马问老师，经过老师的调试，错误搞定之后，一定要将错误收录到此文档中，积累错误文档，是一件非常重要的事情，这些错误就是你的经验
6.如果console里没有错误，那么我们就需要查看network，看一下请求是否有问题
7. 比如，用户列表
8. 先看General

注意会发现有两个users请求，看第二个
查看Request URL，Request Method，Status Code是否有问题
9. 查看请求参数，是否有问题

10. 查看响应数据 参考技术A 这个报错通常表示在使用 Node.js Stream 读取流时，没有数据可以读取。可能是因为源数据流为空或者已经结束了，而我们仍然在尝试从其中读取数据。

解决这个问题的方案有以下几种：

1. 检查数据源是否正常，在读取之前，确保数据源可用并包含数据。
2. 在读取数据之前，先添加监听器以确保数据流中有数据可供读取。例如，可以使用 `on('data')` 方法来监听 'data' 事件，再进行读取操作。
3. 对于某些情况下可能出现的空数据流，可以使用条件语句进行处理，避免错误发生。例如，在读取数据之前可以先检查数据流中是否有数据，如果没有则不进行读取操作。

希望这些方案可以帮助您解决问题。如果问题还未能得到解决，请提供更多的代码和错误信息，以便更准确地定位问题所在。 参考技术B 在 Vue 中，stream must have data 报错通常是因为在组件中使用了 vue-resource 或 axios 发送的请求，但是在请求的响应中没有数据返回，导致 stream must have data 错误。
解决方法如下：

检查请求的 URL 是否正确，确保请求的地址是正确的。

检查请求的参数是否正确，确保请求的参数正确无误。

检查请求的响应是否正确，确保响应中有数据返回。

如果使用了 vue-resource 或 axios 等 HTTP 请求库，可以在请求的 then 方法中增加错误处理，以捕获和处理请求的错误。