2. 程式人生 > >如何使用Vue.js來搭建一個後臺管理系統

如何使用Vue.js來搭建一個後臺管理系統

阿新 • • 發佈：2019-06-28

目錄

  • 使用的技術
  • 基礎但不好版
    • 1.初始化專案
    • 2.實現初始頁內容自定義
    • 3.使用路由
      • 原始程式碼
      • 自建頁面
      • 修改路由
    • 4.測試路由跳轉
    • 補充
  • 子路由版
    • 巢狀router-view
    • 定義子路由
    • 修改選單
    • 修改component
    • 補充
  • 帶請求版
    • 統一配置axios例項
    • 定義API呼叫資訊
    • 呼叫API
    • 使用mock
  • 程式碼
  • 未涉及問題

首發日期：2019-06-27

使用的技術



vue.js+element UI+mock.js

  • vue.js是核心
  • element UI是一個支援vue.js的UI元件庫
  • mock.js：由於沒有後端介面，所以需要使用本地資料來假裝成後端的資料。


溫馨提示：如果以下內容超出了你的知識面，可以考慮參考我寫的關於Vue的基礎學習的部落格來補充知識
後端開發者的Vue學習之路（四）
後端開發者的Vue學習之路（五）。

基礎但不好版


1.初始化專案

1.1 首先使用vue-cli初始化一個專案結構【如果你還沒有安裝vue-cli，那麼需要npm install -g vue-cli】
命令：vue init webpack 專案名


1.2 注意一下這個專案的初始化結構：

這裡不介紹專案結構，如果有需要可以參考一篇部落格中的一個小節：專案結構分析


1.3 留心檔案index.html,裡面有個<div id="app"></div>,這裡面的app將對應最基礎的component。可以說index.html就是初始頁了。


1.4 留心檔案src/App.vue：在src/main.js中聲明瞭index.html的app對應的元件將使用App元件，而App元件定義在App.vue中。【也就是說如果我們修改App.vue，將會對應修改初始頁的內容】


App.vue的初始程式碼如下：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px; 
}
</style>


2.實現初始頁內容自定義

初始化專案後，可以在專案目錄執行npm start命令，這樣可以把專案部署起來。訪問localhost:8080可以得到以下介面：

原始的App.vue程式碼是:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

我們可以嘗試刪除<img src="./assets/logo.png">，來測試是否可以通過修改App.vue來達到修改初始頁的效果。


3.使用路由

在App.vue中有一個<router-view/>，如果你已經學過路由了，那麼你應該會想到通過進入不同的路由來修改初始頁的內容了吧。

原始程式碼

src/router/index.js的原始程式碼如下，程式碼說明了路由/渲染的初始頁中圖片下面的文字內容對應哪個Component,它從'@/components/HelloWorld'中匯入HelloWorld再定義到路由中的。


import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})


自建頁面


由於路由跳轉的是面向component的，如果我們要進行路由跳轉，那麼首先需要定義幾個component。
下面在src/components中定義以下幾個component:

  • Login.vue：與路由/對應，預設訪問專案首頁是會渲染出登入頁(Login.vue)
  • AdminIndex.vue：與路由/admin對應，登入成功後，會進入後臺管理的首頁
  • ProductManage.vue：與路由/product對應，點選產品管理選單將進入產品選單頁面
  • ClientManage.vue：與路由/client對應，點選客戶管理選單將進入客戶選單頁面


在設計這幾個component時，我們使用Element UI作為我們的UI庫，首先我們對其進行匯入。
執行命令：npm install element-ui --save
然後在main.js中新增下列程式碼，這樣就可以在所有的元件中使用elmenent UI中的所有元件了：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)


設計component的時候注意修改App.vue中style的一個margin-top，不然你可能會發現介面的頂部有一片空白。


建立Login.vue:

<template>
  <div>
    <h3>這是登入頁面，由於功能尚未完善，<br>
      所以此處忽略登入功能，直接通過點選進入後臺管理首頁</h3>
    <router-link to="/admin">進入後臺管理首頁</router-link>
  </div>
</template>
<script>
export default {
  name: 'Login'
}
</script>


修改後臺管理首頁AdminIndex.vue：

