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

最新推荐文章于 2024-07-02 10:03:52 发布

keep96

最新推荐文章于 2024-07-02 10:03:52 发布

阅读量5.5k

点赞数 2

分类专栏： h5 css

本文链接：https://blog.csdn.net/keep96/article/details/98473908

版权

h5 css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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

步骤：

自定义创建项目

babel是转换ES6语法插件

linter 约束代码风格插件 eslint

css 预处理器

选中less这个预处理器
选择标准的语法风格
保存代码检查代码风格和提交代码检查并尝试修复
将插件的配置信息记录在各自的配置文件内
意思：是否保存刚才的操作记录，将来创建新项目的时候，直接创建。

创建完毕后：

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

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:

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

# 给你的仓库地址去别名
git remote add origin git@github.com: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'>Login</div>
</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>