接了一个2000块的小活,大家进来看看值不值,附源码

打印 上一主题 下一主题

主题 1017|帖子 1017|积分 3051

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

x

如题,上周的一天,朋友圈的一个旧友找到了我,说让我帮他开辟一个小工具,固然活不大,但没个几年的全栈经验还不肯定能接下来,因为麻雀虽小,涉及的内容可不少:


  • 需求分析
  • 原型设计
  • 详细设计

    • 架构选型
    • 接口设计
    • 数据库设计

  • 后端开辟
  • 前端开辟
  • 服务器购买
  • 服务器设置
  • 镜像构建
  • 服务调试
  • 服务摆设测试
  • 优化迭代
  • 交付收款
假如你对上述流程感兴趣,可以继承看下去,关注公&号:新质程序猿,回复:api-mark 可以获取源码包。
废话不多说,开整吧!
需求分析

用户故事如下,我大概评估了一下需要 1-2 个工作日,就要个 2000 块吧。


总结一下就是:


  • 支持批量上传(添加)一批接口数据
  • 提供获取接口,每次获取一条数据以供他本身的使用
  • 提供标志接口,他使用完会标志这条数据的状态(1乐成,2老号,3非常)
  • 提供删除接口(多条件)
  • 支持查询导出(多条件)
数据格式大概是这样的:
  1. 61057944----http://xxx/api/getcode?token=e49debc93
  2. 61057945----http://xxx/api/getcode?token=e49deb333
复制代码
原型设计

看起来似乎蛮简单哈~~,我随即画了一个 原型图 给他。


得到确认后,就开整吧。
注:原型设计采取的是 Axure RP 9 + ElementUI,如有需要也可以公&号留言。


详细设计

需求分析只是大概对需求举行了梳理,在举行开辟之前,还需要举行深入详细的设计才能评估出工作量。
我们来拆解一下这个项目。
架构选型

首先要明白项目各关键点所采取的架构选型,如服务器怎么选,前后端框架怎么选,怎样摆设,安全尺度,性能要求等等,这些都会影响到架构选型。
对于这个项目来说,单机充足,没啥安全要求,一句话就是够简单,无压力开整。


  • 服务器:centos 7.9 4c8g 200g 充足
  • 数据库:mysql 5.7+(摆设使用的 mysql 8)
  • 后端:springboot + jpa 够用
  • 前端:vue + vue-admin-template 快速开辟框架
  • 摆设:docker + docker-compose 方便快捷
接口设计

本项目重要涉及数据的导入,查询,导出,删除,取接口,另有非须要的登录等。
下面的接口是最终完结版涉及的接口,只有真正去开辟的时间你才能明白的知道全部的需求。


  • 登录接口,hard code 一段用户验证接口即可,够用
  • 用户信息接口,重要懒得改 vue-admin-template 中的代码,用到了,就随便提供一个给前端吧
  • 登出接口,同上,无关紧急,前端用到了,随便提供一下
  • 资源添加接口,重点,用户需要上传txt,嫌麻烦,让他贴文本到 textarea 框更好实现,避免了文件上传接口(固然也不复杂)
  • 接口获取接口,重点,每次取一条已添加的资源
  • 单条删除接口,每次删 1 条记录
  • 批量删除接口,页面提供了勾选删除操作,原本是分别调上面的单条删除,觉得不敷优雅,额外增开
  • 查询接口,分页返回,支持多条件:状态,日期范围,编号
  • 查询导出接口,根据条件直接导出 csv 文件,没有用 excel 因为觉得复杂,csv 直接字符串拼接,也能到达 excel 的效果
  • 条件删除,根据查询条件,批量删除数据
  • 接口标志,对单条记录举行状态标志
你看,固然用户故事可能就一句话,但现实开辟过程中涉及到的接口及逻辑可还真不少,单查询接口就需要不少工作量的。
数据库设计

直接采取 mysql, 一张 api 表搞定:


  • id, bigint,自增
  • sn, varchar(100), 编号
  • api, varchar(1024), 接口地址
  • status, int, 状态

    • -1,初始状态
    • 0,已取号
    • 1,乐成
    • 2,老号
    • 3,非常

  • create_time, datetime 添加时间
  • update_time, datetime 更新时间
