黑马品优购项目总结

本是古典何须时尚 2023-01-03 01:44 125阅读 0赞

### 文章目录 ###

*  品优购项目总结
 *   *   *  项目展示
         *   *  首页
             *  登录页
             *  注册页
             *  商品秒杀页
             *  商品推文页
             *  商品抢购页
             *  商品详情页
         *  项目技术概要
         *   *  SDO优化
             *  字体图标的引入
             *   *  字体图标的优点
             *  图片懒加载
             *  js实现交互效果
             *   *  精灵图

--------------------

点击：[项目源码][Link 1]

# 品优购项目总结 #

本次项目一共实现了8个界面，包括首页、登录页面、注册页面、商品秒杀页、商品推文页、商品抢购页、商品详情页等界面。

### 项目展示 ###

#### 首页 ####

![在这里插入图片描述][2021010617523024.png_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 3]

#### 登录页 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 4]

#### 注册页 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 5]

#### 商品秒杀页 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 7]

#### 商品推文页 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 8]

#### 商品抢购页 ####

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3MnziEdY-1609926561597)(note/img/image-20210106165302289.png)\]][img-3MnziEdY-1609926561597_note_img_image-20210106165302289.png]

#### 商品详情页 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 10]

### 项目技术概要 ###

#### SDO优化 ####

要做好一个成功的网站，一定要注意代码中的SDO优化，以下是我在品优购项目中所涉及到的SDO优化部分

![在这里插入图片描述][20210106175521577.png_pic_center]

#### 字体图标的引入 ####

图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，用字体图标来完成会更好。

##### 字体图标的优点 #####

字体图标可以做出跟图片一样可以做的事情,改变透明度、旋转度，等… 但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等… 本身体积更小，但携带的信息并没有削减。

#### 图片懒加载 ####

通过图片的懒加载，可以减少服务器的压力，优化页面加载时间。

实现方法：

在html标签中使用data-lazy-src

引用懒加载js文件

#### js实现交互效果 ####

使用js正则表达式进行用户注册输入数据验证、用户点击事件效果。

##### 精灵图 #####

减少向服务器请求次数，增加网页加载速度。

以上就是实现的基本效果啦~希望能够给大家带来帮助，一起学习一起进步。

[Link 1]: https://github.com/ruoruochen/pinyougou
[2021010617523024.png_pic_center]: /images/20221119/a2c2edd11fd74510a5a850bfeecbfdcb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/d20f14038f3a4b89bed4df13bfd20280.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221119/513f91bc0bd5458891583dadd868644c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221119/3a7fe85073ca42e389ad91340f6721a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221119/33320692a32146c8acf7fc188a6e37b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221119/294ba41acb6048a2a0e08aaa00082923.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221119/ccbe758b4b954cc897b21b42e7b51f27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221119/1df0a2e9bc604b2a904ed57f2a203093.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221119/679a0aa5f3104013ac1c992a5fb6642a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221119/12bf7a9c3e074036bff21258763c430a.png
[img-3MnziEdY-1609926561597_note_img_image-20210106165302289.png]: /images/20221119/9f242b2aced548cc89907429f5621333.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221119/22404d2f5ab6457486fc47424420add5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221119/bceddedd148547b9a6e39c818cfc57c7.png
[20210106175521577.png_pic_center]: /images/20221119/7379df07f9244c27a614960817dd0b44.png