基于Koa,nodemon,sequelize,pg,winston,react,vite,xlsx实现的员工系统

164 阅读3分钟

鉴于没实现过关于数据库相关的代码,于是狂撸了CRUD的基操,现来个简记。代码已传staff-mgmt-system

已实现的功能

  1. 用户可以通过excel导入,增加,修改和删除部门,职位,和员工,可以查看现在已有的管理员。
  2. 用户可以导出部门,职位和员工的数据至excel表中
  3. 用户可以将员工专程admin管理员,这对权限管理有很大的帮助

项目成果

Admin界面,一个一个的增加admin admin.png

部门界面,批量通过excel表格导入添加部门,也可以批量更新部门信息 dept.png

职位界面 position.png

员工界面 staff.png

技术核心

sequelize/pg

这是基于nodejs环境,易上手且不需要关注于SQL的连接数据库的依赖,此项目的数据库用的是postgresql,因此,需要再加个pg配件来配合sequelize实现CRUD数据库。

用单例模式来使用数据库: github.com/LycheeHe/st… 在项目开启之前就连接数据库,然后可以在各个服务中使用,具体代码:github.com/LycheeHe/st…

winston/winston-daily-rotate-file

这是基于nodejs环境,每个node项目我都会使用的日志记录依赖,简单配置即可使用,winston-daily-rotate-file依赖能保证winston生成的日志文件可以基于年月日生成日志文件。

配置如下:github.com/LycheeHe/st…

使用例子:github.com/LycheeHe/st…

koa

Koa没有express那么沉重,很轻量,也必须增加其他依赖来配合使用,比如koa-bodyparser和@koa/router,前者用来解析http请求中的body,使得人能够格式化的使用它,后者用来配置路由(API)信息,使得后端可以支持多多的API

github.com/LycheeHe/st…

React context+useReducer

React已经不需要强烈强调,前段人员必掌握的核心库。本项目没有用额外的Store件,而是采用React自带的context和useReducer组装的context+dispatch组合,每个(假)页面一个自定义context,每个页面自己管理自己的context,而所有的操作都集合在一个useEvent的自定义钩子中,真正的视图和操作分家。

context+dispatch组合:github.com/LycheeHe/st… useEvent操作例子:github.com/LycheeHe/st…

xlsx库

是一款相当强大的excel表格导入导出库,代码已封装好:github.com/LycheeHe/st…

fetch+signal,RESTful API

防抖动一直是前端的头痛点,而singal是治疗其病的头痛散,如果将前段所有的请求都封装到一个工具类里,下一个相同的请求过来时,如果有上一个请求还没有返回结果,那么就取消请求这个接口,转而节省了http的请求资源,也是的页面的数据更加稳定。结合几年前疯传的RESTful风格API,简直酷毙了。举个例子,在staff页面,CRUD员工的API一直都是/api/staff这个接口。

  • http method=get表示获取员工列表
  • http method=post表示修改批量员工
  • http method=put表示增加批量员工
  • http method=delete表示删除一个员工,与其他接口不用,删除的接口会带上这个员工的staffId,如:/api/admin/3444

代码也已经封装好:github.com/LycheeHe/st…