《手把手从零打造企业级电商平台-前端实战》学习指南

本篇手记作为实战课程《对接真实数据 从0开发前后端分离企业级上线项目》的学前必读！！！总结了每一章的思路和一些常见的问题，旨在帮助同学们躲过一些常见的坑，把更多的精力放在课程知识的学习上。

=== 第零章 ===

有些话要放在最前面说，在开始学习之前，有几个很重要的地方要注意：

1、如果学到第三章还不知道这个课程是在干嘛的，就别跟着做了，先快速的把整个课程通一遍知道都是在干什么的，再回来从头跟着敲。

2、 课程中安装npm插件的时候，一定要按着课程源码里给的版本号来安装，不然会有各种坑，包括全局和项目本地。形式就是npm install xxx@v.v.v --save（或者–save-dev）。所有版本如下：

  "devDependencies": {
    "css-loader": "^0.28.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.11.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "style-loader": "^0.17.0",
    "url-loader": "^0.5.8",
    "webpack": "^1.15.0",
    "webpack-dev-server": "^1.16.5"
  },
  "dependencies": {
    "font-awesome": "^4.7.0",
    "hogan.js": "^3.0.2"
  }

3、推荐把nodejs升级到6.12.3的版本。

4、课程结构可以参考手记《手把手从零打造企业级电商平台-前端实战》知识点索引

=== 第一章 ===

这一章主要内容是课程的总体介绍和需求、数据接口的说明。

问：课程代码在哪下载？

答：课程学习进度超过40%能在慕课网直接下载源码，或者在qun共享有升级版本的

问：怎么加qun？

答：购买完课程以后，在pc端里进入课程的页面右侧，有加入方式和验证信息，加的时候填上验证信息会自动通过。http://coding.imooc.com/learn/list/109.html

问：测试用的数据接口地址和文档在哪？

答：课程提供了统一的测试地址：test.happymmall.com。
接口文档地址：https://gitee.com/imooccode/happymmallwiki/wikis/Home。

=== 第二章 ===

这一章介绍一些常用的软件，也都没什么难度。

问：nodejs要不要升级？

答：视频中使用的是node v4.4.7，建议同学们升级成v6.12.3，已经经过一段时间的测试，没什么问题。

问：.gitconfig配置不起作用？

答：.gitconfig文件应该放在系统用户的根目录下，也就是执行cd ~进入的目录。不要放在项目里！也不要放在桌面！

问：为什么要用代理软件charles？

答：在开发的时候要请求测试环境的接口，直接请求会造成跨域，所以先请求html所在域下面的接口地址，再用代理软件把请求劫持到远程的接口地址。另外windows系统的同学也建议使用charles，用起来比较简易，并且和视频里的都一样了。

=== 第三章 ===

从这一章开始，一些同学开始表现出好几脸懵逼的症状，出现这种状态后参考第零章的第1条。这一章算是这个课程的难点，尤其是对于没接触过编译方式开发的同学来说。好消息是忍过这一章，后面的章节就比较轻松了。

问：远程的git仓库建立好以后，执行git clone或者git pull的时候报错？

答：出现的原因有可能是：
1、刚配置好的ssh key，有延迟，还没有生效，等一两分钟的
2、在clone的时候提示有yes/no的地方，直接用回车过去了，应该输入yes
3、ssh key配置的不对，可以本地重新生成一个，然后再去远程gitee上，把原来的删掉再把新的重新添加一次

问：执行webpack后报错？

答：可能的原因：
1、全局安装webpack的时候没有指定版本号，应该指定1.15.0的
2、node没有添加到系统的环境变量，会报commond not found
3、windows系统下别用sudo，这是linux和mac上的

问：webpack@1.15.0这个版本是不是太旧了？

答：经过测试再新的版本对IE8不兼容，如果对IE8有兼容要求的话最好用这个版本。如果没有要求，在qun共享里也提供了webpack@4.2.0的升级包，可以使用新版webpack。升级过程参考手记《小记webpack4.x升级过程》。若果是新手的话建议还是先按着课程里的过程来开发，对npm熟悉以后再进行项目升级。

问：安装url-loader的时候报错？

答：可能的问题：
1、安装的url-loader版本不对，按课程里的安装
2、没有安装url-loader依赖的file-loader插件，也指定版本安装一下

问：执行webpack-dev-server命令以后，没有在本地见到dist目录？

答：webpack-dev-server会把编译结构都存在内存中，不会真的去写入文件系统，因为内存的性能要比文件操作快的多。

