构建分类页面

新建假页面 CategoryEdit.vue

在views文件夹中创建CategoryEdit.vue这个组件，用来创建分类

<template>
  <div>
    创建分类
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

变更主页 Main.vue

1. 将菜单栏修改

• 在el-menu中添加 router，点击菜单将跳转到el-submenu的index所绑定的路由页面去
• 将标题内容修改为分类相关
• 将el-menu-item的index绑定路由修改为'/name/function'格式

<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
  <el-menu router :default-openeds="['1', '3']">
    <el-submenu index="1">
      <template slot="title"><i class="el-icon-message"></i>内容管理</template>
      <el-menu-item-group>
        <template slot="title">分类</template>
        <el-menu-item index="/categories/create">新建分类</el-menu-item>
        <el-menu-item index="/categories/list">分类列表</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</el-aside>

2. 添加router-view
   将主页右边的表格换成router-view，用来显示组件

<el-main>
  <router-view></router-view>
</el-main>

3-修改router.js

• 导入组件
• 在main建立子组件数组
• 在数组中声明子组件

import Vue from 'vue'
import Router from 'vue-router'
import Main from './views/Main.vue'
import CategoryEdit from './views/CategoryEdit.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Main',
      component: Main,
      children: [
        { path: '/categories/create', component: CategoryEdit }  // 子组件
      ]
    },
  ]
})

新建分类页面

1. 新建el-form表单

• 添加标题h1标签
• 添加form，将label-width设置，将label和item放在一条线上
• 添加输入框和提交按钮

<div>
  <h1>新建分类</h1>
  <el-form  label-width="120px">
    <el-form-item label="名称">
      <el-input></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">保存</el-button>
    </el-form-item>
  </el-form>
</div>

2. 添加名称双向绑定

• 在input添加v-model双向绑定 model.name
• 在data中初始化model

...
<el-form-item label="名称">
    <el-input v-model="model.name"></el-input>
</el-form-item>
...
<script>
export default {
  data: () => ({
    model: {}
  })
</script>

3. 添加保存事件

• 添加原生按钮类型 native-type为submit（提交）
• 添加form的原生的（native），不跳转的（prevent）的提交事件

...
<el-form label-width="120px" @submit.native.prevent="save">
...
<el-form-item>
  <el-button type="primary" native-type="submit">保存</el-button>
</el-form-item>
...
<script>
export default {
...
  methods: {
    save () {
      
    }
  }
</script>

添加axios

1. 关于
   Axios 是一个基于 promise 的 HTTP 库和node.js的http客户端，这里用于前后台数据交互
2. 导入

npm i axios

3. 建立api交互 http.js

• 导入axios
• 设定基础网址
• 暴露http

import axios from 'axios'

const http = axios.create({
  baseURL: 'http://localhost:3000/admin/api' // 设定api基础网址
})

export default http

4. 将http设为全局

• 在main.js中导入http
• 将http声明在vue的原型上

import http from './http'
Vue.prototype.$http = http  // 将http绑定到原型上

axios请求

在 CategoryEdit中，空白的save方法体里，就可以愉快的进行数据请求了，前提是后台提供了api的前提下，例如：

...
methods: {
  save () {
    this.$http.post().then(res => {
        // 数据处理
    })
  }
}
...