管理后台开发的一般流程

信息安全服务后台管理系统开发

接口请求规范：

<resource name="服务管理" url="/serviceManager/serviceManager.html,/serviceManager/list,/serviceManager/*/query,/serviceManager/*/del,/serviceManager/*/disabled,/serviceManager/*/check" menu="true">
    <resource name="查询服务详情" url="/serviceManager/queryServiceDetail"/>
    <resource name="新增服务" url="/serviceManager/addService"/>
    <resource name="修改服务" url="/serviceManager/updateService"/>
    <resource name="删除服务" url="/serviceManager/deleteService"/>
    <resource name="禁用服务" url="/serviceManager/disableService"/>
</resource>

<resource name="调用方管理" url="/clientManager/clientManager.html,/clientManager/list,/clientManager/*/del,/clientManager/*/disabled,/clientManager/*/check,/clientManager/*/query,/clientManager/service/select" menu="true">
    <resource name="查询调用方详情" url="/clientManager/queryClientDetail"/>
    <resource name="新增调用方" url="/clientManager/addClient"/>
    <resource name="修改调用方" url="/clientManager/updateClient"/>
    <resource name="删除调用方" url="/clientManager/deleteClient"/>
    <resource name="禁用调用方" url="/clientManager/disableClient"/>
</resource>

新增调用方管理（只以这个为例）

新增界面展示：

直接贴上代码完事吧~~
HTML:

<!--新增页/更新页-->
    <div v-show="isShow" class="panel panel-default">
        <div class="panel-heading">{{title}}</div>
        <form class="form-horizontal">
            <div class="form-group">
                <div class="col-sm-2 control-label">调用方ID：</div>
                <div class="col-sm-10">
                    <!--<input type="text" v-model="v.id" class="hidden"/>-->
                    <input type="text" class="form-control" v-model="w.clientId" placeholder="调用方ID"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">调用方名称：</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="w.clientName" placeholder="调用方名称"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">调用密钥：</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="w.clientSecret" placeholder="调用密钥"/>
                </div>
            </div>
            <div class="form-group" >
                <div class="col-sm-2 control-label">授权服务：</div>
                <div class="col-sm-10">
                    <label v-for="service in serviceList" class="checkbox-inline">
                        <input type="checkbox" :value="service.serviceId" v-model="w.serviceIdList"/>{{service.serviceName}}
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
                &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
            </div>
        </form>
    </div>

</div>

JS:

var vm = new Vue({
    el: '#rrOauthClient',
    data: {
        serviceList: {},    //数据库中查询所有的服务
        w: {
            id: "",
            clientId: "",
            clientName: "",
            clientSecret: "",
            clientStatus: "",
            createTime: "",
            modifyTime: "",
            deleteStatus: "",
            serviceIdList:[]    //待添加的对象所选定的服务集合，只保存服务id
        },
    },
    method:{
        saveOrUpdate: function () {
            console.log("vm.w:"+JSON.stringify(vm.w));
            if (vm.validator()) {
                return;
            }
            var securityClient = vm.w;
            //id == ""  表示添加，否则更新
            var url = securityClient.id == "" ? "clientManager/addClient" : "clientManager/updateClient";
            console.log(url);
            console.log(JSON.stringify(securityClient));
            $.ajax({
                type: "POST",
                url: baseURL + url,
                contentType: "application/json",
                data: JSON.stringify(securityClient),
                success: function (r) {
                    if (r.code == 0) {
                        // alert(r.code);
                        alert('操作成功', function () {
                            vm.reload();
                        });
                    } else {
                        alert(r.msg);
                    }
                }
            });

        },
    }
})

Controller:

@RequestMapping(value = "/addClient", method = RequestMethod.POST)
    public R addSecurityClient(@RequestBody SecurityClient securityClient) {
        logger.info("ClientController.addSecurityClient()|begin securityClient = {}",securityClient.toString());
        try{
            clientService.addSecurityClient(securityClient);
            logger.info("ClientController.addSecurityClient()|插入成功！");
            return R.ok();
        }catch (AppBusinessException e) {
            logger.info("ClientController.addSecurityClient()|新增调用方失败 原因：{}",e.getMessage());
            return R.error(BusCode.CLIENT_RECORD_ADD_FAIL,e.getMessage());
        }catch (Exception e) {
            logger.info("ClientController.addSecurityClient()|新增调用方失败 原因：{}",e.getMessage());
            return R.error();
        }
    }

Service:

