Spring Boot + Vue.js 实现 EAM 企业资产管理系统之 01-开发笔记（1）

概述

本项目选取 EAM 企业资产管理系统中的资产数据管理的基础功能进行编码实现，作为阶段性的练习案例进行学习。

项目主要功能：资产数据增删改查、资产数据条件查询、资产数据分页查询。

技术选型：Vue CLI + Webpack + Vue.js 2 + VueRouter + Vuex + Axios + Mock.js + ElementUI + Spring Boot + MyBatis Plus + MySQL + Apifox。

数据库设计

zichan（资产数据表）：

开发笔记

在桌面上打开终端，进入 Vue CLI 的 GUI 项目管理器。

在 GUI 中创建一个 Vue CLI 项目，在创建项目的过程中，功能选择 Babel、Router、Vuex，Vue.js 版本选择 2.x。

项目创建完成后，在 GUI 中为项目添加 vue-cli-plugin-element、vue-cli-plugin-axios 插件、mockjs 依赖。

项目插件和依赖均添加完成后，使用 IDEA 打开创建好的项目，删除自动生成的多余的代码和文件，如默认组件、图片资源、路由配置等。

新建 Mock.js 配置文件（src/mock/index.js），初始化资产列表数据。

const Mock = require('mockjs')

// 定义资产数组
let zichanDatabase = []

// 循环十次生成模拟数据放入资产数组
for(let i = 0; i < 10; i++) {
    zichanDatabase.push(Mock.mock({
            'id': '@increment()', // 资产id，主键自增
            'type': '@integer(0, 2)',   // 资产分类，0固定资产/1无形资产/2其他
            'status': '@integer(0, 2)',   // 资产状态，0闲置/1使用/2废弃
            'name': '@cname',   // 资产名称
            'code': '@guid()',   // 资产编号，随机生成
            'usage': '@ctitle()',    // 资产用途
            'place': '@ctitle()',    // 使用地点
            'date': '@date("yyyy-MM-dd HH:mm:ss")'// 入库时间
        })
    )
}

console.log(zichanDatabase)

在终端中运行 Mock.js 配置文件（src/mock/index.js），查看生成的资产列表数据。

在项目中要使用 Mock.js 拦截 Axios 请求，需要修改项目入口配置文件（src/main.js），提前导入 Mock.js。

import mock from './mock'

修改 Mock.js 配置文件（src/mock/index.js），编写获取资产列表的接口。

// 获取资产列表
Mock.mock('/api/zichan/getList', 'get', {
    code: 200,
    message: 'success',
    data: zichanDatabase
})

修改根组件（src/App.vue），编写 ElementUI 布局容器。

<template>
    <el-container>
        <el-main>
            <router-view></router-view>
        </el-main>
    </el-container>
</template>

新建资产列表视图页面组件（src/views/List.vue），在组件创建完成时发生 Axios 请求获取资产列表的数据。

data() {
    return {
        // 定义资产列表
        zichanList: []
    }
},
methods: {
    // 定义获取资产列表的方法
    getList() {
        axios.get('/api/zichan/getList')
            .then(ret => {
                // 控制台打印ret查看数据
                console.log(ret)
             })
             .catch(error => {
                this.$message.error('请求失败')
             })
    }
},
created() {
    // 调用获取资产列表的方法
    this.getList()
}

修改路由配置文件（src/router/index.js），编写资产列表视图页面组件的路由配置。

{
    path: '/',
    component: () => import('@/views/List.vue')
}

运行项目，查看效果。

修改资产列表视图页面组件（src/views/List.vue），完善 Axios 请求，将资产列表数据保存到组件数据中。

this.zichanList = ret.data.data

修改资产列表视图页面组件（src/views/List.vue），编写资产列表的表格组件。

<template>
    <el-row>
        <el-col :span="24">
            <el-button size="small" type="primary">新增资产</el-button><br><br>
            <el-table :data="zichanList" border stripe>
                <el-table-column prop="id" label="资产id"></el-table-column>
                <el-table-column label="资产分类">
                    <!--
                        使用组件插槽自定义单元格内容
                        scope.row：当前这一行的数据
                    -->
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.type == 0">固定资产</el-tag>
                        <el-tag type="success" v-if="scope.row.type == 1">无形资产</el-tag>
                        <el-tag type="info" v-if="scope.row.type == 2">其他</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="资产状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 0">闲置</el-tag>
                        <el-tag type="success" v-if="scope.row.status == 1">使用</el-tag>
                        <el-tag type="danger" v-if="scope.row.status == 2">废弃</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="资产名称"></el-table-column>
                <el-table-column prop="code" label="资产编号"></el-table-column>
                <el-table-column prop="usage" label="资产用途"></el-table-column>
                <el-table-column prop="place" label="使用地点"></el-table-column>
                <el-table-column prop="date" label="入库时间"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini">编辑</el-button>
                        <el-button type="danger" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
</template>

运行项目，查看效果。

新建新增资产视图页面组件（src/views/Add.vue），编写新增资产的表单组件。

<script>
export default {
    data() {
        return {
            // 定义资产对象
            zichan: {
                type: '',
                status: '',
                name: '',
                usage: '',
                place: '',
            }
        }
    }
}
</script>

