电商平台搭建笔记

时间:2021-06-13 20:14:22
第一章:课程介绍与开发前的准备工作

课程导学

  • 架构设计:前后端完全分离、分层架构、模块化
  • 技术选型:html、css、js、jquery
  • 辅助工具:Webpack、NodeJs、NPM、Shell
  • 效率工具:Sublime、Chrome、Charles、Git 
  • 课程安排: 一:基础框架的搭建(1)双平台的开发环境按照(2)git仓库的规范化用法(3)webpack脚手架搭建实战
         二:通用模块(1)可高复用工具类设计与封装(2)通用模块设计与独立打包方法(3)高逼格UI开发经 验与技巧
         三:用户模块(1)数据安全性处理方案(2)表单同步/异步验证(3)小型SPA开发
         四:商品模块(1)jQuery插件模块化改造(2)独立组件抽离技巧(3)多功能列表开发
         五:购物车模块(1)商品状态随时验证方案(2)模块内部方法调用方式(3)非Form提交时的数据验证
         六:订单模块(1)Modal式组件封装思想(2)城市级联操作(3)复杂表单回填
         七:支付模块(1)支付宝支付功能对接(2)支付状态动态检测(3)支付成功回执处理
         八:管理后台(1)管理后台实现思路(2)React框架及其组件化(3)React-Router的使用
         九:访问数据分析(1)PV/UV(2)流量来源监控(3)用户特征分析
         十:SEO优化(1)SEO原理(2)关键词的设计(3)SEO监控
         十一:线上部署(1)线上服务器环境搭建(2)自动化发布脚本编写(3)域名规划与nginx配置
         十二:可用性监控(1)外部监控原理(2)第三方监控的设置(3)更高级的监控方式

    需求分析电商平台搭建笔记

  • 需求拆分原则:一:单个迭代不宜太大
              二:需求可交付,能够形成功能闭环
              三:有成本意识,遵循二八原则
              四:有预期的价值提现
  • 提炼核心模块
    电商平台搭建笔记
        

  • 电商功能拆分--用户端
    1. 商品 ->首页、商品列表、商品详情
    2. 购物车 ->购物车数量、添加删除商品、购物车提交
    3. 订单 ->订单确认(地址管理)、订单提交、订单列表、订单详情
    4. 支付 ->支付
    5. 用户 ->登录、注册、个人信息、找回密码、修改密码
  • 电商功能拆分--管理后台
    1. 商品管理 ->添加/编辑商品,查看商品,下架
    2. 品类管理 ->添加品类,查看品类
    3. 订单管理 ->订单列表,订单详情、发货
    4. 权限 ->管理员登录

      架构设计和技术选型

    5. 架构设计--分层架构
      定义:把功能相似,抽象级别相近的实现进行分层隔离
      优势:松散耦合(易维护、易复用、易扩展)
      常见分层方式:MVC和MVVM
    6. 架构设计--模块化
      定义:解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程
      意义:解耦,可并行开发
      模块化方案:AMD,CMD,CommonJS,ES6
    7. 架构设计--模块分析
      电商平台搭建笔记
  1. 技术选型:软件过程、前后端分离、构建工具、框架、版本控制、发布方式
    • 软件过程选择--敏捷开发
    • 前后端分离方式--纯静态html、完全通过接口做数据交互
  2. 优点:完全脱离后端模板,系统复杂度低
  3. 缺点:不太利于SEO
  4. 优化方案:Server Render/蜘蛛定制页面
    • 框架选型:jQuery、Angular、Avalon、Vue、React
      电商平台搭建笔记
  • 构建工具:Webpack
  • 版本控制:git
  • 发布方式
    电商平台搭建笔记

前后端配合方式及数据接口定义

电商平台搭建笔记

电商平台搭建笔记

电商平台搭建笔记


第三章: 项目初始化与基于模块化的脚手架搭建

项目目录结构设计与Git远程仓库建立

  • git仓库的建立:git项目建立、git权限配置、gitignore的配置
  • 目录结构的设计
    电商平台搭建笔记

项目脚手架搭建概要

  • webpack搭建注意事项

    webpack是天生支持commonJS规范【注意:commonJS是一个规范而不是什么语言或者插件】nodeJS是common JS规范的实现,webpack的编译原理是使用nodeJS把commonJS规范下的模块全部转换成浏览器支持的function形式的模块,然后再用模块加载器来组织这些模块,这样一来,commonJS的模块化方案通过webpack的转换就能够在浏览器上运行了。

  1. webpack降级到1.x版本是因为2.x版本压缩js的uglify会在代码中生成一行代码叫Object.default,default是js switch case
    的关键字,IE8看到这个会不兼容,所以要降回1.15版本

  2. 参数说明
    entry:js的入口文件
    externals:外部依赖的声明
    output:目标文件
    resolve:配置别名
    module:各种文件,各种loader
    plugins:插件
  3. WebPack Loaders
  4. WebPack 常用命令
    webpack -p: 发布时用,最小化压缩
    webpack --watch :监听文件改变,自动编译--开发时用
    webpack --config webpack.config.js :改变默认配置文件
  5. webpack-dev-server:监听文件的改变并自动刷新浏览器
    作用:前端开发服务器
    特色:可以在文件改变时,自动刷新浏览器
    安装:npm install webpack-dev-server --save-dev
    配置:webpack-dev-server/client?http://localhost:8088
    使用:webpack-dev-server --port 8088 --line
    • npm和webpack的初始化
      1.npm的初始化:
      > npm install

      2.webpack的安装
      首先在全局安装webpack:

      > sudo npm install webpack -g

      本地项目中安装1.15.0版本的webpack

      > npm install webpack@1.15.0 --save-dev

      webpack对脚本和样式的处理

    • webpack对脚本的处理
  6. Js用什么loader加载?
  7. 官方文档上的例子中entry只有一个js,我们有多个怎么办?
  8. output里要分文件夹存放目标文件,怎么设置?
  9. Jquery引入方法?
    > npm install jquery --save 然后就可以在js文件中通过require方式引入了 var $ = require('jquery'); $('body').html('hello');
    利用第三方cdn
    首先需要在html文件中引入第三方cdn 然后通过webpack配置文件 externals: { 'jquery': 'window.jQuery',//其中jquery来自于全局对象window.jQuery }, 最后:在js文件中通过require方式引入 var $ = require('jquery'); $('body').html('hello');
  10. 我想提取出公共模块怎么处理 ?
    • webpack对CSS的处理
  11. 样式使用怎么的loader?
    2.webpack打包的css怎么独立成单独的文件?
    第四章 项目通用功能开发

    项目通用模块设计和拆分概要(通用JS工具,通用布局,通用样式,通用导航,通用提示页)

    • 通用js封装
  12. 网络请求工具
  13. URL路径工具
  14. 模板渲染工具--hogan
  15. 字段验证&&通用提示
  16. 统一跳转
    • 页面布局技巧
  17. 定宽布局
  18. 通用部分的抽离
  19. icon-font的引入
  20. 通用样式的定义

作者: yqyily 
链接:https://www.imooc.com/article/21181
来源:慕课网