安装elementUI插件与axios
设置elementUI按需导入
{ "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }
申请码云账号并配置ssh公钥
把本地项目上传到码云
2.2 后台环境与配置安装mysql
这里要导入数据库
这里使用的是phpstudy
建议phpstudy2018
开启服务并测试API
三. 登录与退出 3.1 登录业务流程在登录页面输入用户名和密码
调用后台接口进行验证
通过验证后, 根据后台的响应状态跳转到项目主页
3.2 如何保持登录状态cookie 在客户端记录
session 在服务端记录
token 可跨域
token工作原理
git checkout -b login
3.4 引入elementUI在element.js中按需注册
更改label相关属性
label-width
更改form-item的box-sizing(默认content-box)
添加字体图标(两种方法 1. 添加prifix-icon属性 2. 添加slot)
1.直接在elementUI组件中找自带的字体图标(search)
2.引入阿里图标库(css文件)
根据demo文档为el-input添加prefix-icon="iconfont icon-user"
3.5 实现表单的数据绑定在el-form中添加:model="data"(data需要在组件的data(){}中定义 用于子组件获取其属性)
子组件el-input中双向绑定(v-model)data的值
在密码框对应的input中添加type="password"
3.6 检验与重置与提交预验证表单数据校验表单
为el-form绑定一个校验规则对象 使:rules=rules
用props为子组件配置上相应的rule :prop="name"
rules: { name: [ { required: true, message: \'请输入活动名称\', trigger: \'blur\' }, { min: 3, max: 5, message: \'长度在 3 到 5 个字符\', trigger: \'blur\' } ],重置表单
为表单添加ref
给充值按钮绑定事件this.$refs.loginFormRef.resetFields()
预验证表单
加ref
给提交按钮绑定事件this.$refs.login.validate(callback( Boolean ))
3.7 处理登录返回的数据在3.6的login方法中判断valid的值
给vue全局加上axios
axios.defaults.baseURL = ~ vue.prototype.$http = axios这时候返回的士一个promise可以用async与await直接返回res
并通过状态码来判断登录是否成功
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 console.log(\'登录失败\') console.log(\'登录成功\') }) } 3.8 给登录状态返回一个弹窗给Message全局导入 用prototype来配置$message
在状态码不等于200的时候 this.$message.error( 错误信息 )
3.9 使用sessionStorage保存登录的token