目录

1. 修改vue项目的端口 4/14/2018

2. v-lazyload 图片懒加载

3. aixos获取数据(假数据为例) 4/15/2018

3.1 假数据测试                       3.2 配置                         3.3组件中配置:

4. 后端怎么给vue前端发数据(vue+axios+express+mysql)4/17/2018

4.1  504 网关超时 - 在等待网关时,该请求已超时。 数据库关闭连接

4.2 404 Error: Cannot enqueue Query after fatal error.

5. Element datepricker 日期选择器的范围限制 4/18/2018

5.1 disabledDate 

5.2 年份的选择器、年月的选择器 的限制方法和年月日的一样的

6. json 转json格式的字符串,json格式字符串转json数组对象

7. Mysql 日期字段设置默认值为现在时间

8.element el-upload 上传图片到本地 4/30/2018

8.1找到上传图片地址

8.2更换完图片,但显示图片没变

9. vue 父子组件通信 porps $emit $parent


1. 修改vue项目的端口 4/14/2018

根目录下的config文件夹里面有个index.js, 修改里面的port属性值即可

2. v-lazyload 图片懒加载

至今仍在坑中
 
 

3. aixos获取数据(假数据为例) 4/15/2018

3.1 假数据测试

在获取之前,要先写个假数据,供自己测试

3.2 配置

根目录的build目录下有个webpack.dev.config.js配置文件, 找到 const portfinder = require('portfinder'),在之后配置   4/15/2018

 

在 devServer中配置请求:

webpack.dev.config.js配置完毕后,必须重启项目,npm run dev

不重启配置不会生效的!!

后端连接的时候,记得注释掉步骤②里面的测试数据。度娘对前后端连接推荐postman测试 具体还未深入了解

3.3组件中配置:

Ⅰ先导入axios 

Ⅱ写获取函数

参考:漫步编程  https://www.xiuyuan.info/?p=230

4. 后端怎么给vue前端发数据(vue+axios+express+mysql)4/17/2018

终于打通了vue到数据库的一条路,开心

参考: 海岛心hey  https://segmentfault.com/a/1190000008176208#articleHeader1                                                                                       

 

基本按着这个步骤走就行了,中间的坑基本没有,贴心的大佬,笔芯

下面是我自己踩的坑,记个笔记

4.1  504 网关超时 - 在等待网关时,该请求已超时。 数据库关闭连接

页面报错:

HTTP504: 网关超时 - 在等待网关时,该请求已超时。(XHR): GET - http://localhost:9528/api/user/addUser
errError: Request failed with status code 504
webstorm报错

 

 

这么一大段报错,重点只有那么一句啊,就在我的红框里面。翻译一下——连接失败:数据库关闭连接了

然后发现那位大佬开启程序的顺序反了。应该先开程序 npm run dev ,再在server目录下开node index.js

出现这种问题的可能原因应该是我们把后端写到了前端根目录下(实测小白,勿笑)

 

4.2 404 Error: Cannot enqueue Query after fatal error.

看了自己笔记,好像是因为我把MYsql的连接端口写错了(具体情况忘了,写个解决方法,如果有人按着这方法发现不对,给个留言哈)

 

因为我用的是wamp, 就习惯性把端口写成80了, 其实应该是3306——Mysql的默认端口。

 

 

5. Element datepricker 日期选择器的范围限制 4/18/2018

参考:小花花inhere https://blog.csdn.net/it429/article/details/76269248

注意:

5.1 disabledDate 

retren的内容应该是什么时候禁止选择,而不是什么时候可以选择

 

5.2 年份的选择器、年月的选择器 的限制方法和年月日的一样的

 

6. json 转json格式的字符串,json格式字符串转json数组对象

console.log(params.food)
//json转字符串
var food = JSON.stringify(params.food);
console.log(food);
//字符串转数组对象
food = JSON.parse(food);
//打印数组对象的一个属性值
console.log( food[0].fid);
打印结果:
[ { fid: 1002, count: 2 }, { fid: 1001, count: 6 } ]   //原JSON
[{"fid":1002,"count":2},{"fid":1001,"count":6}]   //字符串
1002      //字符串转JSON数组对象,打印数组对象的一个属性值
参考:https://www.cnblogs.com/cainiao-Shun666/p/6557401.html

 

7. Mysql 日期字段设置默认值为现在时间

参考:               https://blog.csdn.net/gxy_2016/article/details/53436865

8.element el-upload 上传图片到本地 4/30/2018

8.1找到上传图片地址

第一次用找不到上传文件的参数,先用console.log 试试水

 

 

 
找到地址,然后

 

8.2更换完图片,但显示图片没变

发现我虽然选择了新图片,但是在fie这个参数里面只是增加了数组,便达到我想要的效果

 

所以要么动态更新图片位置,要么就让数组只有一个好了,只是毕设那就第一种方法啦~

8.3同时可以把对格式什么的限制都写到这里 毕竟我不需要一添加图片就上传

8.4复制图片到服务器文件夹下面(本地)

9. vue 父子组件通信 porps $emit $parent

单向父组件传参给子组件,子组件获取参数的方法 props,$parent   子组件向父组件传参$emit

10 重遇Vue

简单小程序:python-Vue-Flask

也是前后端分离,但是比当年毕设会整齐一点。

 

 

 

 

Logo

前往低代码交流专区

更多推荐