vue.js可以直接连接mysql数据库吗?还是必须通过node.js写接口接入?

vue.js可以直接连接mysql数据库吗?还是必须通过node.js写接口接入?,第1张

似乎不行,很不好做,Vue.js 只是一个js,只能运行在浏览器端,浏览器类似于一个沙盒,里面运行的脚本收到很大限制。楼主这个问题似乎认为 node.js和vue.js是一个东西!

Vue.js 是js脚本,浏览器可以直接运行。node.js 是一个服务端的解释器,有很多命令浏览器并不识别,需要编译成浏览器可识别的 js 文件,题主不要搞混了。

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

一个开源的可以自定义的拖拽式智能报表系统。项目主要技术是springboot和vue.

三步就可以配置一个报表展示大屏。

数据流程图

第一步:配置我们需要的数据源,也就是连接一个数据库, mysql , oracle , SqlServer 等等;

第二步:选择数据源,选择编码方式,数据集名称,数据集,然后写一下 sql 语句,就是你要展示的数据字段

第三步:推拽配置大屏,将你想要展示的图标直接拖拽到设计区,可以任意配置

二、实现功能

三、技术选型

springboot

mybatis

前端: vue 、 elementUI

四、界面展示

五、源码地址

私信回复:智能大屏


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/8608981.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-18
下一篇 2023-04-18

发表评论

登录后才能评论

评论列表(0条)

保存