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

（一）今日头条后台管理项目

01-项目-简单介绍

​ （理解今日头条）的后台管理系统，个人的后台管理系统，发布文章新闻不便利，需要这个PC的系统。

• 登录
• 欢迎页面
• 发布文章
• 素材管理
• 内容管理
• 粉丝管理
• 评论管理
• 个人设置

02-项目-准备工作

• vue基础
• vue的插件 vue-router
• 需要数据 axios
• 需要后台接口
• 使用UI框架 element-ui 饿了么前端团队UI组件库
  • 基于 vue 的框架
  • 快速构建一个PC端的后台管理系统界面
• vue-cli 2个版本
  • 使用 3.0 版本

03-项目-初始化

使用是3.0 版本初始化项目：

安装：

# 安装过旧版本 先卸载 npm un vue-cli -g
npm install -g @vue/cli

初始化：

vue create hm-toutiao-77

步骤：

1. 自定义创建项目

babel是转换ES6语法插件

linter 约束代码风格插件 eslint

css 预处理器

2. 选中less这个预处理器

3. 选择标准的 语法风格

4. 保存代码检查代码风格 和 提交代码检查并尝试修复

5. 将插件的配置信息记录在各自的配置文件内

6. 意思：是否保存刚才的操作记录，将来创建新项目的时候，直接创建。

创建完毕后：

切换到 项目 目录 执行 启动项目

npm run serve

访问：http://localhost:8080 即可

04-项目-结构说明

了解外层目录：

重点src目录：

├─api  #封装axios
├─assets
│  ├─fonts
│  └─images
├─components #公用级别组件
├─directive #指令
├─filter #过滤器
├─router #路由
├─store #本地存储
├─style #less
└─views #路由级别组件
└─App.vue 根组件
└─main.js 入口文件

05-项目-分支管理

• master 上线分支
• 其他分支 开发功能

分支作用:

• 一个人分功能模块分别去进行开发
• 多个人拥有不同的分支，同时进行开发，协同开发。

https://gitee.com/stolenbytime/jay01

项目的代码托管github:

1. 创建远程仓库 保证是空仓库
2. 提交本地仓库代码：

# 给你的仓库地址去别名
git remote add origin [email protected]:zhousg/hm-toutiao-77.git
# 提交到origin地址
git push -u origin master

06-项目-使用element-ui

安装：

# -S 等同 --save  作用：包的依赖记录在生产依赖匹配项中
npm i element-ui -S

完整引入：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

校验：

  <div id="app">
    App <el-button type="success">成功按钮el-button>
  div>

07-项目-配置vscode的eslint插件

安装：

配置：

"eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.autoFixOnSave": true,

设置按钮—》右上角｛｝----》添加内容。

08-项目-使用vue-router

安装：

# npm 5.0 上 是不要带上 -S --save
npm i vue-router 

定义router的初始化代码：

// 定义router对象  导出给main.js使用
import VueRouter from 'vue-router'
import Vue from 'vue'

Vue.use(VueRouter)

const router = new VueRouter({
  // 路由规则配置
  routes: []
})

export default router

在vue根实例挂载router对象

// @ 是某一个路径别名  src路径别名  在vue-cli创建的项目下才可是呀
// 目录下是有默认索引文件 index.js 就是索引文件  .js .vue .json
import router from '@/router'

new Vue({
+  router,
  render: h => h(App)
}).$mount('#app')

09-项目-路由规则分析

约定路由规则：

路径	功能	路由级别
/login	登录	一级路由
/	首页	一级路由
├─ /welcome	欢迎页面	二级路由
├─ /article	内容管理	二级路由
├─ /image	素材管理	二级路由
├─ /publish	发布文章	二级路由
├─ /comment	评论管理	二级路由
├─ /fans	粉丝管理	二级路由
├─ /setting	个人设置	二级路由

10-登录模块-路由及组件创建

开始一个新的功能：

• 创建分支 git branch login
• 切换分支 git checkout login
• coding (每完成一个小功能，提交一次代码)
• 切换master分支 git checkout master
• 合并分支 git merge login

创建组件：

<template>
  <div class='container'>Logindiv>
template>

<script>
export default {}
script>

<style scoped lang='less'>style>

配置路由：

// 路由规则配置
// name的作用给当前路由规则取名  $router.push('/login')  或者 $router.push({name:'login'})
  routes: [
    { path: '/login', name: 'login', component: Login }
  ]

定义出口：

  <div id="app">
    <router-view>router-view>
  div>

11-登录模块-基础布局

<template>
  <div class='container'>
    <el-card class="my-card">
      <img src="../../assets/images/logo_index.png" alt="">
    el-card>
  div>
template>

<script>
export default {}
script>

<style scoped lang='less'>
.container{
  position: absolute;
  width: 100%;
  height: 100%;
  // 背景图定位 / 背景图尺寸 contain 等比缩放完整在容器内显示  cover  等比缩放完全铺面容器
  background: url(../../assets/images/login_bg.jpg) no-repeat center / cover
}
.my-card{
  width: 400px;
  height: 350px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-60%);
  img{
    display: block;
    width: 200px;
    margin: 0 auto;
  }
}
style>

注意： index.less 的文件写全局样式

import '@/style/index.less'

###12-style标签的scoped的作用

• scoped 作用域 作用范围
• style 的样式仅仅在当前组件下生效
• https://vue-loader.vuejs.org/zh/guide/scoped-css.html

原理：

• data-v-37dfd6fc 属性在当前组件暴露的标签上会自动加上
• 当前组件的唯一标识
• 发现：
  • .container -----> .container[data-v-37dfd6fc]
• 如果修改 非当前组件标签下的样式
  • 去全局样式修改

13-登录模块-绘制表单