鉴于没实现过关于数据库相关的代码,于是狂撸了CRUD的基操,现来个简记。代码已传staff-mgmt-system
已实现的功能
- 用户可以通过excel导入,增加,修改和删除部门,职位,和员工,可以查看现在已有的管理员。
- 用户可以导出部门,职位和员工的数据至excel表中
- 用户可以将员工专程admin管理员,这对权限管理有很大的帮助
项目成果
Admin界面,一个一个的增加admin
部门界面,批量通过excel表格导入添加部门,也可以批量更新部门信息
职位界面
员工界面
技术核心
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生成的日志文件可以基于年月日生成日志文件。
koa
Koa没有express那么沉重,很轻量,也必须增加其他依赖来配合使用,比如koa-bodyparser和@koa/router,前者用来解析http请求中的body,使得人能够格式化的使用它,后者用来配置路由(API)信息,使得后端可以支持多多的API
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…