vue-element-admin開發(fā)教程(v4.0.0之前)

更新時間：2022年04月28日 10:54:27 作者：樂之終曲

本文主要介紹了vue-element-admin開發(fā)教程(v4.0.0之前)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

說實話都是逼出來的，對于前端沒干過ES6都不會的人，vue視頻也就看了基礎(chǔ)的一些
但沒辦法，接下來做微服務(wù)架構(gòu)，前端就用 vue，這塊你負(fù)責(zé)。。。。說多了都是淚，腳手架框架布了都沒看過
干就完事，不過好在做好了，這里寫下給和我一樣苦逼的同學(xué)能快點適應(yīng)入門下，當(dāng)然一些基礎(chǔ)的東西還是要知道的

v4.0.0 版本的調(diào)整后講解：Vue 新手學(xué)習(xí)筆記：vue-element-admin 之入門開發(fā)教程（v4.0.0 之后）

主要分為幾個部分

安裝
準(zhǔn)備工作
mock 假數(shù)據(jù)頁面
axios 連接后臺真數(shù)據(jù)
正式環(huán)境部署
前端完整代碼

肯定有地方不太對的，麻煩大家指出來

安裝

前端我推薦用 vscode 就是好用

vscode官網(wǎng)

安裝node.js及npm

npm官網(wǎng)地址

下載node，安裝很簡單一直下一步就可以了。

win+R 輸入cmd進(jìn)入命令行輸入

node -v
npm -v

出現(xiàn)以上信息說明node.js及npm安裝成功

下載 vue-element-admin，并啟動

官方：https://github.com/PanJiaChen/vue-element-admin

框架里的組件樣式可以從 element 上找

element：http://element-cn.eleme.io/#/zh-CN/component/table

可以直接下載壓縮包解壓，也可以通過 git 下載

# 克隆項目
git clone https://github.com/PanJiaChen/vue-element-admin.git
 
# 安裝依賴
npm install
 
#設(shè)置淘寶倉庫
npm install --registry=https://registry.npm.taobao.org
 
# 啟動服務(wù)
npm run dev

├── build                      // 構(gòu)建相關(guān)  
├── config                     // 配置相關(guān)
├── src                        // 源代碼
│   ├── api                    // 所有請求
│   ├── assets                 // 主題 字體等靜態(tài)資源
│   ├── components             // 全局公用組件
│   ├── directive              // 全局指令
│   ├── filtres                // 全局 filter
│   ├── icons                  // 項目所有 svg icons
│   ├── lang                   // 國際化 language
│   ├── mock                   // 項目mock 模擬數(shù)據(jù)
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── styles                 // 全局樣式
│   ├── utils                  // 全局公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                   // view
│   ├── App.vue                // 入口頁面
│   ├── main.js                // 入口 加載組件 初始化等
│   └── permission.js          // 權(quán)限管理
├── static                     // 第三方不打包資源
│   └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置項
├── .gitignore                 // git 忽略項
├── favicon.ico                // favicon圖標(biāo)
├── index.html                 // html模板
└── package.json               // package.json

準(zhǔn)備工作

漢化

打開vscode后
Windows、Linux 快捷鍵是：ctrl+shift+p

macOS 快捷鍵是：command + shift + p
搜索 Configure Language，選擇下圖第一個選項。

將"locale":“en” 修改為 “locale”:“zh-CN” ，保存文件。
選擇左側(cè)左下方的擴(kuò)展按鈕，搜索chinese 安裝下圖的插件

安裝成功以后重啟vscode，語言就改成中文了。

ESLint

剛開始很難用，瘋狂報錯，那是因為沒配好，配好后一些小的問題，會自動修正，在保存的時候

文件 ? 首選項 ? 設(shè)置 ? 搜索 ESLint ? 點擊在 setting.json 中編輯 ? 粘進(jìn)去，保存，完事

{
  "files.autoSave": "off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.run": "onSave",
  "eslint.autoFixOnSave": true
}

dev.env.js

先來看下 config 文件夾下的 dev.env.js

這個文件夾里的 BASE_API 后臺接口的就是公共路徑，調(diào)后臺的時候要記得改，這是本地的，剩下的 prod 和 sit 分別是正式環(huán)境打包和測試環(huán)境打包的

/src/router/index.js

先來看下目錄