<template>
  <el-container>
    <!-- 頁面頂部 -->
    <el-header>
      LOGO
    </el-header>
    <!-- 頁面左側選單 -->
    <el-aside width="200px"
              style="background-color: rgb(238, 241, 246)">
      <el-menu router='true'>
        <!-- 開啟選單中的router=true之後，點選選單會把index作為路由跳轉路徑 -->
        <el-menu-item index="product">
          <i class="el-icon-setting"></i>產品管理
        </el-menu-item>
        <el-menu-item index="client">
          <i class="el-icon-setting"></i>客戶管理
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-main>
        <!-- 下面內容是中間空白區域的內容，你可以自定義 -->
        這是後臺管理首頁的內容
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
.el-header {
  background-color: #c1cbd8;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

<script>
export default {
  name: 'AdminIndex'
}
</script>


修改客戶管理頁面ClientManage.vue：

<template>
  <el-container>
    <el-header>
      LOGO
    </el-header>
    <el-aside width="200px"
              style="background-color: rgb(238, 241, 246)">
      <el-menu router='true'>
        <!-- 開啟選單中的router=true之後，點選選單會把index作為路由跳轉路徑 -->
        <el-menu-item index="product">
          <i class="el-icon-setting"></i>產品管理
        </el-menu-item>
        <el-menu-item index="client">
          <i class="el-icon-setting"></i>客戶管理
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <el-main>
        這是客戶管理頁
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
.el-header {
  background-color: #c1cbd8;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

<script>
export default {
  name: 'ClientManage'
}
</script>


修改產品管理頁面ProductManage.vue：

<template>
  <el-container>
    <el-header>
      LOGO
    </el-header>
    <el-aside width="200px"
              style="background-color: rgb(238, 241, 246)">
      <el-menu router='true'>
        <!-- 開啟選單中的router=true之後，點選選單會把index作為路由跳轉路徑 -->
        <el-menu-item index="product">
          <i class="el-icon-setting"></i>產品管理
        </el-menu-item>
        <el-menu-item index="client">
          <i class="el-icon-setting"></i>客戶管理
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-main>
        這是產品管理頁
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
.el-header {
  background-color: #c1cbd8;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

<script>
export default {
  name: 'ProductManage'
}
</script>


修改路由


import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import AdminIndex from '@/components/AdminIndex'
import ProductManage from '@/components/ProductManage'
import ClientManage from '@/components/ClientManage'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/admin',
      name: 'AdminIndex',
      component: AdminIndex
    },
    {
      path: '/product',
      name: 'ProductManage',
      component: ProductManage
    },
    {
      path: '/client',
      name: 'ClientManage',
      component: ClientManage
    }
  ]
})


4.測試路由跳轉

一個普通的通過路由跳轉來渲染頁面的功能到此就基本完成了。
如下gif所示，如果想要自己完善這個後臺管理系統的具體介面，那隻需要在每一個component中自定義內容並新增自定義路由就可以逐漸完善這個後臺管理系統了。


補充

但上面的頁面有一個嚴重的問題，你可能也留意到了，Component的程式碼有些重複了幾次。有些人可能會想到在component引入其他component來進行“元件複用”，但其實可以通過“子路由”來解決，下面將演示如何解決這個問題。


子路由版


在上面的介面中，我們重複地寫了很多左側選單欄的程式碼。
實際上，點選選單時，我們可能只需要修改中間的內容區域的內容而已。
這個功能可以通過子路由來實現。


巢狀router-view

首先，我們在AdminIndex.vue中修改中間區域的程式碼，保留左側選單的程式碼不變：

    <el-container>
      <el-main>
        <!-- 僅僅修改中間區域的程式碼，其他與之前不變 -->
        <router-view />
      </el-main>
    </el-container>

你看到了我使用了一個<router-view />，沒錯的，可以通過巢狀路由來巢狀顯示一些內容，而渲染子內容的時候不會影響父路由的已經渲染的內容【這不就解決了上面的問題了嗎？】。


定義子路由

定義子路由使用children：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/admin',
      name: 'AdminIndex',
      component: AdminIndex,
      children: [
        // { // 這裡可以寫直接訪問父路由時渲染哪個component
        //   path: '',
        //   component: Statictis
        // },
        {
          path: 'product',
          name: 'ProductManage',
          component: ProductManage
        },
        {
          path: 'client',
          name: 'ClientManage',
          component: ClientManage
        }
      ]
    }
  ]
})


