首先,祝大家国庆快乐啊,不管你们快不快乐,我是挺快乐的,因为有了这个东西,就不愁三舅家的表弟放国庆懈怠学习了。哈哈哈废话不多说了,主要使用vue3搭建页面使用了vant组件,后台使用node.js使用了express框架,数据库是mysql。效果是这样的

 实现可以进行多选和单选的功能。还有一个登录注册,说到这就不得不说一个问题了,我当时想在我的数据库中每个用户登录的时候,然后再有人登录的时候,就登录不上了,这个好解决。我是在数据库中添加了一个字段叫status

当用户点击登录的时候,状态变成1,然后到时候判断这个字段就行了。但是当用户退出之后,这个问题一直困扰我,最后查了一些资料,用到了一个不是很好的方法,就是心跳请求,客户端每隔几秒就会向服务器发起一次请求,如果能收到这个请求就说明你在线,收不到的话。就直接把状态码改成0就可以了。(这个方法有些许bug,但是本人实在不知道怎么解决了,如果有更好办法,可以留言给我)。 

服务器端接受客户端发来的用户名,然后来判断是否在20000毫秒内一直可以接收到客户端发来的请求,如果没有收到的话就直接把该用户的状态码改为0,这样就可以判断用户是否退出了。

剩下还有一个问题就是实现多选,单选了,单选这个好解决,但是多选该怎么办呢?

因为所有的是渲染出来的,所以这个时候不能用checkbox,不然会出现一个问题,就是一道题选择了,剩下的都会选择,这个时候只能自己写了,我是这么想的,单击一个选项,把该选项的内容都添加到一个数组里面

 然后最关键的来了,怎么让他加上那个蓝色的框框呢?

这个时候用到了ES6语法一个includes真的很好用,判断我的item.OptionA是不是包含在QueArr里面,如果在就加上。哈哈哈真是当时想了好久。。。。

到了这个时候,几乎就没有什么难点了,后端不涉及到多表关联,所以都是一点数据库的查询,所以是很简单的。最后就是如果部署到服务器了。

这里我使用了宝塔,这个你得去阿里云,腾讯云,华为云等购买一个云服务器,然后在上面注册宝塔的域名, 

其他博客有一些详细的介绍可以参考一下这个哈

http://t.csdnimg.cn/qhoyK

 然后就是宝塔上面先将你的node.js部署了首先需要下载这两个东西,PM2管理器可以快速部署node.js项目,另一个就是你的node版本了

因为我这里没有域名,所以只有ip,部署vue就是直接一个域名。

好了,如果需要源码可以留言哦! 最后再祝大家国庆快乐哦。

Logo

欢迎加入我们的广州开发者社区,与优秀的开发者共同成长!

更多推荐