手把手从0打造电商平台前端

第一章课程介绍与开发前的准备工作

1.1

课程目标

掌握一个电商网站从设计到上线的整个过程所涉及的流程

具备独立开发一个前端项目的能力

让你一开始就比别人起点更高,获得更快速的成长

掌握开发过程中各种坑的解决思路和方法

架构设计

前后端完全分离

分层架构

模块化

技术选型

HTML css js jQuery

辅助工具

webpack

nodejs

npm

shell

效率工具

sublime

Chrome

Charles

Git

课程安排

1.2电商平台需求分析

电商平台有什么

需求拆分原则

单个迭代不宜太大

需求可交付,能够形成功能闭环

有成本意识,遵循二八原则

有预期的价值体现

提炼核心需求

电商功能拆分--用户端

商品->首页,商品列表,商品详情

购物车->购物车数量,添加删除商品,购物车提交

订单->订单确认(地址管理),订单提交,订单列表,订单详情

支付->支付

用户->登录,注册,个人信息,找回密码,修改密码

电商功能拆分--管理后台

商品管理->添加编辑商品,查看商品,下架

品类管理->添加品类,查看品类

订单管理->订单列表,订单详情,发货

权限->管理员登录

参与感

更深入了解业务和需求

丰富其他领域的知识

提防不靠谱的需求

1.3 架构设计

架构设计--分层架构

定义:把功能相似,抽象级别相近的实现进行分层隔离

优势:松散耦合(易维护,易复用,易扩展)

常见分层方式:MVC,MVVM

架构设计--模块化

定义:解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程

意义:解耦,可并行开发

模块化方案:AMD,CMD,CommonJS,ES6

模块化方案

AMD,reactjs在推广化过程中的规范化产出

CMD,

CommonJS,

ES6

架构设计

技术选型

软件过程选择--敏捷开发

定义:以用户的需求进化为核心,采用迭代,循序渐进的方法进行软件开发

是一种迭代的意识和方法,而不是概念和工具

优点:能够应对满足不断变化的需求

不足:对团队成员的能力要求比较高

前后端分离方式--不分离

前后端共用同一项目目录,甚至页面内嵌js,css

本地开发环境搭建成本高

共同维护成本高

发布风险高

前后端分离方式--部分分离

后端负责页面模板(JSP/velocity/freemarker)

本地开发环境搭建成本较高

更新页面模板仍需后端协助,效率不够高

需要前后端同时发布

前后端分离方式--完全分离1

方案1:velocity,发布的时候同步到后端

优点:完全分离,能直接生成动态的模块,利于SEO

缺点,系统复杂度高,需要前后端同时发布

前后端分离方式--完全分离2

方案2:纯静态html,完全通过接口做数据交互

优点:完全脱离后端模板,系统复杂度低

缺点:不太利于 SEO

优化方案:server render/蜘蛛定制页面

框架选型

构建工具

版本控制:

发布方式--发布过程

发布方式--域名分布

刚刚都做了哪些选择?

软件过程:敏捷开发

前后端分离:完全分离,纯静态方式

模块化方案:CommonJS+webpack

框架选择:用户端jQuery+css,管理系统react+sass

版本控制:git

发布过程:拉去代码->编译打包->发布到线上机器

第二章开发环境搭建与开发工具使用技巧

2.1 开发环境的搭建

开发环境

语言环境:

开发工具:

2.2 node.js,npm的介绍和安装

nodejs简介

定义:js的服务器端运行环境

用途:构建webpack的环境依赖

特点:单线程,异步编程

应用场景:低运算,高I/O

nodejs的包管理工具--npm

nodejs安装:

2.3 Git的安装和配置

介绍:Git是一款免费,来源的分布式版本控制系统,用于敏捷高效的处理任何或小或大的项目

Git常用命令

Git配置--gitconfig

2.4 sublime使用技巧

sublime优点:

功能设计合理,支持多光标操作

轻量级,运行速度快,使用流畅

界面简洁美观,有利于集中注意力

扩展性良好

sublime常用设置

快捷键:

2.5 Chrome调试工具

2.6 代理神器Charles/fiddler

HTTP代理的原理

项目开发中的作用

