所屬專欄：?Vue 開發學習進步 說實話都是逼出來的，對于前端沒干過ES6都不會的人，vue視頻也就看了基礎的一些
主要分為幾個部分 安裝
準備工作
mock 假數據頁面
axios 連接后臺真數據
正式環境部署
前端完整代碼
肯定有地方不太對的，麻煩大家指出來
安裝 前端我推薦用 vscode 就是好用 vscode官網
安裝node.js及npm npm官網地址
下載node，安裝很簡單一直下一步就可以了。
win+R 輸入cmd進入命令行 輸入
node -v npm -v
出現以上信息說明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: npm install --registry=https: npm install npm run dev ?
├── build ├── config ├── src │?? ├── api │?? ├── assets │?? ├── components │?? ├── directive │?? ├── filtres │?? ├── icons │?? ├── lang │?? ├── mock │?? ├── router │?? ├── store │?? ├── styles │?? ├── utils │?? ├── vendor │?? ├── views │?? ├── App.vue │?? ├── main.js │ └── permission.js ├── static │?? └── Tinymce ├── .babelrc ├── eslintrc.js ├── .gitignore ├── favicon.ico ├── index.html └── package.json 準備工作 漢化 打開vscode后
macOS 快捷鍵是：command + shift + p
將"locale":“en” 修改為 “locale”:“zh-CN” ，保存文件。
安裝成功以后重啟vscode，語言就改成中文了。
Auto Close Tag 自動閉合HTML標簽
ESLint 剛開始很難用，瘋狂報錯，那是因為沒配好，配好后一些小的問題，會自動修正，在保存的時候
文件 ??首選項 ? 設置 ? 搜索 ESLint ? 點擊在 setting.json 中編輯 ? 粘進去，保存，完事
{ "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 后臺接口的就是公共路徑，調后臺的時候要記得改，這是本地的，剩下的 prod 和 sit 分別是正式環境打包和 測試環境打包的
/src/router/index.js 先來看下目錄
詳細的解釋在這個目錄文件的上面有，每個屬性什么意思，可以在上面看
mock 假數據頁面 mock 主要是幫助前后分離的項目為前端提供數據，這樣才好測試
先來畫個頁面，一個分頁列表吧，路徑 /src/service/dataLog.vue?用來顯示一些信息
我在 element 組件里找了一個列表功能和分頁功能
/src/service/dataLog.vue
dataLog.vue 的 template 部分
<template> <div class="app-container"> <el-input v-model="keyword" placeholder="請輸入關鍵字" clearable style="width:500px" /> <el-button type="primary" icon="el-icon-search" @click="getDataLog()">搜索</el-button> <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="服務單" 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" /> </div> </template> 注意 template 下只能有一個節點，兩個就報錯了，可以試下，所有我放在一個統一的 div 里
至于這些值為啥這樣寫，我只能說照著人家給的模板改就好，人家寫啥你寫啥，樣式啥的人家上面都有
樣式部分就不貼了，最后會把完整的代碼貼出來，來看下 js 的部分
這里解釋下分頁，分頁除了初始化給了第 1 頁和每頁 10 條后，之后每次點擊頁碼，數據都會雙向綁定到值上，所有在調后臺函數的時候，直接取?page 和 limit 值就行了，不想要再去想我怎么去拿 div 上面的數字
<script> import { getDataLog } from '@/api/service/dataLog' import Pagination from '@/components/Pagination' export default { components: { Pagination }, data() { return { keyword: '', total: 0, listQuery: { page: 1, limit: 10 }, dataLog: [] } }, created() { this.getDataLog() }, methods: { getDataLog() { this.listQuery = { page: this.listQuery.page, limit: this.listQuery.limit, object: this.keyword } getDataLog(this.listQuery).then(response => { this.dataLog = [] this.total = response.data.total this.dataLog = response.data.items this.keyword = '' }) } } } </script> 接下來看看上面的 api 接口
/src/api/service/dataLog.js 每次點擊就會去調用 api 接口里的方法，參數都看得懂
上面引用的 request 文件使得每次調用的時候都會對請求進行攔截，上面的 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 假數據，我就循環了10條，因為假的分頁，特意去實現太費勁了
如果有多個接口的數據要返回，可以在 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 不知道哪些是需要請求假數據的，所有需要在 index 文件里進行攔截
直接加就好了，就這兩行，把剛寫的假數據引用進來，對請求進行攔截
第一個參數，就是要攔截的 url?這里就和 api 掛鉤起來了
第二個參數，get 類型請求
第三個參數，/src/mock/service/dataLog.js 里 export 的對應接口，這樣就和 mock 假數據也掛鉤起來了
需要攔截多少個請求就要寫多少個
然后 npm run dev 運行測試就好了
axios 連接后臺真數據 這里我偷了個懶，由于 utils/request.js 已經幫我們把 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 } 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 前面帶了 “/”意思就是會進行路徑的拼接，如果寫的是 url: 'log/getDataLog' 那么訪問就報錯了，因為前綴沒拼上，還有要把 mock 里的 index.js 文件里的注掉，要不會攔截變成假數據
這里用的是 post 方法，后臺部分直接用 @RequestBody 接收參數就好了
也可以用 get 方法，把參數拼在 url 上傳遞，我這采用 restful 形式的接口，用 @PathVariable 接收參數
這時候你可能會遇到跨域問題
新建 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 { 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 給注冊成對象，后續請求都會經過?preHandle 接口對請求做出處理
正式環境部署 我這前端采用 Nginx 作為前端的運行容器
詳細部署：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 文件夾，把文件夾放到服務器的 html 文件夾下就好了，然后啟動 Nginx，啟動過就不用啟動了，由于我 Nginx 直接配置了 80 端口的，所以直接服務器路徑訪問就行了
PS:如果遇到了打包報錯的情況，那就把 npm 更新下 npm install ，這會在項目根目錄生成 node_modules 文件夾，這些是需要的依賴，在 linux 上打包我這試了不行，依賴更新了也不對，不知道問題出在哪，應該是 windows 和 linux 依賴不太一樣吧
前端完整代碼 /src/views/service/dataLog.vue <template> <div class="app-container"> <el-input v-model="keyword" placeholder="請輸入關鍵字" clearable style="width:500px" /> <el-button type="primary" icon="el-icon-search" @click="getDataLog()">搜索</el-button> <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="服務單" 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" /> </div> </template> <script> import Pagination from '@/components/Pagination' import request from '@/utils/request' export default { components: { Pagination }, data() { return { keyword: '', total: 0, listQuery: { page: 1, limit: 10 }, dataLog: [] } }, created() { this.getDataLog() }, methods: { getDataLog() { this.listQuery = { page: this.listQuery.page, limit: this.listQuery.limit, object: this.keyword } 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 } } } ?
轉載于:https://www.cnblogs.com/huge1122/p/11284023.html
總結
以上是生活随笔 為你收集整理的Vue 新手学习笔记：vue-element-admin 之安装，配置及入门开发 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
