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、点击按钮实现调用