Part1先去掉那些下载的英文信息等。

本节课也给大家介绍我正在用的前端开发ide：visual Studio Code

相比pycharm来说，它更轻便，且渲染速度更快。简单说就是不卡且纯免费。

但是注意，我用这个软件来专门写前端。所以打开的项目并非是django项目，而是其内部的vue项目：v_love

然后在终端输入启动命令：npm run serve

打开首页看看目前是什么样子，注意此时是用vue启动前端项目，所以端口是8080

注意看，上面的英文很漂亮，但是意思上我们还是要改为我们需要的。所以只需要给Home.vue 内的白色英文一改就行了，还有些没用的div也删一下，哦对了，还有图片也换一下。

改为这样：目前数据是假的，之后会换成真实的。

来看看效果：

因为公众号只能上传图片小于1mb的，所以大家看的并不清晰。实际上效果非常nice的。

点击中间的【OPEN】按钮，可以展开信封。

好的，具体到目前首页前端先这样吧~

下节课预告，搜索页面，也就是展开后的第一个页面~

测试圈相亲平台开发流程（5）：首页开发相关推荐

【饭谈】【测试圈相亲平台开发流程】：页面样式开发心得【工匠、智者、航海家】
如图,在我的vue前后端分离项目[测试圈相亲平台]的开发中,成功使用了第三方的页面样式级组件. 这使得很多粉丝朋友倍感新奇,纷纷效仿.于是就有人感叹到,辛苦学习前端样式的意义在哪? 哪怕是一个新手,只 ...
测试圈相亲平台开发流程（4）：选个漂亮的首页
今天继续开始做这个平台,我们要这个平台的首页进行设计! Part1去jquery之家找个初版首页如图找到了个不错的,有动画展开收缩等效果,非常不错. 一开始就像一个信封,我们可以在这上面输入需要匹配 ...
测试圈相亲平台开发流程（11）：数据层简单实现-个人信息表/择偶要求表
欢迎继续追更此系列,此系列应用vue-cli前后端分离+django+python技术,样式很灵活.此系列可以为广大粉丝入门测试平台开发,帮助各位了解前后端要怎么实现,功能的增伤改查,各层的数据流转等 ...
测试圈相亲平台开发流程（21）：匹配算法（下）
上节课我们已经搞定了几乎所有架构上的事.只差俩个分值计算函数了.但是经过我们仔细一想,赫然发现,俩个函数的算法应该是一模一样的.唯一的区别就是,进来的个人信息和择偶标准是女方,还是男方而已,也就是对 ...
测试圈相亲平台开发流程（14）：新增会员功能
在上节课,我们终于完成了查询功能. 现在要做一个同样简单的...增加功能.也就是点击页面上的按钮,可以录入到库,分为男和女哦~ 我这个设计是,这些输入框不光作为查询结果.也可以作为新增会员的信息输 ...
移动app开发流程，app开发步骤
个人github:https://github.com/qiilee 欢迎follow 移动app开发流程,app开发步骤 app是手机软件的简称.手机主流的有ios.andriod,windows ...
【嵌入式Linux（基础篇）】嵌入式Linux底层系统开发流程和应用开发流程
1.嵌入式Linux系统体系架构一个完整的嵌入式Linux系统体系架构如图,大概可以分为三步: 硬件PCB板设计底层系统开发应用开发 2.硬件PCB设计流程 ① 获取所用芯片芯片手册: ② 建立 ...
软件开发流程与数据库开发流程
数据库设计的基本步骤数据库设计的过程(六个阶段) 1.需求分析阶段(综合各个用户的应用需求) 2.概念结构设计阶段(形成独立于机器特点,独立于各个DBMS产品的概念模式(E-R图)) 3.逻辑结 ...
项目开发——企业软件项目开发流程《项目开发的流程是怎样的》
软件项目开发流程:需求分析.设计.编码.测试.上线运维一般而言,软件项目开发流程包括以下步骤: 需求分析:对客户需求进行分析和理解,明确软件项目的目标和功能. 规划阶段:确定项目的范围.时间和预算, ...

测试圈相亲平台开发流程（5）：首页开发

Part1先去掉那些下载的英文信息等。

测试圈相亲平台开发流程（5）：首页开发相关推荐

最新文章

热门文章