詳細(xì)的解釋在這個目錄文件的上面有，每個屬性什么意思，可以在上面看

mock 假數(shù)據(jù)頁面

mock 主要是幫助前后分離的項目為前端提供數(shù)據(jù)，這樣才好測試

先來畫個頁面，一個分頁列表吧，路徑 /src/service/dataLog.vue 用來顯示一些信息

我在 element 組件里找了一個列表功能和分頁功能

/src/service/dataLog.vue

dataLog.vue 的 template 部分

<template>
  <div class="app-container">
    <!-- 查詢框 雙向綁定 keyword-->
    <el-input
      v-model="keyword"
      placeholder="請輸入關(guān)鍵字"
      clearable
      style="width:500px" />
    <!-- 搜索按鈕 綁定點擊事件 -->
    <el-button type="primary" icon="el-icon-search" @click="getDataLog()">搜索</el-button>
    <!-- data就是綁定數(shù)據(jù)用的 -->
    <el-table
      :data="dataLog"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="錯誤信息">
              <span>{{ props.row.log }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="服務(wù)單"
        prop="data"/>
      <el-table-column
        label="時間"
        prop="time"/>
    </el-table>
    <!-- 分頁 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getDataLog" />
      <!-- total總條數(shù)
     listQuery.page 當(dāng)前頁
     listQuery.limit 每頁幾條
     getDataLog 后買點擊分頁時候要回調(diào)的函數(shù) -->
  </div>
</template>

注意 template 下只能有一個節(jié)點，兩個就報錯了，可以試下，所有我放在一個統(tǒng)一的 div 里

至于這些值為啥這樣寫，我只能說照著人家給的模板改就好，人家寫啥你寫啥，樣式啥的人家上面都有

樣式部分就不貼了，最后會把完整的代碼貼出來，來看下 js 的部分

這里解釋下分頁，分頁除了初始化給了第 1 頁和每頁 10 條后，之后每次點擊頁碼，數(shù)據(jù)都會雙向綁定到值上，所有在調(diào)后臺函數(shù)的時候，直接取 page 和 limit 值就行了，不想要再去想我怎么去拿 div 上面的數(shù)字

<script>
// 這里要調(diào)用我使用的 api
// 括號里的是要使用的函數(shù)接口，多個的話逗號隔開
import { getDataLog } from '@/api/service/dataLog'
// 引入分頁組件
import Pagination from '@/components/Pagination'
 
export default {
  // 這里需要把分頁組件注冊進(jìn)來
  components: { Pagination },
  data() {
    return {
      // 搜索關(guān)鍵字
      keyword: '',
      // 數(shù)據(jù)條數(shù)
      total: 0,
      // 分頁參數(shù)
      listQuery: {
        page: 1,
        limit: 10
      },
      // 列表數(shù)據(jù)
      dataLog: []
    }
  },
  // 這個是生命周期函數(shù)，這個時候是 data 和 methods 都初始化好了，具體看基礎(chǔ)知識
  created() {
    this.getDataLog()
  },
  methods: {
    // 函數(shù)部分
    getDataLog() {
      // 參數(shù)
      this.listQuery = {
        page: this.listQuery.page,
        limit: this.listQuery.limit,
        object: this.keyword
      }
      // 調(diào)用上面引入的 api 里的 getDataLog
      // 不引入就報函數(shù)未定義了，剛開始一個人折騰好久，老子明明定義在這了，為啥還沒定義
      getDataLog(this.listQuery).then(response => {
        // 返回值處理
        this.dataLog = []
        this.total = response.data.total
        this.dataLog = response.data.items
        // 查詢后要把關(guān)鍵字給清空
        this.keyword = ''
      })
    }
  }
}
</script>

接下來看看上面的 api 接口

/src/api/service/dataLog.js

每次點擊就會去調(diào)用 api 接口里的方法，參數(shù)都看得懂

上面引用的 request 文件使得每次調(diào)用的時候都會對請求進(jìn)行攔截，上面的 BASE_API 就會在里面被拼上去

import request from '@/utils/request'
 
// 獲取錯誤信息列表
export function getDataLog(query) {
  return request({
    url: '/log/getDataLog',
    method: 'get',
    params: query
  })
}

/src/mock/service/dataLog.js

接下來就是使用 mock 假數(shù)據(jù)，我就循環(huán)了10條，因為假的分頁，特意去實現(xiàn)太費勁了

如果有多個接口的數(shù)據(jù)要返回，可以在 export default 里寫多個接口去返回

import Mock from 'mockjs'
 
const List = []
 
const count = 10
 
// 模擬錯誤信息
for (let i = 0; i < count; i++) {
  List.push(Mock.mock({
    data: '12987122',
    time: '好滋好味雞蛋仔',
    log: '江浙小吃、小吃零食江浙小吃、小吃零食'
  }))
}
 
export default {
  // 獲取錯誤信息列表
  getDataLog: () => {
    return {
      total: List.length,
      items: List,
      limit: 10
    }
  }
}

/src/mock/index.js

上面的寫完還不行，因為通過 api 提交的請求，mock 不知道哪些是需要請求假數(shù)據(jù)的，所有需要在 index 文件里進(jìn)行攔截

直接加就好了，就這兩行，把剛寫的假數(shù)據(jù)引用進(jìn)來，對請求進(jìn)行攔截

第一個參數(shù)，就是要攔截的 url 這里就和 api 掛鉤起來了

第二個參數(shù)，get 類型請求

第三個參數(shù)，/src/mock/service/dataLog.js 里 export 的對應(yīng)接口，這樣就和 mock 假數(shù)據(jù)也掛鉤起來了

需要攔截多少個請求就要寫多少個

然后 npm run dev 運行測試就好了

axios 連接后臺真數(shù)據(jù)

這里我偷了個懶，由于 utils/request.js 已經(jīng)幫我們把 axios 都弄好了，像 BASE_API 的路徑拼接，我又不想再寫個 api 文件，所以我就直接拿過來用了

先引入

import request from '@/utils/request'

js 部分：

methods: {
    getDataLog() {
      this.listQuery = {
        page: this.listQuery.page,
        limit: this.listQuery.limit,
        object: this.keyword
      }
      // mock 請求假數(shù)據(jù)
      // getDataLog(this.listQuery).then(response => {
      //   this.dataLog = []
      //   this.total = response.data.total
      //   this.dataLog = response.data.items
      //   // 查詢后要把關(guān)鍵字給清空
      //   this.keyword = ''
      // })
      // 請求后臺獲得真實數(shù)據(jù)
      request({
        url: '/log/getDataLog/',
        method: 'post',
        data: this.listQuery
      }).then(response => {
        this.dataLog = []
        this.total = response.data.pageEntity.total
        this.dataLog = response.data.retData
      })
    }
  }

這里訪問路徑就是 http://127.0.0.1:8081/log/getDataLog，如果全路徑訪問也是可以的，url 前面帶了 “/”意思就是會進(jìn)行路徑的拼接，如果寫的是 url: 'log/getDataLog' 那么訪問就報錯了，因為前綴沒拼上，還有要把 mock 里的 index.js 文件里的注掉，要不會攔截變成假數(shù)據(jù)

這里用的是 post 方法，后臺部分直接用 @RequestBody 接收參數(shù)就好了

也可以用 get 方法，把參數(shù)拼在 url 上傳遞，我這采用 restful 形式的接口，用 @PathVariable 接收參數(shù)

這時候你可能會遇到跨域問題

新建 config 包

@Configuration
public class CorssDomainConfig implements WebMvcConfigurer {
 
    @Autowired
    private CorsInterceptor corsInterceptor;
 
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        InterceptorRegistration registration = registry.addInterceptor(corsInterceptor);
        registration.addPathPatterns("/**");
    }
 
}

