Vue3.x从入门到项目实战 43.登录流程细化和项目安装上线 学习猿地原创

来，我们把登录的逻辑咱们再处理完，那前面呢，咱们做了一个登录注册，现在呢，我们可以做到在访问任何一个没有授权接口的情况下，就是比如说我们在访问后台也好，以后做后台这个，呃，操作下一个项目，咱们是做后台这个操作嘛，现在咱们是做前台对吧？都需要这个认证的，那在前台像首页和首页上面数据接口不需要授权就能获取到，就像你访问其他的网站，那首页面对吧？我们是不需要登录的，当访问一些跟用户有关系的逻辑的时候，一定是需要登录的，对吧？包括这个商品列表页面我们也是不需要登录的，商品详情页面我们也是不需要登录的，对吧？但是个人中心，个人中心那是不是跟个人跟用户有关系啊，那购物车订单。

支付地址收藏，下边这些都是跟用户有关系的，跟用户有关系，那所有的接口我们在请求的时候一定是需要有这样的token的，对吧？JWT授权的这样的一个操作的啊，那咱们上面写过这样的一个操作，那因为所有的接口咱们是封装了统一的一个网络请求，也就是request，所以在request里边，那么我们在请求拦截，也就是在请求服务器的时候，那一定会带上什么token过去的，如果token有对吧，我们就带着ton过去，如果token没有的话，那当然就不用带了。这是请求拦截里边我们需要处理的，那抢拦截也就数据回来的时候，我们需要处理什么呢？回来的时候有正确的数据，也有错误的数据，清楚吧，有正确的数据也有错误的数据，所以呢，咱们正确的数据就直接放行就行了，当然了，你这里边可以让不让每一个请求的接口都有date的话，你可以比如说返回date，如果它存在，那我们就返回它点date，如果不存在对吧，那我们直接返回res，你可以做一个类似于这样的一个判断都可以啊，这样的话，我们在写其他接口的时候，有date的候，我们直接res点就行了，少写一个date对吧，当然我们现在这个。

现在这个先不需要，那我就先不写了，然后错误的时候我们需要处理，统一提示，不管请求哪个接口，如果是需要授权的，那么在这块就判断直接跳转到登录页面，那如果是不是授权的对吧，那一些权限其他提示的错误对吧，我们统一在这提示。这是写项目的一个，这个部分登录其实算是项目的架构的部分，OK架架构部分，那咱除了登录，咱们一做完之后，后边的所有的模块，那其实都是什么，其实都是基于这个架构的，就是单个模块的写了，关联性其实就不大了，都是模块和模块之间的关联，都是可有可无的，但是这些登录和其他架构都是必须有的，所以咱们把这个写完，那咱们写这一段能确保什么呢？就是在请求这里边任何一个接口的下边，不管是订单呢或者什么，对吧，所有都需要做认证的。

如果不需要认证对吧，那咱们就返回就给我们跳到登录页面，包括收藏，收藏是不是自己的收藏呢，跟用户也有关联的，那也需要授权的收藏和收藏列表都是的啊这么多。那还有一种是什么呢？那接口咱们说在一个页面里边，一个页面里边咱有可能有多个什么多个这样的一个，呃，接口存在，但是呢，有的时候我们在请求访问哪些页面的时候，我们做一个项目，有可能说一个小型项目也得有十多个页面，像我的个人中心是不是就得登录才可以啊。

对吧，当然了，这个你看不也给我们跳转到登录页面了吗？是因为什么？是因为我们个人中心的功能已经写完了，对吧？然后在访问个人中心的时候，也就是在请求这个接口的时候啊。啊，个人中心这个接口的时候，你看获取用户详情的时候，是不是需要授权对吧？在获取的时候，访问的那个RP网络请求的时候，给我们做的一个什么，给我们做的一个呃，一个授权，对吧？但是呢，这个它是通过接口那块跳转的，那我们想干嘛，有一些页面我们在访问的时候，有些页面我们在访问的时候。是直接点页面的时候，没等他的页面模板都执行了，就将它直接跳转页面级的，那个时候我们需要在路由来判断，像哪些页面需要呢？像咱手机端的像购物车页面，呃，个人中心页面对吧？然后个人什么信息修改页面，呃，订单页面处理页面对吧？什么我的收藏，我的评论这些都是单独的页面，那这些页面那都需要，并不是说访问页面代码的时候，通过代码请求接口的时候，然后接口那块要我们跳，而是我们在点击页面的时候，直接在路由层次上就要我们跳到登录页面了，不然的话，我们现在点我的，你看它会有一个一晃而过的这样的感觉，你看。

对吧，然后高清键登录。会有一晃而过的购物车，购物车咱先没写吧。会有这样的感觉，你看到了吗？这些是错误，没关系啊，因为你返回的时候没登录授权没成功，他给我反这个错误，OK。所以咱们不能让需如果需要授权才可以访问的页面，得先判断授权，不能让他有这样一闪而过的情况。

我看先访问个人中心，你看你要能眼疾眼眼快的话，你可以看到啊。就是这个，那怎么在个人中心那块判断这个，那我们就需要干嘛，我们是不是就得把这个登录，我们得详细的怎么的详细的去处理一下了，对不对，那需要在路由那块处理，路由处理有可能我们有多个地方处理，对吧？记着啊，路由如果不在模板里setup里用的时候，像咱们昨天写需要这么去写啊，需要这么去写，直接包含这个路由，这有路由对象了，不用通过呃，什么组合API的那个，什么use root那个那个去获取啊，直接这么获取，那获取状态管理也是一样的，那现在想判断它是不是登录的状态，那我们需要做几件事呢？想象一下，想判断它是否是登录的状态，我们需要做几件事，是不是就得在状态管理里边，这个里边我们得干嘛呀，我们得做一个这这是路由啊，这个这个是状态管理啊，路由打开吧，一会也用，你看在这里边我们得做一个状态，让所有的页面都可以先通过这个状态来判断是否是登录的。

