前后端分离项目之新增编辑功能

### Vue.js 前端开发笔记：图书添加与编辑功能

1. 响应式数据管理

    - 使用 ` reactive` 创建响应式对象，用于管理表单数据。

    - 在模板中使用 ` v-model` 实现双向数据绑定，确保用户输入能够实时更新响应式数据。

2. API 调用

    - 使用 Axios 进行 HTTP 请求，调用后端 API 实现图书的添加和更新。

    - 在保存成功后，通过路由跳转返回到主页面。

#### 前端代码要点

```vue

<template>

    <input type="text" v-model="obj.bookname">

    <input type="text" v-model="obj.author">

</template>

<script setup>

import { onMounted, reactive } from "vue";

import { getItem, putItem, addItem, getId } from '@/api/api.js';

import { useRouter, useRoute } from "vue-router";

let route = useRoute();

let router = useRouter();

let obj = reactive({

    author: '',

    bookname: ''

});

onMounted(async () => {

    let id = route.params.id || 0;

    if (id) {

        let res = await getId(id);

        Object.assign(obj, res.data);

    }

});

async function btnSave() {

    let id = route.params.id;

    let res;

    if (id) {

        res = await putItem(id, obj);

    } else {

        res = await addItem(obj);

    }

    if (res.code === 1000) {

        router.push('/');

    } else {

        console.log(res.msg);

    }

}

</script>

```

#### 后端代码要点

```javascript

export const getId = async (id) => {

    let data = await axios.get(`http://localhost:8000/books/${id}`);

    return data.data;

};

export const addItem = async (obj) => {

    let data = await axios.post(`http://localhost:8000/books`, obj);

    return data.data;

};

export const putItem = async (id, obj) => {

    let data = await axios.put(`http://localhost:8000/books/${id}`, obj);

    return data.data;

};

```