开放管理平台01

一、应用平台介绍

开放平台

前面学习过支付接口，就是通过支付宝平台，提供了一个支付接口，供第三方商城去使用；第三方商城可以很方便的使用支付功能，而无需自己再写一套类似的支付平台，减少了模块的开发，提升了效率。支付宝平台就是一个开放平台。

开放平台的好处：通过第三方软件扩充了开放平台的生态和能力

开放管理平台

开放管理平台，就是在开放平台的基础上，去管理开放平台产生的后台数据。

例如，客户管理,应用管理,充值管理,api 路由管理,网关参数管理,用户 Token 管理,日志搜索,权限管理,实现对服务的限流,熔断等动态配置,通过管理平台可以查看生成的数据,也可以通过管理平台将修改的数据同步到开放平台的网关系统中来实现实时更新功能

编码顺序

  1. 如果对接前端资源，根据提供的接口进行业务流程的开发，则需要从controller开始编写
  2. 如果从后端数据处理的角度进行开发，则从dao层开始编写并测试后台数据是否正常

二、表的设计原则

三大范式

1，列不可分

不能将字段拆分成多个子字段

例如： 用户表–字段：用户名： username first_name last_name 违背第一大范式

2，需要唯一标识的字段

要有主键，非主键字段依赖主键

一张表的职责单一，否则确定不了唯一主键

例如： 1. user表要有id表示主键

​ 2. 学生表字段、课程表字段–学生课程表 ，违背第二大范式

3，不可存在传递依赖

字段不冗余，不会浪费磁盘空间

通过表关联查询，可以得到其他信息

例如： 订单表：订单id，价格，地址id

​ 地址表： 地址id，收货地址、收货人、电话

反范式设计

反第三范式，字段冗余，用空间换时间

表关联查询—>单表查询

例如： 订单表：订单id，价格，地址id（1，2，3），收货地址、收货人、电话

​ 地址表： 地址id（1，2，3），收货地址、收货人、电话

物理外键与逻辑外键

之前二阶段项目，通过PowerDesigner设计出各表的外键关联，但有时并不需要有物理外键约束，因为外键有性能问题：

1.数据库需要维护外键的内部管理；（数据库压力大）

2.外键等于把数据的一致性事务实现，全部交给数据库服务器完成；（数据库额外控制事务）

3.有了外键，当做一些涉及外键字段的增，删，更新操作之后，需要触发相关操作去检查，而不得不消耗资源；（服务器消耗大）

4.外键还会因为需要请求对其他表内部加锁而容易出现死锁情况（容易死锁）

所以，有时需要设计逻辑外键，也就是不需要数据库控制外键关联，通过程序方式约束好即可

例如：部门表（主表-did）与员工表（从表-外键did）

员工表添加数据，外键不能随意写，需要主表中存在；通过程序逻辑判断，主表中有字段才去添加从表的该外键。这种程序判断方式叫做逻辑外键。

三、SSM流程

DAO测试

  1. 创建web项目
  2. 导坐标
  3. 分层设计
  4. 表设计与实体类设计
  5. 配置bean容器及dao接口与mapper文件
  6. 进行dao测试

SSM框架

  1. 将SpringMVC的框架配置完成
  2. 结合layui前端进行设计
  3. 动态显示表格数据信息

layUI应用

列表状态的显示效果

, {
    field: 'state', title: '状态', templet: function (data) {
        return (data.state == 1) ? '<span class="layui-badge layui-bg-green">有效</span>' : '<span class="layui-badge layui-bg-red" >无效</span>'
    }
}

四、编辑与删除

将操作放入表格中

,{field:"right",title:"操作",toolbar: '#barDemo'}

在表头下面绑定编辑和删除按钮；通过id=“barDemo"进行绑定的

<!-- 如下script可以定义在页面的任何位置 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

删除