OK，所以在这里边我们就可以做一个状态是否一般是否都用is block是否是登录的对吧，是假，然后我们登录上把它设成真就行了。看。那其实是否是登录的，那我们怎么办呢？这块因为这个地方虽然是配置文件，配置文件是不是也只要是写符合逻辑的JS语法是不是就行了，那我们在做登录的时候，你看一下。在登录的时候，呃，Log音这个页面里边我们做了一件什么事呢，你看。如果返回状态是200，提交用户密码对不对，然后服务器是不是形成ton对不对，形成ton，形成ton之后我们返回。

记得那几个要素啊，根据你的用户名密码对吧，到数据库查找，找到了之后再根据你客户端的IP，客户端的什么有使用的浏览器，以及服务器端的对吧，一些还有一些域名端口等等，对吧，这些一系列的信息给我们打包成一个什么加密的串，那个就是talking嘛，然后返回来，我们通过这个存到本地，所以呢，怎么判断成功的，其实我们对于这个简单的例子来说，我们只判断一个token存储在本地了就是成功了，对不对。那我们这个状态管理里边设置，那我们就可以直接更简单一些啊，直接我们从什么里边，从这个window里边的，呃，Location storage对吧，本地存储里边我们getm获到这个，那不直接写示真假值，如果本地存这个talk了，对吧，那是不是就真呢？是真的话，那我们直接存，那我们就是T，否则不存的话，我们就是假。

是甲就可以了，所以这样的话。可以这么去初始化这个值对吧？所以我们状态管理里边就知道了它的值真假值，如果是真就是登录的状态，如果是假就不是登陆的状态，对不对？当然了，我们还可以写一些方法，比如说设置状态方法，咱说不直接改状态管理的值对不对，而是通过什么？嗯，这个通过它去设置对不对，通它设置里边我们可以写一个方法，你比如说呃，Set设置这个是否log个呃，Log音这个方法它有两个参数sttee，对吧，就把这个传进来，然后呢，再呃，传一个附件过来，附件就类似于咱们说的真假值对不对，然后state里边的呃，A log in这个让它等于什么。

呃，让它等于这个通常我们用户里边，因为状态你这么写的话，登录状态，登录状态属于用户的行为，用户有可能有很多状态的，比如说用户头像啊，用户的ID啊，对不对，那咱们最好是把它放到可以放到这个对象里边这么去做啊。这样去做，这样的话，我们假如假如保存不光是保存这个用户登录的状态，那假如说如果是做PC页面的时候，那我们保不保存用户名对吧，你不能说每次都从数据库获取啊，只要登录一次就把用户名保存到状态里边，那这样的话，我们在每个地方是不是都能获取用户名，用户名，然后还有什么，还有什么用户的呃UID用户的ID对吧，假设咱需要的话，你可以设置什么，可以设置多个听懂吧。

所以这咱们最好用这个啊，所以这块咱们就是优点，这个ALV咱拿用户名，这个在移动端不是说每个页面都显示用户名，对吧，没那必要吧。你要PC端，你看上面的一个菜单栏，每个页面都显示用户名，那是很正常的，对不对，然后比如设置全真价值就可以了，所以呢，我们在其他的地方一旦一调用这个方法就可以了，设置登录，所以呢，我们在设置登录的时候，你就登录页面，登录页面我们在设置登录的时候，这里边儿我们就得。呃，用什么把这个状态管理，是不是就得。就能拿到了。From，呃，从V里边，因为用到状态管理，然后呢，我们u exu ex store到存住，然后这里边cost costus，呃，是T，呃，Or等于useto。

嗯，获取到这个，然后会到这个之后，你看我们一旦对吧。设置完这个登录成功，登录成功，登录成功我们一定干嘛呀，就把这个状态也重新设置一下，状态重新重新设置一下啊，比如说sto现在是不是这个，然后通过调用状态管理里边的，状态管理里边的。这个里边的属性，就这里边的方法对不对，那我们是用的commit吧，对不对，然后里边的Co m MIT用这个方法，然后调用到什么，调用到这个方法对吧？然后呃，比如设置成功应该是什么处啊，是针给他一个帧，这样的话就把状态管理里边一登录成功直接标记它对不对，而状态管理里边那默认值是刷新第一次登录的时候去改值，那这里边呢，我们只要是一登录成功，就把这状态管理给它变一下，对吧？然后呢，它也是详细的其他地方用到这里边的状态管理给变了，那登录里边需要设置这个，那我们是不是还有退出登录啊，退出登录我们是在个人中心里边对吧？个人中心里边找到个人中心哦，这个这个这个。

登录登录这块里边啊。这里边儿是不是就退出啊，那退出的时候我们是不是也调用它，然后呢，设置一个假值对不对，但是呢，提前我们也得把这个都包含过来。呃，VES这块包含进来了，嗯，VES。存储好可以了，那这样的话，我们只要现在一登录，那就是在所有的页面都可以访问一个状态，就是这个a log。

