电商全端总结(二)未完待续

最新推荐文章于 2020-12-03 22:27:54 发布

庚中

最新推荐文章于 2020-12-03 22:27:54 发布

阅读量539

点赞数

分类专栏：九.电商全端文章标签：电商全端总结(二)

本文链接：https://blog.csdn.net/xiaodi520520/article/details/84995744

版权

九.电商全端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

提示:下面的项目代码已开源,需要源码的可以直接从 https://github.com/huanggengzhong/letao下载

总结

了解项目的架构和目录结构
搭建项目的环境
启动项目
理解项目依赖包和引包顺序
主页的搭建和轮播图组件的使用
主页商品的布局
主页区域滚动插件的使用
使用git管理源代码和上传到github

常见网页布局方式和应用场景

固定宽高：在PC端jd 不考虑屏幕适配的页面
浮动+定位：
浮动：传统没有伸缩布局之前只能使用浮动实现块级元素一行显示
定位: 需要定到别的元素上或者整屏上
百分比布局(流式布局)+浮动：需要考虑屏幕适配的页面
1. 早期没伸缩布局只能使用百分比实现宽度(只能是宽度)自适应
伸缩布局:宽度自适应解决以上块级元素不能一行显示和无法自适应屏幕
1. 伸缩布局 === 浮动 + 百分比
2. 伸缩布局只能实现宽度自适应
rem布局：宽高内容都自适应解决以上所有问题
1. rem = 伸缩布局宽度自适应 + 高度也自适应
框架的栅格布局：响应式布局同时适配PC 移动端需要使用栅格布局

电商全端项目

是一个综合移动端+PC端+node.js后台 (前端(PC+移动)+后端(node.js)) 重点是前端
学会移动web切图写页面 + 移动端基本交互点击滑动之类的交互 + ajax请求数据渲染模板 + PC切图 + PC 端的交互 + 请求数据渲染模板

搭建电商全端项目

安装环境
1. 安装node.js (用来开启nodejs服务器提供数据API数据)
  1. 打开移动web第三天 1-教学资料》 nodejs 找到对应位数的安装包
  2. 双击打开一路下一步安装不要修改安装目录默认在C盘
  3. 验证是否安装成功打开cmd 左下角开始菜单右键》运行或者输入win+r 打开运行窗口输入cmd 回车
  4. 输入node -v 出现版本 v10.12.0 表示安装成功
2. 安装phpstudy (开启mysql数据库服务器) 没有安装的重新安装一下
启动项目
1. 下载项目
2. 导入数据库
  1. 找到数据sql文件
  2. 打开phpstudy 启动数据库
  3. 导入数据库
3. 开启数据库服务器打开phpstudy 变绿
4. 开启nodeAPi后台服务器
  1. 进入letao-master文件夹的根目录
  2. 在空白处按住shift+鼠标右键在此处打开命令窗口
访问项目
1. 使用链接的方式访问
  1. 乐淘完整版移动端 http://localhost:3000/mobile/index.html
  2. 乐淘完整版PC端 http://localhost:3000/manage/login.html
  3. 乐淘自写版移动端 http://localhost:3000/m/index.html
  4. 乐淘自写版PC端 http://localhost:3000/admin/login.html
2. 使用书签的方式访问页面
3. 前端用户名密码 itcast 111111
4. PC后台管理系统用户名 root 123456

项目架构和项目的文件作用

bin 项目启动目录
docs 项目文档目录
models 数据模型文件增删改查数据库
node_modules nodejs依赖包文件类似前端lib
public 前端项目根目录（页面文件）
routes nodejs APi路由文件 APiurl配置
app.js项目根文件
readme.md说明文档

前端的项目文件夹public

admin 自己写的PC后台管理系统文件夹
m 自己写的移动端文件夹
manage 完整版的后台管理系统文件夹
mobile 完整版的移动端文件夹

如何写前端代码

把m里面的除了lib和images都删掉
把admin里面除了lib和images都删掉
把项目在编辑器打开
在public 里面的 m文件夹里面创建一个移动端的主页index.html 然后写点代码
在public 里面的 admin文件夹里面创建一个PC端的登录页面login.html 写点代码
打开书签的自写移动端和自己写的PC后台管理系统看看能不能看到自己写的代码

回顾项目启动

开启数据流库phpstudy 变绿
进入letao-master文件夹在根目录打开黑窗黑窗只能开启一个执行npm start
通过书签的方式访问页面（一定要使用书签的链接的方式访问页面）

