【重点】：如果项目的依赖是npm安装的，后续所有的依赖全部都要用npm安装，反之一样，总之就是不能混合安装，不能用了npm又用yarn。 npm下载后的依赖目录和yarn的目录非常的不一致，就会导致各种错误问题

大森林电商

订单模块

购物车模块

用户模块

产品模块

客服

token 的作用

token的由来

首先在token之前前后端判断身份标识用session，基于cookie来实现。最新的浏览器渐渐的淘汰了cookie了，所以这种形式慢慢就没了，于是大家换了一种校验形式，使用token.

token里的值都是什么

token是由后端程序生成，里面一般封装了用户的id，用户本次登录的ip地址，过期的时间，可能还有一些其他后端加入的字符等。 { "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTkyLCJ1c2VybmFtZSI6IuiKseWNt-WEvyIsImlzbG9naW4iOjEsImlhdCI6MTY1MzQ1OTY1MywiZXhwIjoxNjUzNDYzMjUzfQ.xIQHcNy8B_cNGgfZTcj4m2aM3sG_ZlNa-zLDsR9DPWk" } token在后端程序里可以解密，后端根据数据进行校验用户是否合法。

利用token做记住密码：一定不是把密码存本地

很有网站有记住我【3-7天】

• 本次登录勾选了记住我3天，当我登录的时候我需要给接口一个额外的参数，就是记住我并且保留3天，后端就会在token中加入一个3天过期的时间。
• 当我们登录成功后，我们需要把token存入本地，并且把记住我那个标记也存。
• 当我们退出登录时，先判断本地那个记住我标识是否为true，如果为true，则token不删除。
• 下一次打开登录页面，从本地读取记住我的标识，如果时true则把密码框给一个假的****，提交登录的时候，就把token上次就可以了。

有哪些场景需要登录

1. 进入客服的时候，要先判断是否登录
2. 进入订单的时候，需要
3. 购物车的时候，需要 所以登录成功后，应该跳转回最开始被拦截的地方

项目中的权限管理:【自定义指令控制、路由守卫】

如果项目中很多地方都需要权限管理，比如路由的跳转前需要判断，比如事件前需要判断。 自定义指令去实现。 指令是用来控制元素的，所以我们使用自定义指令来解决。

socket 长连接

ajax和socket区别：ajax是一次性连接请求，ajax请求一次，后端返回一次，然后本次ajax请求结束。

socket是和服务器建立连接后，就不会断开了，后端可以通过socket无限次的主动推送消息给前端。如果端口了，它也会尝试重新连接的。

socket的优势和使用场景：客服，股票，扫码登录/支付等。 比如客服不适应socket，只能用ajax，每隔1秒请求一次服务器，问问服务器。造成网络通信的浪费。定时间+ajax的话我们管他叫”轮询请求“是不太好的一种方式。

socket可以平时没有消息也不会产生大流量，一旦后端有消息就推送过来。

支付流程

1. 支付功能只能是由具备工商资质的企业或单位才能申请使用，个人没法申请。
2. 支付最终的真正执行程序一定是后端来做，要么就是第三方来实现，前端只是给提供数据。
3. 公司法人使用自己的信息+公司的信息去微信或支付宝支付平台开通账号，然后会填写很多东西，比如：公司自己后端的服务器地址，还有支付成功后的跳转地址和取消支付的跳转地址等等。

pc端网页

1. 扫码支付 还是使用手机去支付，当我们使用手机扫码后，二维码被手机解析成一个url地址，这个地址会自动用手机执行调用支付宝或微信支付，然后把支付的过程交给第三方【支付宝或微信】来做，当用户取消支付或者成功支付，手机会跳转到我们设定的一个url地址里去，这个地址是一个显示状态的页面。无论是支付成功还是失败，当第三方平台跳转到我们指定的页面后，地址栏会携带很多关于本次支付的参数： http://websong.wang?uid=123456&type=1&date=12346546我们根据地址栏回执的参数进行处理，请求我们自己后端的接口，告诉后端，这个用户到底怎样了。 前端在生成二维码的时候就开启了socket长连接，一直监听着后端给的状态，比如1表示用户扫码了，2表示用户支付了 3 支付失败
2. 调接口支付

• 先生成订单id，在购物车里或者立即购买里，把当前的产品数据和用户数据通过接口发送给后端，后端返回一个oderid订单id，我们就可以跳转到支付的网页了，支付页面会有收货地址，价格，数量等信息，当我们点击支付按钮的时候，我们就把订单id通过接口发送给后端。前端要显示支付的方式微信或支付宝，前提是用户必须绑定了，或者微信或者支付宝是一个二维码，如果用户绑定好了那就不用扫码了，直接弹出一个支付密码框，用户输入支付密码后，就直接支付了。

手机网页

sdk 地图的，支付的，树莓滑动解锁等，实际上sdk简单理解就是一个封装好的插件，里面使用加密的手段封装了平台的对外开放的功能，目的是让纯前端实现所有的交互，而不需要接入大量的后端开发。

• sdk集成前端支付环境，直接调用sdk给的api，就可以唤醒手机里安装的支付宝或微信，进行支付。
• 还是请求后端接口，后端接口返回一个字符串的form表单，我们只要把字符串的表单使用innerHTML放到页面上，表单会自动提交，然后就会自动的跳到第三方支付的网页里进行支付。

小程序

微信小程序，只能是用微信支付，使用小程序里一个固定的api方法，wx.requestPayment()实现支付 流程是：登录后，使用个人信息请求后端的一个订单接口，拿到订单id去请求requestPayment函数

混合应用app

实际这里也还是移动端的网页内嵌在了软件的壳子里。支付和手机网页差不多，但是如果是在uniapp里开发的，uniapp有一个内置的支付方法：uni-pay方法和wx.requestPayment()是一样的效果和使用方式。

项目优化

1. 关闭源码映射
2. 代码抽离使用cdn注入 我们使用cnd链接把资源引入到页面中，而不是用node_modules包的代码，这样打包的时候就没有这些代码了。
3. 关闭console打印 npm i -D terser-webpack-plugin