然后新建 interceptor 包

@Component
public class CorsInterceptor extends HandlerInterceptorAdapter {
 
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
            throws Exception {
        // 添加跨域CORS
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Headers", "Origin,X-Requested-With,Content-Type,Accept,Authorization,token, x-token");
        response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
        return true;
    }
}

項目再啟動時，addInterceptors 就會把 preHandle 給注冊成對象，后續(xù)請求都會經(jīng)過 preHandle 接口對請求做出處理

正式環(huán)境部署

我這前端采用 Nginx 作為前端的運行容器

詳細(xì)部署：Docker 上部署 Nginx

我 Nginx html 文件夾下我保留了 dist目錄

所以 /conf.d/default.conf 要改下

vue 里 config/sit.env.js，這里我配置了測試服的，然后在 prod.env.js 配置了正式服的

module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"sit"',
  // 項目訪問根路徑
  // 測試服
  BASE_API: '"http://xx.xx.xxx.xxx:xxxx"',
}

#測試服打包
npm run build:sit
 
#正式服打包
npm run build:prod

命令就在 package.json 里

打包后會在根目錄生成 dist 文件夾，把文件夾放到服務(wù)器的 html 文件夾下就好了，然后啟動 Nginx，啟動過就不用啟動了，由于我 Nginx 直接配置了 80 端口的，所以直接服務(wù)器路徑訪問就行了

