🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 视图与模型 * * * * * ### 视图 视图是作者复制的其他列表或编辑页面视图修改的,在实际项目开发中作者推荐能复制就直接复制,这样既可以降低出错误的概率又可以提升工作效率,若手敲的话可能经常因为某个字母或字符的错误导致系统报错。 **blogroll_edit.html 内容如下:** ~~~ <form action="{:url()}" method="post" class="form_single"> <div class="box"> <div class="box-body"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label>链接名称</label> <span>(友情链接名称,用于前端展示)</span> <input class="form-control" name="name" placeholder="请输入友情链接名称" value="{$info['name']|default=''}" type="text"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label>友情链接图片</label> <span class="">(请上传单张图片)</span> <br/> {assign name="img_id" value="$info.img_id|default='0'" /} {:hook('File', ['name' => 'img_id', 'value' => $img_id, 'type' => 'img'])} </div> </div> <div class="col-md-6"> <div class="form-group"> <label>链接URL</label> <span>(例如:https://demo.onebase.org)</span> <input class="form-control" name="url" placeholder="请输入链接URL" value="{$info['url']|default=''}" type="text"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label>链接描述</label> <span>(此友情链接的描述信息)</span> <textarea class="form-control" name="describe" rows="3" placeholder="请输入链接描述">{$info['describe']|default=''}</textarea> </div> </div> <div class="col-md-6"> <div class="form-group"> <label>排序</label> <input class="form-control" name="sort" placeholder="请输入排序值" value="{$info['sort']|default='0'}" type="text"> </div> </div> </div> </div> <div class="box-footer"> <input type="hidden" name="id" value="{$info['id']|default='0'}"/> {include file="layout/edit_btn_group"/} </div> </div> </form> ~~~ **blogroll_list.html 内容如下:** ~~~ <div class="box"> <div class="box-header"> <ob_link><a class="btn" href="{:url('blogrollAdd')}"><i class="fa fa-plus"></i> 新 增</a></ob_link> </div> <div class="box-body table-responsive"> <table class="table table-bordered table-hover"> <thead> <tr> <th>名称</th> <th>图片</th> <th>URL</th> <th>排序</th> <th>创建时间</th> <th>状态</th> <th>操作</th> </tr> </thead> {notempty name='list'} <tbody> {volist name='list' id='vo'} <tr> <td>{$vo.name}</td> <td><img class="admin-list-img-size" src="{$vo.img_id|get_picture_url}"/></td> <td>{$vo.url}</td> <td>{$vo.sort}</td> <td>{$vo.create_time}</td> <td>{$vo.status_text}</td> <td class="col-md-2 text-center"> <ob_link><a href="{:url('blogrollEdit', array('id' => $vo['id']))}" class="btn"><i class="fa fa-edit"></i> 编 辑</a></ob_link> &nbsp; <ob_link><a class="btn confirm ajax-get" href="{:url('blogrollDel', array('id' => $vo['id']))}"><i class="fa fa-trash-o"></i> 删 除</a></ob_link> </td> </tr> {/volist} </tbody> {else/} <tbody><tr class="odd"><td colspan="7" class="text-center" valign="top">{:config('empty_list_describe')}</td></tr></tbody> {/notempty} </table> </div> <div class="box-footer clearfix text-center"> {$list->render()} </div> </div> ~~~ * * * * * ### 模型 好啦,最后一步,来加个友情链接数据模型,通过功能可以分析出 前端有查询需求,所以咱们的模型加到通用模块的model中,内容如下: ~~~ <?php // +---------------------------------------------------------------------+ // | OneBase | [ WE CAN DO IT JUST THINK ] | // +---------------------------------------------------------------------+ // | Licensed | http://www.apache.org/licenses/LICENSE-2.0 ) | // +---------------------------------------------------------------------+ // | Author | Bigotry <3162875@qq.com> | // +---------------------------------------------------------------------+ // | Repository | https://gitee.com/Bigotry/OneBase | // +---------------------------------------------------------------------+ namespace app\common\model; /** * 友情链接模型 */ class Blogroll extends ModelBase { } ~~~ 目前来看咱们后台的友情链接功能已经开发完成了,来看看使用起来咋样~ 若对系统执行流程较熟悉的话刚才这一波完全可以在30分钟内搞定,可以大大提升生产力喔,规范的流程也可降低很多不必要的错误。 下面是刚才开发的功能测试截图 ^_^。 ![](https://box.kancloud.cn/921dacaa993572c75b56c9e00488214d_1916x748.png) ![](https://box.kancloud.cn/5b0b31e8e98729896f810a855df1f804_1920x773.png) ![](https://box.kancloud.cn/a66ea9c6f2b10849689044e6edc74347_1917x724.png)