前端Vue请求后端Django遇到127.0.0.1拒绝访问

前端Vue和后端Django搭建前后端分离的项目

我是看的这几个链接讲的如何实现前端Vue后端Django的前后端分离的项目的搭建(几个链接的内容实际上大同小异):

  • Python 3+Django 3 结合Vue.js框架构建前后端分离Web开发平台实战
  • 后端Django + 前端Vue.js快速搭建web项目
    这个项目对应的GitHub网址:项目地址

运行vue项目(npm run dev)后发现请求厚点时127.0.0.1拒绝访问

运行截图时这样的:
前端Vue请求后端Django遇到127.0.0.1拒绝访问_第1张图片
别人项目打开会显示从数据库中读出的书籍数据,我数据库中是有数据的但是没有显示(???!):
前端Vue请求后端Django遇到127.0.0.1拒绝访问_第2张图片
打开F12开发者工具,查看控制台,发现获取书籍信息的时候失败了……
于是我单独访问了这个请求的网址(http://127.0.0.1:8000/api/show_book)前端Vue请求后端Django遇到127.0.0.1拒绝访问_第3张图片
拒绝访问,按道理这个界面是django后端程序运行的结果,是可以读取到书籍数据的。
然后我发现,这个时候,后端Django也是需要运行的
于是新建一个终端cmd,输入指令python manage.py runserver(让Django也运行)
前端Vue请求后端Django遇到127.0.0.1拒绝访问_第4张图片
这样后端的127.0.0.1就能访问了,这个时候刷新vue项目,就能够正常显示了:
前端Vue请求后端Django遇到127.0.0.1拒绝访问_第5张图片
添加书籍的话,信息也能更新到界面(vue的双向绑定???啊还没有学vue救命!)
前端Vue请求后端Django遇到127.0.0.1拒绝访问_第6张图片
后续,把django和vue整合成一个项目后,就不需要这样了。

请求失败可能是Django的跨域问题

解决办法参考:跨域问题

VSCODE如何搭建Django后端开发环境

我是用的vscode,首先肯定是下载一堆关于Django的插件,然后就是安装一堆东西以及如何创建项目,下面这两个链接大同小异,还比较有用:

  • vscode配置django
  • vscode配置django

VSCODE如何搭建Vue前端开发环境

前端用vue的话需要下载安装node.js,安装vue、vue-cli,可以参考这些链接:
vscode配置vue开发环境

你可能感兴趣的:(python,django,vue)