admin

10_vuecli/bankpro/.env.development

@@ -3,3 +3,5 @@ ENV = 'development'
 
 # base api
 VUE_APP_BASE_API = '/dev-api'
+# 地址列表接口 基础路径
+VUE_APP_BASE_API2 = "http://39.105.160.25:18080"

10_vuecli/bankpro/src/api/address.js

@@ -0,0 +1,20 @@
+import request from '@/utils/request2'
+
+// 1、定义地址列表接口 基础路径 在 .env.development 文件中
+// VUE_APP_BASE_API2 = "http://39.105.160.25:18080"
+// 修改完 .env.development 文件后 重启项目
+
+
+// 2、创建请求方法文件 request2.js 封装 axios 请求
+
+// 3、创建接口js文件 写相应的接口方法 （例如address.js） 
+
+export function getAddressList() {
+    // 调用封装好的axios 发送 get 请求
+    return request({
+        // 地址列表接口 请求的路径
+        url: "/addressController/getAddress",
+        // 请求方法 （根据接口文档使用相应的方法）
+        method: "get"
+    })
+}

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

@@ -0,0 +1,34 @@
+import axios from 'axios'
+import { Message } from 'element-ui'
+
+// 创建 axios 实例
+const service = axios.create({
+  // baseURL 基础路径
+  // url（完整请求路径） = base url（基础路径） + request url（请求路径）
+  baseURL: process.env.VUE_APP_BASE_API2, 
+  // 超时时间 5s 如果超过 5s 没有响应 则报错
+  timeout: 5000 
+})
+
+
+
+// 响应拦截器 对响应数据进行处理
+service.interceptors.response.use(
+  response => {
+    const res = response.data
+    return res
+  },
+  // 对响应错误进行处理
+  error => {
+    console.log('err' + error) 
+    // 响应错误提示 弹框
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default service

10_vuecli/bankpro/src/views/address/AddressList.vue

@@ -1,5 +1,57 @@
 <template>
-    <div>
-        <h1>地址列表</h1>
+    <div class="address-list">
+        <el-table :data="tableData" style="width: 100%">
+            <el-table-column type="index" label="序号" width="200">
+            </el-table-column>
+            <el-table-column prop="addressid" label="地址ID">
+            </el-table-column>
+            <el-table-column prop="addressname" label="地址名称">
+            </el-table-column>
+            <el-table-column prop="longitude" label="地址经度">
+            </el-table-column>
+            <el-table-column prop="latitude" label="地址纬度">
+            </el-table-column>
+            <el-table-column label="操作">
+                <template slot-scope="scope">
+                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+                    <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
+                    <el-popconfirm title="确定删除吗？" @onConfirm="deleteConfirm(scope.row)" confirm-button-text="确定删除">
+                        <el-button slot="reference" size="mini" type="danger">删除</el-button>
+                    </el-popconfirm>
+                </template>
+            </el-table-column>
+        </el-table>
     </div>
-</template>
+</template>
+<script>
+// 引入地址列表接口方法
+import { getAddressList } from '@/api/address'
+export default {
+    name: 'AddressList',
+    data(){
+        return{
+            tableData:[]
+        }
+    },
+    created() {
+        // 调用地址列表接口方法
+        this.getAddress()
+    },
+    methods: {
+        // 获取地址列表
+        getAddress() {
+            // 调用地址列表接口方法
+            getAddressList().then(res => {
+                console.log(res);
+                let newData = res.data.records;
+                this.tableData = newData;
+            })
+        }
+    }
+}
+</script>
+<style scoped>
+.address-list{
+   padding:20px;
+}
+</style>