5站点编辑的基本操作

娜惩赤橡陇钱溜读敬借蚊裳蛋

站点信息只允许修改不允许删除

删除用于删除站点及用户的js代码后的index.html结构：

5站点编辑的基本操作第1张

{include file="common@header"}
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">系统设置</a>
        <a>
          <cite>站点管理</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
      

      <table class="layui-table layui-form">
        <thead>
          <tr>
           
            <th width="40">ID</th>
            <th>站点名称</th>
            <th>关键字</th>
            <th>描述</th>
            <th>操作</th>
        </thead>
        <tbody class="x-cate">
          <tr cate-id='1' fid='0' >
            
            <td>{$site.site_id}</td>
            <td>
              <i class="layui-icon x-show" status='true'></i>
              {$site.site_name}
            </td>
            <td>
                <i class="layui-icon x-show" status='true'></i>
                {$site.keywords}
              </td>
              <td>
                <i class="layui-icon x-show" status='true'></i>
                {$site.desc}
              </td>
            
            <td class="td-manage">
              <button class="layui-btn layui-btn layui-btn-xs"  onclick="x_admin_show('编辑','admin-edit.html')" ><i class="layui-icon">&#xe642;</i>编辑</button>
            </td>
          </tr>

        </tbody>
      </table>
    </div>
    <style type="text/css">
      
    </style>
    <script>
      layui.use(['form'], function(){
        form = layui.form;
        
      });
    </script>
  </body>

</html>

创建编辑操作

5站点编辑的基本操作第2张

<?php
namespace app\admin\controller;

//引入公共控制器
use app\common\controller\Base;
//引入模板
use  app\common\model\Site as SiteModel;

class Site extends Base
{
    // 展示站点信息
    public function index()
    {
        //通过模型进行查询并获取到站点信息，同时生成一个数据模型对象
        $site=SiteModel::get(1);
        //模板赋值 将站点信息赋值刚给模板  举例直白点说：  例如 将查询到的数据赋值给一个变量
        //将这个变量发送给一个html页面  这样在html界面就能使用这个变量输出数据了
        // 第一种方法
        $this->view->site=$site;//将查询出来的数据赋值给变量site 魔术方法set给模板赋值
        
        // 第二种方法
        // $this->view->assign('site',$site);

        // 渲染模板
        return $this->view->fetch();

    }

    //编辑站点信息
    public function edit()
    {
        //编辑是基于查询的，需要先查询
        $site=SiteModel::get(1);        
        $this->view->assign('site',$site);
        return $this->view->fetch();
    }
    
}

点击编辑

5站点编辑的基本操作第3张

编辑模板制作

打开x-admin 找到admin-edit 复制到视图目录并改名为edit

5站点编辑的基本操作第4张

打开上图所示的index.html 修改url信息

因为是在当前控制器下操作，所以直接给操作名即可

将

<button class="layui-btn layui-btn layui-btn-xs"  onclick="x_admin_show('编辑','admin-edit.html')" ><i class="layui-icon">&#xe642;</i>编辑</button>

改为：

 <button class="layui-btn layui-btn layui-btn-xs"  onclick="x_admin_show('编辑','{:url(\"edit\")}')" ><i class="layui-icon">&#xe642;</i>编辑</button>

注意onclick=”x_admin_show(‘编辑’,'{:url(\”edit\”)}’)” >

必须进行转义因为外层既有单引号又有双引号所以用单引号或者双引号都不行

点击编辑

5站点编辑的基本操作第5张

5站点编辑的基本操作第6张

显示真实的数据

edit.html

{include file="common@header"}
    <div class="x-body">
        <form class="layui-form">
          <div class="layui-form-item">
              <label for="username" class="layui-form-label">
                  站点名称
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="username" name="username" required="" lay-verify="required"
                  autocomplete="off" value="{$site.site_name}" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="phone" class="layui-form-label">
                  关键字
              </label>
              <div class="layui-input-inline">
                <textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea">{$site.keywords}</textarea>
              </div>
          </div>
          <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">
                  站点描述
              </label>
              <div class="layui-input-inline">
                <textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea">{$site.desc}</textarea>
              </div>
          </div>
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="add" lay-submit="">
                  保存
              </button>
          </div>
      </form>
    </div>
    <script>
        layui.use(['form','layer'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;
        

          //监听提交
          form.on('submit(add)', function(data){
            console.log(data);
            //发异步，把数据提交给php
            layer.alert("增加成功", {icon: 6},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
            });
            return false;
          });
          
          
        });
    </script>
  </body>

</html>

注意：关键字和站点描述原本模板使用的是layui的输入框，这里改成了文本域

访问layui官网复制文本域代码即可

点击编辑

5站点编辑的基本操作第7张

此时只需要将保存的逻辑实现即可，这里只需要写edit.html的下面这部分代码即可

<script>
        layui.use(['form','layer'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;
        

          //监听提交
          form.on('submit(add)', function(data){
            console.log(data);
            //发异步，把数据提交给php
            layer.alert("增加成功", {icon: 6},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
            });
            return false;
          });
          
          
        });
    </script>

