仿今日头条后台管理系统（二）
###03-登录模块-分析表单组件
<!-- el-form 表单容器 -->
<!-- ref="form" 获取dom使用-->
<!-- :model="form" model属性绑定了动态数据form
将来提交后台的数据对象收集了所有的表单元素的值-->
<!-- label-width="80px" 统一设置文字说明宽度 -->
<el-form ref="form" :model="form" label-width="80px">
<!-- el-form-item 表单项 -->
<!-- label="活动名称" 表单元素的说明文字 -->
<el-form-item label="活动名称">
<!-- el-input 表单元素 -->
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
form: {
name: '',
}
}
}
}
</script>
总结组件使用的套路：
- 根据需求找组件
- 参考示例，是否有符合要求的例子，参考代码
- 分析代码的结构与功能
- 看不懂
- 试一试
- 参考说明文档：
- 组件属性
- 组件函数
- 组件事件
- 分析完毕，就是使用。
###04-登录模块-绘制表单
<!-- 表单 -->
<el-form :model="loginForm">
<el-form-item>
<el-input v-model="loginForm.mobile" placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="loginForm.code" placeholder="请输入验证码" style="width:236px;margin-right:10px;"></el-input>
<el-button>发送验证码</el-button>
</el-form-item>
<el-form-item>
<el-checkbox :value="true">我已阅读并同意用户协议和隐私条款</el-checkbox>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:100%">登 录</el-button>
</el-form-item>
</el-form>
依赖数据
data () {
return {
loginForm: {
mobile: '',
code: ''
}
}
}
//这里双向绑定 先：model绑定下属性名字，在data里定义，绑定属性名字的键值。
05-登录模块-添加校验
- Form 组件提供了表单验证的功能，只需要通过
rules属性传入约定的验证规则，并将 Form-Item 的prop属性设置为需校验的字段名即可 - 得到：
- el-form 加属性 rules 绑定数据 传入约定的验证规则
- el-form-item 指定一个属性 prop 值是 字段的名称
<el-form :model="loginForm" :rules="loginRules">
// 表单校验规则数据
loginRules: {
mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' }
],
code: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
{ len: 6, message: '长度是6位', trigger: 'blur' }
]
}
<el-form-item prop="mobile">
<el-form-item prop="code">
自定义校验规则：
- validator: validatePass 指定校验函数
- 在return之前 定义函数
- 函数约定： fn(rule,value,callback)
- rule 使用当前字段的校验对象 不会使用
- value 字段的值
- callback
- 校验成功 callback()
- 校验失败 callback( new Error(‘将来提示内容’) )
// 申明校验函数 在return之前
const checkMobile = (rule, value, callback) => {
// 校验手机号 1开头 第二位3-9 9位数字
if (!/^1[3-9]\d{9}$/.test(value)) return callback(new Error('手机号格式不对'))
callback()
}
mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
+ { validator: checkMobile, trigger: 'blur' }
],
06-登录模块-整体校验
- 绑定登录按钮的点击事件
- 对整个表单进行校验
- 校验成功，发登录请求
- 校验失败，提示即可
- 方案：调用form组件提供的方法 validate
- 使用组件的dom对象调用数组提供的函数
<el-button type="primary" style="width:100%" @click="login()">登 录</el-button>
<el-form ref="loginForm"
methods: {
login () {
// 对整个表单进行校验
this.$refs.loginForm.validate((valid) => {
if (valid) {
console.log('校验success')
}
})
}
}
07-登录模块-进行登录
- main.js 文件
import axios from 'axios'
Vue.prototype.$http = axios
- 在任何组件发请求
- 参考接口文档：api.md 文件
- 请求方式
- 请求地址
- 后台参数
- url?后传参 key=value&k=v
- body请求体传参
- 路径传参 /user/100
- 请求头传参
- 返回数据 含义
login () {
// 对整个表单进行校验
this.$refs.loginForm.validate(valid => {
if (valid) {
// 请求登录接口
this.$http
.post(
'http://ttapi.research.itcast.cn/mp/v1_0/authorizations',
this.loginForm
)
.then(res => {
// res 响应对象 包含响应主体
console.log(res.data)
// 跳转去首页
this.$router.push('/')
})
.catch(() => {
// 错误提示提示
this.$message.error('手机号或验证码错误')
})
}
})
}
补充：
- 测试帐号
- 手机号 13911111111 验证码 246810
- 不建议大家使用，上课期间
- 注册帐号
- 安卓 黑马头条的app 浏览器搜索
- 使用自己的手机号 加 万能验证码 进行登录，其实就是注册
- 然后 在PC管理系统登录
08-首页模块-路由与组件
- views/home/index.vue
<template>
<div class='container'>Home</div>
</template>
<script>
export default {}
</script>
<style scoped lang='less'></style>
- router/index.js
routes: [
{ path: '/login', name: 'login', component: Login },
+ { path: '/', name: 'home', component: Home }
]
09-首页模块-基础布局
布局的架子：
<template>
<el-container class="wrapper">
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
export default {}
</script>
<style scoped lang='less'>
// 标签的名称其实就是解析后标签的类名
.wrapper{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
.el-aside{
background: #002033;
}
.el-header{
border-bottom: 1px solid #ddd;
}
}
</style>
头部内容：
<el-header>
<span class="el-icon-s-fold"></span>
<span class="text">江苏传智播客科技教育有限公司</span>
<el-dropdown class='my-dropdown' >
<span class="el-dropdown-link">
<img src="../../assets/images/avatar.jpg" alt="">
用户名称
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人设置</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
依赖样式：
.el-header {
border-bottom: 1px solid #ddd;
line-height: 60px;
.el-icon-s-fold {
font-size: 24px;
vertical-align: middle;
}
.text {
vertical-align: middle;
padding-left: 10px;
}
.my-dropdown {
float: right;
img {
width: 30px;
height: 30px;
vertical-align: middle;
}
.el-dropdown-link {
font-weight: bold;
}
}
}
10-首页模块-分析导航菜单组件
<!-- 导航菜单容器 -->
<!-- default-active 默认激活的菜单项 值是菜单项的index属性值 -->
<!-- background-color 背景颜色 -->
<!-- text-color 文字颜色 -->
<!-- active-text-color 激活时候文字颜色 -->
<el-menu
default-active="2"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<!-- el-submenu 有子菜单的菜单项-->
<!-- el-menu-item 没有子菜单的菜单项 -->
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
</el-menu>
###12-首页模块-绘制导航菜单
<el-aside width="200px">
<div class="logo"></div>
<!-- 导航菜单 -->
<el-menu
default-active="1"
background-color="#002033"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-menu-item index="1">
<i class="el-icon-s-home"></i>
<span slot="title">首页</span>
</el-menu-item>
<el-menu-item index="2">
<i class="el-icon-document"></i>
<span slot="title">内容管理</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-picture"></i>
<span slot="title">素材管理</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-s-promotion"></i>
<span slot="title">发布文章</span>
</el-menu-item>
<el-menu-item index="5">
<i class="el-icon-chat-dot-round"></i>
<span slot="title">评论管理</span>
</el-menu-item>
<el-menu-item index="6">
<i class="el-icon-present"></i>
<span slot="title">粉丝管理</span>
</el-menu-item>
<el-menu-item index="7">
<i class="el-icon-setting"></i>
<span slot="title">个人设置</span>
</el-menu-item>
</el-menu>
</el-aside>
依赖样式：
.logo {
width: 100%;
height: 60px;
background: #002244 url(../../assets/images/logo_admin.png) no-repeat center /
140px auto;
}
.el-menu{
border-right: none;
}
###13-首页模块-导航菜单折叠效果
- 点击头部图标按钮
- 收起
- 展开
- 收起：
- 侧边栏宽度 64px
- logo切换图片 小图
- 导航菜单收起
- 展开：
- 侧边栏宽度 200px
- logo切换图片 大图
- 导航菜单展开
// el-menu 加属性
// isCollapse true 折叠 false 展开
:collapse="isCollapse"
代码步骤：
data () {
return {
// 控制展开收起
isCollapse: false
}
},
<span class="el-icon-s-fold" @click="toggleMenu()"></span>
methods: {
toggleMenu () {
// 切换侧边栏展开与收起 默认是展开
this.isCollapse = !this.isCollapse
}
}
切换代码：
<el-aside :width="isCollapse?'64px':'200px'">
<div class="logo" :class="{miniLogo:isCollapse}"></div>
样式：
.miniLogo {
background-image: url(../../assets/images/logo_admin_01.png);
background-size: 36px auto;
}
<el-menu
:collapse="isCollapse"
:collapse-transition="false"
14-首页模块-欢迎页面
- 创建一个组件
- 配置路由 二级路由
router/index.js
{
path: '/',
component: Home,
children: [
{ path: '/', name: 'welcome', component: Welcome }
]
}
views/welcome/index.vue
<template>
<div class='container' style="text-align:center" >
<img src="../../assets/images/welcome.jpg" alt="">
</div>
</template>
<script>
export default {}
</script>
<style scoped lang='less'></style>
扫一扫
3257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