详细 SQL 语句可以从源码中获取(开头有获取方式)。
后端开辟

由于内容不复杂,性能及安全性要求都不太高,以是 springboot + jpa 整起来。
通过 idea 大概如下网站快速构建一个模版项目:
https://start.aliyun.com/


额外加了几个常用的工具库:


  • lombok, 偷懒神器,免写 getter, setter 方法
  • commos-lang3,提供 StringUtils, NumberUtils 之类的工具类
  • jpa-spec, 方便构建复杂的查询语句,例如 eq, between 之类的
前端开辟

前端直接用 PanJiaChen 大佬的快速开辟脚手架(固然好久没更新了,够用就好)
https://github.com/PanJiaChen/vue-admin-template
  1. # clone the project
  2. git clone https://github.com/PanJiaChen/vue-admin-template.git
  3. # enter the project directory
  4. cd vue-admin-template
  5. # install dependency
  6. npm install
  7. # develop
  8. npm run dev
复制代码
注:node 版本不能太高,我测试了 node v16 没问题,太高会报错,构建失败。推荐我之前的一篇文章,可以帮助你快速切换 node 版本:
版本不兼容,构建又失败了?NodeJS开辟情况搭建,看这一篇就够了,多版本管理就是丝滑_node10 构建不乐成-CSDN博客
大家直接看源码吧,被我删减了不需要的东西,变得更精简了,就 3 个页面:


  • 登录页面,其实也无关紧急
  • 添加页面,资源添加,就一个 textarea 表单提交,加了一些格式校验及表单参数构建
  • 列表页面,条件查询,选中删除,单项删除,条件导出,分页




服务器购买

服务器购买,找一个国外的 vps 就可以了,避免大陆需要存案的琐事,我这里不广告了,如有需要可以通过公*号:新质程序猿,找到我,可以告诉你。
反正不是我出钱,就随便选一个 8c4g 25Mbps 180G 的吧,280/月 对老板来说不再话下,哈哈。


服务器设置

服务器安装的是 centos 7.9 版本,因为用的比较多的缘故,大家根据喜好来即可,都一样,因为我的目标是 容器 摆设,以是操作系统其实无所谓,只要能安装 docker & docker-compose 即可。
重要对系统举行了一些须要的操作:


  • 内核参数优化,调整ulimit, 文件句柄之类的,从别处抄的,大家注意甄别
  • 安装docker,通过 aliyun mirror 安装比较快一点
  • 设置时区,调成中国上海时区
  • 磁盘格式化及挂载,系统盘比较小,180G 的磁盘需要本身格式化,本身挂载,搜一搜就好了
系统优化

附上操作脚本:
  1. # 更新源
  2. yum makecache
  3. # 调整时区
  4. ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
  5. echo "Asia/Shanghai" > /etc/timezone
  6. # 更改内核参数
  7. cat << EOF > /etc/sysctl.d/custom.conf
  8. net.core.somaxconn = 32768
  9. net.core.netdev_max_backlog = 32768
  10. net.ipv4.ip_local_port_range = 10000 65535
  11. net.ipv4.tcp_max_syn_backlog = 16384
  12. net.ipv4.tcp_max_tw_buckets = 30000
  13. net.ipv4.tcp_tw_recycle = 0
  14. net.ipv4.tcp_timestamps = 0
  15. net.ipv4.tcp_fin_timeout = 30
  16. net.ipv4.tcp_syn_retries = 1
  17. net.ipv4.tcp_synack_retries = 1
  18. net.ipv4.tcp_fack = 1
  19. vm.swappiness = 0
  20. vm.overcommit_memory = 1
  21. fs.nr_open = 1000000
  22. fs.file-max = 2000000
  23. kernel.core_uses_pid = 1
  24. kernel.pid_max = 4194304
  25. EOF
  26. sysctl -p /etc/sysctl.d/custom.conf
  27. ulimit -n 1000000
  28. cat << EOF >> /etc/security/limits.conf
  29. * soft nproc 1000000
  30. * hard nproc 1000000
  31. * soft nofile 1000000
  32. * hard nofile 1000000
  33. EOF
