刚入行前端不久,临时还没怎么用框架,最近公司我的项目比拟闲,刚好有工夫能够本人练手我的项目,选了一个电商的我的项目,跟着视频做,筹备每天上班前把每天做的都更新到博客上,不便后续我本人回顾总结。
一、登录性能业务流程
二、登录业务的相干技术点
不存在跨域问题,举荐应用 cookie 与 session;反之则应用 token,反对跨域
三、token 原理剖析
四、登录性能实现
1、布局实现:通过 Element-UI 组件实现布局
- el-form
- el-form-item
- el-input
- el-button
- 字体图标(iconfont)
2、创立新分支
git checkout -b login
3、vue 我的项目的根本构造。通过 vs code 关上我的项目,删除 App.vue 中不必要的代码块
将 router 中的 index 文件不必要代码块删除,vs code 中代码格式化(shift + alt + F)
Login.vue 代码如下:
<template>
<div class="login_container">
<div class="login_box">
<!-- 头部 -->
<div class="avatar_box">
<img src="../assets/logo.png" alt="">
</div>
<!-- 登录表单区域 -->
<el-form :model="loginForm" rules="loginFormRules" label-width="0px" class="login_form">
<!-- 用户名 -->
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
</el-form-item>
<!-- 明码 -->
<el-form-item>
<el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input>
</el-form-item>
<!-- 按钮区域 -->
<el-form-item class="btns">
<el-button type="primary"> 登录 </el-button>
<el-button type="info"> 重置 </el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {data () {
return {
// 这是登录表单的数据绑定对象
loginForm: {
username: '',
password: ''
},
// 这是表单规定的对象
loginFormRules: {
// 验证用户名是否非法
username: [{ required: true, message: '请输出登录名称', trigger: 'blur'},
{min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
],
// 验证明码是否非法
password: []}
}
}
}
</script>
<style lang="less" scoped>
.login_container {
background-color: #2b4b6b;
height: 100%;
}
.login_box {
width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px;
//div 居中
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.avatar_box {
height: 130px;
width: 130px;
border: 1px solid #eee;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 10px #ddd;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
img {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eee;
}
}
}
.btns {
display: flex;
justify-content: flex-end;
}
.login_form {
position: absolute;
bottom: 0;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
</style>
index.js 代码如下
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login'
Vue.use(VueRouter)
const routes = [
{
path: '/login',
component: Login
}, {
path: '/',
redirect: '/login'
}
]
const router = new VueRouter({routes})
export default router
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import './assets/global.css'
import './assets/fonts/iconfont.css'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
最初放上效果图
明天来不及写啦,快下班啦,动态页面实现,前面会继续更新哒~
不过有个问题,就是这里表单验证没有成果,报错了,我增加了 String 也不行