(简易)测试数据构造平台: 13 (工具列表后端开发实现)

2022-07-07 15:01:48 浏览数 (1)

【本节目标】接口查询功能实现

【依赖技术】axios

我们在之前的时候,解决掉了查询接口的后端实现。

然后我们应该去urls.py中设计好这个接口的路由部分。

打开urls.py :

重启django服务后,我们可以在一些接口测试工具 比如postman中测试一下,或者更简单的在浏览器输入url即可测试get类请求:

可以看到,成功的显示了:

浏览器中显示的就是这个get请求的返回体,检查可知,是我们预期的工具数据。

现在接口有了,那么我们下面就要去vue前端部分去开发了。但是这个过程中,注意,django后台服务不要关闭,否则前端就没法请求通接口了。

我本地的django是在pycharm中运行的:

它是在控制台的- Run中运行的:

而我的前端vue项目是在 控制台的 Terminal 运行,相当于在终端/cmd中运行了。

所以二者并没有冲突。

打开前端首页ToolList.vue,删掉我们之前写的假的工具数据。

删掉之后:

没有了假值,我们自然要去调用接口去后台拿到真的数据才对,那么前端bom层如何发请求拿数据呢?

这里要利用的就是插件axios了:

先导入:

然后我们要思考一个问题,这个接口请求的触发时机,是点什么按钮发出请求,还是刚进入这个首页就自动触发呢?

答案显然是后者,刚进入的时候,自动就触发请求,拿到真实数据后展示给用户才对。

那么这个自动触发的代码要写在哪?答案就是mounted属性里:

写在这里的代码都可以刚进入页面的时候就自动运行。

然后开始用axios来发送请求:

上图中,我们拿到了返回值中的最终要的tools , 并且把值塞给了data中的变量 tool_list。

为什么前面要加this.呢?因为只有这样,才会去data()中寻找到这个变量哦。

保存后打开浏览器:8080的首页

可以看到,我们数据库中真实的那俩个工具已经展示在这里了:

到此算是我们前后端 数据层的一次真正打通。

0 人点赞