这步咱们做完了对吧，这一步做完了，那我们怎么在路由里边判断，你看路这里边判断，那有些页面访问的时候是不需要授权就直接访问的，但是有些页面呢，是需要访问的，对吧？所以呢，我们在需要访问的页面里边，需要访问的页面里边，比如说这里边首页需要登录吗？跟登录没关系，不需要，那这个需要登录吗？也不需要，对不对。这也是首页，然后分类页面需要吗？也不需要，还有呃，这个商品先请页面需要吗？不需要，但是购物车页面是不需要登录，所以呢，我们这块如果需要登录的，我们再加一个属性，用这个a auth就是标记你给哪个页面，因为哪个页面归路由控制，所以在路由里面去标记这个页面是需要授权的，对吧？是否授权的对不对？必须授权的，那咱们加一个re e就必须的对不对？然后给个指示针，所以呢，只要是我们哪个页面需要授权的，我们就在这路由上做个标记，对吧？个人中心需不需要。

分类不需要个人中心需要吧，需要的就来标记对吧，然后呢，商品详情需要吗？不需要，用户注册需要吗？不需要。登录。也不需要吧，对吧，这些都不需要吧，那其他页面，假如后边咱们那个订单购物车是不是那些都需要啊，对吧？购物车咱们咱们加了对不对，你看这个购物车个人中心详情不需要注册不需要，登录不需要，因为注册要需要的话，他还没有注没有用户呢，他怎么用啊对不对，登录也不需要啊对吧，它是设置登录的，所以这些都不需要，但是后边的像订单页面对吧，像我的收藏页面对吧，地址编辑页面那些东西都需要。

那需要的时候在这标记，咱只是说一下这个流程啊，那有了这个标记了看啊。看前置路由导航。在这里边我们需要做什么呢？在这个里边我们需要的就是什么。这个路由就是前置路由导航，就是到别的页面之前，对吧？从一个页面我页面跳之前，对吧？从一个页面往另外一个页面跳之前，我们就得先判断另外一个页页面，也就是目标页面是否需要我们去登录才能跳过去对不对，所以我们在路由里边是不是标记了，在路由里边是不是。像这个标记了这个对不对，所以呢，我们就可以这么去判断。啊，如果谁啊，要到的那个D页面是不是to代表那个路由啊，要的页面Meta里边这个值它是不是真对吧，就告诉我们意味着咱们标没标记它要到的页面对吧？要到的页面是否需要授权对吧？如果需要授权，那我们看一下我们授没授权，那怎么看是没授权，你可以嵌套协议，可以并行写怎么的呢？那看判断一下现在是不是登录的。

咱们怎么知道是不是登录的，是不是刚写完在哪呢？是不是在状态管理里呢？那状态管理我们怎么怎么获取到这个，呃，状态管理啊，想象一下是不是跟获取路由一样，跟获取路由一样，直接I port获取到这个t from直接从什么现在这个目录是路由的目录回去是不是到相当于src目录啊src目录下是不是有一个store目录下边的什么index的点JS对不对，这样的话直接就能获取到这个存储对象。OK，直接能获取到它。这不用管错误，因为它下边代码没没写全对吧？那获取到这个状态管理，那有了它，那我们是不是就可以直接访问他这里边的那个it log那个属性啊，判断这个页面是否需要授权对吧？如果需要授权，那我们再判断它登没登录，因为这块咱们用了一个短路运算符的一个什么一个判断，那就从SQ re这个里边是不是有s sta啊，它这里边是不是a log音啊对不对，如果这个的值是甲，你看如果需要登录并且呢。

登录状态不是真，因为是真的话就走就行了，对不对，那不是真，是不是就假呀，那是假的时候我们怎么办呢？是不是这个时候就开始跳转了，对不对，那跳转之前我们最好给一个提示，给个什么提示呢？给一个提示，提示我们找。中泰关那个那个。

Request里边找一个这个，把这个拿过来。用这个消息提示的就行啊，消息提示轻提示，你用哪个都行，状态管理路由，找路由里边，嗯，把这个拿过来。用哪个呢？用这个吧，那我就去掉一个。两个用哪个都行啊，嗯，然后这里边。这个通过这个提示一个消息对不对，然后客气点，可以说您还没有登录，然后请先登录对吧。在这点之类的都可以啊，然后没有登录，请先登录是不是就得跳转了，那跳转之后那说包含一个路由行不行啊可以啊，包含一个路由。可以包含一个路由对不对，那怎么能防止它去跳转呢？怎么办呢，或者是呃，不继续到其他的页面呢？当然了，如果这个成功，否则咱们就去掉就行了啊其实呢，在这个什么这个前置路由首位这块，那我们还有一个参数就是什么，它是一个方法就是next。

还有一个参数啊，它是一个回调方法，回调方法什么意思？那如果我们假如写这个参数了，那你就必须干嘛呀，必须干嘛，假如说条件成立的直接通过得调用了，写这个方法就得调用了，不然过不去，听了吧，这块是一个什么一个关卡，那的是一个关卡，OK，如果写这个参数了，你就必须调那个参数，V12是必须有这个参数的，V3这个参数是可选的，知道吧，写这个参数了就跳过去，不写这个参数怎么了，就不跳过去，然后呢，这个这个函数还可以干嘛呀，你里边它可以当路由用，因为本身现在咱们就在路由里边，对不对，可以直接当路由域，比如说到烙给。

