地址管理：添加地址 vant 和扩展运算传参data: { ...content, },

前端->思路：

采用vant插件的地址编辑模块 + 省市区模块

注意：

1.1 地址编辑模块 data是不包含省市区数据的，默认为空数组，要自己去省市区模块那里复制数据过来

1.2 data中 areaList 是报错的，一开始，要根据vant文档查看默认要赋值为：空对象 areaList：{}
点击保存发送一个请求,请求时间采用 vant组件已经有的来发送，第一个参数content为填写的地址信息，将填写的内容写到数据库表path中

注意：

2.1 发送的数据：isDefault 默认传递的是 ture 或 false,为了更好的写进数据库自己在发送请求之前，改成 1 或 0 --> content.isDefault = content.isDefault ? 1 : 0;

2.2 发送的数据要包含 token ，post请求，其中 data采用扩展运算符方式传递
（重要：老师没讲直接使用了，初学者容易直接不用扩展运算符，导致报错）对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

链接：blog.csdn.net/Oralinge/ar…
```
 data: {
   ...content,
 },
 例子：
 <body>
     <script>
         let a = { 'c': 1, "b": 2 }
         let b = { ...a }
         console.log(b); //结果 {c: 1, b: 2}
     </script>
 </body>
```

3.数据成功写入之后跳转到我的地址页面 this.$router.push("/path");

前端代码

<template>
  <div class="addaddress">
    <header>
      <Header>
        <template #login>
          <div></div>
        </template>

        <template #middle>
          <div>添加地址</div>
        </template>
      </Header>
    </header>
    <section>
      <Section>
        <template #section>
          <van-address-edit
            :area-list="areaList"
            show-set-default
            show-search-result
            :search-result="searchResult"
            @save="onSave"
            @change-detail="onChangeDetail"
          />
          <!-- <van-area title="标题" :area-list="areaList" /> -->
        </template>
      </Section>
    </section>
    <Tabber></Tabber>
  </div>
</template>

<script>
import Tabber from "@/components/common/Tabbar.vue";
import Header from "@/components/my/Header.vue";
import Section from "@/components/my/Section.vue";
import { Toast } from "vant";
import http from "@/common/api/request.js";
export default {
  name: "AddAddress",
  components: {
    // Index,
    Section,
    Header,
    Tabber,
  },
  data() {
    return {
      areaList: {
        province_list: {
          110000: "北京市",
          120000: "天津市",
          440000: "广东省",
        },
        city_list: {
          110100: "北京市",
          120100: "天津市",
          440300: "深圳市",
        },
        county_list: {
          110101: "东城区",
          110102: "西城区",
          440306400498: "宝安区",
          // ....
        },
      },
      searchResult: [],
      setDefault: 0,
    };
  },
  methods: {
    async onSave(content) {
      // 点击保存 将填写的内容传递给后端，后端来做数据库插入
      content.isDefault = content.isDefault ? 1 : 0;
      console.log(content);
      let res = await http.$axios({
        url: "/api/updateNum",
        method: "POST",
        headers: {
          token: true,
        },
        data: {
          ...content,
        },
      });
      if (res.success) Toast(res.msg);
      //   跳转到 我的地址页面
      this.$router.push("/path");
    },

    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: "黄龙万科中心",
            address: "杭州市西湖区",
          },
        ];
      } else {
        this.searchResult = [
          {
            province: "4",
            city: "3",
            county: "2",
            addressDetail: "1",
          },
        ];
      }
    },
  },
};
</script>
<style lang="less" scoped>
.addaddress {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: rgb(236, 230, 230);
}
section {
  flex: 1;
  overflow: hidden;
  ul li {
    height: 1.706667rem;
    background-color: #fff;
    div {
      height: 0.8rem;
    }
  }
  ::v-deep .van-button--danger {
    font-size: 0.426667rem;
    background-color: #13acf3;
    border: 1px solid #13acf3;
  }
}
</style>

后端思路：

 1.获取前端传递过来的参数：token
     注意：
     1.1 token 要解析，解析出来的token赋值为一个变量，然后判断token是否为null 如果为null 返回用户信息 让前端去做判断，跳转到登录页面
     1.2  通过解析出来的token获取到电话号码${tokenObj.tel} 去查询用户user表,保存id作为用户uid
 
 
2. 获取前端传递过来的地址信息,并解构出来需要的字段，将需要的字段信息通过sql保存到数据库中
    注意：
    2.1 通过解构出来的字段isDefault 判断这条地址是否已经为 1 即为默认地址，如果不为1 直接执行插入的sql语句
    2.2 如果已经为 1 则先执行修改数据库表中的这个字段isDefault 改为 0，然后再执行插入语句，讲地址信息保存到数据库中

后端：接口

// 添加地址
router.post('/api/updateNum', function (req, res, next) {
  // 前端传递过来的token,解析token
  let tokens = req.headers.token;
  console.log(req.body, 'req.body');
  let {
    name,
    tel,
    province,
    city,
    county,
    areaCode,
    isDefault,
    addressDetail
  } = req.body

  console.log(name, tel, province, city, county, areaCode, isDefault, addressDetail, 'adfadsfadsfa');

  let tokenObj = jwt.decode(tokens) //结果 { tel: '18666554444', iat: 1628506659 }
  if (tokenObj == null) {
    res.send({
      data: {
        code: 400,
        success: false,
        msg: '请先登录'
      }
    })
  } else {
    // 根据token解析出来的手机号，来查询对应的用户表，查到对应的用户
    connection.query(`select * from user where tel ="${tokenObj.tel}"`, function (e, r) {

      if (r.length > 0) {
        let uid = r[0].id
        // 将前端传递过来的参数 写入数据库 判断默认地址字段是否已经为 1，如果没有，就直接写入数据库
        console.log(typeof isDefault);
        if (isDefault != 1) {
          connection.query(`insert into path (uid,name, tel, province, city, county, areaCode, isDefault,addressDetail) values
          ("${uid}","${name}","${tel}","${province}","${city}","${county}","${areaCode}","${isDefault}" ,"${addressDetail}") `, function (err, resultpath) {
            res.send({
              data: {
                code: 200,
                success: true,
                msg: '保存地址成功',
              }
            })
          })
        }
       // 将默认地址isDefault 为 1 的 改成0 ，再插入当前保存的数据 
        connection.query(`update path set isDefault = 0 where uid = ${uid} and isDefault = 1`, function (e, result) {
          if (result) {
            connection.query(`insert into path (uid,name, tel, province, city, county, areaCode, isDefault,addressDetail) values
                ("${uid}","${name}","${tel}","${province}","${city}","${county}","${areaCode}","${isDefault}" ,"${addressDetail}") `, function (err, resultpath) {
              res.send({
                data: {
                  code: 200,
                  success: true,
                  msg: '保存地址成功',
                }
              })
            })
          }
        })
      }
    })
  }
})

###页面的模样

地址管理 ：添加地址 vant 和 扩展运算传参data: { ...content, },

前端->思路：

前端代码

后端思路：

后端：接口

地址管理：添加地址 vant 和扩展运算传参data: { ...content, },