为了账号安全,请及时绑定邮箱和手机立即绑定

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

2018.04.17 19:32 8198浏览

本篇手记作为实战课程《对接真实数据 从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的版本。

=== 第一章 ===

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


问:课程代码在哪下载?

答:课程学习进度超过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方法里的正则不太懂?

问: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小姐姐、行知大佬等等等等等等…虽然有时我在忙没说话,但一只在关注着。
点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

30人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消