Charles or fiddler

2.7 本章回顾

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

3.1 项目初始化

有什么好初始化的?

项目目录

项目工具

3.2 git仓库的建立

git仓库的建立:

git项目建立

git权限配置

gitignore的配置

目录结构的设计:

新建组织->新建项目

git clone 远程ssh地址->配置ssh key->项目公钥管理->git clone 远程ssh地址

.gitigonre:

3.3 项目脚手架的搭建

npm init

npm install

webpack

webpack的安装

webpack安装的疑问

webpack.config.js

webpack loaders

webpack常用命令

webpack-dev-server

3.4 脚手架搭建

npm init

3.5 webpack对脚本和样式的处理

对脚本的处理

对样式的处理

第四章项目通用功能开发

通用js工具的封装

网络请求工具

URL路径工具

模板渲染工具--Hogan

字段验证&&通用提示

统一跳转

页面布局

页面布局技巧

定宽布局

通用部分的抽离

icon-font的引用

通用样式的定义

没有设计师,程序员怎么办

能爽死强迫症的对齐

你不知道的对称美

扁平化多简单

保持一定距离

配色是一门学问,但灰色比较百搭

通用导航条的开发

通用页面头部的开发

通用侧边导航的开发

通用结果提示页的开发

未完...

手把手从0打造电商平台前端相关推荐

久零区块链打造电商平台全新堡垒
随着其技术和理念的不断成熟,区块链正式步入以可编程社会为主要特征的3.0阶段,即区块链将逐渐从虚拟世界渗透到现实生活,而电子商务正是现阶段连接现实与虚拟的最佳契机.区块链的智能合约.不可篡改等特性恰好 ...
node.js -- 手把手教你搭建电商平台
一.项目开始前,开发环境:jquery,node.js,webpack打包.我们养成先在github上新建项目,再拉代码:git常见命令: 1,git clone <> 克隆 ...
企业级电商平台-前端搭建(有源码)
目标整体架构() 业务功能实现系统整体可用性,可维护性,可扩展性前后端分离 API接口交互分层架构设计模块化思想架构工具 WebPack NodeJS NPM Shell Cha ...
想要打造专属社交电商平台？一站式解决方案营销社交化
在互联网蓬勃发展的时代,衍生出了直播带货,社交式电商平台,这些新零售模式.线下企业,零售行业纷纷想要开始转为线上,这就意味着搭建专属个性化电商平台.可是你真的了解如何打造电商平台吗?读完这篇文章,帮你 ...
构建高并发高可用的电商平台架构实践
问题导读: 1.如何构建高并发电商平台架构 2.哈希.B树.倒排.bitmap的作用是什么? 3.作为软件工程师,该如何实现读写? 4.如何实现负载均衡.反向代理? 5.电商业务是什么? 6.基础中间 ...
电商平台数据可视化Echarts-Vue项目综合练习(黑马pink老师)学习记录
放假在家没事,跟着b站黑马前端课程手把手做了个电商平台数据可视化实时监控系统.老师课讲得非常好,几乎是保姆级别,对我这种小白非常友好.在这里记录一些自己遇到的问题,欢迎批评指正. 问题记录 1.ECh ...
学习 React 17 系统精讲结合TS打造旅游电商平台
React 17 系统精讲结合TS打造旅游电商平台 2-2 [环境搭建]开始我们的第一个React项目 2-3 [项目启动]使用create-react-app快速搭建React 2-5 [Type ...
美丽联合与腾讯云签署战略协议全面借助腾讯云打造智慧时尚电商平台
2018年5月24日,美丽联合集团与腾讯云在2018腾讯云+未来峰会互联网专场签署战略合作协议.美丽联合集团联合创始人魏一搏.高级副总裁曾宪杰.腾讯副总裁腾讯云总裁邱跃鹏.腾讯云副总裁答治茜共同出席本 ...
前端网页设计内容二《电商平台网站》
讲重点.展示页面效果.代码编译. 看页面效果: 今天的重点在最后一个页面. 看代码: <!DOCTYPE html> <html lang="zh">&l ...

手把手从0打造电商平台前端

手把手从0打造电商平台前端相关推荐

最新文章

热门文章