<template>
    <el-row>
        <el-col :span="12">
            <el-form label-width="80px">
                <el-form-item label="资产分类">
                    <el-select v-model="zichan.type" placeholder="请选择资产分类">
                        <el-option label="固定资产" value="0"></el-option>
                        <el-option label="无形资产" value="1"></el-option>
                        <el-option label="其他" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资产状态">
                    <el-select v-model="zichan.status" placeholder="请选择资产状态">
                        <el-option label="闲置" value="0"></el-option>
                        <el-option label="使用" value="1"></el-option>
                        <el-option label="废弃" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资产名称">
                    <el-input v-model="zichan.name"></el-input>
                </el-form-item>
                <el-form-item label="资产用途">
                    <el-input v-model="zichan.usage"></el-input>
                </el-form-item>
                <el-form-item label="使用地点">
                    <el-input v-model="zichan.place"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">提交</el-button>
                    <el-button @click="$router.go(-1)">返回</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>

修改路由配置文件（src/router/index.js），编写添加资产视图页面组件的路由配置。

{
    path: '/add',
    component: () => import('@/views/Add.vue')
}

修改资产列表视图页面组件（src/views/List.vue），为相关按钮添加路由跳转。

<el-button size="small" type="primary" @click="$router.push('/add')">新增资产</el-button>

运行项目，查看效果。

修改新增资产视图页面组件（src/views/Add.vue），编写发送表单请求的方法。

methods: {
    add() {
        axios.post('/api/zichan/add', this.zichan)
            .then(ret => {
                // code == 200即添加成功
                if(ret.data.code == 200) {
                    this.$message.success('添加成功')
                    this.$router.push('/')
                } else {
                    this.$message.error('添加失败')
                }
            })
            .catch(error => {
                this.$message.error('请求失败')
            })
    }
}

在表单请求时，需要做好表单校验。ElementUI 的表单组件提供了表单校验功能。

修改新增资产视图页面组件（src/views/Add.vue），编写表单校验规则。

data() {
    return {
        // ...
        // 定义表单校验规则
        validateZichan: {
            type: [{
                required: true,
                message: '请选择资产分类',
                trigger: 'change'
            }],
            status: [{
                required: true,
                message: '请选择资产状态',
                trigger: 'change'
            }],
            name: [{
                required: true,
                message: '请输入资产名称',
                trigger: 'blur'
            }],
            usage: [{
                required: true,
                message: '请输入资产用途',
                trigger: 'blur'
            }],
            place: [{
                required: true,
                message: '请输入使用地点',
                trigger: 'blur'
            }]
        }
    }
}

修改新增资产视图页面组件（src/views/Add.vue），为表单组件添加表单校验的相关属性。

<!--
    ElementUI表单校验：
    model：为表单绑定数据对象
    rules：为表单绑定校验规则
    ref：用于获取表单元素
    prop：为每一个表单元素设置校验规则
-->
<el-form :model="zichan" :rules="validateZichan" ref="zichanForm" label-width="80px">
    <el-form-item label="资产分类" prop="type">
        <!-- ... -->
    </el-form-item>
    <!-- ... -->
</el-form>

修改新增资产视图页面组件（src/views/Add.vue），在发送 Axios 之前完成表单校验。

methods: {
    add() {
        // 通过refs获取表单节点，并调用表单组件的表单校验方法
        this.$refs['zichanForm'].validate((valid) => {
            if (valid) {
                // 表单校验通过，发送Axios请求
                axios.post('/api/zichan/add', this.zichan)
                    .then(ret => {
                        // code == 200即添加成功
                        if(ret.data.code == 200) {
                            this.$message.success('添加成功')
                            this.$router.push('/')
                        } else {
                            this.$message.error('添加失败')
                        }
                    })
                    .catch(error => {
                        this.$message.error('请求失败')
                    })
            } else {
                // 表单校验不通过，结束方法
                return false
            }
        })
    }
}

修改新增资产视图页面组件（src/views/Add.vue），为相关按钮绑定点击事件。

<el-button type="primary" @click="add">提交</el-button>

运行项目，查看效果。

修改 Mock.js 配置文件（src/mock/index.js），编写新增资产的接口。

Mock.mock('/api/zichan/add', 'post', function(options) {
    // 控制台调试输出
    console.log(options)
})

运行项目，查看效果。

修改 Mock.js 配置文件（src/mock/index.js），编写新增资产的接口。

// 新增资产
Mock.mock('/api/zichan/add', 'post', function(options) {
    // Axios POST 的请求参数是以JSON字符串的形式提交的，所以需要将请求参数转为JSON对象
    let params = JSON.parse(options.body)

    // 定义新的资产
    let zichan = {
        id: Mock.Random.increment(),
        type: params.type,
        status: params.status,
        name: params.name,
        code: Mock.Random.guid(),
        usage: params.usage,
        place: params.place,
        date: Mock.Random.date("yyyy-MM-dd HH:mm:ss")
    }

    // 将新的资产保存到资产数组中
    zichanDatabase.push(zichan)

    // 返回新增结果
    return {
        code: 200,
        message: 'success'
    }
})

运行项目，查看效果。