第一个项目（进博会）总结

上手的第一个项目，以前都是学习知识，没有应用到实际项目中。

主要收获

1. 知道了一个项目大致是如何进行开发的，学到的东西学会应用到实践中，团队是怎么进行合作的
2. 了解了部门的业务，主要是做哪方面开发的
3. git熟练度比之前大大增加，包括git命令行和TortoiseGit。知道如何在代码托管平台（如GitHub和GitLab）上进行合作，解决代码冲突
4. 加深了对项目结构和Vue的理解，学会了使用浏览器控制台合理debug，也提高了vscode的使用熟练度

发现不足&待学习

1. ES6和css掌握比较差，尤其是css，需要大量学习加练习
2. ejs这种模板第一次听说，不太会使用，在js文件中import导入html片段以前也是没用过。html，js，ejs联合使用
3. 前端路由虽然自己看了代码之后知道了是怎么运作的，但是感觉自己写不出来，需要学习
4. node以及node框架（如koa，express）不太了解，npm命令需要学习。
5. Vue的高级特性和用法，如单文件组件（.vue文件）、vuerouter、vuex等不会使用，Vue的生命周期理解不深，webpack等打包工具不会使用。
6. 之前学的东西有所遗忘，如红宝书上关于DOM部分等，对于DOM 0级2级事件等记不太清。

零散笔记

• 命令行操作可以在cmd命令行、powershell、git bash中进行，效果一样，git bash和powershell和Linux的终端类似。
• package.json文件中存放的一般都是项目的依赖文件依赖包，本地要让一个项目跑起来，一般需要在项目根目录下和具体项目下运行npm install命令，这个命令会自动扫描所在目录中的package.json中的内容并下载所需文件到node_modules文件夹中。
• 项目的目录结构大致如下

目录结构

其中public目录为项目中的各个小项目，如worldcup和ee2018等，html中存放的是各个项目的html（虽然ee2018没有用到这个目录），routes目录下为路由，views文件夹下面为各个小项目下的ejs文件

• .gitignore文件是git上传时会忽略的文件。

• 项目从app.js启动

• 启动项目的步骤为，先npm install两次（上面提到过，同时也只需要第一次运行）下载依赖包，之后切换到所在项目的目录下（ee2018），执行npm run dev-server启动服务器，之后再在项目根目录下运行node app.js（或者在vscode下直接f5运行），这个时候打开浏览器，输入对应的路径（http://localhost:5389/webapp/hotel/wechatlab/ee2018/list）即可访问

• 项目的样式代码全部在wechatlab\public\ee2018\app\css\list2.css中，主js文件在wechatlab\public\ee2018\app\js\pages\list\index.js，而位于views中的wechatlab\views\ee2018\list.ejs中，通过路由，将list.js文件映射为上面说到的index.js。soa目录下是一些向服务端发送请求的文件，如getHotelList.js

• 最好将组件进行拆分，分到不同的文件里，比如，hotel-list-item组件由图片组件和内容组件组成，可以将这两个组件写到两个js文件中，之后再import进来，同时也可以将比较长的template模板（html）分出去，之后再导入

• 最好使用小乌龟TortoiseGit，图形化界面，不会像命令行那样容易出错（虽然我还是很喜欢命令行那种感觉），步骤为，（如果有新增的文件，先在git bash中add）先在目录下右键点击Git commit，添加一些描述之后commit，之后再Git Sync，然后fetch&rebase拉取远程变化并合并，有冲突的话会提示，之后可以用TortoiseGit提供的图形化界面解决冲突，解决冲突后再push就行。

• 把一个分支上的commit迁移（复制）到另一个分支使用git cherryout pick 就可以了。不要轻易新建分支

