山东大学项目实训开发日志——基于vue+springboot的医院耗材管理系统(4)

这篇博客记录了作者在山东大学项目实训中,使用vue.js开发医院耗材管理系统前端的过程。已完成前端页面设计,包括10个部分:首页、订单管理等。在开发中,利用代码复用降低工作量,目前问题较少,即将着手编写前端功能方法、路由及前后端交互代码。
摘要由CSDN通过智能技术生成

        经过了几周的努力,前端的页面设计(由我负责的部分)已经基本完成,按照之前的规划,分为首页,订单管理,库存管理,入库管理,出库管理,退货管理,移库管理,报表管理,资质管理,系统管理10个部分,每部分都有专门的页面和操作。

        在此贴一个移库管理中的页面代码,为了开发方便,我们在开发过程中各部分页面代码之间极为类似,减少了很多的工作量并且易于纠错。

<template> 
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-tickets"></i>
        <span>移库列表</span>
      </div>

      <el-button size="small" style="float:right;margin-right: 15px"
                 type="primary" :loading="loading"
                 @click.native.prevent="handleSearchList">
        查询搜索
      </el-button>
      <el-button
        style="float:right;margin-right: 10px"
        @click="handleResetSearch()"
        size="small">
        重置
      </el-button>
      <div style="float:right">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item>
            <el-input v-model="listQuery.keyword" class=
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
宿舍管理系统是一个比较综合的系统,需要涉及到前端、后端、数据库等多个方面。下面是一个基于VueSpringboot的宿舍管理系统的搭建步骤: 1. 环境搭建 首先需要安装好Node.js和Java开发环境,以及MySQL数据库。 2. 前端搭建 使用Vue-cli创建一个Vue项目,安装Vue-router和Axios等必要的依赖。在src目录下创建components、views、router、store等文件夹,分别存放组件、页面、路由和状态管理相关文件。 3. 后端搭建 使用Spring Initializr创建一个Springboot项目,选择必要的依赖,如Spring Web、Spring Data JPA、MySQL Driver等。在src目录下创建entity、repository、service、controller等文件夹,分别存放实体类、数据访问层、服务层和控制层相关文件。 4. 数据库设计 根据宿舍管理系统的需求,设计数据库表结构,如宿舍楼信息表、宿舍信息表、学生信息表等。 5. 前后端交互 使用Axios在前端与后端进行数据交互,使用Vue-router实现页面跳转。 6. 前端界面设计 根据需求设计前端页面,如登录页面、宿舍楼信息管理页面、宿舍信息管理页面、学生信息管理页面等。 7. 后端接口设计 设计后端接口,如登录接口、宿舍楼信息管理接口、宿舍信息管理接口、学生信息管理接口等。使用@RestController注解实现控制层,使用@Service注解实现服务层,使用@Repository注解实现数据访问层。 8. 系统测试 完成前后端搭建后,进行系统测试,测试系统的功能是否正常。 以上是一个基于VueSpringboot的宿舍管理系统的搭建步骤,具体实现还需根据需求进行具体开发
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值