VUE、C 前后端调用

VUE、C++前后端调用

- 一、设置c++后端
- - 1、新建一个空项目
  - 2、下载cpp-httplib库，并且添加到C++项目依赖中。
  - 3、在源文件main.cpp中添加简单的调用代码
- 二、设置vue前端
- - 1、利用vite来创建环境
  - 2、进入项目文件夹
  - 3、安装Axios依赖。Axios是一个用于发送HTTP请求的JavaScript库。
  - 4、然后进入App.vue添加代码。
- 三、启动程序

一、设置c++后端

1、新建一个空项目

2、下载cpp-httplib库，并且添加到C++项目依赖中。

https://github.com/yhirose/cpp-httplib
在这里插入图片描述

3、在源文件main.cpp中添加简单的调用代码

#include <httplib.h>

int main() {
  httplib::Server svr;

  svr.Get("/api/hello", [](const httplib::Request& req, httplib::Response& res) {
    res.set_content("Hello from C++ backend!", "text/plain");
  });

  svr.listen("localhost", 8080);
}

二、设置vue前端

1、利用vite来创建环境

npm create vite@latest front-calls-back-vue3

2、进入项目文件夹

cd front-calls-back-vue3

3、安装Axios依赖。Axios是一个用于发送HTTP请求的JavaScript库。

npm install axios

4、然后进入App.vue添加代码。

<template>
  <div class="hello">
    <button @click="callBackend">Call Backend</button>
    <p v-if="backendResponse">{{ backendResponse }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      backendResponse: ''
    };
  },
  methods: {
    callBackend() {
      axios.get('http://localhost:8080/api/hello')
        .then(response => {
          this.backendResponse = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

三、启动程序

1、打开终端，进入vue项目目录，启动前端服务

F:\workspace\html\Vue\front-calls-back-vue3>npm run dev

2、启动后点击call backend
3、另外开一个终端，进入main.cpp的目录，运行后端服务
4、点击按钮实现调用
在这里插入图片描述

标签