到了V，也就是没有登录就直接到了V。那这个时候我们如果一旦写好这个了，现在。你看一下我点首页。你看我的也就个人中心需不需要授权，个人中心找一下是不是这块需要授权，对吧，然后你点这个任何导航是不是先走这个。就想到个人中心，它就会因为你点这个的时候，他就往这到这块来嘛，到这你看这个页面需要授权，然后登没登录呢，现在它是没登录的，是不是等于甲是不是提示你这个到这块来，所以咱们先看一下我写错了，写错了往放多放了一层对不对，所以这块没有啊，这块里边的谁啊，里边的是不是US1。里边的这个少了少了一层对不对。

你看这回咱们得点我的，你看直接到这儿来对不对，先点首页再点比如说我的。你看。是不是个人中心的页面就没闪了？不然的话，个人中心先闪一下，都请求接口，接口再给你返回对吧，那样的话什么进去了就相当于你去别人家对不对，他们家有个大院，有个内院对吧。你如果不这么写判断的话，是到内院的时候，里边的一些仓库或者什么小门进不去的时候告诉你对吧，你没经过授权，而这个就在大门是给你封死大院你都没进去对吧。是这样的一个关系啊，这个页面先都不让进，你看过来了，哪怕从其他页面往过往过转也是这样的啊。你看个人中心这样会好一些，那后期再转其他页面也是一样的，不会说先晃一下再过去是这个目标啊，那这个咱们整个登录过程咱们这才算完成，OK，那这也就把整个程序的架构完成了，咱们再往后写所有东西都是在写什么，都是在写逻辑了。

OK，就是业务流程啊，其实这也算业务流程，但是这个呢，算是架构的一部分。明白吧，就是考虑到一个写项目的一个呃，程序的一个完整度，明白吧。好，这是登录的这个程序，那咱们现在就把后边的，因为后边没有什么太多知识点，都是逻辑啊，跟现在的思路是一样，我再给你用源代码给你呃捋一遍，然后其他模块给你看一下就行了，不然他能写都是重复的写，都是用系统组件，然后连接数据库，把数据把逻辑走通，对吧，其实就是看你对接口那个逻辑了不了解就行了，然后就能把程序写出来了，这整个架构。好，那我把这个就先关掉。林馆长，然后呢，咱们有这个程序完整的，你相对完整吧，也不能说完全完整，有些功能我也懒得写，OK，因为毕竟说是一个教学的，不是说那个商业的项目，没像商业项目那样做到100%的一个完美，什么叫100%完美，就是疯狂的测试，听什么有任何的飘红的地方都不行，就这种。

然后样式上咱们要做到是真正的商业项目，要做到什么呢？任何一个像素都不要有差距的那种。整体的配色对吧，字体大小，所有东西都要怎么的符合设计逻辑啊，那是商业项目的一个要求，所以商业项目大家要多做的话是很有帮助的，但是所有人都是都是一个想法啊，如果能把这个项目做成完美，那是不可能的。怎么说呢，相对完美，然后反复测试，让用户不断的去找毛病，对吧，测试的周期一般占开发周期的，一般的最少是1/5的。

好多人说不用测试直接上，这样的话风险太大，清楚吗？你会遭一身埋怨的，所以要留出1/5的时间作为测试，反复的测试，反复的试运行，然后呢，自测团队测对不对，当然有测试部门更好一些大项目，然后测完之后根据错误报告，在修改完成之后才去上线啊，那咱们这个也没经过测试，什么都没有对不对，因为咱们是想找到开发思路，找到这个架构的一个设计，一个逻辑，这样的一个关系啊。所以呢，如果就现有的功能，就哪怕是按照咱们设计的功能都写完对吧，那优化有可能代码都是现在代码量的什么三倍以上。请优化好清楚吧，就是我说的代码不一定是GS地方的优化啊，我说的地方是什么呢？是CSS地方优化。对吧，因为页面看起来非常的漂亮，现在呢，咱们一访问还有一些问题，好多判断咱们简写的没有去做，不然的话咱们一步一步都得去判断啊，那这个像。

我直接拿到。这写好的，其实就在咱们的基础上就往后加功能啊。我把它放到我们的。我先把这个。嗯，放到那个线上吧。放到线上，你看一下这个项目怎么的一个安装过程，然后呢，咱们再一步一步的。一步一步的去捋代码啊，得告诉你后边的代码思路是什么样的。给你完整的装一下上线的一个流程啊。看我上线流程啊。以后你们做项目上线也是这样的，当然了咱们做前端上线还是相对容易一些，如果是后端的上线的话，线上测试的话，那你要配置好数据库对不对？因为好多性能上的东西都是后端带来的，咱们前端这块有什么性能可以处理的，实稍加点缓存对不对？你比如R请求过来的数据，如果有对吧，在不刷新情况下做个GS先缓存一下之类的，那VE本身也有标签，缓存标签都有这些东西啊。

然后呢，优化优化图片对吧，请求什么别太多。然后咱们本身就有打包工具，所以呢，这些东西咱们是不用说太处理的。影响所有效率都是接口的效率，咱们接口，咱们接口本身就慢，因为教育接口服务器也低，然后数据不多，也没有去优化，所以什么都没做啊。来咱们看一下这个对吧，现在是放到这了，那如果我现在放到这个外部服务器，外部服务器下了啊，那外部服务器这个是3W下边这里边咱们。缺少个页面，假如默认访问这个服务器根目录啊，音带点。嗯，而TML吧，就PP大家不熟，就不写PP代码啊，然后这里边写上。