项目的依赖包

MUI ：在移动端写页面的UI框架
zepto: 是一个移动端的JS库操作DOM和发送ajax请求
artTemplate ：模板引擎的JS文件用来渲染模板生成模板
fontawesome ：字体图标框架实现页面的字体图标显示
less ：编译less
bootstrap: 在PC端用来写页面UI框架
jquery：在PC端写JSDOM操作和发送ajax请求
在移动端使用 MUI+zepto+fontawesome+arttemplate+less
在PC端使用 bootstrap+jquery+arttemplate+fontawesome+less

项目的搭建

添加视口和引包
自己写的乐淘移动端首页
写页面结构
实现头部的布局
实现广告和专区的栅格布局

主页的内容滚动效果实现

学会使用MUI的区域滚动插件 http://dev.dcloud.net.cn/mui/ui/#scroll
使用方式
1. 引包
2. 写结构
3. 初始化区域滚动插件
  mui(’.mui-scroll-wrapper’).scroll({
  deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
  });
4. 修改样式
  1. 给区域滚动外面添加一个相对定位的容器让区域滚动参照父元素相对定位而不是body
  2. 由于设置了相对定位但是里面区域滚动是绝对定位脱标导致父元素没有高度所以还需要添加一个高度100%继承body 和 html的高度 /* 让html和body的高度100% */
```
   html,
   body {
       height: 100%;
   }


   /* 让main高度也是100% 跟body的内容一样高 */


   /* 因为main里面的区域滚动的盒子绝对定位 子元素脱标不能撑开父盒子高度  那就继承body  和 html的高度 */

   #main {
       height: 100%;
       position: relative;
       overflow:hidden;
   }
```

复习

乐淘项目架构：
1. 前后端不分离的项目前端后端代码都在一个文件夹letao-master
2. 前端（移动端+PC端）后端(nodejs) + 数据库
3. 前端是public里面的除了public其他都是 nodejs后端
项目的环境搭建和启动
1. 安装node.js 一路下一步
2. 安装mysql 安装phpstudy即可
3. 导入数据把letao-master里面的docs 里面的letao初始化.sql导入数据库 UTF-8编码问题
4. 启动
  1. 开启数据库
  2. 开启nodejs黑窗
  3. 进入letao-master根目录按住shift+右键在此处打开命令窗口 powershell 窗口
  4. 输入npm start 回车没有报错就表示成功
  5. 黑窗和数据库都不要关闭黑窗只有能一个
    如果开启多个回车报错 Port 3000 is already in use 3000端口被占用
    全部关闭再开一个（把node.js进程关闭）
写前端代码
1. 在public 前端目录
2. m 自写移动端
3. admin 自写的PC端
4. mobile 完整移动端
5. manage完整的PC端
6. 在m里面和 admin里面写代码把除了lib 和 images之外的都删掉
7. 访问方式
  1. 使用链接访问
    1. 乐淘完整版移动端 http://localhost:3000/mobile/index.html
    2. 乐淘完整版PC端 http://localhost:3000/manage/login.html
    3. 乐淘自写版移动端 http://localhost:3000/m/index.html
    4. 乐淘自写版PC端 http://localhost:3000/admin/login.html
  2. 使用书签的方式访问
    1. 导入书签点击书签的链接
写移动端首页
1. 引包移动端需要MUI + fontawesome + zepto + arttemplate + less
  1. 先引入第三方CSS
  2. 在引入自己的CSS
  3. 如果有依赖先引入依赖在引入不依赖的
  4. JS放后面引入(一些特殊的JS除外)
2. 搭建首页布局
  写结构
  头部
  主体
  轮播图
  导航条
  广告
  品牌
  运动
  女士
  男士
  底部
3. 实现头部布局
  1. 使用rem单位把页面所有px使用rem
  2. 默认以1rem = 100px作为标准设置根元素字体大小默认 100px
  3. 写代码的时候把一些px单位 / 100 例如 45px 0.45rem
  4. 使用 fontawesome图标让图标定位在右边
4. 导航条使用flex布局
5. 广告使用flex布局
6. 各种专区 flex布局
7. 首页的区域滚动效果
  1. 给页面容器固定高度
  2. 以main为大容器 main固定高度设置100% body 100vh
  3. 给main设置相对定位里面的区域滚动父容器设置绝对定位父元素一定要相对定位
  4. 添加区域滚动的父容器和子容器
    
    真实的内容轮播图导航条等
  5. 使用JS初始化区域滚动（查看官网文档）