地址管理案例的实现
使用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>