Vue3项目实战 实现电商移动端地址管理的效果

地址管理案例的实现

使用JSON-server做增删改

● 新增：axios.post('http://localhost:3000/address', 地址对象)

● 编辑：axios.patch(`http://localhost:3000/address/${id}`, 需要修改的地址对象）

● 删除：axios.delete(`http://localhost:3000/address/${id}`)

● 查找：

○ axios.get('http://localhost:300/address') 获取所有的地址数据

○ axios.get(`http://localhost:3000/address/${id}`) 获取到这个id对应的详情

○ axios.get('http://localhost:300/address', { params: {id, name} }) 按照条件进行查询。模糊查询需要在对象的key值上面加上_like，比如按姓名做模糊搜索 { name_like: '张' }

使用VantUI的Form表单

● 渲染一个Form表单，渲染的同时做好双向绑定v-model，能够方便快捷获取表单数据

○ Form表单的结构：

const onSubmit = (values) => {
    values就是当前的表单值
    比如保存数据：
    axios.post('http://localhost:3000/address', values)
}
<van-form @submit="onSubmit">
     <van-field />
     <van-field />
     <van-button round block type="primary" native-type="submit">
      提交
    </van-button>
</van-from>

■ 外层是vant-form；内层有几个表单项就有几个van-field

■ van-form中，一般都有一个提交按钮，当提交按钮点击的时候，触发到van-form的submit事件，事件的回调函数中，对应的参数就是Form表单的值。

■ 注意，form表单中的按钮，只有配置native-type为submit，这个按钮被点击时才能触发Form表单的submit事件

○ Form表单如何回显数据：

const form = reactive({
    name: '',
    age: ''
})

<van-form @submit="onSubmit">
    <van-field
      v-model="form.name"
      name="name"
      label="姓名" />
    <van-field
      v-model="form.age"
      name="age"
      label="年龄"
      placeholder="用户名"  />
</van-form>

// 获取详情然后回显
const res = await axios.get(`http://localhost:3000/address/${id}`)
form.age = res.data.age
form.name = res.data.name

把某个地址设置为默认

【一般全局只能有一个地址是默认】

● 把某个地址设置为默认的方法

cosnt setDefault = async (id, flag) => {
    await axios.patch(`http://localhost:3000/address/${id}`, { isDefault: flag }）
}

● 考虑到全局只有一个默认时，这样设置：

// 把已经是默认的设置为非默认，然后再把自己设置为默认
const setSingleDefault = async (id) => {
    const res = await axios.get('http://localhost:300/address', { params: {isDefault: true} }) 
    // 当前默认地址的id
    if (res.data.length > 0) {
        const currentDefaultId = res.data[0].id
        await setDefault(currentDefaultId, false)
    }
    await setDefault(id, true)
}

新增和编辑公用一个组件

1.  新增和编辑，都是独立的路由页面，都有独立的地址。比如：新增是 /add；编辑是 /edit

2.  编辑需要带上数据id，如果是动态路由模式：/edit/:id

3.  不同的地址，进入到同一个页面或组件中，就可以做这样的判断

<script setup>
const route = useRoute()
const { id } = route.params
const onSave = async () => {
    if (id) {
        // 如果URL参数上有id，说明当前是编辑
        await axios.patch(`http://localhost:3000/address/${id}`, form）
    } else {
        await axios.post('http://localhost:3000/address', form)
    }
}
onMounted(async () => {
    if (id) {
        // 编辑时，需要先回显数据
        const res = await axios.get(`http://localhost:3000/address/${id}`) 
        form.name = res.data.name
        form.age = res.data.age
    }
})
<script>