根據我的業務範圍，設想網站内容分為三類，設計、開發、小程式，設計中有二級分類平面設計、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頁面和相關查詢接口，同時設定子分類實作資料的關聯。