前言

前端在我眼里一直不是一个省油的灯，这近一个月，也让我走尽了弯路，要不是同事有相关的经验，不知还要陷在其中多久。说几句牢骚话，信息爆炸的时代，最可怕的不是找不到，而是找到的太多，无从辨别而无从下手。同时，技术的更新太快，人家的教程，你用最新的工具可能就会报错。踩了很多坑，总归想要留点新坑，所以就有了这篇文章。

需求分析

第一步，我们先尝试回想下一个常见的登录项目的场景是什么?

1）有一个登录界面，界面要求输入用户名和密码，如果可以，还需要验证码模块。登录界面也应该可以包含注册功能。这是登录界面最基础的功能要求。

2）有一个展示的界面，也就说登录成功后得有一个界面来展示用户所需的信息，存储用户特定的信息。

3）当我们不注销用户的情况下，下一次进入登录界面，可以直接进入用户界面，或者说直接进入用户界面的地址，可以进入自己的用户界面；如果是未登录状态，则无法直接进入展示界面

实现

设计

世界那么大，我想要模板。这个模板，指的不是说完全可用的一个完整 demo ，指的是组件 component 。前辈们是写了很多可用的组件并汇集起来了的。比如说官网，在搜索框里面输入要用的组件类型，以 Form 为例，可以看到有不少的实例，最下面还有接口文档。而实例的第一个，就是我们这个项目需要的登录框。我的这个雏形项目就是使用了这个登录框的源码实现的。

先说模板的事情是为了尝试消除各位和我一样的初学者的畏难心理。其实我们更像是设计师，我们指定了一室一厅，就可以找室的模板和厅的模板，将模板安装上来，之后具体怎么造的，并不需要我们去关心。

在有可用组件的基础上，我们考虑下我们需要设计的东西：

1) 我们得有一个跳转的系统，当我们登录成功之后，可以跳转到展示的界面。同时，在展示界面得有一个注销的按钮，可以跳转回登录界面。

2）我们得有一个类似于 session 或者 cookie 的系统，不然的话当我们退出登录后，所有信息都会丢失。这个系统不能存储在前端，不然项目重启意味着信息全部丢失。

初始化

vue 的下载，我参考的是菜鸟教程网站，使用的方法是 npm 的下载方法。这个方法的好处是可以初始化一个项目模板，使用命令是 vue init webpack my-project 。我写文章的时候，初始化的结果和网站上给的图是一致的。

下载完成后，使用 idea 工具打开项目，配置运行的方式是:

Name任意, Command必须为run, Scripts必须为dev

配置完成后，就可以运行了，默认会打开 localhost 的 8080 端口，可以使用浏览器访问下默认效果。

界面的实现

界面的本质是一个个的 vue 项目，存储地址是 /src/components 。打开这个目录我们可以看到项目初始给的 HelloWorld.vue 。可以清晰地看到项目分为三段结构：第一段是 <template> ，决定了网页的布局；第二段是 <script>, 存储着网页内部的数据和方法；第三段是 <style>, 决定了网页的样式。第一段布局的内容，就是设计中提到的模板的内容，也是写惯后端的人最不熟悉的部分，第二段的内容和后端的代码是同源的，语法角度略有不同，第三段暂时不做讨论。

设计的实现

1）跳转的实现，主要借助于一个工具，名字叫做 vue-router 。安装方法是在项目根目录下安装 vue-router。 

安装命令是 npm install vue-router。顾名思义，这个工具主要是用来控制路由的。使用方法是修改 src 目录下的 main.js 文件

先import后use最后实际使用

上图还是比较好理解的，当我们启动应用后， 访问  /  和  /login  会进入登录界面， 访问 /display 会进入展示界面。另外细心的读者可能发现 ivew 和 axios 出现比较频繁，前者是 css相关的样式，后者是 vue 向后端发送 http 请求的工具，暂时和基础的本项目无关。

路由变更的具体方法如下，很方便理解。mounted 是写在第二段 <script> 的内容，是进入页面就会执行一次的内容。我们可以用这个来初始化页面的数据。

this.$router.replace(目标目录)

2) 存储系统。我早先写项目的时候，使用的 vuex，参考了vuex学习。这个工具其实就是一个项目内的全局变量，你可以在这个全局变量中存入数据，这样整个项目都可以取到。比如说登录成功后，登陆的用户名得从登录组件传递到展示组件。而展示组件和登录组件有没有父子关系，无法使用 emit 一类的方法，因此使用全局是比较方便的一种实现方法。但是这种方法有一个缺陷：每次新打开标签，都相当于一个新的环境，刷新也相当于一个新的环境，也就是说，当你登录后，只要离开了当前标签页，所有信息都会丢失（当然如果你的项目本身要求就是这样实现的，那可以尝试使用一下）。

我正式使用的是 localStorage 。 调用 SetItem 可以设置本地变量，然后调用 GetItem 可以获取本地变量。这个变量是存在于本地的，因此即使关闭浏览器关闭服务，数据依旧会存在。我设置了两个变量，一个是用户的名字，还有一个是登录状态。

细节

使用 mounted 在用户进入具体的页面时进行一次初始化，如果登录状态为登录，则无论输入什么地址都跳转到当前用户的展示页面。如果状态为未登录，则无论如何跳转到登录界面。设置注销功能，可以设置登录状态为 false 且删掉用户。这些是实现的细节。

代码

有人需要了就放一下，git折腾了好久没成，先把我修改过的src里的内容上传，用了度盘。