admin

10_vuecli/vueadmin/.env.development

@@ -3,3 +3,4 @@ ENV = 'development'
 
 # base api
 VUE_APP_BASE_API = '/dev-api'
+VUE_APP_BASE_API2 = 'http://39.105.160.25:18080'

10_vuecli/vueadmin/src/api/level.js

@@ -0,0 +1,15 @@
+// 引入封装好的axios实例
+import request from '@/utils/request2'
+
+// 定义获取等级列表的方法
+export function getLevelList() {
+    // 调用axios实例发送请求 获取等级列表
+    return request({
+        // 请求地址 可以在接口文档中查看
+        url:"/levelController/getLevel",
+        // 请求方法 可以在接口文档中查看
+        method:"get",
+        // 请求参数 可以在接口文档中查看，如果没有参数 可以不写
+        // params:{}
+    })
+}

10_vuecli/vueadmin/src/utils/request2.js

@@ -0,0 +1,53 @@
+import axios from 'axios'
+import { Message } from 'element-ui'
+
+// 创建axios实例
+const service = axios.create({
+  // 基础URL 用于请求后端接口的基础路径 例如：http://39.105.160.25:18080
+  baseURL: process.env.VUE_APP_BASE_API2, //存储在.env文件中一个变量 .env.development 中配置
+  // timeout 请求超时时间 5秒
+  timeout: 5000 
+})
+
+// request interceptor 请求拦截器 用于在发送请求之前对请求进行处理
+// service.interceptors.request.use(
+//   config => {
+//     // do something before request is sent
+
+//     if (store.getters.token) {
+//       // let each request carry token
+//       // ['X-Token'] is a custom headers key
+//       // please modify it according to the actual situation
+//       config.headers['X-Token'] = getToken()
+//     }
+//     return config
+//   },
+//   error => {
+//     // do something with request error
+//     console.log(error) // for debug
+//     return Promise.reject(error)
+//   }
+// )
+
+// response interceptor 响应拦截器 用于在收到响应后对响应进行处理
+service.interceptors.response.use(
+  // 接收响应数据
+  response => {
+    const res = response.data
+    // 接收到数据后直接返回数据
+    return res
+  },
+  error => {
+    // 如果错误的情况下
+    console.log('err' + error) // for debug
+    // element-ui提供的一个弹框效果 提示错误信息
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default service

10_vuecli/vueadmin/src/views/level/LevelList.vue

@@ -9,7 +9,7 @@
                 <!-- 表格 -->
                 <template>
                     <el-table :data="tableData" style="width: 100%">
-                        <el-table-column  label="序号" type="index" width="180"></el-table-column>
+                        <el-table-column label="序号" type="index" width="180"></el-table-column>
                         <el-table-column label="等级ID" prop="date"></el-table-column>
                         <el-table-column label="等级名称" prop="name"></el-table-column>
                         <el-table-column label="操作">
@@ -26,6 +26,8 @@
     </div>
 </template>
 <script>
+// 引入获取等级列表的方法 通过解构赋值接收相应的方法
+import { getLevelList } from '@/api/level'
 export default {
     name: 'LevelList',
     data() {
@@ -49,7 +51,21 @@ export default {
             ]
         }
     },
+    // 生命周期函数 created 组件创建完成后调用
+    // 尽量少的在生命周期函数内处理业务 如果业务比较复杂可以将业务封装成函数写在 methods 中 然后在生命周期函数中调用该函数
+    created() {
+        // 调用获取等级列表的方法
+        this.getLevelHandle()
+    },
     methods: {
+        // 获取等级函数
+        getLevelHandle() {
+            // 调用获取等级列表的方法
+            getLevelList().then(res => {
+                // 接收到数据后 赋值给 tableData
+                this.tableData = res.data
+            })
+        },
         handleEdit(index, row) {
             console.log(index, row);
         },