我这块随便写一个，就只让大家开启这个服务器，知道在这啊。好，这里边儿咱们这块就。试给我关掉没用，就是随便写几个字，然后我们开启web服务器，这个搜索一下叫wipe wmp wemp server。等这window装这个，在在那下边大家可以装那个，如果大家学后端的话啊，现在的服务器可以有那种宝塔，挺好用的，用那个宝塔。

那个就是不用什么配置了，你要是大项目的话，肯定都自己配置环境对吧，不会用一些开源的，你像大企业大厂的那个外部服务器环境，那都几百台几千台服务器的那种，对吧。但是你要是小的，你就一台服务器，租个云空间的话，用宝塔就行了，嗯。万八千人访问，都可以拥抱他。好，开启服务器由红变绿就可以了，这个时候我们在访问本机的时候，你看啊，在访问地址的时候，实际上就不访问了，Local local host，默认服务器是八零端口，直接log host。然后里边没写字符集。没写那个那个字符集啊，这块就是刚才我写的那个对不对，首页。

行了，你先这样吧。嗯，这个也也不重要，这个页面，这个不是咱想做的页面了，就是告诉我们能访问到这个外部服务器，我程序在这对吧，那现在在服务器上。当然了，我们可以从getate那个里边把代码拿过来啊，咱先不管那个CMD，那我们可以用工具，咱工具不也命令行吗？你服服务器上它的利一下或者什么你都可以用类似于这样的命令，我们进入回到这个进入什么进入，呃，WINPE64里边3W下边可以记进去对不对，然后里边有什么有这里边你看啊DR window一下DR你一下是LS啊DR你看这里边是不是有ew shop这个目录和这个音带点示TML对不对，然后我们进入这个e shop这个目录进入进来看一下，这是我们这个程序这一页里边呢，没有什么，没有我们的那个第三方的软件包，对吧，但是我们是不是有这两个文件那。

现在我这机器里边，服务器里边，我们是应该是都是怎么装好node的，也有NPM，所以呢，N PM in store还是这个过程对吧。我们装一下。咱本地模拟的环境跟服务器环境基本上差不多的啊。你看过程是一样的。集装。看装多少个包。应该没有1000个。等的啊，700多个包对吧，你像我像我们那个，就像我们一般这块都会显示对吧。两三千呐，这样的一个对吧，那是大项目，这咱小项目用的第三方包不多，因为你装一个软件，它有可能由来好几十上百个，对不对，所以项目数量跟这个没关系啊，这大部分现在咱们装这个，现在还是在本地运行，并不是打包之后的，打包之后这些咱们都用不上，你看现在整个的程序，我给你看一下装完之后这个大小。

因为这是开发环境对不对，刚才能装完也是这个依赖包呢，都在开发环境里边，占用空间这么大，对不对，有这么多文件，你可以先记一下。这个。保存一下啊，然后我们在。记录一下，找个滑头。嗯。这个这个现在是开发环境对不对，然后我们现在就可以在这里边什么你直接NTM ruer，这是干嘛呀，这是不是DV server啊，开个服务器啊，咱现在已经放到服务器上了，你看这个W就是这个服务器对不对，本地的呃，本地的服务器。

对吧，已经正常运行，那我现在已经在服务器上了，我就不用这个开发环境服务器了，对不对，用自己咱们自己装问这个服务器就行了，所以不做这么做，咱但是咱需要打包，需要打包啊，这里边儿现在有这个打包会生成diss的目录，当然打包那项目录名叫什么无所谓啊，咱们也不怎么用那目录，你后期改名什么都行啊，然后咱们build build build一下。应该打包。现在就是在给我们这些程序给我们打包，对吧，原来咱们开的是server DV server d server在内存里边，不会是打包的，内存里边不会生成文件，OK。那这个呢，是直接打包到这个。嗯，服务器上。

等待一下打包应该在梳理程序，你越大打包上面越慢啊，但这个时间会是值得的。好，就我打包了，你看生成Dis目录，这个就是我们要的程序，其他目录你其实都可以删了，但是咱们说源码给保存着对不对，就不用删，这个就是我们打包后的程序，咱先了解一下自己打包后的程序，你看这个in袋的程序。打开它。等一下这个能说就是咱们编写程序的时候，原封不动保存的这个程序，对不对，原封不动保存这个程序啊。然后里边给我们作为主入口的，所以呢，你整个前台项目打完之后，你没发现吗。如果是不是用那种虚拟的啊，那咱们就这一个入口文件。所以给别人感觉就这一个页面一样，但这一个页面能分出很多个页面，你现在看结构啊，再回过头看这一个页面对不对，然后呢，程序代码你看。

他给我们那个压缩了就这么点代码，看到了吧，主入口文件UTL8字符集，刚才他说刚才的那么一家嘛。这个打包的都加了对吧。什么也没有，就这么点，就是原封不动的程序打过去，这是咱们那俩图标对不对，这图标也没什么用，因为我们没删对吧。然后。当然你在原程运删，因为在publi目录下，这俩是这三个是在帕内目录下原封不动拷过来的啊，只不过里边挂上JS，然后呢，咱们看图片。你看咱们用的时候用那么多图片对吧。那用不到的图片就没给我们打包进来看到了吧，像这个缺省的图片，什么购物车为空的logo的，什么缺省头像的，这个就用到了这几个图片，而这几个图片，这几个图片除了这个图片和logo，那其他的呢，还有这个，这个都可以用什么。