修改選單

將左側選單欄中的選單對應的路由修改成新的路由。

    <!-- 頁面左側選單 -->
    <el-aside width="200px"
              style="background-color: rgb(238, 241, 246)">
      <el-menu router='true'>
        <!-- 開啟選單中的router=true之後，點選選單會把index作為路由跳轉路徑 -->
        <el-menu-item index="/admin/product">
          <i class="el-icon-setting"></i>產品管理
        </el-menu-item>
        <el-menu-item index="/admin/client">
          <i class="el-icon-setting"></i>客戶管理
        </el-menu-item>
      </el-menu>
    </el-aside>


修改component

此時其他的component不再需要重複寫左側選單欄的程式碼了，所以需要修改component的程式碼：
大概如下，把重複的程式碼去除，只保留中間內容區域的程式碼

<template>
  <div>
    這是客戶管理頁
  </div>
</template>

<script>
export default {
  name: 'ClientManage'
}
</script>


補充

  • 上面的版本就減少了使用重複的程式碼。基本完成了基礎的頁面跳轉問題。

帶請求版


在學習這裡時，我假設你已經瞭解axios了，如果沒有，那麼可以參考後端開發者的Vue學習之路（五）

首先，安裝axios:npm install --save axios


統一配置axios例項

  • 在給axios例項傳入一個與請求相關的物件的時候，可以發起請求。
  • 由於我們訪問後端介面一般都是固定的url字首的，我們可以預建立一個axios例項，


    下面的程式碼建立在src/plugin/axios/index.js中：
import axios from 'axios'
// 可以配置一些基本引數，由於這裡使用mock假裝獲取資料，所以請不要配置baseURL
const instance = axios.create({
  // baseURL: 'http://localhost:8080'
})

export default instance // 記得匯出


定義API呼叫資訊

下面的程式碼建立在src/api/product.js中：

// 匯入axios例項
import instance from '@/plugin/axios'

export function getproducts () {
  // instance()中傳入確切的url資訊時，將發起請求
  // （當然，首先是這個方法要被呼叫，此處只是宣告）
  return instance({
    url: '/api/products', // 這裡訪問本地資料來假裝獲取後端介面資料
    method: 'get'
  })
}

// 其他示例程式碼：
// export function login (data) {
//   return request({
//     url: '/login.action',
//     method: 'post',
//     data: data
//   })
// }

上面的程式碼可能有時候還需要涉及傳參等問題，如果不瞭解可以考慮參考我的部落格後端開發者的Vue學習之路（五）。

呼叫API

在component中引入方法，然後呼叫API：

<template>
  <div>
    這是產品管理頁
    <!-- 輸出值 -->
    {{ this.content }}
  </div>
</template>

<script>
// 匯入api
import { getproducts } from '@/api/product'
export default {
  name: 'ProductManage',
  data () {
    return {
      content: ''
    }
  },
  created () {
    this.getProductsApi()
  },
  methods: {
    getProductsApi () {
      // 呼叫API
      getproducts().then(response => {
        // 這裡應該有一步是關於返回的資料是否可被直接渲染的判斷
        // 賦值給本地變數，然後渲染。
        this.content = response.data
      }).catch(error => {
        // 當請求錯誤時，提示錯誤資訊
        this.$message(error)
      })
    }
  }
}
</script>


使用mock



由於這裡要獲取後端的資料來渲染，我們使用mock.js來假裝獲取後端的資料，也就是使用我們定義的資料來進行返回。


1.首先，安裝mock.js:npm install mockjs --save-dev
2.在main.js中引入mock.js：

import '@/mock.js'//引入

3.在src目錄下建立mock.js：

import Mock from 'mockjs'

const redata = function () {
  return {
    code: 1,
    data: [
      {
        name: 'bao bao jinshui',
        cost: 18
      },
      {
        name: 'wangzai niunai',
        cost: 12
      }
    ]
  }
}

// 格式： Mock.mock( url, post/get , 返回的資料)；
Mock.mock('/api/products', 'get', redata)
export default Mock


最終效果如圖所示：

