
vue-相亲平台开发
文章平均质量分 55
django+python3+vuecli前后端分离,入门教学平台。
学会了可以轻松实现各种功能 和 测试平台 后台管理平台,运营平台等
我去热饭
这个作者很懒,什么都没留下…
展开
-
测试圈相亲平台开发流程(21):匹配算法(下)
上节课我们已经搞定了几乎所有架构上的事。只差俩个分值计算函数了。 但是经过我们仔细一想,赫然发现,俩个函数的算法应该是一模一样的。唯一的区别就是,进来的个人信息和择偶标准 是女方,还是男方而已,也就是对调一下而已。所以我们这里简化为一个函数,但是传参颠倒的格式: 然后我们来实现这个函数,仍然以鸣人举例。 这里我们拿到的是鸣人的个人/择原创 2022-04-18 13:12:08 · 419 阅读 · 0 评论 -
测试圈相亲平台开发流程(20):匹配算法(上)
课程到这个进度,基本上,我们前端部分已经全部完成了。 后端也只剩下这个match_user函数了。 还记得我们之前说过这个函数要干嘛吧: 目前,我们已经完成了第一步,确定了前端要的最终格式,如下图。 现在开始进行第二步:从数据库拿原创 2022-04-18 13:11:25 · 329 阅读 · 0 评论 -
测试圈相亲平台开发流程(19):匹配功能(下)
目前,我们后台的函数要开发这个match_user 匹配函数。在开发这个复杂的函数之前,我们先概要设计下,这个函数要做些什么事?确定前端要的最终格式从数据库拿出所有需要的数据循环异性数据,并代入到分值计算函数,得到所有异性的最终匹配得分把数据按总分从高到低排列,塞进最终格式返回体中。返回给前端所以,我们这个函数其实中间是需要一个具体计算各个属性匹配得分的纯算法函数。这个match_user只作为view视图逻辑上的处理。独立出来的那个算法函数就算为业务层。好,原创 2022-04-18 13:10:29 · 977 阅读 · 0 评论 -
测试圈相亲平台开发流程(18):匹配功能(上)
本节课终于要迎来该系列的重头戏了,匹配功能! 在这之前,我们完成了前端,后端的其他所有功能,增删改查。 只剩下这个最难最复杂的匹配了。 话不多说,直接开始。 首先我们打开页面,找到这个匹配按钮,进行设计:我们先搜索出鸣人的数据、然后点击匹配后,我们弹出了一个假的弹层:注意,上面微信号是随便乱填的。正原创 2022-03-17 12:59:00 · 256 阅读 · 0 评论 -
测试圈相亲平台开发流程(17):删除功能
本节课要删除用户了。 前提是 用户要先被搜索出来才行。 就是点击这个按钮: 首先,给这个删除按钮 弄个@click然后在下面写出这个del_user函数:那么问题来了,这个函数要怎么实现?答:先拿到用户id,然后发请求给后台即可。那么用户id在哪呢?答:在变量userInfo中所以函数写成下图即可:然后去django的url原创 2022-03-17 12:58:28 · 763 阅读 · 0 评论 -
测试圈相亲平台开发流程(16):保存修改
我们在上节课实现了 新增功能。 但是大家注意到一个问题了么? 就是如果是首次填充的数据,点击新增按钮后,的确会新增一个会员。 但是如果是搜索出来的已存在的会员,在我们修改了数据之后,点击新增按钮,发现并没有新增。而是在原来的基础上直接修改了。 这个问题的原因在于我们入库的时候,没有剔除掉搜原创 2022-03-17 12:57:55 · 192 阅读 · 0 评论 -
测试圈相亲平台开发流程(15):新增会员功能
本节课衔接上集,我们成功拿到了子组件的数据后,父组件就要使用axios来发请求给后台了: 首先我们这个请求数据量很大,且是属于上传。所以采用post请求。 但post请求有诸多规则,否则后台很难成功解析。 其中最明显的就是header中content-type。 为了方便,我们准原创 2022-03-17 12:57:00 · 2245 阅读 · 0 评论 -
测试圈相亲平台开发流程(14):新增会员功能
在上节课,我们终于完成了 查询功能。 现在要做一个同样简单的...增加功能。也就是点击页面上的 按钮,可以录入到库,分为男和女哦~ 我这个设计是,这些输入框不光作为查询结果。也可以作为新增会员的信息输入框。 当点击新增按钮后,我们把当前页面的数据全部传送给后台,由后台入库即可!原创 2022-03-17 12:56:31 · 1220 阅读 · 0 评论 -
测试圈相亲平台开发流程(13):搜索功能
上节课我们最终选定了第二种方案进行父传子 数据。 先来个人信息表的数据传输: 首先打开我们的Home.vue,给个人信息表的数据弄出来变成一个变量。 然后找到子组件Detail的dom层使用行,并加上自定义属性。好了,然后我们去Detail.vue组件内去接收这个自定义属性。原创 2022-03-17 12:55:51 · 769 阅读 · 0 评论 -
测试圈相亲平台开发流程(12):搜索功能
上一节课,我们已经创造了数据层和其俩张表:个人信息表/择偶表。 并且创造了四个样例,鸣人/佐助/小樱/雏田。 本节课我们要完成第一个小功能:查询。 也就是页面上根据微信号(昵称) 来查询出结果并渲染到页面上。 这个常见的查询问题,我们首先要缕清思路:&n原创 2022-03-10 17:07:33 · 313 阅读 · 0 评论 -
测试圈相亲平台开发流程(11):数据层简单实现-个人信息表/择偶要求表
欢迎继续追更此系列,此系列应用vue-cli前后端分离+django+python技术,样式很灵活。此系列可以为广大粉丝入门测试平台开发,帮助各位了解前后端要怎么实现,功能的增伤改查,各层的数据流转等。 之前,我们已经把前端页面写的差不多了,本文要进行数据层的实现,也就是先弄俩个表。 1,个人信息表原创 2022-03-10 17:07:00 · 1362 阅读 · 0 评论 -
【饭谈】【测试圈相亲平台开发流程】:页面样式开发心得【工匠、智者、航海家】
如图,在我的vue前后端分离项目【测试圈相亲平台】的开发中,成功使用了第三方的页面样式级组件。 这使得很多粉丝朋友倍感新奇,纷纷效仿。于是就有人感叹到,辛苦学习前端样式的意义在哪? 哪怕是一个新手,只要掌握一点前端常识,便可以轻而易举得实现如此炫酷唯美的页面。复杂的js,css,只需要会调用,最多再学习下二次开发修改既可。 但是也有不少朋友会问,为什么不直接使原创 2022-03-10 17:06:11 · 643 阅读 · 0 评论 -
测试圈相亲平台开发流程(9):择偶结果弹层-前端开发vue-cli
本平台并非真实运营和使用,仅在于学习研究平台前后端研发技术使用。今天继续开始做这个平台的三大页之一:择偶结果弹层页的前端开发Part1去搞个弹层....其实弹层这个东西,可以有很多种方式做一个出来。我推荐的是直接使用Bootstarp的模态框,然后我们稍微改改,让其符合我们当前主题即可。1首先给我们的匹配按钮 加上俩个属性:data-bs-toggle="modal"data-bs-target="#myModal"意思是链接我们的弹层。2然后找个位置放上我们的弹层dom。注意必须在最外层div之内:写好后原创 2022-03-10 17:05:30 · 458 阅读 · 0 评论 -
测试圈相亲平台开发流程(8):详情页择偶部分-前端开发
本平台并非真实运营和使用,仅在于学习研究平台前后端研发技术使用。今天继续开始做这个平台的三大页之一:详情页的择偶部分上节课后我又对前面页面进行了细微的调整和优化。Part1清理出右侧页面的战场:结果如下:效果如下:Part2如法炮制,创建择偶要求组件:还是去src/components文件夹下新建一个组件:Selection.vue然后仿照我们Detail.vue的内容写出择偶标准,一般择偶标准没有过多字段。用户最好不要过多的要求对方条件,否则结果大概率为空。暂时就这么原创 2022-03-10 17:04:45 · 392 阅读 · 0 评论 -
测试圈相亲平台开发流程(7):详情页基础信息部分-前端开发
本平台并非真实运营和使用,仅在于学习研究平台前后端研发技术使用。今天继续开始做这个平台的三大页之一:详情页的基本信息部分Part1清理出中间页面的战场:结果如下:Part2创建组件然后我们去src/components文件夹下新建一个组件,为什么要新建组件呢?因为这里的内容太多了,直接都写到Home.vue中并不好,正好也带大家先熟悉下vue-cli的组件化结构开发:名字就叫Detail.vue ,注意首字母大写。里面的具体内容,很简单,就是一堆输入框:Part3引入组件我们创造了组件后,自然要去Home.原创 2022-03-10 17:04:17 · 689 阅读 · 0 评论 -
测试圈相亲平台开发流程(6):搜索页-前端开发
本平台并非真实运营和使用,仅在于学习研究平台前后端研发技术使用。今天继续开始做这个平台的三大页之一:搜索页。关于这里的设计其实就是对成员列表的管理。增加,还是搜索,还是查看,还是删除。这个页面和第二个页面详情页是 需要联系起来的。也就是说。本页面有俩个按钮,分别为新增和搜索。点击新增后,右侧页面出现新增的各个字段空输入框。点击搜索后,在输入框输入微信号,右侧页面显示对应成员的详情。而右侧也就是第二个大页面,则有修改/保存/删除 功能。不过这是我们下节课要干的活。本节课就完成第一个左侧页面吧~Part1把页面原创 2022-03-10 17:03:37 · 604 阅读 · 0 评论 -
测试圈相亲平台开发流程(5):首页开发
本平台并非真实运营和使用,仅在于学习研究平台前后端研发技术使用。今天继续开始做这个平台,上节课我们已经成功搬运了信封样式的漂亮前端,本节课就来设计第一个页面:首页。目前来说,首页的功能上并没有什么重要的,无非就是展开信封,数据统计等Part1先去掉那些下载的英文信息等。本节课也给大家介绍我正在用的前端开发ide:visual Studio Code相比pycharm来说,它更轻便,且渲染速度更快。简单说就是不卡且纯免费。但是注意,我用这个软件来专门写前端。所以原创 2022-03-10 17:01:54 · 469 阅读 · 0 评论 -
测试圈相亲平台开发流程(4):选个漂亮的首页
今天继续开始做这个平台,我们要这个平台的首页进行设计!Part1去jquery之家找个初版首页如图找到了个不错的,有动画展开收缩等效果,非常不错。一开始就像一个信封,我们可以在这上面输入需要匹配人的微信号点击展开后会有展开动画然后分为三页,我的设计是左边显示这人的基本信息,并且可编辑/删除。中间显示这个人的择偶要求,并且有匹配按钮,点击按钮后。右侧显示匹配结果列表名单。地址我放这了:http://www.htmleaf.com/jQuery/Menu-Navi原创 2022-03-10 17:01:10 · 627 阅读 · 0 评论 -
测试圈相亲平台开发流程(3):架构的初步设计
今天开始第三节,我们要这个平台本身进行初步的设计!Part1平台分层看上图,很好理解对吧,前端让使用者进行操作。视图逻辑层接收数据并进行查缺补漏,然后交给业务层,因为本平台是比较重业务中的匹配算法的,所以独立出业务层。最下面是数据层用来存放数据,这里没有使用事务层,因为数据的提取并没有很复杂,所以没必要独立出事务层。Part2平台模块调用关系(初步)虽然图看着复杂,其实就那么点东西而已... 浏览器接收我的使用,然后一层一层往下最终拿到匹配结果即可。比如我想看张三的匹配结果,点击匹配按钮后,就会给我显示出意原创 2022-03-10 17:00:30 · 440 阅读 · 0 评论 -
测试圈相亲平台开发流程 (2): vue和django 初始化,打通联调。
大家情人节快乐!今天开始第二节,我们要对俩个项目进行初始化,并解决跨域问题!首先下载一个专门解决跨域的组件:pip3 install django-cors-headers下载好后就可以开干了!Part1首先是django的初始化:首先是admin.py 我使用了之前我公布的自动注册算法from django.contrib import admin# Register your models here.from myap原创 2022-03-10 16:59:21 · 1083 阅读 · 0 评论 -
【2-14情人节-献给天下有情人】测试圈相亲平台开发流程 (1): vue+django 环境部署
全新测试平台搭建,公众号直播!学习前后端分离的测试平台开发技术!(这里郑重声明,公众号更新的本平台及算法谨用于学习和研究匹配算法和平台开发技术,并非真实商业化公开平台,既不上线也不使用)前言目前猜测的字段有这么多:虽然记下来了,但是要想匹配则困难的多,毕竟肉眼识别太麻烦了。所以正好作者最近没事,就打算开新坑,直播开发一个用于探讨匹配算法的测试平台。为了让大家学习起来不那么无聊,我们这次加快节奏和干货占比。直接一步到位,采用vue-cli + django做前后端分离,的高大上的测试圈内部相亲平台。可能有的同原创 2022-03-10 16:56:22 · 911 阅读 · 0 评论