237 Sending a Http Request to Store Coach Data（加入后端）

步骤

1、准备后端程序

后端程序使用ASP.NET Web API编写，见如下源码链接中“237-CoachWebAPI”文件夹

黄健华/Vue3

用VS 2022打开后，需要做如下操作：

1）appsettings.json文件中的数据库连接字符串改成自己的（需要新建数据库）；

2）执行Update-DataBase命令；

如下两个专栏可以帮助大家学习ASP.NET Core

01 C# 12 | .NET 8.0（完结）_黄健华Yeah的博客-CSDN博客

02 ASP.NET Core 8.0（完结）_黄健华Yeah的博客-CSDN博客

2、前端程序更新

stores/index.js中userId设置为GUID变量

import { createStore } from "vuex";
import coachesModule from "./modules/coaches/index.js"
import requestsModule from "./modules/requests/index.js";

import { v4 as uuidv4 } from 'uuid';

const store = createStore({
    modules: {
        coaches: coachesModule,
        requests: requestsModule,
    },
    state() {
        return {
            //userId: '51564311-D841-498F-BBCB-629A44CC2F7C',
            userId: uuidv4(),
        };
    },
    getters: {
        userId(state) {
            return state.userId;
        },
    }
});

export default store;

安装axios

npm install --save axios@next

stores/modules/coaches/actions.js中通过axios调用API

import axios from "axios";

export default {
    async registerCoach(context, payload){
        const userId = context.rootGetters.userId;
       
        const newCoach = {
            firstName: payload.firstName,
            lastName: payload.lastName,
            description: payload.description,
            hourlyRate: payload.rate,
            areas: payload.areas,
        };
       
        axios.defaults.headers.common['Content-Type'] = 'application/json';
        const response = await axios.post(`http://localhost:5216/api/Coaches/PostCoach`, {
            ...newCoach,
            Id: userId
        }).then((response) => {
            console.log(response);
        }).catch((error) => {
            console.log(error);
        });

        context.commit('registerCoach', {
            ...newCoach,
            id: userId
        });
    },
};