项目

day35/vue-admin-template-master/src/api/location.js

@@ -0,0 +1,27 @@
+import request from '@/utils/request'
+
+// 获取地址列表
+export function locationMain() {
+  return request({
+    url: '/showAddresses',
+    method: 'get',
+  })
+}
+
+// 添加地址列表
+export function addLocation(data) {
+  return request({
+    url: '/insertOneAddress',
+    method: 'post',
+    data
+  })
+}
+
+// 删除地址列表
+export function delLocation(params) {
+  return request({
+    url: '/delOneAddress',
+    method: 'get',
+    params
+  })
+}

day35/vue-admin-template-master/src/views/location/addLocation.vue

@@ -1,15 +1,113 @@
 <template>
-  <div>
-    添加页面
+  <div class="add-location">
+    <el-form
+      :model="ruleForm"
+      ref="ruleForm"
+      label-width="100px"
+      class="demo-ruleForm"
+      :rules="rules"
+    >
+      <el-form-item
+        label="地址名称"
+        prop="address"
+      >
+        <el-input
+          v-model="ruleForm.address"
+        ></el-input>
+      </el-form-item>
+      <el-form-item
+        label="地址经度"
+        prop="longitude"
+      >
+        <el-input
+          v-model="ruleForm.longitude"
+        ></el-input>
+      </el-form-item>
+      <el-form-item
+        label="地址纬度"
+        prop="latitude"
+      >
+        <el-input
+          v-model="ruleForm.latitude"
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('ruleForm')"
+          >提交</el-button
+        >
+        <el-button @click="resetForm('ruleForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
 <script>
+import {addLocation} from '@/api/location.js';
 export default {
-    name:"addLocation"
-}
+  name: "levelList",
+  data() {
+    return {
+      ruleForm: {
+        address: "",
+        longitude:"",
+        latitude:""
+      },
+      rules:{
+          address: [
+            { required: true, message: '地址名称不能为空', trigger: 'blur' },
+          ],
+          longitude: [
+            { required: true, message: '地址经度不能为空', trigger: 'blur' },
+          ],
+          latitude: [
+            { required: true, message: '地址纬度不能为空', trigger: 'blur' },
+          ],
+      }
+    };
+  },
+  methods: {
+    submitForm(formName) {
+      console.log(this.ruleForm)
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          addLocation({
+            address: this.ruleForm.address,
+            longitude: this.ruleForm.longitude,
+            latitude: this.ruleForm.latitude
+          }).then(res => {
+            if(res.code == 101) {
+             this.$message({
+              message: res.message,
+              type: 'success'
+            });
+            this.$router.push("/location/index");
+            }
+          }).catch(err=>{
+            console.log(err,'失败')
+          })
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+  },
+};
 </script>
 
-<style>
-
-</style>
+<style scoped lang='scss'>
+.add-location {
+  width: 800px;
+  margin: 200px auto 0;
+}
+// 深度样式穿透 v-deep => ::v-deep 
+// ::v-deep .el-form-item__content {
+//   line-height: 100px;
+// }
+// .el-input {
+//   background: #00f;
+// }
+</style>

day35/vue-admin-template-master/src/views/location/index.vue

@@ -1,15 +1,88 @@
 <template>
-  <div>
-    地址列表
+  <div class="locationList">
+  <el-table
+    :data="tableData"
+    border
+    style="width: 100%">
+     <el-table-column
+      type="index"
+      width="50">
+    </el-table-column>
+    <el-table-column
+      prop="addressname"
+      label="地址名称"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="longitude"
+      label="经度"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="latitude"
+      label="纬度">
+    </el-table-column>
+    <el-table-column label="操作">
+      <template slot-scope="scope">
+        <el-button
+          size="mini"
+          type="danger"
+          @click="handleDelete(scope.row)">删除</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
   </div>
 </template>
 
 <script>
+import {locationMain,delLocation} from '@/api/location.js';
+
 export default {
-    name:"location"
+    name:"location",
+    data() {
+      return {
+        tableData: []
+      }
+    },
+    created() {
+      this.getList();
+    },
+    methods:{
+      // 获取地址列表
+      getList() {
+        locationMain().then(res => {
+          console.log(res,'成功')
+          if(res.code == 101) {
+            this.tableData = res.data;
+          }
+        }).catch(err => {
+          console.log(err,'失败')
+        })
+      },
+      // 删除
+      handleDelete(row) {
+        delLocation({
+          addressid: row.addressid
+        }).then(res=>{
+          console.log(res,'删除成功')
+          if(res.code == 101) {
+            this.$message({
+              message: res.message,
+              type: 'success'
+            });
+            this.getList();
+          }
+        }).catch(err => {
+          console.log(err,'删除失败')
+        })
+      }
+    }
 }
 </script>
 
-<style>
-
+<style scoped lang="scss">
+.locationList {
+  width: 800px;
+  margin: 100px auto 0;
+}
 </style>