上面的程式碼演示瞭如何呼叫API，其中值得注意的是，經常會給axios例項配置一些具體的引數，例如baseURL。


程式碼

程式碼已經推送到github上了，vue-simple-manage，具體如圖下：

未涉及問題


1.路由傳參問題。（常見場景：點選一個按鈕，跳轉到一個介面，攜帶一些引數渲染頁面。）
2.靜態資源問題。（常見場景：頁面使用靜態資源，如圖片）
3.資料儲存問題。（常見場景：由於前後端分離了，所以前端可能需要儲存一些資料來幫助渲染（如當前使用者名稱和使用者級別等，這些資料不應該時常從後端獲取，一般都儲存到store中），而瀏覽器重新整理的時候，會清除store中儲存的資料，所以需要將資料儲存到localStorge中）
4.其他。。。

相關推薦

如何使用Vue.js來搭建一個後臺管理系統

目錄 使用的技術 基礎但不好版 1.初始化專案 2.實現初始頁內容自定義 3.使用路由 原始程式碼 自建頁面 修改路由

Vue.js實踐：一個Node.js+mongoDB+Vue.js的部落格內容管理系統

專案來源 以前曾用過WordPress搭建自己的部落格網站，但感覺WordPress很是臃腫。所以一直想自己寫一個部落格內容管理器。 正好近日看完了Vue各個外掛的文件，就用著Vue嘗試寫了這個簡約的部落格內容管理器（CMS）。 完成的功能 一個基本的

Vue3教程：開發一個 Vue 3 + element-plus 的後臺管理系統