//注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
table.on('tool(custom)', function(obj){
    var data = obj.data; //获得当前行数据
    //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var layEvent = obj.event;
    if(layEvent === 'del'){ //删除
        layer.confirm('真的删除行么', function(index){
            // 向服务端发送删除请求
            // 此处可以发送ajax
            $.ajax({
                type:"delete",
                url:"/customer/delete/"+data.id,
                success:function(res){
                    console.log(res);
                    table.reload('custom');//重载父页表格，参数为表格ID
                }
            });
            obj.del(); //删除对应行（tr）的DOM结构
            layer.close(index); //当前弹窗索引标记删除
        });
    }
});

编辑

layer.open({  //打开弹窗
    type: 1,  //文档形式展示
    content: $('#customer-edit-layer').html(), //获取页面内容
    title: '编辑'  //标题
    , area: ['500px', '400px'],  //显示文档区域
    btn: ['提交', '取消'] //可以无限个按钮
    , yes: function (index, layero) { //点击提交后的触发
        layer.load();  //进行编辑的时候显示加载效果
        $.ajax({
            type:"post",  //注意：此处序列化数据，需要使用post请求传数据
            url:"/customer/update", //修改
            data:$("#customer-edit-form").serialize(), //序列化数据
            success:function(res){
                alert("修改: "+res);
                table.reload('custom');
                layer.close(index);   //关闭窗口

                layer.closeAll('loading'); //关闭加载图标
            }
        })
    }, success: function (layero, index) { //访问内容成功，则渲染表单数据
        form.render(); //表单的渲染
        if (data != null) {
            //data中的属性，要与customer-edit-form的name属性名一致，才能注入
            form.val("customer-edit-form", data); //注入文本控件
            form.val("customer-edit-form", { //注入单选框的值
                "state": data.state + ""
            });
        }
    }
});

编辑当前页面的显示

<!-- 修改需要注入的内容 -->
<script type="text/html" id="customer-edit-layer">
    <form id="customer-edit-form" style="width: 80%" class="layui-form" lay-filter="customer-edit-form">
        <input type="hidden" name="id">

        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="text" name="password" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">公司名</label>
            <div class="layui-input-block">
                <input type="text" name="nickname" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="state" title="有效" value="1" checked/>
                <input type="radio" name="state" title="无效" value="0"/>
            </div>
        </div>
    </form>
</script>

五、添加

展示添加按钮

添加功能，需要放到工具栏中，所以需要配置工具类的属性

,toolbar:'#my_toolbar'

加入添加和匹配删除的案例，id为my_toolbar

<script type="text/html" id="my_toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="batdel">批量删除</a>
</script>

添加封装

添加和编辑选项非常类似，可以将两者共用；修改时有填充数据，添加时，没有数据而已

//添加事件
table.on("toolbar(custom)",function (obj) {
    var layEvent = obj.event;
    if(layEvent==='add'){
        addOrEditWindow(null);  //添加功能
    }
})

方法实现：

function addOrEditWindow(data){  //添加或编辑的封装
    layer.open({  //打开弹窗
        type: 1,  //文档形式展示
        content: $('#customer-edit-layer').html(), //获取页面内容
        title: '编辑'  //标题
        , area: ['500px', '400px'],  //显示文档区域
        btn: ['提交', '取消'] //可以无限个按钮
        , yes: function (index, layero) { //点击提交后的触发
            layer.load();  //进行编辑的时候显示加载效果
            $.ajax({
                type:"post",  //注意：此处序列化数据，需要使用post请求传数据
                url:(data==null)?"/customer/add":"/customer/update", //修改
                //...

六、总结与作业

总结

1.应用平台介绍
开放平台与开放管理平台
编码的编写顺序
2.表的设计原则（重点）
三大范式、反范式（反第三方式）
物理外键与逻辑外键
3.SSM流程（重点）
DAO测试、SSM框架、LayUI应用
4.编辑与删除
删除-ajax；编辑-ajax修改（post请求）
5.添加
展示添加按钮； 添加封装（与编辑功能复用）

作业

1.完成今日的删除，编辑，添加功能
2.完成批量删除(要交)