在学校做实习项目的商城用到了，感觉网上搜到的都不是很全所以自己写一份，也方便自己后面使用。后端是我自己拿Nodejs写的接口，使用的时候大家根据自己需求改一下吧。

我自己技术也不是很好，就是发出来给大家参考参考，欢迎指正。

功能包括了添加地址，修改地址，删除地址，保存地址。

vant组件我引入的是全部，按需引入请自行添加引入的代码

Vant踩坑之地址列表AddressList +地址编辑AddressEdit

目录

地址列表

 地址编辑

JS接口

地址列表

//地址列表
<template>
  <div>
    <van-nav-bar
      title="确认收货地址"
      placeholder
      fixed
      left-arrow
      @click-left="goBack"
    />
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: sessionStorage.getItem("uname"), //获取用户名
      chosenAddressId: "1",
      list: [],
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    onAdd() {
      this.$router.push("/address");
    },
    //点击编辑传地址id给地址编辑，以便地址回显
    onEdit(item, index) {
      let id = this.list[index].id;
      this.$router.push(`address?id=${id}`);
    },
  },
  mounted() {
    //发送请求获取地址
    this.axios.post("/address?uname=" + this.uname).then((res) => {
      this.list = res.data.results;
      //选中地址列表的第一个地址
      if (this.list.length != 0) {
        this.chosenAddressId = this.list[0].id;
      }
      console.log(this.list);
    });
  },
};
</script>

 地址编辑

 需要在控制台引入areaList

npm i @vant/area-data -D
//地址编辑
<template>
  <div>
    <van-nav-bar
      title="新增地址"
      placeholder
      fixed
      left-arrow
      @click-left="goBack"
    />
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      :address-info="{
        name: info.name,
        tel: info.tel,
        addressDetail: info.addressDetail,
        areaCode: info.areaCode,
        postalCode: info.postalCode,
        isDefault: info.isDefault,
      }"
    />
  </div>
</template>
<script>
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      areaList,
      searchResult: [],
      info: [],
      uname: sessionStorage.getItem("uname"),
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    onSave(content) {
      this.isDefault = content.isDefault ? "1" : "0"; //数据库该项设置为0，1，如不需修改可删除该行
      //如果地址id不存在，则连接新增地址接口，存在则连接修改地址接口
      if (!this.$route.query.id) {
        //发送请求连接新增地址接口
        this.axios
          .post(
            "/addAddress",
            `uname=${this.uname}&name=${content.name}&phone=${content.tel}&province=${content.province}&city=${content.city}&county=${content.county}&detail_addr=${content.addressDetail}&group_message=${this.isDefault }&areaCode=${content.areaCode}&postalCode=${content.postalCode}`
          )
          .then((res) => {
            console.log(res);
          });
      } else {
        //发送请求连接修改地址接口
        this.axios
          .post(
            "/updateAddress",
            `id=${this.$route.query.id}&name=${content.name}&phone=${content.tel}&province=${content.province}&city=${content.city}&county=${content.county}&detail_addr=${content.addressDetail}&group_message=${this.group_message}&areaCode=${content.areaCode}&postalCode=${content.postalCode}`
          )
          .then((res) => {
            console.log(res);
          });
      }
      this.$toast.success("保存成功");
      //返回地址列表页，强制刷新
      this.$router.replace("/addresslist");
      location.reload();
    },
    onDelete() {
      let id = this.$route.query.id;
      //发送请求连接删除地址接口
      this.axios.post("/delAddress?id=" + id).then((res) => {
        console.log(res.data);
      });
      this.$toast.success("删除成功");
      this.$router.go(-1);
    },
  },
  mounted() {
    //获取地址列表传的地址id
    let id = this.$route.query.id;
    //地址id存在则发请求回显地址
    if (id) {
      //发送请求获取地址内容
      this.axios.post("/addressId?id=" + id).then((res) => {
        //通过address-info回显地址
        this.info = res.data.results;
        this.info.isDefault = this.info.isDefault == 1 ? true : false;
        console.log(this.info.isDefault);
        console.log(this.info);
      });
    }
  },
};
</script>

JS接口

地址列表显示的时候需要拼接省市区详细地址，重命名为address,这样地址列表才能显示 concat(province,city,county,addressDetail) AS address


//查看全部地址的接口
server.post('/address', (req, res) => {
  //获取地址栏中的uname参数
  let uname = req.query.uname
  // SQL查询
  let sql =
    'SELECT id,user_id,name,isDefault,tel,province,city,county,addressDetail,concat(province,city,county,addressDetail) AS address FROM `xz_receiver_address` WHERE user_id=? ORDER BY `xz_receiver_address`.`isDefault`  DESC'
  // 执行SQL查询
  pool.query(sql, [uname], (error, results) => {
    if (error) throw error
    // 返回数据到客户端
    res.send({ message: 'ok', code: 200, results: results })
  })
})

