本平台并非真实运营和使用,仅在于学习研究平台前后端研发技术使用。
今天继续开始做这个平台,上节课我们已经成功搬运了信封样式的漂亮前端,本节课就来设计第一个页面:首页。
目前来说,首页的功能上并没有什么重要的,无非就是展开信封,数据统计等
先去掉那些下载的英文信息等。
本节课也给大家介绍我正在用的前端开发ide:visual Studio Code
相比pycharm来说,它更轻便,且渲染速度更快。简单说就是不卡且纯免费。
但是注意,我用这个软件来专门写前端。所以打开的项目并非是django项目,而是其内部的vue项目:v_love
然后在终端输入启动命令:npm run serve
打开首页看看目前是什么样子,注意此时是用vue启动前端项目,所以端口是8080
注意看,上面的英文很漂亮,但是意思上我们还是要改为我们需要的。所以只需要给Home.vue 内的白色英文一改就行了,还有些没用的div也删一下,哦对了,还有图片也换一下。
改为这样:目前数据是假的,之后会换成真实的。
来看看效果:
因为只能上传图片小于1mb的,所以大家看的并不清晰。实际上效果非常nice的。
点击中间的 【OPEN】按钮,可以展开信封。
好的,具体到目前首页前端先这样吧~
下节课预告,搜索页面,也就是展开后的第一个页面~