仪器进出库管理系统开发

最近给朋友做了一个管理公司仪器的“进出库管理系统”，主要功能就是每次仪器出库都要使用手机扫仪器上的二维码出库，归还的时候同样扫二维码入库。对整个使用流程做闭环跟踪。整个系统包括一个手机APP（本来想做成小程序，朋友要求做成APP）,一个PC端的后台管理系统。该系统为前后端分离，用到的技术栈主要为后端采用 springboot，数据库使用的是postgresql，PC端采用Vue框架，APP使用uniapp开发。下面简单分享一下。

后端+数据库设计

后端框架采用springboot+mybatis+postgresql。包括了数据的增删改查、全局异常处理，token验证，后端跨域处理等。

//全局异常处理
@ExceptionHandler(value = TokenAuthExpiredException.class)
@ResponseBody
public Result tokenExpiredExceptionHandler(TokenAuthExpiredException tokenAuthExpiredException){
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("message", tokenAuthExpiredException.message);
    map.put("code", tokenAuthExpiredException.code);
    return Result.all(map);
}
//在拦截器中对token进行验证
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
    //如果是PC端，则不拦截
    if("pc".equals(request.getHeader("flag"))){
        return true;
    } else {
        String token = request.getHeader("token");
        if(token == null){
            throw new TokenAuthExpiredException("Token不存在", 410);
        }
        if(!JwtUtil.verifyToken(token)){
            throw new TokenAuthExpiredException("Token过期", 411);
        }
        return true;
    }
}
//在过滤器中添加跨域处理
@Bean
public CorsFilter corsFilter() {
    CorsConfiguration config = new CorsConfiguration();
    // 设置允许跨域请求的域名
    config.addAllowedOrigin("*");
    // 是否允许证书 不再默认开启
    // config.setAllowCredentials(true);
    // 设置允许的方法
    config.addAllowedMethod("*");
    // 允许任何头
    config.addAllowedHeader("*");
    UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
    configSource.registerCorsConfiguration("/**", config);
    return new CorsFilter(configSource);
}
//接口文档采用knife4j 
@Configuration
@EnableSwagger2
public class Knife4jConfig {
    @Autowired
    TypeResolver typeResolver;
    @Bean
    public Docket createRestApi(){
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.insmg"))
                .paths(PathSelectors.any())
                .build()
                .additionalModels(typeResolver.resolve(User.class))
                .additionalModels(typeResolver.resolve(Device.class))
                .additionalModels(typeResolver.resolve(UsageRecord.class))
                .additionalModels(typeResolver.resolve(LoginEquipment.class));
    }

    public ApiInfo apiInfo(){
        return new ApiInfoBuilder()
                .title("仪器管理后台服务接口文档")
                .description("本次使用 knife4j 搭建后台接口文档")
                .termsOfServiceUrl("http://localhost:10001/")
                .contact(new Contact("xxx", "http://localhost:10500/", "xxx@163.com"))
                .version("0.0.1")
                .build();
    }
}

数据库设计，这里强烈给大家推荐一款数据库管理工具 dbeaver，十分好用。

PC端开发

PC端开发，采用Vue框架，使用的是element-plus UI，axios数据请求。Vue router做路由拦截。这里展示一下已开发好的系统界面。

APP开发

APP开发采用uniapp，其仍为Vue的技术栈，所以我这里采用uniapp开发，效率高，上手快。下面是一些开发截图和界面功能截图。

至此，整套管理系统开发完毕。当然这也是第一版，功能比较简单，业务也不是很复杂。不过我们打算后续在此基础上继续更新迭代。有喜欢的朋友欢迎收藏点赞转发，有业务需求的朋友也欢迎私信我，web全栈开发。