都可以用图标啊，但是他现在没用那个图标这块，直接用了一个图片就告诉你，你只有在用的图片才用上，其他都不用，所以打完包之后，你不管这里边儿对吧，在写项目的时候，有几百张几千张，多少个目录对吧，都不一定能打包的程序里边就别怕这里边存太多文件，如果你不用打包工具的话，那你写项目你写多少他就存多少就进来，对不对，就像我们在这里边，你看src里边，里边有很咱们这个还没用到多少。没用到多少这个垃圾文件啊。那个三。咱这都是教学用的一些演示的图片对不对，但都都用过了对吧，然后但是呢，也在这个目录里边，但程序里边没关联，他们那打包时他就不会进去，你看有这么多对吧，那当指这个这个这个这个，然后打包的时候，给我们生成了一个新的那个那个名称对不对。

这几次里边这是这个图片目录，然后我们再看CSS目录，给我们生成了独立的CSS，你看这公共的对吧，离开你公共APP的这个，其他的是不是跟页面相关，也就是我大的用的组件，用到了哪些组件。就是页面及组件或者什么组件也好，对吧，用到了组件级别的，然后在组件的CSS都会生成一个独立的CSS。这样的话它尽量独立，那每个页面加载哪个GSS就可以按需加载了，那这是按需加载，那你咱们还还记得这个GS，我在路由的时候代码关了，在路由的时候咱们是不是用按port那个方法去导入的，所以呢，GS它也不是在一个JS里边，也这么多JS，一个页面及组件会给我们打包成一个什么JS，对吧，一个组件打包成一个JS这样，那这个。

你看。也是按需取，你加在哪个组件就把哪个GS拿过来，加载哪个组件就把哪个csi拿过来，对吧，这都按需取，那这些结构灯都不用改了，而且这里边你可以任意打开一下，基本上都是什么。都是给我们。嗯，加密过的，你看都是这样的。明白吗？这就不多说了，什么是加密的格式，能请外派的时候说过。所以这就完事了，那完事了。咱们你可以直接把目录指定到这块去访问啊，现在假如说访问这个的时候，那我们如果这么访问是不行的，你看啊，比如说里边的这块直接访问到那3W目录，3W目录下边有个ew shop目录，然后DST目录是不是到这个下边默认有音带点TM吧，你一访问它会出错，告诉我没找到，为什么，因为他打包的时候。里边指定了那个路径，是指定了斜杠根路径，咱们有个帕什么什么那个那个指定了根，所以你看这里边从根下去找GS有吗？没有，而这些GS在哪？你看local house，我现在用的是local house的对不对？然后跟下边GS找这个GS找APPGS找首页的这个JS对吧？找跟下边这个图片是不是都从跟下找啊，因为咱们在。

里边配置的时候跟指定的，就是当前的那分也是打包的时候，他就认为什么认为。我们这个。嗯。他都是根会认为这个项目打包了，它所在目录是根，所以找当前目录IJS这个这个，但是log后找的时候跟他认为当前目录下其实访问到了就什么这个目录下，所以这么找是找不到的，对吧，那怎么找，那我们可以把整个程序原封不动的，比如说CTRLC对吧。他不从根开始找吗？这个才是外部服务器的根，对不对，那我们可以怎么呢？可以把它粘到这来。

粘到这来，这样的话，这程序现在就很小了，一会我再给你看大小，那这个时候我们直接就去掉这个去访问就行了。你看这程序就可以加载成了完全正常运行对吧，这直接到跟上面才能找到这个路径，但是如果这么做，那我们一个外部服务器就只能放这一个项目了，别的项目咋放对不对，是不是用目录你可以分成这里面放十个目录，你就可以放十个项目啊指定对不对，所以呢，这里边。撤回下删除掉对吧，不这么放，那我们把文档跟目录外部服务器指到这地方就行了，用虚拟机的方式指到这个目录下就行，对吧，或者是你干脆点原代码在上线的时候不要对吧，每次都在你本地编译，编译完之后形成这个目录，只把这个目录可能西传上来。只把这个木这么传上来。对吧，你就可以把这个目录删掉了，这个目录OK，那这个你比如说改个名对吧，不改名也行，没有必要，你或者是直接这个下边都行啊，直接往下指都行啊，或者是把它粘到上面一层就行了，那这个就是我们最终要的程序，我们来看一下它的大小。

三兆看到了吗？项目三兆，而这个三兆呢，是按需加载你每个页面去请求的时候，首页或者什么对吧，就不会有太多的这个大小了，当然了，你看服务器给我们传递的数据请求多少，在优化的时候对吧，优化请求多少，你就通过访问这个时候，通过这个网络对吧，你就可以看到这个请求，请求多长时间对不对，一共用了多长时间，对吧。可以刷新一下，当然我们的我们的山狼山狼。你看283毫秒这个首页，但是你现在访问这下边还是错的，他找不着这个根对不对，所以肯定是错的，那我们怎么办？做虚拟主机，假如说我们放多个目录，就放这个下边咱得指定个域苗，对吧？那怎么做虚拟主机呢？找到这个是wimp，是wap，那H的是阿帕奇啊，所以用阿帕奇，阿帕奇呢可以配置虚拟主机对吧？它虚拟主机错误日志访问，这是经常看的一个文件，这主配置文件，所以呢，这个单独一个虚拟主机打开它就行。

