如何创建Vue项目？我们通过GUI可视化面板打开控制面板输入vue ui

登录业务流程

1.在登录页面输入用户名和密码

2.调用后台接口进行验证

3.通过验证之后，根据后台的响应状态跳转到项目主页

登录业务相关技术点

·http是无状态的

·通过cookie在客户端记录状态

·通过session在服务端记录状态

·通过token方式维持状态

咱们的vue项目运行的一个新的端口号，服务器与咱项目之间可能存在一个跨域的问题。如果前端和后台不存在跨域问题，那我们一般使用cookie和session来记录登录状态。如果存在跨域的问题，一般使用token方式来维持登录状态。

如何通过token来维持状态？/什么是本地存储token？

1.浏览器在登录页面输入用户名和密码向服务端请求登录

2.服务端收到请求，去验证用户名和密码

3.验证成功后，将登录凭证做数字签名，加密之后得到字符串作为token，发给客户端

4.客户端将token存储在cookie或者localstorage中

5.客户端每次请求都要携带服务器签发的token

6.服务端拿到请求里带着的token，验证成功后，就返回数据

面试题： Localstorage有哪些方法？

Storage.setItem()方法用于存入数据。它接受两个参数，第一个是键名，第二个是保存的数据。如果键名已经存在，该方法会更新已有的键值。该方法没有返回值。

Storage.getItem()方法用于读取数据。它只有一个参数，就是键名。如果键名不存在，该方法返回null。

Storage.removeItem()方法用于清除某个键名对应的键值。它接受键名作为参数，如果键名不存在，该方法不会做任何事情。

Storage.clear()方法用于清除所有保存的数据。该方法的返回值是undefined。

Storage.key()接受一个整数作为参数（从零开始），返回该位置对应的键值。

回答参考：浏览器端数据存储机制

登录功能实现

我们用的是单页面组件，首先定义一个Login.vue的组件。接下来在router.js中通过路由的形式渲染到App.vue根组件中：

1.在router.js中导入路由组件 import Login from './components/Login.vue'

2.在路由的规则数组中新增一个路由规则,当用户要访问login这个组件时，我们通过component来展示要显示的组件，到此为止，一个完整的路由规则就定义完成。

export default new Router({
    routes:[
        {path:'/login',component:Login}
        ]
})

3.在App.vue中放一个路由占位符：<router-view></router-view> 这样我们通过路由匹配到的组件，都会被渲染到router-view中。

如果我们希望用户访问根路径自动重定向到登录界面中：在路由规则中添加一个路由规则path:'/',redirect:'/login'

export default new Router({
    routes:[
        {path:'/',redirect:'/login'},
        {path:'/login',component:Login}
        ]
})

4.绘制背景颜色，样式，图标等

5.绘制表单区，利用element-ui中提供的组件，

-打开element-ui官网，找到form表单，选择最基本的典型表单，复制和一小段对里面的属性进行梳理，不需要的属性直接删除，但是这个时候浏览器会报错，显示访问不到element-ui中相关组件，这个时候我们要找到plugins中的element.js,用到哪些组件需要先行导入，然后Vue.use注册为全局可用。

6.实现表单的预校验，调用form methods中的 validate对整个表单进行校验，参数为一个回调函数，该回调函数会在校验结果后被调用，并传入两个参数：是否校验成功和未通过校验的字段。

为el-form添加ref属性，获取到表单的引用对象，用整个引用函数调用validate函数。判断valid是否为true，如果不是true，直接返回当前界面。如果判断为true，则到main.js中去配置一下axios，设置一下请求根路径，那么在login.vue中就可以直接用this发起请求。

post返回值是一个promise。为了简化操作，我们可以用async await来进行优化，通过console.log(result)我们发现服务器返回的数据对象身上包含了六个属性，其中data才是服务器返回的真实数据，我们从这个数据身上结构赋值出data属性，同时将其重名为res对象，然后判断res的状态是否登录成功。

配置Message全局弹框组件

a.首先在element.js中导入Messageimport {Message} from 'element-ui'

b.挂载到Vue全局对象上，Vue.prototype.$message=Message //将message挂载到vue的原型对象身上

c.if(res.meta.status!==200) return this. $message.error('登录失败！') this.$ message.success('登录成功！')

methods:{
    login(){
    this.$refs.loginFormRef.validate(async valid=>{
    if(!valid) return;
   const {data:res}=await this.$http.post('login',this.loginForm);
   if(res.meta.status!==200) return this.$message.error('登录失败！')
   this.$message.success('登录成功！')
    })
    }
}