修改后台管理界面

修改导航以及下面的菜单名称，删除多余导航。

在<el-menu>标签中加上router属性，并修改<el-menu-item index="1-1">中'index'属性，改为要跳转的路径，实现点击跳转。

此时，在浏览器中就可以实现点击跳转到对应路由了，接下来编写对应页面：

开发新建分类页面

新建页面

src->views下新建CategoriesEdit.vue页面

引用页面并配置路由

注意：我们在点击左侧菜单时，只是右侧内容变动。所以要在Main.vue中把右侧内容变为<route-view>

同时路由也设置为Main.vue的子路由：

src\router\index.js 中：

此时，浏览器中就实现了新建分类页面的点击跳转。

完善新建分类页面内容

<template>
    <div>
        <h1>新建分类</h1>
        <el-form :model="form"  label-width="120px">
          <el-form-item label="分类名称">
              <el-input v-model="form.cateName"></el-input>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data(){
        return {
            form: {
                cateName:''
            }
        }
    },
    methods: {
        onSubmit(){
            // 请求接口 提交数据
            
        }
    }

}
</script>

<style>

</style>

因为要请求接口，所以需要安装axios插件。。

安装axios插件

在admin中npm i axios --save安装axios插件。

在plugin文件夹下新建axios.js文件，来管理axios插件。

引用axios

这样在新建分类页面方法中就可以使用axios了（先写大致的）：

编写服务端的接口

进入serve文件夹

// 退回上一级
cd ..
// 进入serve
cd serve

安装服务端常用的模块

安装express mongoose(连接数据库的) cors（允许跨域请求的）

npm i express@next mongoose cors --save

启动服务

在serve->index.js中：

路由模块单独抽成一个文件：

sreve下新建route文件夹，route下新建admin、web文件夹，admin下新建index.js

在index.js中引入admin路由

连接数据库

连接数据库抽离出一个文件夹下的db.js

模型开发

新建一个models文件夹用来存放模型。

注意： 这里模型就代表一个集合（可以理解为一张表），Schema是文档（可以理解为一行），这里的cateName要和post请求这个数据库里的参数名称一样才能把数据传进数据库里。。。切记。这里对应的是admin->src->views->CategoriesEdit.vue中的: 哪里需要用它就在那里引用，在serve->router->admin->index.js中：