--- # 主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate # 贡献主题：https://github.com/xitu/juejin-markdown-themes theme: awesome-green highlight: --- ## 起因因为最近打算离职了，看到各位大佬说要在简历中加上亮点，要着眼于平时的痛点，将其解决，然后将其陈述在简历上。然后我想着因为疫情的缘故，各种各样的填表简直让人防不胜防，填的心累，所以我就想着要是能搞个在线协同的小工具，直接在线填报，然后大家都填完之后导出Excel表就好了，说干就干 ## 需求分析 1. 在线填报，实时更新，方便督促还有谁没有提交 2. 所有人提交完成后，支持导出Excel ## 效果图协同填报 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/837b847c4d88496089d2bf83bfbf5d7d~tplv-k3u1fbpfcp-watermark.image) 填报完后的导出 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/db506b39eac242c0986228a625eb2aa9~tplv-k3u1fbpfcp-watermark.image) ## 脚手架搭建前端就直接用 vue + elementui 的表格，直接一个html文件即可后端就用最简易的 nodejs + nodejs-websocket ## 项目分析 ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/69899ff6bfb24536ae1a89e405585eba~tplv-k3u1fbpfcp-watermark.image) #### 主要有三个文件 + app.js 是后端主要代码 + groupInfo.js 存放着项目组中每个成员的信息 + index.html 是要分发给项目组中的每个成员的 ## 后端编写 ### 编写所需字段因为是模拟，所以就简单举几个字段 uuid 员工的工号 name 员工的姓名 temp 当天体温 ### 前置知识 [websocket](http://www.ruanyifeng.com/blog/2017/05/websocket.html) 以及 [nodejs-websocket模块](https://www.npmjs.com/package/nodejs-websocket) ### 开始开发代码逻辑如下团队成员的工号及姓名 ```js // 组员的工号及姓名 module.exports = [ { uuid: "111", name: "赵" }, { uuid: "222", name: "钱" }, { uuid: "333", name: "孙" }, { uuid: "444", name: "李" }, { uuid: "555", name: "周" }, { uuid: "666", name: "吴" } ] ``` 具体业务代码如下 *其中all_scoket是为了保留每个链接* ```js const ws = require("nodejs-websocket"); const groupInfo = require("./groupInfo"); const all_scoket = {}; // 保留每个用户的 id，最好是以工号+当前时间为 key，因为每个用户在同一时间只会有一次操作 const server = ws .createServer(function (scoket) { scoket.on("text", function (str) { let data = JSON.parse(str); console.log(str); if (all_scoket[data.uuid]) { for (const iterator of groupInfo) { if (iterator.uuid === data.uuid.split("-")[0]) { iterator.temp=data.temp break; } } for (let item in all_scoket) { all_scoket[item].sendText( JSON.stringify(groupInfo) ); } } else { for (const iterator of groupInfo) { if (iterator.uuid === data.uuid.split("-")[0]) { scoket.sendText(JSON.stringify(groupInfo)); all_scoket[data.uuid] = scoket; return; } } console.log("用户不存在"); scoket.sendText( JSON.stringify({ error: "用户不存在", }) ); } }); scoket.on("close", function (code, reason) { console.log("关闭连接", reason); }); scoket.on("error", function (code, reason) { console.log("异常关闭", reason); }); }) .listen(3000, () => { console.log("running"); }); ``` ## 最后是前端代码（**注意：我用的是本地模拟方便展示，大家在尝试的时候换成内网ip就好了**） ```html

确认

导出

``` [完整代码传送门](https://github.com/P4X666/-/tree/master/teamwork-information)