下面为登录页面的实现

1.路由准备

登录界面路由：

在App.vue里面设置挂载点 router-view

2.1vant样式修改

样式修改：

1.找到类名，自己写css覆盖 找到对应的类名，手动修改css样式。但是加上scoped，scoped尝试把此选择器后属性选择器匹配当前页面标签，所以选不中组件内部的类 解决方案：less+/deep/ 结合使用

/deep/会把属性选择器加到前面（用后代选择器的方式往里面找匹配的类名）。要修改组件内的样式，如果用了scoped，则需要在选择器前面➕/deep/

2.看文档，是否支持自定义样式---略

3.登录表单

3.1页面静态实现html+css

Field输入框中的name,收集输入框里面的值，返回一个对象===name可以理解为key，可以直接用values代表收集到的数据，还可以用this.user（user是对象）

3.2数据铺设，数据绑定，数据微调

1.手机号的正则检验

3.3js交互->事件/正则

1.登录接口调用--- post请求 axios内部，会把参数对象转换为json字符串格式发给后台，axios内部会自动携带请求参数headers，Content-Type会自动帮忙添加好，无需自己操作。 post参数传递：body----请求体，放在data中-----参数为对象形式

2.调用登录接口 调用时传递参数方式：

或者 const res = await loginAPI(this.user) 进行匹配

或者 const res = await loginAPI({ ...this.user })解构开

4.学会使用network调试

5.登录失败解决方案-vant反馈组件的使用

按需引入的话，直接使用组件。如果是全局引入的话，使用时，需要使用this.$组件小写this.$dialog({ message: '账号或密码错误' })

6.优化登录给用户提示

6.1点击登录后给用户提示（正在登录中）

button的加载状态功能loading

6.2防止用户频繁的点击

按钮禁用disabled

data中默认为false

7.token本地存储--以后再发送请求时验证身份，知道有没有登录以及是谁

7.1之前操作vux中进行保存token

export default new Vuex.Store({ state: { tocken: localStorage.getItem('tocken') || '', refresh_tocken: localStorage.getItem('refresh_tocken') || '' }, getters: {}, mutations: { setToken(state, tocken) { state.tocken = tocken }, setfreshToken(state, refreshToken) { state.refresh_tocken = refreshToken } }, actions: {}, modules: {} })

再次登录时，观察vuex和本地是否有值，就代表成功。刷新网页，观察vuex是否有默认值，从本地获取，有就代表成功

7.2tocken本地存储

在工具类utils文件夹中封装token.js // 此文件->封装三个方法->专门用于操作tocken // 封装的目的是让代码分层，更方便清晰，以后方便修改 const key = 'geek-itheima' // 设置 export const setToken = (tocken) => { localStorage.setItem(key, tocken) } // 获取 export const getToken = () => localStorage.getItem(key) // 删除 export const removeTocken = () => { localStorage.removeItem(key) }

引用使用该工具类 setToken(res.data.data.token)