在这一章，我们将连接前后端，使前端能够访问后端api接口，首先我们需要在前端建立一个api访问配置。
【资料图】
1. 前端项目安装axios库用来访问后端。
首先在项目文件夹下的命令行下输入以下命令安装axios库：
安装完毕后，来到前端的/src文件夹下，新建一个“utils”文件夹，这个文件夹下我们存放我们自己写的项目公用方法。
在“utils”文件夹下新建两个文件，分别叫axios.js和request.js。
将以下代码复制到axios.js中，这段代码是VueAxios的配置代码段，您现阶段无需了解其中的作用：
然后将以下代码复制到request.js中，这部分代码主要是请求的拦截器部分，您现阶段无需了解他们的作用：
2. 建立api文件
在前端的/src文件夹中我们建立一个叫“api”的文件夹，在这个文件夹里我们储存所有后端地址和访问逻辑。
我们在“api”文件夹中也按照业务类型或模块建立不同的子文件夹一边区分众多的.js文件。比如我们现在建立一个名为“authority”的文件夹，储存权限相关的所有api.js文件。
在“authority”文件夹中，我们建立一个用来存储登陆相关的js文件，我们叫它“login.js”。
然后在新建的“login.js”中，输入以下代码并保存：
接下来我们只需要在页面的vue文件中，调用两个方法“Login”和“Logout”即可发送请求。
打开App.vue文件，在<script>标签第一行加入您刚才新建的“login.js”的引用，并把之前的buttonClicked方法内容改写为通过访问Login接口，获得返回值显示在按钮下方。
3. 在前端加入.env和.env.development文件
一般我们在实际开发过程中，开发环境的后端地址和发布环境（包括dev/uat/prod等）是不一样的，为了减少修改次数，我们统一在.env中写入全局发布环境URL，在.env.development中写入全局的开发环境URL。
在前端项目/src目录下建立文件.env，并填入以下代码：
在前端项目/src目录下建立文件.env.development，并填入以下代码：
然后重新使用yarn serve运行前端项目，此时所有api请求都会加上前缀http://127.0.0.1:9000/api了。
4. 在后端建立相应的Login方法，将authority这个app下的view.py更改如下：
然后在authority这个app的url.py路由中加入Login的路由代码，最后url.py代码如下：
5. 后端加入跨域访问支持
此时运行前后端，点击前端按钮，您会发现出现了问题，按钮没有任何反应，查看F12控制台，发现请求报错了。此时我们需要给后端加入跨域访问支持，因为前后端的端口不一样，浏览器因为安全性策略不允许不同地址或不同端口的网站互相访问。
在后端项目文件夹的命令行中输入以下命令安装django跨域组件;
之后打开后端项目的setting.py配置文件，将下边配置段覆盖：
然后在settings.py页面最下方加入下方代码：
保存后再次运行后端，此时前端应该可以正常访问后端接口了。点击前端页面的测试接口，可以看到下方可以正确显示成功信息了。
