我如何将我的前端连接到我个别创建的后端?

huangapple go评论69阅读模式
英文:

How can I connect my front end to my individually created backend

问题

我是一个编码初学者,我正在尝试使用Vue.js编写我的前端,使用ASP.NET Core编写我的后端(Web API)。在使用这两者创建待办事项清单方面,没有太多的参考资料。

我已经分别在VS Code中设置了我的前端,而我的后端是用C#编写的。我在将这两者连接起来方面遇到了困难,因为没有太多更新的参考资料。我应该如何调用我的后端并将其连接到我的Vue.js呢?

谢谢!

英文:

I am a beginner in creating a code and I am trying to code using vue js for my front end and aspnet core for my backend (web api). There arent many references in creating a to do list with this two connected.

I have already individually set up my front end in vs code while my back end in c#. I am having a hard time in connecting this two as there is not much update reference. How can I call my backend and connect it to my vue js.

thank you!

答案1

得分: 1

以下是要翻译的内容:

首先,您需要打开后端CORS设置。
它连接到Vue端点,您可以使用axios框架来获取数据。
这是一个示例
https://www.freecodecamp.org/news/how-to-build-an-spa-with-vuejs-and-c-using-net-core/

英文:

The first thing you need to do is open the back end CORS settings.
It connects to an endpoint on the Vue side, you can use axios framework to pull data
Here is an example
https://www.freecodecamp.org/news/how-to-build-an-spa-with-vuejs-and-c-using-net-core/

答案2

得分: 0

你只需通过API调用后端。使用GET方法获取数据,使用POST方法发送数据。假设你想从后端获取人员列表。你可以这样做 -

 const response = await fetch('https://yourawesomebackend.com/api/person/getpeople');
 const content = await response.json();
// 现在可以使用响应来操作DOM。

在你的后端,你可能想要这样做 -

[Route("api/[controller]/[action]")]
[ApiController]
public class PersonController : ControllerBase
{
    public IActionResult GetPeople()
    {
        // 从数据库读取人员信息
        var people = getFromDatabase();
        return Ok(people);
    }
}

希望这有所帮助。

英文:

All you need to do is call the backend via API. Get the data via GET method, send the data via POST method. Let's say you want to get person list from the backend. You can do this -

 const response = await fetch('https://yourawesomebackend.com/api/person/getpeople');
                    const content = await response.json();
// Now manipulate the DOM with the response.

In your backend, you might want to do this -

[Route("api/[controller]/[action]")]
[ApiController]
public class PersonController : ControllerBase
{
    public IActionResult GetPeople()
    {
        // read people from database
        var people = getFromDatabase();
        return Ok(people);
    }
}

Hope this helps.

huangapple
  • 本文由 发表于 2023年1月9日 12:22:49
  • 转载请务必保留本文链接:https://go.coder-hub.com/75053162.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定