复制代码
格式化磁盘

由于系统挂载了一块独立的数据磁盘,需要自行格式化挂载,这当然不在话下
  1. fdisk /dev/sdb
  2. n,p,w
  3. mkfs.xfs /dev/sdb1
  4. mkdir -p /data
  5. mount /dev/sdb1 /data
  6. # 查看分区ID https://zhuanlan.zhihu.com/p/62459117
  7. blkid
  8. # 配置开机自动挂载
  9. vi /etc/fstab
  10. UUID=da60a5fc-d38d-4775-a780-c6b5e0bf2956 /data                   xfs     defaults        0 0
  11. UUID= /data                   xfs     defaults        0 0
  12. UUID=13d2692c-b992-4f00-b070-26d90911610e /data                   xfs     defaults        0 0
复制代码
docker 安装

通过阿里云镜像站举行 docker-ce 安装
  1. yum install -y yum-utils device-mapper-persistent-data lvm2
  2. yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
  3. sed -i 's+download.docker.com+mirrors.aliyun.com/docker-ce+' /etc/yum.repos.d/docker-ce.repo
  4. yum makecache fast
  5. yum -y install docker-ce
  6. vi /etc/docker/daemon.json
  7. {
  8.   "data-root": "/data/docker"
  9. }
  10. vim /usr/lib/systemd/system/docker.service
  11. vim /usr/lib/systemd/system/containerd.service
  12. # 需配置 infinity 为 65535 ,小于系统文件句柄
  13. LimitNOFILE=65535
  14. systemctl daemon-reload
  15. systemctl restart docker
  16. systemctl enable docker
  17. systemctl restart containerd
  18. systemctl enable containerd
  19. # 安装 docker-compose
  20. curl -SL https://github.com/docker/compose/releases/download/v2.20.3/docker-compose-linux-x86_64 -o /usr/bin/docker-compose
  21. chmod a+x /usr/bin/docker-compose
复制代码
镜像构建

为了便于调试和摆设,选择使用当前流行的容器举行摆设,构建镜像相当比较简单,项目路径下均有对应的 Dockerfile 文件,因为我 mac 上安装的 有 docker-desktop 以是直接本地安装和 build 即可,构建完成,推到了我本身的 hub 账号下,大家也可以直接体验。
https://hub.docker.com/r/chinaxiang/laiju-web
https://hub.docker.com/r/chinaxiang/laiju-api
构建前端项目

  1. # 构建前端项目 prod 环境
  2. npm run build:prod
  3. # 构建 docker image
  4. docker build -t chinaxiang/laiju-web:v1.0 .
  5. # 推送至个人账号(需要提前登录,这一步大家可以忽略)
  6. docker push chinaxiang/laiju-web:v1.0
复制代码
构建后端项目

  1. # 编译构建
  2. mvn clean package
  3. # 构建 image
  4. docker build -t chinaxiang/laiju-api:v1.0 .
  5. # 推送
  6. docker push chinaxiang/laiju-api:v1.0仓库地址:
复制代码
服务调试

本地调试应该对大家来说比较熟悉了,后端直接在 idea 里启动,大概使用 java -jar 将打好的包启动起来就可以,后端接口调试的话,直接使用浏览器大概 postman, postwoman(hoppscotch) ,大概 curl 都可以。
唯一一点是,默认的 vue-admin-template 采取的 mockserver ,以是为了直接使用本地的 server api 调整了一下 devServer 设置项。
vue.conf.js 设置 proxy
  1. ....
  2.   devServer: {
  3.     port: port,
  4.     open: true,
  5.     overlay: {
  6.       warnings: false,
  7.       errors: true
  8.     },
  9.     proxy: {
  10.       '/api': {
  11.         target: 'http://localhost:8082',
  12.         changeOrigin: true
  13.       }
  14.     },
  15.     //before: require('./mock/mock-server.js')
  16.   },
  17. ....
