小米商城个人项目

写在前面

        小米商城是本人第一次做的比较完善的小项目，正好做一做来巩固这段时间学的东西，涉及到了接口对接，页面跳转，页面交互等等的一些技术，第一次用接口实现数据传输，构成一个相对完整的项目，对本人来说是个很大的进步，继续努力。

需求分析

        利用三件套，jQuery，Ajax实现项目页面图片信息的传输(利用现有接口)和加载，主要页面为首页和详情页面。

代码分析

        1.不管是大项目还是小项目，合理的文件分配不仅可以提高开发效率，而且方便日后的代码维护！开始项目前先根据需求构思文件分配，把文件分类放入各类文件夹，结构清晰，要做几种页面就创建几个HTML文件，并且有必要缩减文件数量，提高html复用性。

        

         2.先看首页，把页面氛围头部，标题导航栏，轮播图，商品，底部栏，登录界面，注册界面七个板块，用注释写清楚结构，从头写到尾。

首页结构如下图

 

 头部与标题导航栏：

这两个板块最简单了，盒子模型一个个套起来，再打开浏览器调试几下就成型了。对于布局，我用了很多flex样式，因为我觉得很好用，可以省去很多不必要的margin和padding，能少写就少写，而且每种flex样式我都封装成了css选择器，实际上它们贯穿了我全部的页面布局，极大的提高了样式代码的复用性。

下图是我封装的flex样式代码

 轮播图：

这算一个小困难，放在以前可能想破脑筋都不一定做的完整，不过有了前面几次做轮播图的经历，这次写起来就流畅许多。主要思路就是火车模型(火车模型：就是把要展示的图片排到一起，每个图片看成一节车厢，再把整个界面看成一个窗户，图片的滑动就看成火车从窗户前面滑过)，观者细品，难写的地方主要是js的逻辑，html代码反而简单。特别是加上定时器setInerval的时候，图片滑动直接抽风了，心态差点给哥们搞崩了(┬┬﹏┬┬)

 商品版块：主要是内容有点杂，有点多，但是结构上可以照样复用，敲基本布局代码时打开浏览器一步步调好对齐，最基本的都搞美观一点。

 观察可知，整个商品板块有好多这种这么大的卡片拼成的，那么这里就可以统一写一种样式，写完这一板块的三分之一后，剩下的直接cv，结束战斗，轻松省事🤤，这就是复用的好处。

       

别看现在什么都没有，刚开始时盒子模型真的也是一大堆，只不过因为后期这个板块的card标签和其他盒子模型都是在连接接口的时候用jQuery的append插进去的，所以就把之前画页面时候的这些代码删掉了。

底部栏：代码如下：还是注意对齐，布局别乱

登录&注册：由于这两个板块的效果类似弹窗，我就把代码写进主页html中，不过交互部分逻辑感觉不好写，写的有点久

3.商品详情界面：结构如下：

 头部，标题导航栏，底部栏：

家人们，有没有发现首页和商品详情页的这三个部分是一样的(小声暗示)，这个时候，cv神技安排上，呃呃，不对，什么cv，应该是复用！由此，这个页面不是只剩下商品详情板块要我们写吗？

  

故此，那三个部分的css代码被我全部放进public.css里了，也就是共用的css文件。

 商品详情板块：

 Ajax部分：

终于到了写接口的中后期阶段！

 

为了方便调用，我把所有接口以及基础模板方法放到了一个单独的js文件中，下面来看一下基本模板函数，这是所有接口调用的根本 。

把Ajax代码放到baseAjax方法中，其中键值对中的值用参数传进去，这样就可以面向之后各式各样的接口实现不同的数据传输。callback是回调函数，返回数据的一个手段，使得后面声明的其他函数可以拿到接口传过来的数据，进而插入到页面标签中。         

 写完接口，自然要有每个板块的特定函数来调用它们。这部分写起来就比较麻烦，但是逻辑清晰的话也还好，特点就是只要页面内容越多越杂，此处的调用方法就写的越多

商品板块接口调用(有一点屎山，别介意......) 

 

结语

写项目的这几天下来，历经了许许多多的报错，bug，特别是ajax连接接口的时候，不过现在犯的错误，遇到的挫折难道不是前端乃至其他相关领域开发中的常态吗？有错就去找解决方案，不管用什么方式，经验不正是一点一滴积累起来的吗。由于本人小白，文章中的一些表述多少带着我自己的理解，也许不太专业，不喜轻喷啊。另外，顺便动动你们的手指头，点个赞先~😁