//按序号删除地址的接口
server.post('/delAddress', (req, res) => {
  //获取地址栏中的uname参数
  let id = req.query.id
  // SQL查询
  let sql = 'DELETE FROM `xz_receiver_address`WHERE id =?'
  // 执行SQL查询
  pool.query(sql, [id], (error, results) => {
    if (error) throw error
    // 返回数据到客户端
    res.send({ message: 'ok', code: 200, results: results[0] })
  })
})

//按序号查看地址的接口
server.post('/addressId', (req, res) => {
  //获取地址栏中的uname参数
  let id = req.query.id
  // SQL查询
  let sql = 'SELECT * FROM `xz_receiver_address`WHERE id =?'
  // 执行SQL查询
  pool.query(sql, [id], (error, results) => {
    if (error) throw error
    // 返回数据到客户端
    res.send({ message: 'ok', code: 200, results: results[0] })
  })
})

// 修改地址数据的接口
server.post('/updateAddress', (req, res) => {
  //获取地址栏中的id参数
  let id = parseInt(req.body.id)
  let name = req.body.name
  let phone = req.body.phone
  let province = req.body.province
  let city = req.body.city
  let county = req.body.county
  let detail_addr = req.body.detail_addr
  let group_message = req.body.group_message
  let areaCode = req.body.areaCode
  let postalCode = req.body.postalCode
  // SQL查询
  let sql =
    'UPDATE xz_receiver_address SET name =?, province =?, city =?, county =?, addressDetail =?, tel =?, postalCode =?, areaCode =?, isDefault =? WHERE id =?'
  // 执行SQL查询
  pool.query(
    sql,
    [
      name,
      province,
      city,
      county,
      detail_addr,
      phone,
      postalCode,
      areaCode,
      group_message,
      id,
    ],
    (error, results) => {
      if (error) throw error
      // 返回数据到客户端
      if (results.length == 0) {
        //登录失败
        res.send({ message: 'login failed', code: 201 })
      } else {
        //登录成功
        res.send({ message: 'ok', code: 200, result: results })
      }
    },
  )
})

// 添加地址数据的接口
server.post('/addAddress', (req, res) => {
  //获取地址栏中的id参数
  let uname = req.body.uname
  let name = req.body.name
  let phone = req.body.phone
  let province = req.body.province
  let city = req.body.city
  let county = req.body.county
  let detail_addr = req.body.detail_addr
  let group_message = req.body.group_message
  let areaCode = req.body.areaCode
  let postalCode = req.body.postalCode
  // SQL查询
  let sql =
    'INSERT `xz_receiver_address` (`user_id`, `name`, `province`, `city`, `county`, `addressDetail`, `tel`, `postalCode`, `areaCode`, `isDefault`) VALUES (?,?,?,?,?,?,?,?,?,?) '
  // 执行SQL查询
  pool.query(
    sql,
    [
      uname,
      name,
      province,
      city,
      county,
      detail_addr,
      phone,
      postalCode,
      areaCode,
      group_message,
    ],
    (error, results) => {
      if (error) throw error
      // 返回数据到客户端
      if (results.length == 0) {
        //请求失败
        res.send({ message: 'get failed', code: 201 })
      } else {
        //请求成功
        res.send({ message: 'ok', code: 200, result: results })
        console.log(phone)
      }
    },
  )
})

数据库

CREATE TABLE `xz_receiver_address` (
  `id` int(11) NOT NULL,
  `user_id` varchar(100) DEFAULT NULL,
  `name` varchar(16) DEFAULT NULL,
  `province` varchar(16) DEFAULT NULL,
  `city` varchar(16) DEFAULT NULL,
  `county` varchar(16) DEFAULT NULL,
  `addressDetail` varchar(128) DEFAULT NULL,
  `tel` varchar(32) NOT NULL,
  `postalCode` char(6) DEFAULT NULL,
  `areaCode` varchar(16) DEFAULT NULL,
  `isDefault` tinyint(1) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

---------------默认地址的问题----------------

这个是你在输入地址时选中就会添加为默认，

但他不会判断其他地址中有没有默认地址，然后修改，

这个大家自己解决一下吧

# vue.js
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

【GaussDB(for MySQL)】 Big IN查询优化

avatar 华为云开发者联盟
cover

GaussDB细粒度资源管控技术透视

avatar 华为云开发者联盟
cover

关于Java Chassis 3的契约优先（API First）开发

avatar 华为云开发者联盟