档案管理系统

mercyGz

于 2019-07-15 19:08:47 发布

阅读量3.9k

点赞数 3

分类专栏：项目总结文章标签： java vue.js elementui

本文链接：https://blog.csdn.net/meicyGz/article/details/96004647

版权

本文档介绍了基于JAVA、Vue.js和Element UI开发的档案管理系统，包括员工管理、部门管理和系统配置三大模块，实现了CRUD操作、高级查询分页等功能，旨在提升文件管理和共享效率，确保档案的安全与规范。

摘要由CSDN通过智能技术生成

档案管理系统总结

系统背景说明

由于文件多，种类多，文件创建者多，创建时间为不定期，要保护好一些重要的文件极为不便，同时由于人员的流动，对原有的文件的再现，显得力不从心，有时查找与重新整理文件要浪费许多的人力、物力。而且近年来，由于竞争的激烈程度不断的加深，档案的管理不当会严重到导致公司面临着亏损甚至破产的局面。于是公司不断地在探索希望能找到解决的方法。为了解决以上的问题，让公司能够有效的掌握，有效的共享文件资源，保护好文件，及促进档案管理的信息化、规范化和集成化，本人多方听取意见、追加和完善大量实用功能，进而了解文件管理的流程，同时结合各部门、各行业与企业文件管理的方法，开发出一套适合于档案多而复杂的管理系统。

综合描述

操作系统：WIN10 64位
数据库：MYSQL；
服务器：Tomcat；
开发语言：JAVA；
开发工具：IDEA；
架构：SpringMVC+Spring+Mybatis+Shiro+Vue.js+Element Ui

业务描述

在这里插入图片描述

员工管理模块

功能描述

系统管理员以可视化的效果维护本系统用户信息，并赋予用户对应的角色权限。

首先根据需求在MySQL数据库里创建t_user表

一.基础组件的创建

1.逆向工程创建 mapper ,domain

generatorConfig.xml
<table tableName="t_user" domainObjectName="System" >
			<!-- 参考 javaModelGenerator 的 constructorBased属性 -->
			<property name="constructorBased" value="false" />
			<generatedKey column="id" sqlStatement="JDBC" />
	</table>

2.service层的创建

public interface UserService extends IBaseService<User>{
    void updateStateToDisable(Long id);
int deleteByPrimaryKey(Long id);

    int insert(T record);

    T selectByPrimaryKey(Long id);

    int updateByPrimaryKey(T record);

    PageResult selectForList(BaseQueryObject qo);
}

二.高级查询分页

1.创建查询的对象

2.service层的创建高级查询分页的方法

public class UserQueryObject extends BaseQueryObject{
    //关键字查询
    private String keyword;

    public String getKeyword() {
        if(StringUtils.hasLength(keyword)){
            return keyword.trim();
        }
        return null;
    }

    public void setKeyword(String keyword) {
        this.keyword = keyword;
    }
}

3.编写高级查询的分页的sql

public class PageResult {

    private long total = 0;

    private List rows = new ArrayList();

    public PageResult() {
    }

    public PageResult(long total, List rows) {
        this.total = total;
        this.rows = rows;
    }

    public long getTotal() {
        return total;
    }

    public void setTotal(long total) {
        this.total = total;
    }

    public List getRows() {
        return rows;
    }

    public void setRows(List rows) {
        this.rows = rows;
    }
}

4.创建controller

@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    /**
     * 根据id查询用户
     *
     */
    @RequestMapping("/getById")
    @ResponseBody
    public User getById(Long id) {
       return userService.selectByPrimaryKey(id);
    }
    /**
     * 用户主界面
     */
    @RequestMapping("/index")
    public String index(Model model){
        return "user";
    }

    /**
     * 用户列表数据
     *
     */
    @RequestMapping("/list")
    @ResponseBody
    public PageResult list(UserQueryObject qo){
        return userService.selectForList(qo);
    }

    /**
     *
     *批量删除
     */
    @RequestMapping("/batchDelete")
    @ResponseBody
    public AjaxResult batchDelete(Long[] ids){
        try {
            for (Long id : ids) {
                userService.deleteByPrimaryKey(id);
            }
            return AjaxResult.success();
        } catch (Exception e){
            e.printStackTrace();
            return AjaxResult.error(e.getMessage());
        }
    }

    /**
     * 用户删除
     */
    @RequestMapping("/remove")
    @ResponseBody
    public AjaxResult remove(Long id){
        try {
            userService.deleteByPrimaryKey(id);
            return AjaxResult.success();
        }catch (Exception e){
            e.printStackTrace();
            return AjaxResult.error("啊,系统异常啦,我们正在殴打程序员O(∩_∩)O~");
        }
    }
}

5.创建高级查询分页的方法

三.使用Vue.js+Element Ui展示页面,CRUD增删改查功能实现

1.添加功能

JSP部分
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
    <jsp:include page="/static/common/common_header.jsp"/>

    <style>
        #table {
            width: 100%;
        }

        .page {
            margin-right: 20px;
            float: right;
        }

        .top {
            clear: both;
            text-align: center
        }

        .searchFrom {
            margin: 0 auto;
            float: none;
        }
        .el-dialog__body{
            padding: 30px 200px 30px 150px;
        }
        .el-form-item {
            margin-bottom: 0px;
            margin-top: 20px;
        }

        .submit{
            float: right;
        }

        .new {
            float: right;
            margin-right: 5%;
            margin-bottom: 0px;
            margin-top: 20px;
        }
        .batchDelete {
            margin-left: 5%;
            float: left;
            margin-top: 20px
        }
    </style>

</head>
<body>
<div id="table">
    <div class="top">
        <div class="searchFrom">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">

                <el-form-item label="关键字">
                    <el-input v-model="formInline.user" placeholder="关键字"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit"><i class="el-icon-search">&nbsp;&nbsp;</i>查询</el-button>
                </el-form-item>


                <el-button type="primary" class="new" @click="winReload"><i class="el-icon-refresh">&nbsp;&nbsp;</i>刷新</el-button>
                <el-button type="primary" class="new" @click="newUser">
                    <i class="el-icon-plus">&nbsp;&nbsp;</i>
                    新建用户
                </el-button>
            </el-form>
        </div>
    </div>

    <el-table
            :data="tableData"
            style="width: 1