用Spring Boot+Vue做微人事项目第十天

用Spring Boot+Vue做微人事项目系列目录

用Spring Boot+Vue做微人事项目第十天

前两天做了微人事登录的前端页面和后端接口，第三天则实现了前后端接口的对接，输入正确的用户名和密码之后，成功的跳转到home页。第四天做了Home页的Title制作和下拉菜单，下拉菜单有三个选项，个人中心、设置和注销登录，还做了注销登录，点击注销登录会出现提示：“此操作将注销登录，是否继续”，点是就重新跳转到登录页面，第五天做的是左边的导航菜单，第六天是做的服务端菜单接口的设计，第七天是Vuex的介绍、安装和配置、第八天是不写代码，第九天谈一谈前后端分离开发，权限管理的一些思路，是后端接口权限设计，今天开始写业务代码，从系统管理的基础信息设置开始写，先写前端页面

①：在该页面添加一个大div，然后添加一个tab选项卡，Element UI里面有

把代码复制到大div里面，把里面的label和name属性改成我们想要的，再把@tab-click="handleClick"去掉

<template>
    <div>
        <template>
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="部门管理" name="first">部门管理</el-tab-pane>
                <el-tab-pane label="职位管理" name="second">职位管理</el-tab-pane>
                <el-tab-pane label="职称管理" name="third">职称管理</el-tab-pane>
                <el-tab-pane label="奖惩规则" name="fourth">奖惩规则</el-tab-pane>
                <el-tab-pane label="权限组" name="fifth">权限组</el-tab-pane>
            </el-tabs>
        </template>
    </div>
</template>

②：在data里面设置activeName属性，activeName:'second'：默认显示第二个

data(){
            return{
                activeName:'second'
            }
        },

效果如下图所示：

③：一共有五个选项卡，可不可以直接在每一个选项卡里面直接写html标签呢，答案是可以的，但是这样写的话，就要写好久重复的，没法管理，这时我们可以想到通过组件化开发来节省资源。就是一个很复杂的页面我们可以拆分成很多个小页面，在把很多小页面拼接成一个完整的页面。

组件可以放到components文件夹里面来，页面就要views文件夹中

④：先把这5个组件定义好

再引入这5个组件，在<script>标签下使用如下代码进行引入

import DepMana from '../../components/sys/basic/DepMana'
import EcMana from '../../components/sys/basic/EcMana'
import JobLevelMana from '../../components/sys/basic/JobLevelMana'
import PermissMana from '../../components/sys/basic/PermissMana'
import PosMana from '../../components/sys/basic/PosMana'

引入之后并不能直接使用，还需要注册成组件，组件有key和value，key和value相同，可以只写一个，定义的组件想当于是自己定义的一个html标签

export default {
        name: "SysBasic",
        data(){
            return{
                activeName:'second'
            }
        },
        components:{
            DepMana,
            EcMana,
            JobLevelMana,
            PermissMana,
            PosMana
        }
    }

⑤：把选项卡中的代码再修改一下：

<template>
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="部门管理" name="first"><DepMana></DepMana></el-tab-pane>
                <el-tab-pane label="职位管理" name="second"><PosMana></PosMana></el-tab-pane>
                <el-tab-pane label="职称管理" name="third"><JobLevelMana></JobLevelMana></el-tab-pane>
                <el-tab-pane label="奖惩规则" name="fourth"><EcMana></EcMana></el-tab-pane>
                <el-tab-pane label="权限组" name="fifth"><PermissMana></PermissMana></el-tab-pane>
            </el-tabs>
</template>

职位管理组件的编写

分析：职位管理组件里面有个输入框，有个添加按钮和一张表，可以分为两个div

、

<el-input
        size="small"
        class="addPosInput"
        placeholder="添加职位..."
        prefix-icon="el-icon-plus"
        v-model="pos.name">
</el-input>

v-model：一会要添加的数据，这个添加的数据可以从服务端看一下，未来想以json的形式上传它，就可以在data里面声明name默认为空字符

 export default {
        name: "DepMana",
        data() {
            return {
                pos: {
                    name: ''
                }
            }
        }
    }

右边是一个蓝色的添加按钮 type="primary" 表示是蓝色的   icon="el-icon-plus"：+号的标记  size="small：小号的

<el-button type="primary" icon="el-icon-plus" size="small">添加</el-button>

效果如下图所示：

接下来就是添加职位下面的表格了，Element UI也有很多表格模板的

表格的代码如下： 

<!--:data="tableDate 是data数据里面的tableData属性。表格里面显示的数据是json数组"-->
<!--el-table-column:表格中的每一列-->

<div class="posManaMain">
            <el-table
                    :data="positions"
                    stripe
                    size="small"
                    border
                    style="width: 70%">
                <el-table-column
                        prop="id"
                        label="编号"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="职位名称"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="createDate"
                        label="创建时间">
                </el-table-column>
            </el-table>
</div>

在script标签里面的代码如下： plsitions:[]：从后端传递过来的json数据

<script>
    export default {
        name: "DepMana",
        data() {
            return {
                pos: {
                    name: ''
                },
                positions: []
            }
        }
    }
</script>

效果如下图所示：

至此，微人事的系统管理中的基础信息设置中的职位管理的前端页面已经完成，明天开始写后端的接口 

                                                   觉得文章对自己有用，想要继续学下去的可以

                                                                         可以长按下方二维码        

                                                                

                                                                           关注【javalingfeng】哦

                                                          公众号正在更新vue.js和springboot的详细教程

                                                          还有超多免费Java，Python，Android等系列教程

                                                                                    等你来领