admin

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

@@ -6,4 +6,12 @@ export function getAddressList() {
         url: '/addressController/getAddress',
         method: 'get',
     })
+}
+// 添加地址
+export function addAddress(data) {
+    return request({
+        url: '/addressController/saveOrUpdateAddress',
+        method: 'post',
+        data,
+    })
 }

10_vuecli/vueadmin/src/router/index.js

@@ -108,7 +108,7 @@ export const constantRoutes = [
     path: '/address',
     component: Layout,
     name: 'Address',
-    redirect: '/address/addresslist',
+    redirect: 'addresslist',
     meta:{title:'地址管理',icon:'el-icon-medal-1'},
     children: [
       {

10_vuecli/vueadmin/src/views/address/AddressAdd.vue

@@ -1,5 +1,72 @@
 <template>
-    <div>
-        <h1>添加地址</h1>
+    <div class="address-add">
+        <el-form :model="addressForm" ref="addressForm" label-width="100px" class="demo-ruleForm">
+            <el-form-item label="地址名称" prop="addressname" :rules="[
+                { required: true, message: '地址名称不能为空' },
+            ]">
+                <el-input v-model="addressForm.addressname" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="地址纬度" prop="latitude" :rules="[
+                { required: true, message: '地址纬度不能为空' },
+            ]">
+                <el-input v-model="addressForm.latitude" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="地址经度" prop="longitude" :rules="[
+                { required: true, message: '地址经度不能为空' },
+            ]">
+                <el-input v-model="addressForm.longitude" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="submitForm('addressForm')">提交</el-button>
+                <el-button @click="resetForm('addressForm')">重置</el-button>
+            </el-form-item>
+        </el-form>
     </div>
-</template>
+</template>
+<script>
+import { addAddress } from '@/api/address'
+export default {
+    name: 'AddressAdd',
+    data() {
+        return {
+            addressForm: {
+                addressname: '',
+                latitude: '',
+                longitude: '',
+            }
+        };
+    },
+    methods: {
+        submitForm(formName) {
+            // this.$refs["组件的ref属性值"] 是获取到组件的实例对象
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    addAddress(this.addressForm).then(res => {
+                        // 弹框通知用户添加成功
+                        this.$message({
+                            message: '添加成功',
+                            type: 'success'
+                        });
+                        // 提交成功后，跳转到地址列表页面
+                        this.$router.push('/address/addresslist');
+
+                        console.log(res);
+                    })
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        }
+    }
+}
+</script>
+<style scoped>
+.address-add {
+    width: 500px;
+    margin: 200px auto;
+}
+</style>