然后这块有访问默认跟的这个虚拟主机，对吧，然后呢，这里边我还随便做了一个演示的，以前做的这个XS的，那找一个粘过来。粘过来新主机，这里边指的服务器名就是你的域名是什么，你想用什么域名访问，比如说3w.w e shop，对吧。这个域名，然后呢，呃，这个子域名子就是那个别名EW shop.com啊，然后访问的是哪个目录，访问的是3W下边DST，你看指定的文档跟目录，也就项目所在目录直接指到这块，所以呢，咱们直接请求的域名的话，就直接到这个目录下是针对吧，就是安装目录下边的3W下边这个目录下就行了，然后别忘了这个后边没有斜线，这个后边是有斜线的，这是有一些区别的，只要改其下这就行了，然后DST就是复制一下，把域名一指向这个域名对应的是哪个目录就完了，这个目录就是跟了对吧？好，这个就可以关掉，关掉之后它一定得怎么呢？一定得重启。

你可以重启所有服务对吧，重启所有服务，这里边装的这些服务都重启了，什么买CQ啊，对吧，P那个那个阿帕奇啊，这些服务他都会重启啊。变红是停止由红变棕对吧，再变绿，这就启动了，那启动现在我们是不是那个域名还没有呢，那咱找一下这个域名。你可以，如果你是像样服务器有个IP，你买个域名，然后挂过来对吧，指向过来就行了，那我们这个没有，那我们就用host模拟一下吧，Host模拟一下。

啊，在哪里，Window下边，Window下边本机有host的，就平时做实验指定域名的，或者是公司内部的内网的一些东西，咱们用这个啊，不然的话肯定都买个域名啊，然后。这个window下边有一个STEM32看你看这个路径，记住这些路径就行，然后它下边有个drivers对吧，Drivers下边有个ETCETC下边有个host这个。打开。这里边你在这里边整域名还不花钱对吧？RD让这个IP本机的这个IP对吧，或者你先让的IP对应E对应的是ew shop.com就行了，对吧，这个文件不用干嘛呀。这个文件不用重启任何东西就好使了，怎么好不好使对吧，我们再开一个终端CMD。

拼一下就行了。Ping ping一下3w.ew.com。那是通的。你看这也是通的了，对吧，本机的，听这个的时候是本机的对不对，然后丢失零个发了三个包，我就肯T定C了对不对，就是零个包肯定是通的，通了之后我们现在一访的域名是不是就能指定到哪啊指定到我们这个目录下。这个目录下对吧，那只能这个目录下，是不是我们这个程序就可以访问了，来试一下。这块就可以3w.w.com回车。有问题了，你看什么问题？

他这块访问这个域名的时候，他到真的这个域名上了，比如说我们做一个虚拟百度对不对，那我们应该用什么，应该让这个的优先级高，但是他优先级没高对不对？默认先都会找本地的hosts文件的，再到网上找什么DNS服务器的，但他找DNS服务器的为什么呢？那肯定是我们机器有代理了，对吧。怎么说我们机器有代理呢？记不记得咱机器现在开的是科学上网啊，这个小猫的图标啊，你看。是不是系统代理开着呢，那我把代理关了。你看代理一关一关之后，我现在就访问不了，比如说我再访问谷歌，呃，3w.Google谷歌。我就上不去了，对吧，这就证明我代理关了不能科学上网了，对吧，那。但是呢？我现在再回到。

这个页面，那我现在再刷新一下你看。就可以了，对吧，咱们现在这手机上市成功了吗？所以你看那个错误提示的原因，想想原理，但是大家如果新手的话，有可能说这些东西你想不到，但是你不装那代理你也遇不到这些问题啊，如果对网络什么东西熟的话，就是很快想办法，很快能定位到这个问题在哪就行。OK。你看能定位就行，这样的话，咱这程序就装上了，然后你看到首页，这这现在就首页，然后到。可以首页直接跳转到商品，商品详情页，也可以到分类页面，OK，那这个里边呃。我就直接在线上给大家演示了这个咱们这块是拷出来的目录，对不对，那这个目录其实就有不有就就无所谓了，对吧。你把那个粘出去了，到时候咱们如果有改动，咱们得重新打包啊，然后再拷到那目录下，重新上线就行了，这里边打开。

我现在在。相关的所有。关掉所有。这个。关掉了，重新打开这个项目。就直接在这打开了。最以打开这个我就不开第server了，直接打开这个目的是给大家看代码，你你这样的话能让大家看到什么，打包完之后的和我们在开发环境运行的感觉，它的运行的效果是一致的，就是在内存里边，那什么我就不执行NPM什么RSVE了，对不对，因为咱已经上线了，就直接上线开发的时候，你肯定得用这个开发啊。嗯，我这洗盘这块，但这块怎么搞呢。

这个终端。这怎么有有缓存呢，你看和我的项目不是在同一个目录对吧，这无所谓了，我就不切了，你切换到这个现在这个项目的目录对吧，就行，咱就可以看一下这里边的代码，那咱现在运行一下这个这个程序。找一些细节的东西啊。这块是首页点分类页面，嗯，这块我多加了一个加载中对吧，然后还是排序方法这个。然后在前端，比如javascript。现在中你看这是加va的里边的书对吧。然后呢，呃，后端。PP。

这个还没调过去，这结果太特，结果特慢。嗯。那才过来。才过来。然后可以按价格排序，因为就这页数对不对，按这个排序，然后我们还可以。其他你可点了，跟咱们原来那都都是一模一样的啊，然后现在咱们会会往下走，点任何一本书的时候。是不是到这本书的详情页面，详情页面如果有小图标，有多个图片的话，多个图片之后放小图标可以切换，或者这块做个幻灯片幻灯图啊，然后这里边嗯，加上了这些东西，你看啊。这个多少件多少件，这都是可以点的，但这里边加入购物车和收藏，你现在给我点一下，你看我现在点一下收藏会出现什么情况呢？收藏是不是得需要登录之后才能进呢？对吧，先点收藏。

