电商_前端开发[1]

2019-12-17 本文已影响0人 Mark同学

第1章课程介绍

本章中会先让大家了解课程整体情况，然后手把手带大家做一些开发前的准备工作。
完美运行的demo
配套的服务端课程

1-1 课前必读

项目源码
 学习指南
 知识点索引

1-2 课程导学

项目效果演示

1-3 电商平台需求分析

1-4 架构设计及技术选型

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

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

本章会手把手带大家搭建起开发环境，并在正式开发之前，教大家一些提高开发效率的工具使用技巧。（nodejs和npm安装、git安装和配置、sublime使用技巧、chrome调试工具、代理神器charles&Fiddler）

2-1 开发环境的搭建

2-2 nodejs和npm的介绍与安装

问题1：nvm 安装成功后，命令不可用

open ~/.zshrc
export NVM_DIR="/Users/wutianyu/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
复制粘贴，然后保存

问题2：全局删除 node/npm，使用 nvm 管理 nodejs 版本

nvm list
nvm install 4.4.7
nvm current
nvm install 12.14
nvm use 4.4.7
nvm alias default 4.4.7

2-3 git的安装和配置

修改 git 的配置文件：open ~/.gitconfig

[user]
    name = wtyqer
    email = wtyqer@gmail.com
[alias]
    co=checkout
    ci=commit
    st=status
    pl=pull
    ps=push
    dt=difftool
    ca=commit -am
    b=branch
[push]
    default = simple

git 的常用命令

查看版本：git --version
查看仓库状态：git status
初始化仓库：git init
添加改动：git add
提交并注释：git commit -am "注释"
拉取到本地：git pull
上传到远程：git push
检出分支：git checkout branch
合并代码： git merge

2-4 sublime使用技巧

npm install --save-dev @types/node

2-5 chrome调试工具

2-6 代理神器Charles&Fiddler

2-7 本章知识点总结

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

本章我会手把手带大家对项目进行初始化，包括项目创建，项目结构设计和一整套基于模块化的开发脚手架的搭建（知识点：项目创建、项目结构设计、项目脚手架搭建、npm和webpack初始化、webpack--js、css文件处理、webpack -- html处理、icon-font和图片处理、webpack--dev-server、代码提交，Git远程仓库的规范化用法等

3-1 项目初始化概要

3-2 项目目录结构设计与Git远程仓库的建立

码云

生成公钥

ssh-keygen -t rsa -C "邮箱"

添加个人公钥到远程仓库

vim ~/.ssh/id_rsa.pub

远程仓库新建项目，克隆到本地

git clone "远程仓库地址"

本地新建项目，同步到远程仓库

git init
git remote add origin "远程仓库地址"
git pull origin master
git add .
git commit -am 'test'
git push --set-upstream origin master

配置 .gitignore 文件

touch .gitignore

.DS_Store
/node_modules/
/dist/

新建并切换分支

git checkout -b mmall_v1.0

查看当前分支

git branch

初始化项目目录

mkdir src
cd src
mkdir view
mkdir page
mkdir service
mkdir util
mkdir image

3-3 项目脚手架搭建概要

3-4 npm和webpack的初始化

在项目根目录执行 npm init

{
  "name": "mmall-fe",
  "version": "1.0.0",
  "description": "mmall 前端代码",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git@gitee.com:gladmmall/mmall-fe.git"
  },
  "author": "Mark",
  "license": "ISC"
}

在项目目录里安装 webpack

npm i webpack@1.15.0 -D

全局安装 webpack

sudo npm i webpack -g

查看webpack 版本号

webpack -v

webpack 初阶使用

// ./src/page/index/index.js
cats = require('./cats.js');
console.log(cats);

// ./src/page/index/cats.js
var cats = ['dave', 'herry', 'martha'];
module.export = cats;

webpack ./src/page/index/index.js ./dist/app.js

webpack 进阶配置

// webpack.config.js
module.exports = {
    entry: './src/page/index/index.js',
    output: {
        path: './dist',
        filename: 'app.js'
    }
}

3-5 webpack对脚本和样式的处理

entry 存在多个入口 .js 的处理手法

// webpack.config.js
// 同时存在多个打包模块的入口
var config = {
    entry: {
        'index': ['./src/page/index/index.js'],
        'login': ['./src/page/login/index.js']
    },
    output: {
        path: './dist',
        filename: 'app.js'
    }
}
module.exports = config

打包时，保持原文件名

// webpack.config.js
filename: '[name].js'

打包时，区分文件类别

// webpack.config.js
filename: 'js/[name].js'

<!-- view/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="../../dist/js/index.js"></script>
</body>
</html>

执行 webpack，并刷新页面

加载 jQuery的第一种方案

npm i jquery --save

// ./src/page/index/index.js
var $ = require('jquery')
$('body').html('HELLO INDEX')
console.log('hello index')

执行 webpack

加载 jQuery 的第二种方案

npm uninstall jquery --save

<!-- view/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <script src="../../dist/js/index.js"></script>
</body>
</html>

// ./src/page/index/index.js
var $$ = require('jquery')
console.log('hello index')
$$('body').html('index hello ~~~~~')

// webpack.config.js
var config = {
// ...
  externals: {
    'jquery': 'window.jQuery'
  }
}
module.exports = config

执行 webpack

webpack 提取公共模块

var webpack = require('webpack')

