# TestWebApi

**Repository Path**: knellwake/test-web-api

## Basic Information

- **Project Name**: TestWebApi
- **Description**: Test测试CRUD前后端
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-07-26
- **Last Updated**: 2024-07-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

- 项目地址 ： [Doug/TestWebApi - 码云 - 开源中国 (gitee.com)](https://gitee.com/knellwake/test-web-api/tree/main)
- 项目启动 ：
  - 前端 ：
    - 运行命令安装依赖 `npm install` or `pnpm install`
    - 启动 `npm run dev` or `pnpm run dev`
  - 后端 ： 
    - `appsettings.json` 数据库字串修改，数据库创建
    - 直接运行，(在`Extension` =》 `SqlSugarSetup`文件中有 `CodeFirst`可以直接建表
    - 没有设置种子数据，自己添加。

# 后端（HRBackEnd）

**仓储+服务+接口三层架构**

*实际开发使用类库项目分层*

![输入图片说明](https://foruda.gitee.com/images/1722055499777736968/6b267e63_8580167.png "屏幕截图")

使用技术栈：

- `.net8 web api`
- ORM -> `SqlSugar`
- 数据库 -> `SqlServer`
- 映射 -> `Mapster`
- DI -> `Autofac`
- `雪花IdGeneration`



# 前端(HRFrontEnd)

- Vue3 + Vite + axios + JavaScript

![输入图片说明](https://foruda.gitee.com/images/1722055510979731482/892b3332_8580167.png "屏幕截图")



# 前后端连接

## 后端Controller层提供Api接口

## 后端跨域解决

- `Program`中添加设置：

  ```C#
  // 配置 CORS , 允许所有前端地址对接
  builder.Services.AddCors(options =>
  {
      options.AddPolicy("MyAllowSpecificOrigins", builder =>
      {
          builder.AllowAnyMethod()
              .SetIsOriginAllowed(_ => true)
              .AllowAnyHeader()
              .AllowCredentials();
      });
  });
  app.UseCors("MyAllowSpecificOrigins");
  ```

## 前端配置Api

1. 创建`.env`配置文件

*设置后端地址 URL 与 前缀*

```js
VITE_API_URL="http://localhost:8008/api"
```



2. 导入`axios`插件

> 用于前后端通信HTTP请求响应

安装 `pnpm install axios`



3. 创建`axios.js`配置文件

配置 `baseURL` `timeout` 等



4. 创建`api`文件夹 -> `api.js`

使用 axios -> get/put/post/delete 发送请求 响应数据



## 测试 CRUD

`import {fetchAllTests, deleteTest} from "../api/CRUD.js";`

1. 拿到请求api.js中的方法
2. 在组件中使用即可