使用tp框架但是使用的是已经被封装过的，难点主要是套用模板，熟悉不一样的语法方式，但本质是一样的
分两个主体观看：
一个主体只能看并填写自已的数据不可修改
另一个主体属于内部人员可修改数据
tp框架中找到config.php
web为不可修改人员所能看到的模板
另外还设置了admin模板内部人员可修改（只需要在域名后面加上‘/admin’，就可以进入到可内部人员修改页面）
1.前端观看页面
主页的表格渲染：
因为只有一个页面但存在不同功能，所以我只需要在view视图文件夹下建一个index.html页面
类似图片上这些代码，是基本的css，js，css只需要从框中复制过来，最好不要改动，因为已经被封装过了，谁也不知道里面有什么，不敢乱修改
1.以第一个红框代表index.php的index方法进行渲染,这时候只会将表头进行渲染，不会有数据，因为方法内没写嗯
2.之后的红框代表表格的表头；要了解的还有field：类似于name属性，之后各种功能是要通过field的
public function index()
{
return $this->fetch('/index');
}
效果图：
增加功能
1.index.html页面 写跳转的新增按钮
<div>
<a href="javascript:;" onclick="wk.layer_show('添加内容','{:url('index/add')}')"><button class="layui-btn" data-type="add">
<i class="fa fa-plus"></i> 添加记录
</button>
</a>
</div>
2.在view目录下，index文件夹下
{include file="public/header" /}
<body class="gray-bg">
<div class="layui-fluid layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">添加</div>
<form class="layui-form" method="post">
<div class="layui-row layui-col-space10 layui-form-item ">
<div class="layui-form-item layui-col-md-offset1 layui-col-md8">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input type="text" class="layui-input " name="keyword" lay-verify="required" placeholder="学员名称">
</div>
</div>
<div class="layui-form-item layui-col-md-offset1 layui-col-md8">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input type="text" class="layui-input " name="title" lay-verify="required" placeholder="例如：懿贝瑞网络技术有限公司">
</div>
</div>
<div class="layui-form-item layui-col-md-offset1 layui-col-md8">
<label class="layui-form-label">电话</label>
<div class="layui-input-block">
<input type="text" class="layui-input " name="ip" lay-verify="required" placeholder="面试官电话">
</div>
</div>
<div class="layui-form-item layui-col-md-offset1 layui-col-md8">
<label class="layui-form-label">地址</label>
<div class="layui-input-block">
<input type="text" class="layui-input " name="remark" lay-verify="required" placeholder="例如：杭州市普山区国贸大厦一层168号">
</div>
</div>
<div class="layui-form-item layui-col-md-offset1 layui-col-md8">
<label class="layui-form-label">音频上传</label>
<input type="hidden" name="music" id="lay-music" lay-verify="music">
<div class="layui-input-block">
<div id="lay-music-upload">上传音频</div>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览音频：
<div class="layui-upload-list" id="lay-music-list">
</div>
</blockquote>
</div>
</div>
<div class="layui-form-item layui-col-md-offset1 layui-col-md10">
<label class="layui-form-label">面试内容：</label>
<div class="layui-input-block" >
<textarea name="content" id="LAY_editor2" placeholder="面试内容"></textarea>
</div>
</div>
<div class="layui-form-item layui-col-md-offset1 layui-col-md8">
<div class="layui-input-block">
<button class="layui-btn" lay-filter="component-form-element">保存</button>
<button class="layui-btn layui-btn-primary" onclick="wk.layer_close('close')">关闭</button>
</div>
</div>
</div>
</form>
</div>
</div>
{include file="public/footer" /}
</body>
3.页面渲染
因为这类框架标签自带form表单提交功能，只需要通过ajax异步通讯传值
<script type="text/javascript" src="__JS__/plugins/cropper/Crop.js"></script>
<script>
wk.uploadMusic({size:100,type:'m4a',url:"{:url('Upload/uploadmusic')}",domain:"{:config('qiniu.domain')}"});
layui.use(['form'], function() {
var form = layui.form
//百度富文本编辑器
var editor = UE.getEditor('LAY_editor2', {
initialFrameHeight:450,
autoHeight: false,
autoHeightEnabled:false,
autoFloatEnabled:false
});
form.on('submit(component-form-element)', function (data) {
$('.layui-btn').addClass('layui-disabled').attr('disabled','disabled');
console.log(data.field);
$.ajax({
url:"{:url('web/Index/add')}",
type:'post',
dataType:'json',
data:data.field,
success:function(res){
console.log(res)
if (res.code == 200) {
layer.msg(res.msg,{icon:1,time:1500,shade:0.1},function(index){
wk.layer_close();
})
} else {
$(".layui-btn").removeClass('layui-disabled').removeAttr('disabled');
wk.error(res.msg);
return false;
}
}
})
});
});
</script>
找到index.php的add方法
public function add()
{
if(request()->isPost()){
//判断是否为post提交方式
extract(input());
$param = input('post.');
$article = new InedxModel();
//方法新增用了引用了模型，模型里有insert方法
$flag = $article->insertArticle($param);
if($flag){
$this->assign("data",200);
return $this->fetch('index/add');
}
}
$cate = new ArticleCateModel();
$area = new \app\common\place\Area;
$this->assign("data",100);
//页面渲染
return $this->fetch('index/add',['province'=>$area->province(),'cate'=>$cate->getCate()]);
}
这个时候他已经将值插入到了数据库并跳转到add页面，ajax回调获取到值并跳转到主页。
这个时候找到index.php中的red方法进行重定向跳转，到主页
编辑功能
1.首页表格中
2.编辑页面html（新增页面的同级目录）
3.
public function edit()
{
$article = new ArticleModel();
$param = input('post.');
if(request()->isPost()){//判断提交方式，因为我不需要修改所以不需要用sql语句直接提示就好，用不着他
$param = input('post.');
return json(['code' => $flag['code'], 'data' => $flag['data'], 'msg' => $flag['msg']]);
}
$id = input('param.id');
$cate = new ArticleCateModel();
$data = $article->getOneArticle($id);
$this->assign('article',$data);//赋值
return $this->fetch('index/edit');//渲染编辑页面
}
4.edit.html input框内不要忘记填变量值
音频
因为我在音频的引用上报了很多错所有就开一部分专门写音频
以新增为例
主页表格：
主页js：
html：
<div class="layui-form-item layui-col-md-offset1 layui-col-md8">
<label class="layui-form-label">音频上传</label>
<input type="hidden" name="music" id="lay-music" lay-verify="music">
<div class="layui-input-block">
<div id="lay-music-upload">上传音频</div>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览音频：
<div class="layui-upload-list" id="lay-music-list">
</div>
</blockquote>
</div>
</div>
js：
wk.uploadMusic({size:100,type:'m4a',url:"{:url('Upload/uploadmusic')}",domain:"{:config('qiniu.domain')}"});
Upload.php：
1.音频按钮只有左上角能点击触发事件，其余都无法点击
解决方法，把新增页面与主页面分开不写在同一个html页面（因为我之前写在了一块）造成css有冲突