最近在開發一個 Vue 3.0 + element-plus 練手專案，後面測試完成後，會把程式碼全部開源，部分頁面的預覽圖如下： ![](https://img2020.cnblogs.com/blog/859549/202103/859549-20210324164729600-1645095989.p

用Vue.js來開發一個電影App的前端部分

column 多種方式 -a 目標 部分 cli 多路由 cdn tor 我們要構建一個什麽樣的App？ 我們大多數人使用在線流媒體服務（如Netflix）觀看我們最喜歡的電影或者節目。這篇文章將重點介紹如何通過使用vue.js 2建立一個類似風格的電影流媒體WEB交互界

【轉載】Vue 2.x 實戰之後臺管理系統開發（二）

null element asc 其他 就會 ans 目錄 asi all 2. 常見需求 01. 父子組件通信 a. 父 -> 子（父組件傳遞數據給子組件） 使用 props，具體查看文檔 - 使用 Prop 傳遞數據（cn.vuejs.org/v2/guide

從零搭建java後臺管理系統（一）

pac 阿裏 stat 技術 user 日誌 代碼 最小 mbo 框架搭建 一、初步設想，使用springboot，框架打算用到依賴 spring web，devTools，mysql，Aspect，Redis，Lombok，Freemark，Shiro，Rabbitmq

從零搭建java後臺管理系統（二）mysql和redis安裝

docker 權限 req 安全性 分享圖片 登錄 red 解析 append 接上篇開始安裝mysql和redis 註意了，如果用阿裏雲服務器，外網訪問的端口必須在安全組開啟，否則外網訪問不通 三、服務器安裝redis和mysql 本次環境搭建將所有第三方服務會安

關於Java如何獲取系統時間，並用它來做一個圖書管理系統

首先，這個圖書管理系統自定義一個final常量不能更改，用作圖書館借閱歸還的最晚時間，也可以自定義歸還時間。 然後，先獲取使用者借閱時間，再用SimpleDataFormata元件來格式化日期（yyyy-MM-dd），再將獲取的時間加在系統的時間上得到使用者自定義的歸還時間。 最後，再通過方

基於Vue和ElementUI/vue-router 和 vuex的後臺管理系統基礎腳手架

我也看了許多的開源框架,各有各的好吧  我整理了一下我之前的專案 提供了一套基本的基礎框架 開箱即用的 使用了vue-router 和 vuex ajax請求使用的axios 提供最基本的腳手架服務 github:https://github.com/langy

用vue-cli來搭建一個vue專案

用控制檯生成vue專案 在控制檯中輸入vue init webpack project(自己取的專案名稱) “project1”是自己取的專案名稱 下面的： “Project name”寫專案的名稱，不可以出現大寫字母否則會報錯 "Project descri

基於Python搭建Django後臺管理系統

一、部落格網站的建立 建立專案 生成站點（sites）Model，這兩步驟第一篇有介紹，這裡就直接操作了 二、資料庫配置 介紹一下資料庫的配置就是在setting裡面配置連結的資料庫，這裡系統以及配置好了，連結一個叫做db.sqlite3的資料庫，也許有讀者會問，這個資料庫在哪裡，我

用vue+Element-ui寫一個後臺管理介面,點選頭部導航對應顯示下方左側導航選單,點選左側選單對應顯示右邊內容,點選右邊內容的按鈕出現一個新頁面依舊能夠選中左側相應選單,求解決???!!!!

vue-路由 用vue+Element-ui寫一個後臺管理介面,點選頭部導航對應顯示下方左側導航選單,點選左側選單對應顯示右邊內容 但是點選新建微帖路由出現一個新頁面,左側選單怎麼才能顯示被選中狀態,就是跟上圖狀態一樣??? 這裡是左側選單導航和右邊內容顯示區域程式碼 這裡是頁面按鈕

webpack+vue.js+elementUI試做後臺管理頁面

前言 由於上次搭好了SSM後端框架，就想著順便把以前那個部落格網站的後臺管理系統給做了，系統的後端環境是有了，前端頁面用什麼開發呢？之前簡單的看了vue.js，所以就決定用vue.js做前端頁面，然後搜了一些vue.js配套的ui，找到了elementUI。而

小試牛刀——搭建一個週報管理系統

算是自己來公司的第一個工作。雖然自己很菜，但是還是獨立地完成了這個任務。 1.需求 專案描述：搭建一個部門內使用的週報管理系統。 功能要求：1.兩個使用者組：管理員組和普通使用者組。2.普通使用者組需要能夠提交週報（按照老大指定的格式），檢視、修改自己的週報，並且能將週報列

vue入門 | 使用vue.js2.0 + ElementUI開發後臺管理系統詳細教程（一）

轉載自：http://www.jianshu.com/p/d87d7140944e 導語 本次將會從頭到尾詳解，怎樣使用vue和ElementUI快速開發後臺管理系統，以及在開發過程中遇到的一些bug 如果執行時報錯，請檢查幾個包的版本 node.js 6.9.2

Vue 2.x 實戰之後臺管理系統開發（一）

1. 導語 該文章將從頭到尾梳理我是如何使用 Vue 2 開發一個後臺管理專案的，我會將自己遇到的問題貼出，希望可以幫助到其他人。 2. 開發前須知 我的後臺管理系統專案運用瞭如下框架/外掛： Vue 2.x —— 專案所使用的 js 框架

django搭建一個資產管理系統2.登入系統

思路:先在本機建立好專案,再移植到伺服器上,本機環境儘量與Server端環境一樣, python3.6 django2.2.0 開發軟體 pycharm 首先建立專案sams (Server assets management system) django-admin startproject s

vue.js+element實現簡單的後臺管理系統（一）

最近公司趕專案，要求做一個後臺管理系統，靜態半天，介面一天，測試一天。 看了一下需求，10個頁面，16+介面，雖說調取資料的比較多，實際寫起來感覺東西還是蠻多的，也在網上查閱了很多資料，感覺都是一些開箱即用的後臺管理系統，一開始我也是想拿來修改一下就好，結果看了好幾個github上面的，感覺並不是很貼合需求

vue搭建後臺管理系統專案

專案搭建所用技術 vue+webpack+ElementUi+ECharts+sass 步驟 首先要安裝node.js ,http://nodejs.cn/download/ 下載合適的版本安裝就好了；我們本章主要講如何讓專案執行起來. 1.進入到你的檔案目錄，開啟cmd，； 2

從零開始搭建vue+element-ui後臺管理系統專案到上線

前言 之前有些過移動端的專案搭建的文章，感覺不寫個pc端管理系統老感覺少了點什麼，最近公司專案比較多，恰巧要做一個申報系統的後臺管理系統，鑑於對vue技術棧比較熟悉，所以考慮還是使用vue技術棧來做；看過一個不錯的後臺配置模板（vue-element-admin），頁面也挺美的，但是還是礙於不想看太多關於這