登录功能分析

1： 登录退出功能：

(1): 登录业务流程
 1： 在登录页面输入用户名和密码
 2:  调用后台接口进行验证
 3： 通过验证以后, 通过后端相应的状态跳转到项目主页
（如果登录失败, 提示用户。 如果登陆成功, 根据后端返回的状态,  则跳转到首页）

(2) 登陆相关技术点：

 1: http 请求是无状态的
 2: 通过cokie 记录在客户端记录的状态
 3: 通过session 在服务器端记录状态
 4: 通过token 方式维持状态

 如果不存在的跨域的问题,  建议采用cookie 和 session 方式来记录登录状态。
 如果前端与后台存在跨域问题,  建议采用 token 来维持状态。

token； 原理 

登录页面输入用户名和密码 进行登录。 如果登陆成功,  服务器会生成该token 值, 并且返回。  并且在客户端存储该token 值，  然后该用户后续发送的ajax 请求， 都会携带该toke 值 （后续的请求都会携带该token 值）

然后在服务器端验证token 是否通过。  token 是保证登录成功以后的唯一令牌。  （验证的唯一身份）

1: git 命令

  git checkout -b xxx  // 创建子分支
  git branch    // 查看所有的分支
  





2: 在src 文件下main.js 文件是项目的入口文件。

3： <style lang="less" scoped>

    </style>   // 当前语法结构支持less,    scoped 指令, 控制组件样式生效的区间
    只要是单文件组件,  就需要设置scoped 指令,  就是就是防止样式之间的冲突。
    单文件组件肯定是美化当前文件的样式。 

4:  单文件定义好以后, 需要通过router 的方式渲染到页面。
    需要在router 文件中新建index.js 文件。然后在 index.js 中  首先引入Vue
    然后引入vue-router,   然后把自定义的组件通过路由的方式渲染到页面上。
    在 router.js 中引入组件,  配置路由规则。
    只有路由的规则还不可以,  还需要路由占位符  ===>  <router-view>
    然后通过路由匹配到的组件,  都会渲染到 router-view 组件中。

5:  只要是用户访问了 '/'     自动重定向到登录页面。
 
    {
      path: "/",
      redirect: '/login'
    },
 
 
6：vue-cli: 工具只是帮助我们创建项目,   并没有安装less-load;

7: 然后在css 样式中定义全局样式,  然后在main.js 中引入全局样式。

8： 如何让一个中间盒子水平垂直的做法就是: 
    {
      width: 450px;
      heigth: 300px; 
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }