node-vue-mongodb全栈项目-建立后台管理界面分类（三）

修改后台管理界面

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

在<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中：

到此，分类接口/admin/api/catrgories就建立完毕了。。。

在前端发起对服务端接口的请求

测试的时候，先启动mongoDB,在运行serve项目，在运行admin项目。

而后在admin新建分类页面上输入news，点击保存，一切正常。