用Vue Node从零开始实现拼多多前后端商城项目 — 记录踩坑之旅(上篇)

前言

本人移动端开发妹子工程师一枚 ,因为公司项目需要用到前端的技术(主要是vue),自己自学了一段时间,最近花了半个月在工作之余的时间终于自己完完整整写下来一整个前后端商城项目(当然是跟了一个线上项目直播班,不要嘲笑我),不知道自己算不算前端入门了,?。

项目采用的技术栈是基于:vue node mySQL,用vue-cli写的前端,用express搭建的后端应用服务器,数据库用的是MySQL。

一、项目整体效果预览

1. web端-项目部分效果演示

部分效果1

部分效果2

项目整体结构用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 , 讲课思路很清晰,内容超级多,有需要的童鞋可以看一下哦!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367452.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python自动补全库_这个库厉害了,自动补全Python代码,节省50%敲码时间

近日,Reddit 上的一篇帖子引起了网友的热议。帖子作者「mlvpj」称:「我们使用深度学习完成了一个简单的项目,可以自动进行 Python 代码补全。」根据介绍,该项目基于 LSTM 模型,训练后,负责对代码的缺失部分…

matlab 小波 cdd,[Matlab] 单导联心电数据的小波(包)消噪及压缩

% 用小波(包)对MitbihCmprTstExample_08730_01(软硬阈值)进行消噪与压缩clear all;clc;close all;disp(用小波(包)对MitbihCmprTstExample_08730_01(软硬阈值)进行消噪和压缩);load MitbihCmprTstExample_08730_01.mat;countlength(sig);xsig(:,1); ysig(:,2); zsig(:,3);TSx(2…

系统重装助手教你如何在Microsoft Edge中恢复“关闭所有选项卡”警告

在Microsoft Edge中,当您打开多个选项卡时,浏览器将显示“您要关闭所有选项卡吗?” 警告,以防止您意外关闭重要标签。 通常,在没有第二个想法的情况下,您会立即禁用此功能,检查提示中的“始终关…

受JAAS保护的JAX-RS端点

随着RESTFUL(JAX-RS)作为创建Web服务端点的“首选”方式的问世,很长一段时间以来,我一直想知道人们如何围绕它实现安全机制。 归根结底,我假设JAX-RS的基础实现是servlet,因此其安全性也可能围绕容器&…

es springboot 不设置id_springboot整合ES_文档ID删除

1.本课程涵盖**SpringBoot2.x版本10个常用技术点适应企业开发要求,学习IDEA开发工具下的SpringBoot2.x开发学习SpringBoot2.x - 基于Restful接口开发规范学习SpringBoot2.x - 官方推荐模版引擎 - Thymeleaf开发学习SpringBoot2.x - MockMVC测试学习SpringBoot2.x - …

前端必须懂的计算机网络知识—(跨域、代理、本地存储)

前端必须懂的计算机网络知识系列文章: DNS服务器和跨域问题计算机网络的分层模型IP地址和MAC地址前端必须懂的计算机网络知识—(跨域、代理、本地存储)前端必须懂的计算机网络知识—(TCP)前端必须懂的计算机网络知识—(HTTP)前端必须懂的计算机网络知识—(XSS、CSR…

axios请求报Uncaught (in promise) Error: Request failed with status code 404

使用axios处理请求时,出现的问题解决 当url是远程接口链接时,会报404的错误: Uncaught (in promise) Error: Request failed with status code 404 解决方法: var instance axios.create({ headers: {content-type: application/…

php canvas 前端JS压缩,获取图片二进制流数据并上传

<?php if(isset($_GET[upload]) && $_GET[upload] img){//二进制数据流$data file_get_contents ( php://input ); // 不需要php.ini设置&#xff0c;内存压力小if(empty($data)){$data gzuncompress ( $GLOBALS [HTTP_RAW_POST_DATA] ); // 需要php.ini设…

如何给linux目录加密码,怎么只给一个文件夹的内容加密?

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼Encfs security information ││ ││ According to a security audit by Taylor Hornby (Defuse Security), the ││ current implementation of Encfs is vulnerable or potentially vulnerable ││ to multiple types of att…

cordova监听事件中调用其他方法_Laravel模型事件的实现原理详解

模型事件在 Laravel 的世界中&#xff0c;你对 Eloquent 大多数操作都会或多或少的触发一些模型事件&#xff0c;下面这篇文章主要给大家介绍了关于Laravel模型事件的实现原理&#xff0c;文中通过示例代码介绍的非常详细&#xff0c;需要的朋友可以参考借鉴。前言Laravel的ORM…

MongoDB和Web应用程序

当今时代是数据大规模增长的时代。 数据存储不是问题&#xff0c;是的&#xff0c;但是结构化和存储的方式可能会增加或减少所需数据块的查找时间。 不断增长的非结构化数据的用例 脸书&#xff1a; 7.5亿用户处于活跃状态&#xff0c;三分之一的互联网用户拥有Facebook帐户 …

【译】10个有趣的JSCSS库(2018.10)

Tutorialzine每月都会给我们精心挑选优秀的web开发资源&#xff0c;这些资源可以帮助我们解锁最新和最炫酷的网络开发姿势。前端er,让我们一起先睹为快吧&#xff01; WatermelonDB WatermelonDB是用于构建React和React Native应用程序的下一代数据库。快速&#xff0c;高度可…

自定义分页器

好久没来写东西那&#xff01;今天写个自定义分页器给大家参考下吧 首先我们在自己创建的Django项目的app下新建一个utils文件夹&#xff0c;用来放我们的分页器组件 简单说下分页器实现原理&#xff1a; 1.利用ORM查询语句的限制数据条数来确定每页显示的数据 2.设置我们每页显…

五 Vue学习 首页学习 (上)

首页&#xff1a; http://localhost:8002/#/&#xff0c; 登录页面如下&#xff1a; index.js文件中如下的路由配置&#xff0c;转过去看login.vue是如何实现的。 const routes [ { path: /, component: login },&#xff08;这里一个问题&#xff1a; logi…

linux下mqm添加用户,Linux 下MQ的安装和配置亲测

开篇之前奉上几条黄金链接&#xff1a;MQ参考文档http://publib.boulder.ibm.com/infocenter/wmqv7/v7r0m0/index.jsp?topic%2Fcom.ibm.mq.doc%2Fhelp_home_wmq.htmhttp://www-01.ibm.com/support/docview.wss?uidswg27006467MQ下载地址&#xff1a;http://www-03.ibm.com/so…

Java核心面试问题

问&#xff1a;如果main方法被声明为私有该怎么办&#xff1f; 回答&#xff1a; 该程序可以正确编译&#xff0c;但在运行时会显示“ Main方法不公开”。 信息。 问&#xff1a;在Java中按引用传递和按值传递是什么意思&#xff1f; 回答&#xff1a; 通过引用方式传递&…

android 判断是否是标点符号_Java 中文字符判断 中文标点符号判断

Java Character 实现Unicode字符集介绍 CJK中文字符和中文标点判断主要内容&#xff1a;1. Java Character类介绍&#xff1b;2. Unicode 简介及 UnicodeBlock 与 UnicodeScript区别和联系3. 如何判断汉字及中文标点符号做中文信息处理&#xff0c;经常会遇到如何判断一个字是…

小程序tabbar这套方案全搞定!

关于微信小程序的tarbar&#xff0c;相信你们都不会陌生 在实现小程序微信原装的tabbar却比较呆板&#xff0c;不够精致&#xff0c;往往不符合自己的要求 这个时候怎么办呢 这套方案接着&#xff01; 先简单的来说一下主要思想:自定义字体图标组件以及tabbar组件&#xff0c…

linux服务器用哪个面板好,Linux服务器管理面板哪家比较好用?

Linux服务器管理面板哪家比较好用&#xff1f;发布时间&#xff1a;2020-07-21 06:08:33来源&#xff1a;51CTO阅读&#xff1a;261作者&#xff1a;BirdCloud_1022现在&#xff0c;越来越多的站长朋友都会选择服务器用来搭建网站&#xff0c;但是势必需要我们自己搭建WEB环境&…

spring boot(一)入门

目录 spring boot(一)入门一、简介1、微服务的概念2、什么是spring boot3、快速入门4.springboot的快捷部署spring boot(一)入门 一、简介 1、微服务的概念 说起spring boot&#xff0c;我们不得不说一下“微服务”一词的兴起&#xff0c;微服务一词最早起源于2014年&#xff0…