public void addSecurityClient(SecurityClient securityClient) {
        logger.info("ClientService.addSecurityClient()|securityClient = {}",securityClient);
        //验证该clientId是否已存在
        SecurityClient queryByClientId = clientDAO.queryByClientId(securityClient.getClientId());
        if(queryByClientId != null) {
            logger.info("ClientService.addSecurityClient()|不允许插入，clientId已存在  queryByClientId = {}",queryByClientId.toString());
            throw new AppBusinessException("该调用方Id已存在");
        }
        //验证该clientName是否已存在
        SecurityClient queryByClientName = clientDAO.queryByClientName(securityClient.getClientName());
        if(queryByClientName != null) {
            logger.info("ClientService.addSecurityClient()|不允许插入，clientName已存在  queryByClientName = {}",queryByClientName.toString());
            throw new AppBusinessException("该调用方名称已存在");
        }
        Integer rows = clientDAO.insertClient(securityClient);
        if(rows > 0) {
            logger.info("ClientService.addSecurityClient()|插入成功！");
            //给调用方添加服务权限
            List<Long> serviceIdList = securityClient.getServiceIdList();
            //没有待新增服务权限就不添加
            if(serviceIdList != null && serviceIdList.size() > 0) {
                Integer result = clientDAO.saveClientService(securityClient);
                if(result > 0) {
                    logger.info("ClientService.addSecurityClient()|添加服务权限成功！");
                }else{
                    throw new AppBusinessException("未知异常，请联系管理员");
                }
            }
        }else{
            logger.info("ClientService.addSecurityClient()|插入失败！");
            throw new AppBusinessException("未知异常，请联系管理员");
        }
    }

DAO:

//验证该clientId是否已存在
SecurityClient queryByClientId(Long clientId);
//验证该clientName是否已存在
SecurityClient queryByClientName(String clientName);
//添加调用方主体部分
Integer insertClient(SecurityClient securityClient);
//添加调用方所拥有的服务权限
Integer result = clientDAO.saveClientService(securityClient);

XML:

<select id="queryByClientId" parameterType="Long" resultType="com.tuandai.ms.security.domain.SecurityClient">
        select
        <include refid="Base_Column_List"/>
        from t_security_client
        where client_id = #{clientId} and delete_status = 0
 </select>
 <select id="queryByClientName" parameterType="String" resultType="com.tuandai.ms.security.domain.SecurityClient">
            select
            <include refid="Base_Column_List"/>
            from t_security_client
            where client_name = #{clientName} and delete_status = 0
 </select>
 <insert id="insertClient" parameterType="com.tuandai.ms.security.domain.SecurityClient">
        insert into t_security_client
        <trim prefix="(" suffix=")" suffixOverrides=",">
            <if test="clientId != null">
                client_id,
            </if>
            <if test="clientName != null and clientName.trim() != ''">
                client_name,
            </if>
            <if test="clientSecret != null and clientSecret.trim() != ''">
                client_secret,
            </if>
            <if test="clientStatus != null">
                client_status,
            </if>
            <if test="deleteStatus != null">
                delete_status,
            </if>
        </trim>
        <trim prefix="values (" suffix=")" suffixOverrides=",">
            <if test="clientId != null">
                #{clientId},
            </if>
            <if test="clientName != null and clientName.trim() != ''">
                #{clientName},
            </if>
            <if test="clientSecret != null and clientSecret.trim() != ''">
                #{clientSecret},
            </if>
            <if test="clientStatus != null">
                #{clientStatus},
            </if>
            <if test="deleteStatus != null">
                #{deleteStatus},
            </if>
        </trim>
</insert>
<insert id="saveClientService" parameterType="com.tuandai.ms.security.domain.SecurityClient">
        insert into t_security_client_permission
        (
        `client_id`,
        `service_id`
        )
        values
        <foreach collection="serviceIdList" item="item" index="index" separator="," >
            (
            #{clientId},
            #{item}
            )
        </foreach>
</insert>

添加功能即可实现。
总结：其实实现这个功能并不难，最开始把我难住的地方就是多选按钮那里，因为所学后端知识甚少，前端就更加捉襟见肘了。对多选按钮的解决思路是：在domain实体类对象（ClientDO）中添加一个字段属性：private List serviceIdList,用来存放ClientDO对象所拥有的服务权限，在js部分，这里采用的是vue.js，data属性里面声明和ClientDO对象结构相同的字段。另外这js里面申明serviceList字段集合，用来保存数据库中所有查询出来的服务

补充mybatis一些用法

• 设置字段状态相互转换

<update id="disableClient" parameterType="Long">
        update t_security_client SET client_status =
        CASE
        WHEN client_status = "1" THEN "0"
        ELSE "1"
        END
        WHERE id= #{id}
</update>