修改后的edit.html

{include file="common@header"}
    <div class="x-body">
        <form class="layui-form">
          <div class="layui-form-item">
              <label for="sitename" class="layui-form-label">
                  站点名称
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="sitename" name="sitename" required="" lay-verify="required"
                  autocomplete="off" value="{$site.site_name}" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="keywords" class="layui-form-label">
                  关键字
              </label>
              <div class="layui-input-inline">
                <textarea name="keywords" id="keywords" required lay-verify="required" placeholder="请输入" class="layui-textarea">{$site.keywords}</textarea>
              </div>
          </div>
          <div class="layui-form-item">
              <label for="desc" class="layui-form-label">
                  站点描述
              </label>
              <div class="layui-input-inline">
                <textarea name="desc" id="desc" required lay-verify="required" placeholder="请输入" class="layui-textarea">{$site.desc}</textarea>
              </div>
          </div>
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="add" lay-submit="">
                  保存
              </button>
          </div>
      </form>
    </div>
    <script>
        layui.use(['form','layer'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;
        

          //监听提交
          form.on('submit(add)', function(data){
            console.log(data);
            //发异步，把数据提交给php
            $.post("{:url('doEdit')}",{
                'site_name':$('#sitename').val(),
                'keywords':$('#keywords').val(),
                'desc':$('#desc').val()
            })
            

            layer.alert("增加成功", {icon: 6},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
            });
            return false;
          });
          
          
        });
    </script>
  </body>

</html>

创建保存编辑的函数doEdit()

5站点编辑的基本操作第2张

<?php
namespace app\admin\controller;

//引入公共控制器
use app\common\controller\Base;
//引入模板
use  app\common\model\Site as SiteModel;
//引入请求类  用于在doEdit中接收通过POST提交的数据
//因为被封装到了facade中  所以引入方式如下
use think\facade\Request;
class Site extends Base
{
    // 展示站点信息
    public function index()
    {
        //通过模型进行查询并获取到站点信息，同时生成一个数据模型对象
        $site=SiteModel::get(1);
        //模板赋值 将站点信息赋值刚给模板  举例直白点说：  例如 将查询到的数据赋值给一个变量
        //将这个变量发送给一个html页面  这样在html界面就能使用这个变量输出数据了
        // 第一种方法
        $this->view->site=$site;//将查询出来的数据赋值给变量site 魔术方法set给模板赋值
        
        // 第二种方法
        // $this->view->assign('site',$site);

        // 渲染模板
        return $this->view->fetch();

    }

    //编辑站点信息
    public function edit()
    {
        //编辑是基于查询的，需要先查询
        $site=SiteModel::get(1);        
        $this->view->assign('site',$site);
        return $this->view->fetch();
    }

    // 处理编辑操作
    public function doEdit()
    {
        //使用request来获取edit.html提交的数据
        halt(Request::param('desc'));
    }
    
}

注意，这里使用了Request类需要在头部引入

打开审查元素-编辑-保存-doedit.html 数据提交到doEdit()成功

5站点编辑的基本操作第9张

完善doEdit(),Site.php

<?php
namespace app\admin\controller;

//引入公共控制器
use app\common\controller\Base;
//引入模板
use  app\common\model\Site as SiteModel;
//引入请求类  用于在doEdit中接收通过POST提交的数据
//因为被封装到了facade中  所以引入方式如下
use think\facade\Request;
class Site extends Base
{
    // 展示站点信息
    public function index()
    {
        //通过模型进行查询并获取到站点信息，同时生成一个数据模型对象
        $site=SiteModel::get(1);
        //模板赋值 将站点信息赋值刚给模板  举例直白点说：  例如 将查询到的数据赋值给一个变量
        //将这个变量发送给一个html页面  这样在html界面就能使用这个变量输出数据了
        // 第一种方法
        $this->view->site=$site;//将查询出来的数据赋值给变量site 魔术方法set给模板赋值
        
        // 第二种方法
        // $this->view->assign('site',$site);

        // 渲染模板
        return $this->view->fetch();

    }

    //编辑站点信息
    public function edit()
    {
        //编辑是基于查询的，需要先查询
        $site=SiteModel::get(1);        
        $this->view->assign('site',$site);
        return $this->view->fetch();
    }

    // 处理编辑操作
    public function doEdit()
    {
        //使用request来获取edit.html提交的数据
        $siteName=Request::param('site_name');
        $keywords=Request::param('keywords');
        $desc=Request::param('desc');

        //执行更新
        // update(参数1，参数2) 参数1：更新的数据 字段=>值   参数二:更新的条件  字段=>值  
        //因为站点表中只有一个id   所以直接指定site_id=>1
        SiteModel::update([
            'site_name'=>$siteName,
            'keywords'=>$keywords,
            'desc'=>$desc

        ],[
            'site_id'=>1
        ]);
    }
    
}

修改数据

5站点编辑的基本操作第10张

修改成功

5站点编辑的基本操作第11张

箱仿辨接倪烩彼氏鹅来父快淳