准备数据
利用Django自带的后台管理系统,我们新建分类,相册,然后上传一些图片。
请求后端接口
接着,我们就可以来对接后端接口了。首先是在main.js里面,我们先配置好后端接口的域名。我们定义一个叫做host的变量,这个变量存储的是后端接口的主机地址,然后将其挂载在vue的实例上。
接着,我们修改首页发送请求的代码。这里的逻辑本来应该是请求最新发布的相册,但是因为咱们目前还没有这个接口,所以暂时用请求所有分类的相册接口进行代替。
其他页面的接口也都是差不多的,按照对应页面的需求进行修改即可。修改后的当前页面如下:
虽然目前看起来还不太完善,但是咱们已经将最重要的步骤都实现了。
封装公共的方法
添加common/util.js,我们后面在这个文件中封装通用的工具类方法。
修改main.js,引入并挂载公共方法。
后端添加获取最新相册的接口。
这里用到的计算图片数量的方法如下:
通过请求方法再封装请求最新相册的接口。
在页面中使用封装的接口请求最新的相册。
此时页面的渲染效果如下。
领取专属 10元无门槛券
私享最新 技术干货