复制代码
main.js 注释掉 mock 部分代码
  1. ....
  2. /**
  3.  * If you don't want to use mock-server
  4.  * you want to use MockJs for mock api
  5.  * you can execute: mockXHR()
  6.  *
  7.  * Currently MockJs will be used in the production environment,
  8.  * please remove it before going online ! ! !
  9.  */
  10. // if (process.env.NODE_ENV === 'production') {
  11. //   const { mockXHR } = require('../mock')
  12. //   mockXHR()
  13. // }
  14. ....
复制代码
服务摆设

因为安装有 docker, docker-compose 以是摆设起来相对比较简单,直接一个 docker-compose.yml 文件拉起来就可以了。
  1. services:
  2.   laijuweb:
  3.     image: chinaxiang/laiju-web:v1.2
  4.     restart: always
  5.     ports:
  6.       - 3000:80
  7.   laijuserver:
  8.     image: chinaxiang/laiju-api:v1.2
  9.     restart: always
  10.     environment:
  11.       PROFILE: prod
  12.     depends_on:
  13.       - laijudb
  14.   laijudb:
  15.     image: mysql:8.4
  16.     command:
  17.       - --character-set-server=utf8mb4,
  18.       - --collation-server=utf8mb4_unicode_ci
  19.     restart: always
  20.     environment:
  21.       MYSQL_ROOT_PASSWORD: root
  22.       MYSQL_USER: panda
  23.       MYSQL_PASSWORD: Admin250@
  24.     volumes:
  25.       - ./mysql:/var/lib/mysql
  26.       - ./init.sql:/docker-entrypoint-initdb.d/init.sql
复制代码
init.sql
  1. create database if not exists laiju;
  2. use laiju;
  3. create table if not exists api
  4. (
  5.     id          bigint auto_increment primary key,
  6.     sn          varchar(100)       null,
  7.     api         varchar(1024)      null,
  8.     status      int                null,
  9.     create_time datetime           null,
  10.     update_time datetime           null
  11. );
  12. grant all on *.* to panda@'%';
  13. flush privileges;
复制代码
  1. # 启动各服务
  2. docker-compose up -d
复制代码
不过在真正摆设的时间还是遇到了一些小问题,这里稍微提一下。


  • 本地使用的 mysql 5.7 摆设选择的 mysql 8, 设置上存在差异,调整了好一阵才 ok,详情见项目设置
  • 采取 compose 摆设最开始没有设置依靠关系,导致 api 启动时数据库还没启动,添加了依靠设置
摆设ok后,就上线使用吧。
优化迭代

任何系统都免不了优化迭代,重要优化调整了如下几项,不过不算大改动。
前端优化



  • 分页优化,查询条件改变,要把页码重置
  • 删除最开始直接删除了,有点暴力,加上 confirm 确认框
  • 删除非第一页最后一个选项时,页码减一,提拔交互体验
  • 选中删除最开始是按多个单条删除处理的,体验不好,整合到一个接口
  • status 状态显示调整为 filter 形式
  • 新增了 已标志 状态过滤,包含复合条件(1新号,2老号,3非常)
  • 时间范围查询条件直接转换为时间戳举行传参
后端优化



  • 共同前端的复杂查询做须要的调整
  • 加了须要的参数校验,避免脏数据
  • 取号接口直接采取同步关键字加锁,确保并发情况下不会取到相同的号
交付使用

经测试没问题之后,找老板要钱吧,因为是熟人,以是提前报了价,没有先付钱,假如大家在接项目的时间,最好能有个定金意识,避免干活拿不到钱的情况,一样寻常采取付一半大概4-4-2的比例。


OK,至此 2000 块到手。
你觉得这个项目收 2000 块贵吗?欢迎留言讨论交换!
如需要源码,可以关注公&号:新质程序猿,回复:api-mark 获取项目源码哟,无套路,纯粹为了增加个人气,况且,说不定哪天分享的内容会帮助到你呢!
欢迎大家批评指正,一起加油。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

火影

论坛元老
这个人很懒什么都没写!
快速回复 返回顶部 返回列表