PS:如果遇到了打包報錯的情況，那就把 npm 更新下 npm install ，這會在項目根目錄生成 node_modules 文件夾，這些是需要的依賴，在 linux 上打包我這試了不行，依賴更新了也不對，不知道問題出在哪，應(yīng)該是 windows 和 linux 依賴不太一樣吧

前端完整代碼

/src/views/service/dataLog.vue

<template>
  <div class="app-container">
    <!-- 查詢框 雙向綁定 keyword-->
    <el-input
      v-model="keyword"
      placeholder="請輸入關(guān)鍵字"
      clearable
      style="width:500px" />
    <!-- 搜索按鈕 -->
    <el-button type="primary" icon="el-icon-search" @click="getDataLog()">搜索</el-button>
    <!-- data就是綁定數(shù)據(jù)用的 -->
    <el-table
      :data="dataLog"
      height="600"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="錯誤信息">
              <div v-html="props.row.log"/>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="服務(wù)單"
        prop="data"/>
      <el-table-column
        label="時間"
        prop="time"/>
    </el-table>
    <!-- 分頁 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getDataLog" />
      <!-- total總條數(shù)
     listQuery.page 當(dāng)前頁
     listQuery.limit 每頁幾條
     getDataLog 后買點擊分頁時候要回調(diào)的函數(shù) -->
  </div>
</template>
 
<script>
// import { getDataLog } from '@/api/service/dataLog'
import Pagination from '@/components/Pagination'
import request from '@/utils/request'
 
export default {
  components: { Pagination },
  data() {
    return {
      // 搜索關(guān)鍵字
      keyword: '',
      // 數(shù)據(jù)條數(shù)
      total: 0,
      // 分頁參數(shù)
      listQuery: {
        page: 1,
        limit: 10
      },
      // 列表數(shù)據(jù)
      dataLog: []
    }
  },
  created() {
    this.getDataLog()
  },
  methods: {
    getDataLog() {
      this.listQuery = {
        page: this.listQuery.page,
        limit: this.listQuery.limit,
        object: this.keyword
      }
      // mock 請求假數(shù)據(jù)
      // getDataLog(this.listQuery).then(response => {
      //   this.dataLog = []
      //   this.total = response.data.total
      //   this.dataLog = response.data.items
      //   // 查詢后要把關(guān)鍵字給清空
      //   this.keyword = ''
      // })
      // 請求后臺獲得真實數(shù)據(jù)
      request({
        url: '/log/getDataLog/',
        method: 'post',
        data: this.listQuery
      }).then(response => {
        this.dataLog = []
        this.total = response.data.pageEntity.total
        this.dataLog = response.data.retData
      })
    }
  }
}
</script>
 
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

/src/api/service/dataLog.js

import request from '@/utils/request'
 
// 獲取錯誤信息列表
export function getDataLog(query) {
  return request({
    url: '/log/getDataLog',
    method: 'get',
    params: query
  })
}

/src/mock/service/index.js

攔截原因，請求后臺就注掉

// Mock.mock(/\/log\/getDataLog/, 'get', dataLogAPI.getDataLog)

/src/mock/service/dataLog.js

import Mock from 'mockjs'
 
const List = []
 
const count = 10
 
// 模擬錯誤信息
for (let i = 0; i < count; i++) {
  List.push(Mock.mock({
    data: '12987122',
    time: '好滋好味雞蛋仔',
    log: '江浙小吃、小吃零食江浙小吃、小吃零食'
  }))
}
 
export default {
  // 獲取錯誤信息列表
  getDataLog: () => {
    return {
      total: List.length,
      items: List,
      limit: 10
    }
  }
}