仿今日头条后台管理系统（二）

###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-menudefault-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-menudefault-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>

仿今日头条后台管理系统（二）相关推荐

仿今日头条后台管理系统（一）
(一)今日头条后台管理项目 01-项目-简单介绍 (理解今日头条)的后台管理系统,个人的后台管理系统,发布文章新闻不便利,需要这个PC的系统. 登录欢迎页面发布文章素材管理内容管理粉丝管 ...
仿今日头条后台管理系统（三）
03-首页-导航菜单路由功能默认是没有点击切换路径是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转问题:刷新页面后丢失激活的样式原 ...
微信小程序开发-仿今日头条（二）
该仿今日头条的文章系列如下: 微信小程序-仿今日头条客户端微信小程序开发-仿今日头条(二) 转载请标明:https://blog.csdn.net/yangjianbo456/article/det ...
全网首个基于springboot的仿今日头条系统「系统+文档开源」
Spring Boot+Mybatis+thymeleaf开发的高仿今日头条新闻网站使用说明项目描述: 仿照今日头条的WEB端toutiao.com做的一个Java web项目. 使用Spring ...
android如何展示富文本_android高仿今日头条富文本编辑(发布文章)
前言: 在经历了几个月的项目期限.我们遇到了前端发布文章,要用到富文本编辑的功能.在一番衡量下最终用到了richeditor-android第三方框架.实现原理就是通过webView和js实现前端富文 ...
基于织梦Cms5.7 utf-8版本的仿今日头条微信小程序模块插件的使用和安装
微信小程序端源码可根据自己的需求进行更改.直接上示例图: 下载织梦Cms小程序服务端模块后,在织梦后台,打开模块->上传新模块 : 在左边的菜单栏就可以看到这个"微信小程序" ...
android 仿写开发者头条,android高仿今日头条富文本编辑(发布文章)
前言: 在经历了几个月的项目期限.我们遇到了前端发布文章,要用到富文本编辑的功能.在一番衡量下最终用到了richeditor-android第三方框架.实现原理就是通过webView和js实现前端富文 ...
Android 仿今日头条的视频播放控件（几行代码快速实现）
前段时间由于项目需要用到类似于今日头条的视频播放器,实现在线播放,边缓存边播放,当然也可以播放本地文件,如下图: 这里我推荐大家使用的是jiecaovideoplayer开源库,这个库的播放引擎是ij ...
微信小程序-仿今日头条客户端
该仿今日头条的文章系列如下: 微信小程序-仿今日头条客户端微信小程序开发-仿今日头条(二) 转载请标明:https://blog.csdn.net/yangjianbo456/article/det ...

仿今日头条后台管理系统（二）

仿今日头条后台管理系统（二）

05-登录模块-添加校验

06-登录模块-整体校验

07-登录模块-进行登录

08-首页模块-路由与组件

09-首页模块-基础布局

10-首页模块-分析导航菜单组件

14-首页模块-欢迎页面

仿今日头条后台管理系统（二）相关推荐

最新文章

热门文章