• 过程中遇到的一些问题：

  • npm run dev-server报错

    $ npm run dev-server
    
    > worldcup@1.0.0 dev-server D:\Users\jz.wu\Desktop\new download\wechatlab\public\ee2018
    > webpack-dev-server --inline --hot --config ./webpack.config.babel.js
    
    events.js:183
      throw er; // Unhandled 'error' event
      ^
    
    Error: listen EADDRINUSE 0.0.0.0:8080
        at Object._errnoException (util.js:992:11)
        at _exceptionWithHostPort (util.js:1014:20)
        at Server.setupListenHandle [as _listen2] (net.js:1355:14)
        at listenInCluster (net.js:1396:12)
        at doListen (net.js:1505:7)
        at _combinedTickCallback (internal/process/next_tick.js:141:11)
        at process._tickCallback (internal/process/next_tick.js:180:9)
        at Function.Module.runMain (module.js:695:11)
        at startup (bootstrap_node.js:191:16)
        at bootstrap_node.js:612:3
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! worldcup@1.0.0 dev-server: `webpack-dev-server --inline --hot --config ./webpack.config.babel.js `
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the worldcup@1.0.0 dev-server script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     D:\Users\jz.wu\AppData\Roaming\npm-cache\_logs\2018-07-13T05_50_32_306Z-debug.log
    

    错误原因：运行项目所需的8080端口号被占用，可以在cmd查询使用的端口号是否被占用netstat -aon|findstr <端口号>，按回车显示占用8088端口对应的程序的PID号，之后tasklist|findstr 查看占用端口的具体应用程序，之后就打开任务管理器关掉对应的任务再重新运行就行了。（在这个里面其实是上次运行npm run dev-server之后打开的node.exe没有关，占用了8080）

  • 数据对接时报错Uncaught ReferenceError: Zepto is not defined

    这个错误是因为没有导入对应的包，在ejs文件中通过路由导入即可，，同理，vue.js也是这样导入的

  • 通过watch监测cityID和sortWay变化时调用getHotelList，导致在取消排序切换到其他城市再切换回上海时会请求两次，解决方法就是将sortWay单独列成一个函数，不要同时监测两个变量的变化

  • 异步的问题，即翻页太快导致上次请求还没有返回数据，这时候preHotel的数据还没有更新。通过判断是否及时返回了数据来解决，如果及时返回了，就直接放入hotels数组中，否则就在回调函数getPreData中再放入hotel数组中。还想到的解决方法有promise和async/await，不过还不是很会用，需要学习

  • 503错误

    开启了hkproxy代理，换成系统代理或者关掉代理直接连接就行

  • 在设置了body的overflow:hidden之后，移动端还是可以滚动

    通过给body增加position: fixed和width: 100%即可

  • 一个简易的处理字符串中html字符实体的方法是创建一个div元素，将元素的innerHtml设置为该字符串，再通过div.innerText||div.textContent获取字符串即可

  • CSS加载慢

• 在弹出弹窗之后，防止底层滚动的方法有：

  1. 将body和html都设置如下样式：overflow:hidden;height:100%，pc端和移动端浏览器都有效。但是这样有个问题就是在弹出弹窗（给body和html添加上述样式）后，底层会直接滚回顶部，这是因为overflow:hidden表示从头开始显示，溢出页面的内容不显示，所以会滚回顶部。
  2. 给body添加样式display:fixed;width:100%，pc端移动端都有效。这个同样有上述问题，就是底层会滚回顶部，这个有个解决方法是添加样式时同时记录下此时的scrollTop属性的值，然后dispaly:fixed;width:100%;top:<记录下的值>，之后在去除弹窗或者蒙板时，给页面的scrollTop赋值为记录的那个值，但这个方法只有pc端有效
  3. 将弹窗层的z-index的值设置的比底层的大，由于z-index大的会先触发事件，所以在弹窗层（注意是弹窗层）addEventListener将touchmove和mousewheel事件event.stopPropagation()、event.preventDefault()，在移除弹窗层时再removeEventListener就行。这个方法在pc端和移动端均有效，且不会出现底层滚动到顶部的问题，是比较完美的解决方法。详见https://blog.csdn.net/yuhk231/article/details/74171734

     function forbiddenMove(event){
         event.stopPropagation();
         event.preventDefault();
     }
     

     document.getElementById("<弹窗层id>").addEventListener("touchmove",forbiddenMove,false);/*禁止移动端滑动*/
     document.getElementById("<弹窗层id>").addEventListener("mousewheel",forbiddenMove,false);/*禁用滚轮*/
     

     document.getElementById("<弹窗层id>").removeEventListener("touchmove",forbiddenMove,false);/*允许移动端滑动*/
     document.getElementById("<弹窗层id>").removeEventListener("mousewheel",forbiddenMove,false);/*允许滚轮*/
     

• 在pc端document.documentElement.scrollTop有效而document.body.scrollTop无效，在移动端恰好反过来，document.body.scrollTop有效而document.documentElement.scrollTop无效

• requestAnimationFrame代替setInterval