var config = {
  entry: {
    'common': ['./src/page/common/index.js']
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      filename: 'js/base.js'
    })
  ]
}

common 模块的代码会打包到 base.js
被同时引用的代码也会打包到 base.js

加载 css 文件

注意这三个依赖的版本号

// package.json
    "extract-text-webpack-plugin": "^1.0.1",
    "css-loader": "^0.28.1",
    "style-loader": "^0.17.0",

// webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin')

var config = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
        // loader: 'style-loader!css-loader' 这样会把 css 打包进 js
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('css/[name].css')
  ]
}

module.exports = config

3-6 webpack对html模板的处理

// package.json
    "html-webpack-plugin": "^2.28.0",

// webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin')
// ...
    new HtmlWebpackPlugin({
      template: './src/view/index.html',
      filename: 'view/index.html',
      inject: true,
      hash: true,
      chunks: ['common', 'index']
    })

执行 webpack
封装一个通用的处理方法

// webpack.config.js
var getHtmlConfig = function(name) {
  return {
    template: './src/view/'+ name +'.html',
    filename: 'view/'+ name +'.html',
    inject: true,
    hash: true,
    chunks: ['common', name]    
  }
}
// ...
  plugins: [
    new HtmlWebpackPlugin(getHtmlConfig('index')),
    new HtmlWebpackPlugin(getHtmlConfig('login'))
 ]

建好 html 文件，执行 webpack 测试

引入通用 html 文件，解决 jQuery 多次引用的问题

安装 "html-loader": "^0.4.5"

<!--view/layout/html-head.html-->
<head>
  <meta charset="UTF-8">
  <title>是否成功</title>
</head>

html-plugin 支持 EJS 模版语法

<!--view/index.html-->
<!DOCTYPE html>
<html lang="en">
<%= require('html-loader!./layout/html-head.html') %>
<body>
  <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

</body>
</html>

3-7 webpack对icon-font和图片的处理

3-8 webpack-dev-server

3-9 项目初始代码提交与本章知识点总结

第4章项目通用功能开发

本章中我会先带着大家对项目的业务进行分析，并提取出项目的通用功能，然后手把手带大家完成通用模块的开发，让大家学会代码的高复用技巧。（知识点：通用功能分析和拆分思想、高逼格UI开发经验与技巧，通用模块设计与独立打包方法，通用JS工具类封装、全局样式开发、通用结果提示页开发、通用导航组件开发、通用搜索组件开...

4-1 项目通用模块设计和拆分概要（通用JS工具，通用布局，通用样式，通用导航，通用提示页）

4-2 通用JS工具类封装（网络数据请求功能）

4-3 通用JS工具类封装(获取服务端接口url、参数功能)

4-4 通用JS工具类封装(hogan 渲染html模板功能)

4-5 通用提示功能，验证功能封装（手机号验证，邮箱格式验证，非空验证功能）

4-6 通用UI布局，样式开发

4-7 通用导航开发(UI 层)

4-8 通用导航开发(逻辑层)

4-9 通用footer开发

4-10 通用header开发

4-11 通用侧边导航开发

4-12 通用操作提示页开发

4-13 代码提交与本章知识点总结

第5章用户模块开发

本章我会带着同学们分析，拆解用户模块的功能及技术点，并手把手带大家实现登录、注册、找回密码、个人中心、修改密码等功能。（知识点：数据安全性处理方案，表单同步/异步验证，小型SPA开发）

电商_前端开发[1]

第1章 课程介绍

1-1 课前必读

1-2 课程导学

1-3 电商平台需求分析

1-4 架构设计及技术选型

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

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

2-1 开发环境的搭建

2-2 nodejs和npm的介绍与安装

2-3 git的安装和配置

2-4 sublime使用技巧

2-5 chrome调试工具

2-6 代理神器Charles&Fiddler

2-7 本章知识点总结

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

3-1 项目初始化概要

3-2 项目目录结构设计与Git远程仓库的建立

3-3 项目脚手架搭建概要

3-4 npm和webpack的初始化

3-5 webpack对脚本和样式的处理

3-6 webpack对html模板的处理

3-7 webpack对icon-font和图片的处理

3-8 webpack-dev-server

3-9 项目初始代码提交与本章知识点总结

第4章 项目通用功能开发

4-1 项目通用模块设计和拆分概要（通用JS工具，通用布局，通用样式，通用导航，通用提示页）

4-2 通用JS工具类封装（网络数据请求功能）

4-3 通用JS工具类封装(获取服务端接口url、参数功能)

4-4 通用JS工具类封装(hogan 渲染html模板功能)

4-5 通用提示功能，验证功能封装（手机号验证，邮箱格式验证，非空验证功能）

4-6 通用UI布局，样式开发

4-7 通用导航开发(UI 层)

4-8 通用导航开发(逻辑层)

4-9 通用footer开发

4-10 通用header开发

4-11 通用侧边导航开发

4-12 通用操作提示页开发

4-13 代码提交与本章知识点总结

第5章 用户模块开发

5-1 用户模块的设计，功能拆分，交互数据接口解析

5-2 登录页面的开发1

5-3 登录页面的开发2

5-4 注册页面的开发

5-5 找回密码页面的开发

5-6 个人中心的开发1

5-7 个人中心的开发2

5-8 修改密码功能的开发

5-9 本章知识点总结与课后作业

猜你喜欢

热点阅读

第1章课程介绍

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

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

第4章项目通用功能开发

第5章用户模块开发