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，點擊保存，一切正常。