问：执行npm run dev报错？

答：如果用的是windows系统，应该执行npm run dev_win。

问：运行npm run dev_win的时候，出现“throw er; // unhandled ‘error’ event”？

答：这是启动webpack-dev-server的端口被占用了，可以在任务管理器里结束nodejs进程，然后再去启动服务。

=== 第四章 ===

这一章开始进入正式的代码开发阶段，这章过后就完成了整个项目通用部分的封装，从这一章开始，应该能感觉到学习速度在加快。

问：提示can not find module 'hogan'？

答：课程里用的hogan插件名字要改成hogan.js，npm安装的时候和mm.js里用的时候都要跟着改。

问：mm.js里getUrlParam方法里的正则不太懂？

答：可以参考下面这两个问答：
https://coding.imooc.com/learn/questiondetail/46086.html
https://coding.imooc.com/learn/questiondetail/13796.html

问：font-awesome引入失败？

答：用这种方式：require(‘font-awesome/css/font-awesome.min.css’);。

问：侧边栏不出现，或者出来的有问题？

答：从这章开始就进入到业务代码的开发了，基本上所有问题都可以通过调试工具来找到了，所以要学会调试工具的用法，尤其是断点调试。不要感觉和我敲的都一样，以调试工具为准。

=== 第五章 ===

这是第一个业务模块，有一些共性的问题会在这一章出现，比如跳转错误，用了带href的a标签当按钮，charles代理配置不对等。

问：从首页跳转到登录页就报错了？

答：首页要用/dist/view/index.html这个全路径来访问，如果少了index.html可以访问的到，因为server会自动找view目录下的index.*的文件，但跳转以后就会把view这层抹掉，跳转到/dist/login.html这样错误的页面上。

问：代理软件抓不到我的请求？

答：可能是浏览器没有自动代理，下载switchysharp这个chrome插件手动指定到charles代理上就好了。

问：点提交按钮以后，请求发出去了，但alert出了一个error，没有执行成功的回调？

答：是因为用带href的a标签当按钮了，a标签的跳转动作导致了ajax被取消，回调就没戏了。

=== 第六至十章 ===

业务模块的章节都是业务逻辑的问题比较多，同学们学习的时候学会调试技巧，再就是多翻下对应的问答区就可以了。

=== 第十一章 ===

这章演示了一下1.0版本的后台管理系统，用户端加上后台管理系统组成了整个电商的系统。后台管理系统用的是react框架进行开发的，1.0版本里的react有些旧了。

如果同学们对React比较感兴趣建议去学习二期课程：
《React16+React-Router4 从零打造企业级电商后台管理系统》

二期课程里把后台管理系统用的插件都进行了升级，对代码进行了两次封装和重构，会比1.0的代码更科学，另外二期课程里面还对一些相关的知识点做了讲解，比如es6用法，本地存储，登录状态保持的机制等等等。

=== 第十二章 ===

这一章做上线，在Linux系统上的操作比较多，建议同学们去学一下Linux和vim的基本操作，不要求系统的学会，会常用操作就可以了。

问：在服务器上安装sass失败？

答：可以不安装sass了，直接使用npm安装node-sass即可。

问：执行发布的过程中出现killed？

答：机器内存不足，加一个swap区可以解决。

问：不会nginx的配置？

答：学！。

=== 第十三章 ===

Thank you all!

最后说一下提问的技巧：

1. 比较好描述的问题建议在问答区先提问，这样提问的结果会有记录，可以供后来的同学参考。提问时也把问题描述清楚，做了什么操作，报了什么错，或者和预期有什么不一样。
2. 如果是比较着急的问题，在问答区提问后可以直接qq找我，把问答区的链接私聊发我，群里@有时会找不到。
3. 问答区不好描述的问题也可以直接qq找我，但也要尽量描述清楚问题。“老师，我的页面显示不出来…我的页面不现实…我写的xxx怎么和你不一样…”，这样的问题我实在不好猜是什么原因造成的。
4. 群里同学间的讨论是纯友情支持，不保证所发的问题都能得到回复。纯友情支持就是建立在愿意聊天的基础上，最起码回答问题后能让自己心情愉悦。
5. 能帮助别人是值得感谢的，回答问题也是一种学习方式，我这两年里回答的问题应该能上万条了，从里面也学到了不少新东西。有些知识自己知道和能讲出来，需要的功力确实不一样。
6. 感谢群里经常回答问题的同学，ewl小姐姐、行知大佬等等等等等等…虽然有时我在忙没说话，但一只在关注着。