根据我的业务范围，设想网站内容分为三类，设计、开发、小程序，设计中有二级分类平面设计、UI设计，平面设计又有三级分类包括VI设计、名片设计、LOGO设计...之后网站发布的不管是文章还是合作订单，全部归属到这些类别中，这样就需要用到数据的关联。
1.进入思路，做出分类页面
首先设置分类接口，后续其他接口都可以方便关联此接口。同时，设置二级分类时也需要用到关联，分类的一套接口实现后，我们就基本学会了接口的创建和数据的上传。
第一步,创建分类页面CatogorySet.vue。
常见的英文翻译是class，item等，但我们书写的代码中这些词非常常见，为了避免程序的错误和视觉的难以区分，一般以“类别category”来进行分类的命名。什么时候用单数还是复数看我们自己喜好。
命名使用驼峰命名法，名字为设置，因为后续修改也用这个页面。
下方代码为CatogorySet.vue页面，其中包括：element-ui表单、vue的model双向绑定和form表单的submit提交事件。
<template>
<div>
<h1>创建分类</h1>
<el-form label-width="80px" style="margin-top:20px;" @submit.native.prevent="save">
<!-- submit事件中使用提交方法save，native是找到js原生表单，prevent是指阻止提交时默认跳转页面 -->
<el-form-item label="分类名">
<el-input v-model="model.name"></el-input>
<!-- 双向绑定model -->
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data(){
return {
model: {}
}
},
methods: {
save(){
//这里放axios方法，用来提交数据
}
}
}
</script> 在router的index.js引入路由CategorySet.vue。
2.安装axios并使用，编写提交方法
终端输入：
cd admin npm i axios 此时安装axios完成。
为了代码的清晰，避免main.js混乱，专门在main.js同级给axios创建一个js文件存放axios的接口，名为http.js，后在main.js引入。
引入axios包，同时创建一个axios实例，发送地址为服务器端server的admin/api接口下，此处直译为admin后台的api接口，稍后在服务端创建此地址。
http.js:
// 引入axios
import axios from 'axios'
// 创建axios实例，添加api路径
const http = axios.create({
baseURL:'http://localhost:3000/admin/api'
})
// 将文件变量导出，导出到main.js
export default http main.js:
此时http实例已经在vue实例属性中，我们可以直接在方法中用this.$http使用axios。
回到CategorySet.js，提交数据我们用POST方法:
方法已经写好，紧接着我们要到服务端server中创建接口，创建好后再到save方法里修改。
3.创建接口
终端新建页面输入：
cd server npm run serve 此时我们进入到server端，什么都没有，我们要安装一些常用的模块，最终使用方法就与server一样了。
（1）同时安装三个模块包：express（NodeJS最流行的轻量web开发框架）,mongoose（连接到mongodb数据库的模块） 和 cors（允许跨域的模块）。
终端再次新建页面，输入：
cd server npm i express@next mongoose cors （2）安装完成后，到server的index.js文件中引入express框架，同时app引用express实例。
使用express实例启动项目，监听3000端口。
index.js:
const express = require('express')
const app = express()
app.listen(3000, () => {
console.log('http://localhost:3000');
}) （3）此时我们要创建上面的admin/api接口，把接口放入路由，定义地址。因为admin、web端的接口路由如果都写在index.js就会非常乱，所以把两端的接口路由分开存放在server端的routes。
创建routes文件夹，在routes中再创建两个文件夹，分别是admin和web，用于存放接口文件，再在admin中创建一个index.js文件，此index.js为具体路由编写位置。
routes/admin/index.js中，导出一个函数app，这个app的内容来源于最外层server的index.js中的app，给app设置路由。index.js：
module.exports = app => {
// 要想使用express，该文件就需要引入express
const express = require('express')
// 定义路由方法，将我们定义的路由挂载到express
const router = express.Router()
// router挂载post方法，因为表单传值时用的就是post传值
// 接口地址是categories，接收的是分类功能（创建分类、修改分类、查询分类列表）的操作
// 之后其他功能实现与此模板相同，与此功能平级
router.post('/categories', async(req, res) => {
// 在里边放该接口的具体操作，所有操作同级放置
})
// 定义“admin/api”路由方法，挂载存入到router
app.use('/admin/api', router)
} 将admin接口路由引入server的index.js，由于引用的内容为函数，所以我们要执行这个admin接口并传值。写法:
4.接口使用mongodb数据库
我们编写接口将数据传输到数据库，把数据库调用语句写到下图位置：
（1）引入mongoose插件
在创建接口时一并下载了mongoose（连接mongodb数据库的模块插件）这时候我们就要把数据库引入到项目中了。
创建文件夹和文件plugins/db.js在server文件夹：
在server下的index.js中引入db.js:
在db.js中引入该插件，与创建接口的书写方法类似，都使用到主文件中的app内容：
module.exports = app =>{
// 引入mongoose
const mongoose = require('mongoose')
// 使用mongoose方法连接mongodb数据库
// 格式为mongodb:数据库地址：端口号/数据库名
// 数据库名自动创建
mongoose.connect('mongodb://127.0.0.1:27017/node-mine',{
// 必加参数
useNewUrlParser: true
})
} 此时app没有呗使用到，但后期我们有可能会使用。到此插件写好了。
（2）建立数据模型，方便调用数据库
建立分类功能的数据模型，稍后接口传值时直接调用该模型。server下创建models文件夹，再创建Category.js模块文件。
Category.js:
// 引入mongoose插件，插件db.js已经用require引入到server的最高层文件index.js，所以可以直接引用
const mongoose = require('mongoose')
// 使用mongoose的架构方法定义此数据表category，定义字段和类型
const schema = new mongoose.Schema({
name: { type: String }
})
// 导出mongoose模型
module.exports = mongoose.model('Category', schema) 此时我们就可以在接口调用模型进行上传信息到数据库了。
（3）引入模型到admin/api接口
找到该接口文件，server/routes/admin/index.js，引入模型：
（4）操作接口，调用数据库模型进行信息上传。
在接口操作处编写接收信息并上传的命令。
// 数据来源是接受到的req中的body
// 为避免阻塞，要用异步操作，故加入await
const model = await Category.create(req.body)
// 接收返回值
res.send(model) 这里由于我们是从admin端上传信息到server端，所以需要跨域，需要用到之前下载的cors跨域模块包。同时前端数据接收的是json数据，故引入express的json方法。都在server下主文件index.js中引入。
到这里后台接口就已经完成，此时到前端使用axios发起接口请求测试。
5.使用axios发起接口请求
回到我们之前的save方法，将方法同样改为异步请求：
methods: {
async save(){
// 这里放axios方法，用来提交数据
const res = await this.$http.post('categories', this.model)
console.log(res)
// 操作完成后跳转到categories地址
this.$router.push('/categories/list')
// 提示信息
this.$message({
type: 'success',
message: '保存成功'
})
}
} 测试：
成功跳转到categories/list
注意上面server/routes/admin/index.js文件中异步接收文件时我写了两个res,测试时我发现了这个问题并改正了，但代码已经写好就不改图了，大家查看文章时请跳过这个问题。
到此该功能就已经实现了，这篇比较长，我们下篇再做list页面和相关查询接口，同时设置子分类实现数据的关联。