前端怎么在vue3里面添加查询功能在数据库显示

前端在vue3里面添加查询功能在数据库显示为：

1、必须使用一些后端框架（如Node.js）来构建服务器，并使用数据库（如MySQL）来存储数据。

2、在Vue3中，使用axios或fetch来发送HTTP请求，从服务器获取数据库中的数据。

3、在Vue3中，使用查询参数（如关键字）来设置请求参数，从而进行查询 *** 作。

4、在服务器端使用SQL语句根据查询参数进行查询，并将查询结果返回给Vue3，从而在Vue3中完成数据库查询。

首先要保证通过浏览器访问这个php文件能正常打印json字符串才行，从console.log打印的来看是把dm.php文件的内容给打了出来，，看样子应该是php文件没有解析。。如果是这个问题的话就需要你配置web服务器支持php解析了

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. 查看响应数据

---