用Vue+Node从零开始实现拼多多前后端商城项目 — 记录踩坑之旅(上篇)
前言
本人移动端开发妹子工程师一枚 ,因为公司项目需要用到前端的技术(主要是vue),自己自学了一段时间,最近花了半个月在工作之余的时间终于自己完完整整写下来一整个前后端商城项目(当然是跟了一个线上项目直播班,不要嘲笑我),不知道自己算不算前端入门了,?。
项目采用的技术栈是基于:vue + node + mySQL,用vue-cli写的前端,用express搭建的后端应用服务器,数据库用的是MySQL。
一、项目整体效果预览
1. web端-项目部分效果演示
项目整体结构用vue-router搭建的全局路由,一级版块包括:首页、推荐、搜索、聊天、个人中心、登录/注册、购物车等,二级版块我主要做了首页的二三级购物流程页面。基本上把电商项目的整个流程跑通了。
商城项目用到的技术点主要包括:
2. 服务器端
服务器端我主要用的是Node的express框架搭建的应用服务器, 自己定义了项目中需要的接口, 主要基于post/get。服务器端没有进行深度的开发,主要实现了对数据流的增删改查,为客户端进行动态数据支撑。
下图是服务器端定义的部分接口
数据库用的是MySQL,没有用mongoose,感觉还是关系型数据库使用更加灵活一点。主要是单表和多表关联查询,基本的SQL语句也能搞定。
二、项目开发中坑点记录
虽然是跟着视频一步步学习的,但是自己在动手做的时候还是遇到了各种奇葩问题,在写完项目后总结记录下,一方面方便自己回顾,另一方面其他朋友遇到类似的问题可以参考借鉴。
2.1 二级路由界面底部Tabbar隐藏
通过vue-router配置完全局路由后, 在项目中一级路由界面是需要有底部tabbar的, 但是由一级界面过渡到二级界面是不需要的, 如下图所示:
解决方案: 在路由选项中有个meta属性, 可以在该属性中传一个字面量对象记录是否显示底部的tabbar, 然后在页面中做判断即可!
前端页面处理:
2.2 上拉加载数据中获取数据重复
我在做推荐版块的列表数据加载时, 自己在后端写好了get的请求接口, 前端发起get请求, 前面几次加载都很正常, 后面上拉加载的时候总是多个重复数据被同时拉下来, 如下图所示:
上拉加载用mint-UI做了界面的提示, 而且也在action中设置了回调, 只要数据没有下来, loading框是不消失的, 但结果还是如下图所示:
最后请教老师, 终于解决了该问题, 主要的方案思路是: 客户端每次发请求时把本地最后一条商品的id传给后端, 后端在接口中写查询语句的时候用limit做限制就保证了数据的不重复了。看来自己既写前端又写后端, 需要考虑的因素还是很多!
2.3 坑坑坑的跨域
问题描述: 主要是前端请求图形验证码引发的血案,因为我服务器的地址是localhost:3000, 所以我在请求图形验证码的时候,使用的是如下的方式:
而且通过浏览器访问也是OK的:
但是问题在于:我在服务器端是用session保存了该验证码,用于前端请求时来做前后端比对的,但是每次请求都不能从session中获取,始终的undefined。此刻,我第一反应是跨域,检查前端页面:
没有问题,于是检查后端的跨域配置:
也没有问题,百思不得其解后只能灰溜溜的去问老师,最终的问题在于:我客户端的其他请求都是统一配置好的路径:http://localhost:3000, 但在请求图形验证码出使用了:http://127.0.0.1:3000/api/captcha ,在后端验证是localhost:3000和127.0.0.1:3000代表的不是同一个客户端,所以始终拿不到值,改了之后瞬间好了。非常小的一个细节,粗心、粗心!
2.4 配置vuex中的细节点分析
一开始不是很理解为什么要绕这一圈来使用vuex进行状态和数据的管理,当使用了之后才发现中大型项目中使用vuex进行数据管理是十分有必要的,当你理解了它的运作机制,流程就显得异常简单了,此处借用老师课上的一幅图:
使用vuex进行状态管理要注意的一些细节点:
- 如果项目比较大,一定要把state,action,mutation划分成独立的文件夹,这样以后在进行状态管理的时候非常方便,目录结构可以如下图所示:
- action向mutation直接commit数据的时候,要注意参数保持一致,否则会出错,如下图所示:
- 在请求网络数据时,一定要在action中处理,主要是通过async和await进行异步和同步,mutation中因为是唯一修改state的地方,所以始终得是同步的。
vuex中大致要注意的细节差不多就这些,其它的都是按照固定流程处理即可。
2.5 node连接MySQL数据丢失
问题描述:第一次发起请求的时候,连接数据库都是正常的;但是第二个接口发起请求时,数据库就连接不上了,会报错说连接丢失。
原因分析:因为每操作完一次数据库就关闭了数据库连接,再次访问的时候就找不到连接了,但是连接又不能不关闭,问题在于我把连接数据库的代码没有放到db.query的函数中,而是放在外面,这样就导致连接只生成一次,关闭了以后,第二请求时得不到连接。
解决方案:直接写好一个数据库连接文件,用 module.exports = conn;输出,这样每次访问都是一个新的请求。
2.6 node连接mysql数据池一定要释放
使用node连接mysql进行数据交互一定要释放数据池,不然请求几次之后会出现“一直请求中”的状态导致无法完成交互。
如下图所示:
2.7 页面刷新后vuex中状态被清空
解决方案1:localStorage
使用localStorage进行数据本地化,但电商类型的项目我感觉并不是太适合,因为localStorage是长时间缓存,有可能导致数据不同步。解决方案二:判断数据是否存在,不存在重新从服务器端获取,或者可以进行路由懒加载保持数据在内存中也是可以的。
2.8 nextTick的使用
问题描述:在使用自定义组件的时候,或者使用第三方的组件(轮播图等),因为数据是异步获取的,所以组件初始化会在数据获取之前完成,此时可能导致组件无法正常工作,就拿轮播图举例子,正确的写法是在watch中进行深度监视,当数据请求完成后进行组件的初始化:
当然也可以通过回调来处理,主要目的是延迟初始化,这样组件就能正常运转了。
nextTick主要作用在于将回调延迟到下次 DOM 更新循环之后执行;
在修改数据之后立即使用它,然后等待 DOM 更新;
它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
三、结束语
- 还有很多后端服务器开发的坑,项目的深层次优化,放到下篇来写。
- 第一次写技术文章,不足之处请多多指教!
分享下我从零基础进入大前端的学习路线, 有需要的朋友可以参考:JavaScript ---> ajax ---> bs ---> vue ---> node, 看的是B站上叶老师的免费视频课程,讲的真心不错,非常nice,商城项目是跟的叶老师的腾讯课堂直播班,现在已经结束了。不过有录播的高清视频: 地址1, 地址2 , 讲课思路很清晰,内容超级多,有需要的童鞋可以看一下哦!
用Vue+Node从零开始实现拼多多前后端商城项目 — 记录踩坑之旅(上篇)相关推荐
- 用Vue Node从零开始实现拼多多前后端商城项目 — 记录踩坑之旅(上篇)
前言 本人移动端开发妹子工程师一枚 ,因为公司项目需要用到前端的技术(主要是vue),自己自学了一段时间,最近花了半个月在工作之余的时间终于自己完完整整写下来一整个前后端商城项目(当然是跟了一个线上项 ...
- 【想稳,必看】毕业设计写这个你就赢了《Vue+Node 项目实战:拼多多前后端商城》
拒绝白嫖,各位看客记得点赞评论"妙-啊~~~"在此占坑 在某个年纪之前,你可以靠透支身体.小聪明和老天给你的运气一直取巧地活着.然而到了某个年纪之后, 真正能让你走远的,都是自律. ...
- vue前后分离session实现_vue2 前后端分离项目ajax跨域session问题解决
最近学习使用vuejs前后端分离,重构一个已有的后台管理系统,遇到了下面这个问题: 实现跨域请求时,每次ajax请求都是新的session,导致无法获取登录信息,所有的请求都被判定为未登陆. 1. v ...
- VUE+Spring Boot整合MyBatis实现前后端分离项目壁纸网站
目录 前言 一.项目运行 二.环境需要 三.技术栈 四.项目说明 五.后端代码 前言 每次换桌面,壁纸总是不好找,搜索图片得不到好的索引与反馈,很难找到自己喜欢的壁纸,而壁纸网站可以免去我们去寻找壁纸 ...
- php node.js django,Vue.js和Django搭建前后端分离项目示例详解
本篇文章主要介绍了Django+Vue.js搭建前后端分离项目的示例,具有一定参考价值,有兴趣的可以了解一下 在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是 ...
- 从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目
从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建 参考学习vue官网文档 https://v3.cn.vuejs.org/guide/installati ...
- ASP.NET Core 实战:使用ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目
一.前言 这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自 ...
- Vue 实现前后端分离项目
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue实现前后端分离项目的初体验 经过之前学习的Vue的知识: vue基本指令 vue组件 vue- ...
- B站云E办Vue+SpringBoot前后端分离项目——MVC三层架构搭建后台项目
本项目来源B站云E办,笔记整理了项目搭建的过程和涉及的知识点.对于学习来说,不是复制粘贴代码即可,要知其然知其所以然.希望我的笔记能为大家提供思路,也欢迎各位伙伴的指正. 项目前端学习笔记目录 B站云 ...
最新文章
- c++排查线程hang住_Kafka学习笔记之kafka高版本Client连接0.9Server引发的血案排查 - 时光飞逝,逝者如斯...
- JavaScript 技术篇-通过代码获取dom元素绑定的监听事件,chrome浏览器查看js元素绑定的监听事件
- TypeError: ‘method‘ object is not subscriptable
- python超时退出进程_Python如何实现让一个函数超时退出?
- C++进程数量的限制
- Java之ThreadPoolExcutor和四种常见的线程池
- Linux unit14
- Pentium 4处理器架构/微架构/流水线 (3) - NetBurst微架构
- (oracle)八、表
- 网上五花八门的单片机教程,到底应该怎么整理学习过程
- 【大数据实战项目一】数据下载以及工具软件的使用
- 室温金刚石共聚焦平台
- Word自动目录字体修改和行间距的问题
- 机票预订系统的数据流程图及实体联系图
- xmlDocument是什么?(转)
- 压力测试常用专业名词解释
- 聊聊路径规划算法—快速搜寻随机树算法
- python火车抢票_春运火车票太难抢?不如试试这个python开源工具吧
- 信号和电源隔离的有效设计技术
- windows安装Halide