# book-system

**Repository Path**: JohnCheng/book-system

## Basic Information

- **Project Name**: book-system
- **Description**: 图书管理系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-03-23
- **Last Updated**: 2025-06-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 图书管理系统

### 1、设置 ip & port

vite.config.ts

```typescript
export default defineConfig({
  //   ...
  server: {
    // 默认打开浏览器
    open: true,
    // 设置IP
    host: "127.0.0.1",
    // 设置端口号
    port: 8084,
  },
});
```

### vue 组件传值与计算属性

```typescript
const props = defineProps({
  showDialog: Boolean,
});

const addVisible = computed(() => {
  return props.showDialog;
});
```

### vue 事件监听

```typescript
watch(
  () => props.info,
  (newVal) => {
    if (newVal) {
      form.value = {
        id: newVal.id,
        BookName: newVal.BookName,
        Author: newVal.Author,
        TypeName: newVal.TypeName,
        Remarks: newVal.Remarks,
      };
    }
  }
);
```

### 封装 axios

1. 安装 axios 依赖

```javascript
pnpm install axios
```

2. 在 src 目录下创建 http 文件夹，并创建 index.ts 文件

```javascript
import axios from "axios";

const get = (BookName: string) => {
  return axios.get(`/api/get>BookName=${BookName}`);
};

const add = (req: {}) => {
  return axios.post(`/api/add`, req);
};

const edit = (req: {}) => {
  return axios.post(`/api/edit`, req);
};

const del = (Id: number) => {
  return axios.get(`/api/del?Id=${Id}`);
};

export { get, add, edit, del };
```

### 跨域问题

1、编写完 api 接口以后，我们使用 axios 访问数据时，会发现在浏览器中出现 CORS 错误，这便是跨域问题了。
2、跨域的由来是前端 ip 和后端 ip 不匹配导致，浏览器出于`同源策略的安全性校验不允许直接访问资源`，会返回 CORS 错误。
3、通过代理解决跨域

```javascript
export default defineConfig({
   //...
    proxy: {
      "/api": {
        target: "http://127.0.0.1:3000",
        changeOrigin: true,
        rewrite(path: string) {
          return path.replace(/^\/api/, "");
        },
      },
    },
  },
});
```

### 项目预览

![项目预览](./src/assets/images/1.png "项目预览")
![项目预览](./src/assets/images/2.png "项目预览")
![项目预览](./src/assets/images/3.png "项目预览")