你看是不是它会跳到这儿来。对吧，所以呢，咱们需要登录的，咱就加一个登录就行了，呃，注册一个注册一个是EW123。用户名。呃，得先注册啊，注册这块EW123，用户名就是这个吧，密码E23。简单点E123，因为我们限制长度，然后呢EW123，艾符w.C低调。哦，现在六个字符1234。注册成功。然后这块用户名，嗯，EW123密码是。EW1234。对登录的一次验证一下。艾特ew点心。

登录成功应当是从注册过就可以了，然后这个时候咱们现在已经登录成功了，先看个人中心。个人中心就会有什么EW123这个就能看到这个名称，对不对，对吧，那个人中心这块头像这里边也可以设置啊，你可以参考里边的代码，比如说找一个这个。对吧，可以设置这个头像。呃，我的订单什么都可以啊，支持。然后呢，咱们再到。商品页面怎么再回来？再随便找一本书，比如人工智能这本书啊，这本书有2000多本。然后现在再点收藏。你看。就正常了，对不对，然后呢。点击假如，我再换一本书。再换一半儿区块链。

区块链对不对，我在收藏。就有这个收藏了，然后到我的里边，是不是就有我的收藏。是不是就这两本书刚才收藏的对吧，这本书我不需要了，取消收藏。我求收藏跳转这块你做啊，等这块你到时候你自己修改一下就行了。这小问题自己判断一下就行。然后嗯，说给大家补的这个功能啊。一会再给大家看代码，这里边有一个咱前面做过的，就需要优化的地方在哪呢？有一个知识点大家都知道，你看。收藏的，你看这相关图书的时候，咱们自己做的时候，一点击它是不会跳的。那个我忘给你写那功能了，为什么一点击不会跳，想象一下咱们现在做的。咱们现在做的那个。

啊，一会你自己运行一下吧，你运行完之后，咱不也做这详情页面了，你点击它是不会跳的，为什么不会跳，要注意一点什么呢？因为你要从别的页面过，这个页面是可以的，你是在本页面对吧，本页面你只是。对吧，导航地址是一样的。导航地址是一样的，他不会给我们更新一下再请求，不会再请求，不像从别的页面再转过来，把这个整个模这个组件销毁了，然后得新建，新建的时候又请求了on Mo才能找数据了解这个问题吗？对吧，我们从别的页面到这个页面，是这个页面新创建的，新创建就会执行什么呢？在这里边找一下这个这个商品详情吗。你看这个商品详情里边。我们只有这个组件新创建是不才能执行这个。

对吧，因为组件创建完执行这个执行一次，对吧，而我们点击什么，点击我们这里边一个图片的话，我们只是换了一下路由地址，对吧，并没有切换到新的组件，这个组件并没有销毁，也没有重新生成，没有销毁，没有重新生成就不会执行什么，就不会再执行到amount，不会执行到amount就不会调用初始化，不会调用初始化就怎么的，就不会给我们。初始化到哪去这块就不会改变一下这个，然后呢，重新调用接口，请求一下数据，把新的ID的数据给我们过来，就不会做这个事儿，对吧，所以呢，在同一个页面。商品详情页点相关的，然后呢，让他能重新请求，我们需要做的就是这个ID变了，我们重新调用一下这个方法，那怎么能判断这个ID变不变，那我们就需要干嘛呀，需要在这个地方加一个watch watch什么东西啊。

什么东西是不是监听啊，监听监听什么，就监听一下，你看用这个轨的方法监听路由里边的这个ID变不变，如果ID1变化，是不是新知和旧值就不同对不对，新知和旧成相同的话，就证明相关图出你点的还是自己，那就不变对吧？也别切换页面，也不重新接口，那如果新ID和旧ID不一样，有变化，那就干嘛调用一下这个方法，那这个方法。是不是他就被调用了，它调用是不是这个ID就会干嘛。付给他这个就是变化这个ID，就会给这个ID，然后重新请求接口才能切换，所以呢，你原来写的那个点击这个相关文章是不会变的，但是我现在就会变，为什么？就是因为这样的一个原理啊，其实这个会被大家忽略，因为咱写这个页面的时候，虽然当时粘的，但是我当时也忽略了这个，对吧。

也忽略这个，后来想起来就给大家加上这个功能，因为像我们些项目，经常有一些工程师他都忘这个功能，就本页面里边，比如说相似的或者相关的呀，特别是详情页里边经常会有这样的东西，对吧，它不会变化，OK，那还有就是假如在分类页面里边，我们其实也是一样的啊，分类页面我们有的时候你看点击这个东西。你现在咱们这个变还好，对不对，重新请求了，那有的地方不变，为什么不变呢？因为它点击了重新调用了I it，这个还是接口慢啊，这不是咱错误啊，重新调用了it it你就不用监听，你每点一个或者每点一个都重新调了I it，重新加载了，这没问题啊，对吧，但是如果没调用。

那就相当于这个组件没有销毁，你如果都写在amount里头就不行，都写在amount里头不行，你看咱分类里边就不是写在amount里边了，分类在哪呢？这个，那咱们这里边是不是int对吧，梦的时候是不是定int对吧，然后呢，只要是。只要是。喜欢。你看这块对吧，点一下ID的时候，是不是调一下I it，那是不是也是重新取啊，I it里边是不是就根据当前的这个东西啊，对不对获取啊。对吧，所以要知道这样的一个一个过程啊。你也可以加监听，都可以加监听，OK。