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

更新時(shí)間：2022年04月28日 10:54:27 作者：樂(lè)之終曲

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

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

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

主要分為幾個(gè)部分

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

肯定有地方不太對(duì)的，麻煩大家指出來(lái)

安裝

前端我推薦用 vscode 就是好用

vscode官網(wǎng)

安裝node.js及npm

npm官網(wǎng)地址

下載node，安裝很簡(jiǎn)單一直下一步就可以了。

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

node -v
npm -v

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

下載 vue-element-admin，并啟動(dòng)

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

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

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

可以直接下載壓縮包解壓，也可以通過(guò) git 下載

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

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

準(zhǔn)備工作

漢化

打開(kāi)vscode后
Windows、Linux 快捷鍵是：ctrl+shift+p

macOS 快捷鍵是：command + shift + p
搜索 Configure Language，選擇下圖第一個(gè)選項(xiàng)。

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

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

ESLint

剛開(kāi)始很難用，瘋狂報(bào)錯(cuò)，那是因?yàn)闆](méi)配好，配好后一些小的問(wèn)題，會(huì)自動(dòng)修正，在保存的時(shí)候

文件 ? 首選項(xiàng) ? 設(shè)置 ? 搜索 ESLint ? 點(diǎn)擊在 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

先來(lái)看下 config 文件夾下的 dev.env.js

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

/src/router/index.js

先來(lái)看下目錄

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

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

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

先來(lái)畫(huà)個(gè)頁(yè)面，一個(gè)分頁(yè)列表吧，路徑 /src/service/dataLog.vue 用來(lái)顯示一些信息

我在 element 組件里找了一個(gè)列表功能和分頁(yè)功能

/src/service/dataLog.vue

dataLog.vue 的 template 部分

<template>
  <div class="app-container">
    <!-- 查詢框 雙向綁定 keyword-->
    <el-input
      v-model="keyword"
      placeholder="請(qǐng)輸入關(guān)鍵字"
      clearable
      style="width:500px" />
    <!-- 搜索按鈕 綁定點(diǎn)擊事件 -->
    <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="錯(cuò)誤信息">
              <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="時(shí)間"
        prop="time"/>
    </el-table>
    <!-- 分頁(yè) -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getDataLog" />
      <!-- total總條數(shù)
     listQuery.page 當(dāng)前頁(yè)
     listQuery.limit 每頁(yè)幾條
     getDataLog 后買點(diǎn)擊分頁(yè)時(shí)候要回調(diào)的函數(shù) -->
  </div>
</template>

注意 template 下只能有一個(gè)節(jié)點(diǎn)，兩個(gè)就報(bào)錯(cuò)了，可以試下，所有我放在一個(gè)統(tǒng)一的 div 里

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

樣式部分就不貼了，最后會(huì)把完整的代碼貼出來(lái)，來(lái)看下 js 的部分

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

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

接下來(lái)看看上面的 api 接口

/src/api/service/dataLog.js

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

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

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

/src/mock/service/dataLog.js

接下來(lái)就是使用 mock 假數(shù)據(jù)，我就循環(huán)了10條，因?yàn)榧俚姆猪?yè)，特意去實(shí)現(xiàn)太費(fèi)勁了

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

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

/src/mock/index.js

上面的寫(xiě)完還不行，因?yàn)橥ㄟ^(guò) api 提交的請(qǐng)求，mock 不知道哪些是需要請(qǐng)求假數(shù)據(jù)的，所有需要在 index 文件里進(jìn)行攔截

直接加就好了，就這兩行，把剛寫(xiě)的假數(shù)據(jù)引用進(jìn)來(lái)，對(duì)請(qǐng)求進(jìn)行攔截

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

第二個(gè)參數(shù)，get 類型請(qǐng)求

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

需要攔截多少個(gè)請(qǐng)求就要寫(xiě)多少個(gè)

然后 npm run dev 運(yùn)行測(cè)試就好了

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

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

先引入

import request from '@/utils/request'

js 部分：

methods: {
    getDataLog() {
      this.listQuery = {
        page: this.listQuery.page,
        limit: this.listQuery.limit,
        object: this.keyword
      }
      // mock 請(qǐng)求假數(shù)據(jù)
      // getDataLog(this.listQuery).then(response => {
      //   this.dataLog = []
      //   this.total = response.data.total
      //   this.dataLog = response.data.items
      //   // 查詢后要把關(guān)鍵字給清空
      //   this.keyword = ''
      // })
      // 請(qǐng)求后臺(tái)獲得真實(shí)數(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
      })
    }
  }

這里訪問(wèn)路徑就是 http://127.0.0.1:8081/log/getDataLog，如果全路徑訪問(wèn)也是可以的，url 前面帶了 “/”意思就是會(huì)進(jìn)行路徑的拼接，如果寫(xiě)的是 url: 'log/getDataLog' 那么訪問(wèn)就報(bào)錯(cuò)了，因?yàn)榍熬Y沒(méi)拼上，還有要把 mock 里的 index.js 文件里的注掉，要不會(huì)攔截變成假數(shù)據(jù)

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

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

這時(shí)候你可能會(huì)遇到跨域問(wèn)題

新建 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;
    }
}

項(xiàng)目再啟動(dòng)時(shí)，addInterceptors 就會(huì)把 preHandle 給注冊(cè)成對(duì)象，后續(xù)請(qǐng)求都會(huì)經(jīng)過(guò) preHandle 接口對(duì)請(qǐng)求做出處理

正式環(huán)境部署

我這前端采用 Nginx 作為前端的運(yùn)行容器

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

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

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

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

module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"sit"',
  // 項(xiàng)目訪問(wèn)根路徑
  // 測(cè)試服
  BASE_API: '"http://xx.xx.xxx.xxx:xxxx"',
}

#測(cè)試服打包
npm run build:sit
 
#正式服打包
npm run build:prod

命令就在 package.json 里

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

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

前端完整代碼

/src/views/service/dataLog.vue

<template>
  <div class="app-container">
    <!-- 查詢框 雙向綁定 keyword-->
    <el-input
      v-model="keyword"
      placeholder="請(qǐng)輸入關(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="錯(cuò)誤信息">
              <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="時(shí)間"
        prop="time"/>
    </el-table>
    <!-- 分頁(yè) -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getDataLog" />
      <!-- total總條數(shù)
     listQuery.page 當(dāng)前頁(yè)
     listQuery.limit 每頁(yè)幾條
     getDataLog 后買點(diǎn)擊分頁(yè)時(shí)候要回調(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,
      // 分頁(yè)參數(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 請(qǐng)求假數(shù)據(jù)
      // getDataLog(this.listQuery).then(response => {
      //   this.dataLog = []
      //   this.total = response.data.total
      //   this.dataLog = response.data.items
      //   // 查詢后要把關(guān)鍵字給清空
      //   this.keyword = ''
      // })
      // 請(qǐng)求后臺(tái)獲得真實(shí)數(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'
 
// 獲取錯(cuò)誤信息列表
export function getDataLog(query) {
  return request({
    url: '/log/getDataLog',
    method: 'get',
    params: query
  })
}

/src/mock/service/index.js

攔截原因，請(qǐng)求后臺(tái)就注掉

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

/src/mock/service/dataLog.js

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

參考：

https://blog.csdn.net/brucelpt/article/details/82994332

到此這篇關(guān)于vue-element-admin開(kāi)發(fā)教程(v4.0.0之前)的文章就介紹到這了,更多相關(guān)vue-element-admin開(kāi)發(fā)教程內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: