精华内容
下载资源
问答
我要提问

  • 【15】大事件项目：附-富文本编辑器和封面图片裁剪

     2020-08-14 15:00:24
    文章目录富文本和封面图片裁剪1. 富文本编辑器的实现步骤2. 图片封面裁剪的实现步骤3. 更换裁剪的图片4. 将裁剪后的图片，输出为文件 富文本和封面图片裁剪 1. 富文本编辑器的实现步骤 添加如下的 layui 表单行： ... 
    文章目录
    

    富文本和封面图片裁剪
    

    1. 富文本编辑器的实现步骤
    

      

    1. 

      添加如下的 layui 表单行：
      

      <div class="layui-form-item">
  <!-- 左侧的 label -->
  <label class="layui-form-label">文章内容</label>
  <!-- 为富文本编辑器外部的容器设置高度 -->
  <div class="layui-input-block" style="height: 400px;">
    <!-- 重要：将来这个 textarea 会被初始化为富文本编辑器 -->
    <textarea name="content"></textarea>
  </div>
</div>

      

      2. 

    2. 

      导入富文本必须的 script 脚本：
      

      <!-- 富文本 -->
<script src="/assets/lib/tinymce/tinymce.min.js"></script>
<script src="/assets/lib/tinymce/tinymce_setup.js"></script>

      

      3. 

    3. 

      调用 initEditor() 方法，初始化富文本编辑器：
      

      // 初始化富文本编辑器
initEditor()

      

      4. 

    

    2. 图片封面裁剪的实现步骤
    

    

    参考cropper基本使用方法、头像图片裁剪：
    
https://blog.csdn.net/Satan_Devil/article/details/108003818
    

    

      

    1. 

      在 <head> 中导入 cropper.css 样式表：
      

      <link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />

      

      2. 

    2. 

      在 <body> 的结束标签之前，按顺序导入如下的 js 脚本：
      

      <script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/cropper/Cropper.js"></script>
<script src="/assets/lib/cropper/jquery-cropper.js"></script>

      

      3. 

    3. 

      在表单中，添加如下的表单行结构：
      

      <div class="layui-form-item">
  <!-- 左侧的 label -->
  <label class="layui-form-label">文章封面</label>
  <!-- 选择封面区域 -->
  <div class="layui-input-block cover-box">
    <!-- 左侧裁剪区域 -->
    <div class="cover-left">
      <img id="image" src="/assets/images/sample2.jpg" alt="" />
    </div>
    <!-- 右侧预览区域和选择封面区域 -->
    <div class="cover-right">
      <!-- 预览的区域 -->
      <div class="img-preview"></div>
      <!-- 选择封面按钮 -->
      <button type="button" class="layui-btn layui-btn-danger">选择封面</button>
    </div>
  </div>
</div>

      

      4. 

    4. 

      美化的样式：
      

      /* 封面容器的样式 */
.cover-box {
  display: flex;
}

/* 左侧裁剪区域的样式 */
.cover-left {
  width: 400px;
  height: 280px;
  overflow: hidden;
  margin-right: 20px;
}

/* 右侧盒子的样式 */
.cover-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 预览区域的样式 */
.img-preview {
  width: 200px;
  height: 140px;
  background-color: #ccc;
  margin-bottom: 20px;
  overflow: hidden;
}

      

      5. 

    5. 

      实现基本裁剪效果：
      

        // 1. 初始化图片裁剪器
  var $image = $('#image')
  
  // 2. 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  
  // 3. 初始化裁剪区域
  $image.cropper(options)

      

      6. 

    

    3. 更换裁剪的图片
    

      

    1. 

      拿到用户选择的文件
      

      var file = e.target.files[0]

      

      2. 

    2. 

      根据选择的文件，创建一个对应的 URL 地址：
      

      var newImgURL = URL.createObjectURL(file)

      

      3. 

    3. 

      先销毁旧的裁剪区域，再重新设置图片路径，之后再创建新的裁剪区域：
      

      $image
   .cropper('destroy')      // 销毁旧的裁剪区域
   .attr('src', newImgURL)  // 重新设置图片路径
   .cropper(options)        // 重新初始化裁剪区域

      

      4. 

    

    4. 将裁剪后的图片，输出为文件
    

    $image
  .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
    width: 400,
    height: 280
  })
  .toBlob(function(blob) {       // 将 Canvas 画布上的内容，转化为文件对象
    // 得到文件对象后，进行后续的操作
  })
    收起
    展开全文

  • 富文本 和 图片裁切

     2020-11-28 17:54:53
    富文本编辑器和图片裁切一, 富文本编辑器的实现步骤1. 添加如下的 `layui `表单行：2. 导入富文本必须的 `script `脚本：3. 调用 `initEditor() 方法，`初始化富文本编辑器：二, 图片裁切的实现步骤1. 在` `中导入 `... 
    富文本编辑器和图片裁切
    

    一, 富文本编辑器的实现步骤
    

    1. 添加如下的 layui表单行：
    

    <div class="layui-form-item">
  <!-- 左侧的 label -->
  <label class="layui-form-label">文章内容</label>
  <!-- 为富文本编辑器外部的容器设置高度 -->
  <div class="layui-input-block" style="height: 400px;">
    <!-- 重要：将来这个 textarea 会被初始化为富文本编辑器 -->
    <textarea name="content"></textarea>
  </div>
</div>

    

    2. 导入富文本必须的 script脚本：
    

    <!-- 富文本 -->
<script src="/assets/lib/tinymce/tinymce.min.js"></script>
<script src="/assets/lib/tinymce/tinymce_setup.js"></script>

    

    3. 调用 initEditor() 方法，初始化富文本编辑器：
    

    // 初始化富文本编辑器  原版没有这是后包的函数
initEditor()

    

    二, 图片裁切的实现步骤
    

    1. 在<head>中导入 cropper.css样式表：
    

    <link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />

    

    2. 在 <body> 的结束标签之前，按顺序导入如下的 js 脚本：
    

    <script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/cropper/Cropper.js"></script>
<script src="/assets/lib/cropper/jquery-cropper.js"></script>

    

    3. 在表单中，添加如下的表单行结构：
    

    <div class="layui-form-item">
  <!-- 左侧的 label -->
  <label class="layui-form-label">文章封面</label>
  <!-- 选择封面区域 -->
  <div class="layui-input-block cover-box">
    <!-- 左侧裁剪区域 -->
    <div class="cover-left">
      <img id="image" src="/assets/images/sample2.jpg" alt="" />
    </div>
    <!-- 右侧预览区域和选择封面区域 -->
    <div class="cover-right">
      <!-- 预览的区域 -->
      <div class="img-preview"></div>
      <!-- 选择封面按钮 -->
      <button type="button" class="layui-btn layui-btn-danger">选择封面</button>
    </div>
  </div>
</div>

    

    4. 美化的样式
    

    /* 封面容器的样式 */
.cover-box {
  display: flex;
}

/* 左侧裁剪区域的样式 */
.cover-left {
  width: 400px;
  height: 280px;
  overflow: hidden;
  margin-right: 20px;
}

/* 右侧盒子的样式 */
.cover-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 预览区域的样式 */
.img-preview {
  width: 200px;
  height: 140px;
  background-color: #ccc;
  margin-bottom: 20px;
  overflow: hidden;
}

    

    5. 实现基本裁剪效果：
    

     // 1. 初始化图片裁剪器
  var $image = $('#image')
  
  // 2. 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  
  // 3. 初始化裁剪区域
  $image.cropper(options)

    

    三, 更换裁剪后的图片(不然的话拿到的还是裁剪前的)
    

    1. 拿到用户选择的文件
    

    var file = e.target.files[0]

    

    2. 根据选择的文件，创建一个对应的 URL 地址：
    

    var newImgURL = URL.createObjectURL(file)

    

    3. 先销毁旧的裁剪区域，再重新设置图片路径，之后再创建新的裁剪区域：
    

    $image
 .cropper('destroy')      // 销毁旧的裁剪区域
 .attr('src', newImgURL)  // 重新设置图片路径
 .cropper(options)        // 重新初始化裁剪区域

    

    四, 将裁剪后的图片，输出为文件
    

    $image
.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
  width: 400,
  height: 280
})
.toBlob(function(blob) {       // 将 Canvas 画布上的内容，转化为文件对象
  // 得到文件对象后，进行后续的操作
})

    

    五, 实际应用
    

    // 一. 初始化
let form = layui.form;
// 1. 初始化图片裁剪器
let $image = $('#image') 
// 2. 裁剪选项
let options = {
 aspectRatio: 400 / 280,
 preview: '.img-preview'
}
// 3. 初始化裁剪区域
$image.cropper(options)

// 二. 为 选择封面 按钮, 添加点击事件
$('button:contains("选择封面")').on('click', function () {
$('#file').trigger('click') // 调用文件域的点击事件
})

// 三. 文件域内容切换的时候, 更换裁剪区的图片
$('#file').on('change', function () {
// 1 找文件对象
let fileObj = this.files[0]
// 2 生成临时的 url 
let url = URL.createObjectURL(fileObj)
// 3 替换裁剪图片 (先销毁剪切框 --> 更换图片的src --> 重新创建剪裁框)
$image.cropper('destroy').attr('src', url).cropper(options)
})

    

    六, 提交数据完成最后的添加
    

    // 为表单添加提交事件, 阻止表单的默认提交
$('form').on('submit', function (e) {
	e.preventDefault()

	// 收集数据
	let fd = new FormData(this); // FormData 是根据表单各项的 name 属性收集值得
	// 获取 tinymce 插件的内容，并把内容添加到 FormData 对象中
	fd.set('content', tinyMCE.activeEditor.getContent());
	// 剪裁图片，得到 canvas(画布格式的图片)
	let canvas = $image.cropper('getCroppedCanvas', {
		width: 400,
		height: 280
	})
  
	// 把canvas图片转成blob格式
	canvas.toBlob(function (blob) {
	    // 形参 blob 就是转换后的结果，需要把它也追加到FormData中
	    fd.append('cover_img', blob);
	    // 验证FormData中有哪些值
	    fd.forEach(function (value, key) {
	        console.log(key, value)
	})
	// Ajax提交数据
	$.ajax({
		type: 'POST',
		url: '/my/article/add',
		data: fd,
		// 提交FormData格式的数据，必须填下面两项
		processData: false,
		contentType: false,
		success: function (res) {
			layer.msg(res.message)
			if (res.status === 0) {
				// 添加成功，跳转到文章列表页
				location.href = './list.html';
			}
		} 
})
    收起
    展开全文
    javascript

  • 图片 富文本 粘贴_批量裁剪图片、拼接长图、添加水印不想打开ps，你可以试试这款软件...

     2021-01-15 15:12:27
    批量处理一些图片，比如添加水印、压缩图片大小、批量裁剪等需求，ps可能没办法完成批量的操作，下面这款软件由一位摄影师开发，功能包括了图片加水印、长图拼接、富文本制图、尺寸调整、图片裁剪、EXIF 读取、字体... 
    
	
    

          工作中的需求常会遇到，批量处理一些图片，比如添加水印、压缩图片大小、批量裁剪等需求，ps可能没办法完成批量的操作，下面这款软件由一位摄影师开发，功能包括了图片加水印、长图拼接、富文本制图、尺寸调整、图片裁剪、EXIF 读取、字体管理和色彩提取 8 个工具。
    图片加水印工具
    你可以根据自己的需要，自行设置水印内容、颜色、字体、大小、角度和位置，几乎一切都可以随心自定义，比起市面上绝大多数。
    1ceee342939fd42db89616124bd7c70c.png
    长图拼接工具
    「长图拼接制作」也是一个非常热门的需求。此功能可以将多张图片拼合为一张“长图”，你可以自定义内外边框的宽度、颜色和图片圆角。最大支持输出高度为 16000 像素的图片(更长的图片将会被压缩)，基本能满足绝大多数人都需求，而且也保证拼接后每张图片都足够的清晰。
    2533c8f209bd7ef0395a4bfe7d86460b.png
    富文本制图工具
    将文档内容直接转换成图片。你可以利用本软件内置的“富文本编辑器”创作文章，或从其他编辑器(如 Microsoft Word 等)粘贴文章，之后自定义样式即可将排版输出成图片，对于常需要在社交媒体(微信朋友圈、微博等)使“用图片来发布富文本内容”的用户较为实用。
    b14ccfb13eb0fbcd9fa6aae5b924b568.png
    尺寸调整工具
    将图片按照统一长边长度、统一宽边长度或统一缩放百分比的方式进行批量尺寸调整。
    c164a5969af70fc789ed740ff46d39e7.png
    软件网站：https://imagetoolkit.potatofield.cn/
    收起
    展开全文

  • 微信小程序学习用demo推荐：图片自适应，富文本解析（12.9）

     2021-03-15 18:04:49
    小程序图片高宽没法自动适配，只能指定高宽进行裁剪。在详情页显示体验很差，用image组件的bindload解决 富文本解析 小程序没有提供富文本解析, 服务端可以转换为json(当然前端也可以有个js库解决html2json)在小程序... 
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        微信   
                                        程序   
                                        学   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    微信小程序-微信小程序图片自适应,微信小程序富文本解析
    
                                    
                                2019-08-07 08:26:37
                            
    
                            
    
                                
    
                                    wxapp > 最近跟小伙伴一起开发微信小程序, 发现在内容显示这块没法很好的...富文本解析 小程序没有提供富文本解析, 服务端可以转换为json(当然前端也可以有个js库解决html2json)在小程序里面用对应的组件适配 效果图
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        微信小程序   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    文章类别、文章列表、分页、删除文章、发布文章、美化时间格式的过滤器、jump回调函数、富文本编辑器、封面...
    
                                    
                                2020-08-14 15:08:11
                            
    
                            
    
                                
    
                                    5.2 新建基本的表单结构 5.3 渲染文章类别对应的下拉选择框结构 5.4 渲染富文本编辑器 5.5 渲染封面裁剪区域 5.6 渲染提交按钮区域 5.7 点击选择封面按钮打开文件选择框 5.8 将选择的图片设置到裁剪区域中 ...
                                
    
                                
    
                                    
    
                                        
    文章目录
    

    1. 文章类别
    

    1.1 点击编辑按钮展示修改文章分类的弹出层
    

      

    1. 

      为编辑按钮添加 btn-edit 类名如下：
      

      <button type="button" class="layui-btn layui-btn-xs btn-edit" data-id="{{$value.Id}}">编辑</button>

      

      2. 

    2. 

      定义 修改分类 的弹出层：
      

      <script type="text/html" id="dialog-edit">
  <form class="layui-form" id="form-edit" lay-filter="form-edit">
    <!-- 隐藏域，保存 Id 的值 -->
    <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="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" 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="alias" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
      </div>
    </div>
  </form>
</script>

      

      3. 

    3. 

      通过 代理 的形式，为 btn-edit 按钮绑定点击事件：
      

        var indexEdit = null
  $('tbody').on('click', '.btn-edit', function() {
    // 弹出一个修改文章分类信息的层
    indexEdit = layer.open({
      type: 1,
      area: ['500px', '250px'],
      title: '修改文章分类',
      content: $('#dialog-edit').html()
    })
  })

      

      4. 

    

    1.2 为修改文章分类的弹出层填充表单数据
    

      

    1. 

      为编辑按钮绑定 data-id 自定义属性：
      

      <button type="button" class="layui-btn layui-btn-xs btn-edit" data-id="{{$value.Id}}">编辑</button>

      

      2. 

    2. 

      在展示弹出层之后，根据 id 的值发起请求获取文章分类的数据，并填充到表单中：
      

      var id = $(this).attr('data-id')
// 发起请求获取对应分类的数据
$.ajax({
  method: 'GET',
  url: '/my/article/cates/' + id,
  success: function(res) {
    form.val('form-edit', res.data)
  }
})

      

      3. 

    

    1.3 更新文章分类的数据
    

      

    1. 

      通过代理的形式，为修改分类的表单绑定 submit 事件：
      

      $('body').on('submit', '#form-edit', function(e) {
    e.preventDefault()
    $.ajax({
          method: 'POST',
          url: '/my/article/updatecate',
          data: $(this).serialize(),
          success: function(res) {
            if (res.status !== 0) {
              return layer.msg('更新分类数据失败！')
            }
            layer.msg('更新分类数据成功！')
            layer.close(indexEdit)
            initArtCateList()
          }
    })
})

      

      2. 

    

    1.4 删除文章分类
    

      

    1. 

      为删除按钮绑定 btn-delete 类名，并添加 data-id 自定义属性：
      

      <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id="{{$value.Id}}">删除</button>

      

      2. 

    2. 

      通过代理的形式，为删除按钮绑定点击事件：
      

      $('tbody').on('click', '.btn-delete', function() {
    var id = $(this).attr('data-id')
    // 提示用户是否要删除
    layer.confirm('确认删除?', { icon: 3, title: '提示' }, function(index) {
      $.ajax({
        method: 'GET',
        url: '/my/article/deletecate/' + id,
        success: function(res) {
          if (res.status !== 0) {
            return layer.msg('删除分类失败！')
          }
          layer.msg('删除分类成功！')
          layer.close(index)
          initArtCateList()
        }
      })
    })
})

      

      3. 

    

    2. 文章列表
    

    2.1 创建文章列表页面
    

      

    1. 

      新建 /article/art_list.html 页面结构如下：
      

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/assets/lib/layui/css/layui.css" />
    <link rel="stylesheet" href="/assets/css/article/art_list.css" />
  </head>
  <body>
    <!-- 卡片区域 -->
    <div class="layui-card">
      <div class="layui-card-header">文章列表</div>
      <div class="layui-card-body"></div>
    </div>

    <!-- 导入第三方的 JS 插件 -->
    <script src="/assets/lib/layui/layui.all.js"></script>
    <script src="/assets/lib/jquery.js"></script>
    <script src="/assets/js/baseAPI.js"></script>
    <!-- 导入自己的 JS 脚本 -->
    <script src="/assets/js/article/art_list.js"></script>
  </body>
</html>


      

      2. 

    2. 

      新建 /assets/css/article/art_list.css 样式表如下：
      

      html,
body {
  margin: 0;
  padding: 0;
}

body {
  padding: 15px;
  background-color: #f2f3f5;
}

      

      3. 

    3. 

      新建 /assets/js/article/art_list.js 脚本文件。
      

      4. 

    

    2.2 定义查询参数对象q
    

      

    1. 

      定义一个查询的参数对象如下：
      

        // 定义一个查询的参数对象，将来请求数据的时候，
  // 需要将请求参数对象提交到服务器
  var q = {
    pagenum: 1, // 页码值，默认请求第一页的数据
    pagesize: 2, // 每页显示几条数据，默认每页显示2条
    cate_id: '', // 文章分类的 Id
    state: '' // 文章的发布状态
  }

      

      2. 

    

    2.3 请求文章列表数据并使用模板引擎渲染列表结构
    

      

    1. 

      定义获取文章列表数据的方法如下：
      

      initTable()  

// 获取文章列表数据的方法
function initTable() {
    $.ajax({
      method: 'GET',
      url: '/my/article/list',
      data: q,
      success: function(res) {
        if (res.status !== 0) {
          return layer.msg('获取文章列表失败！')
        }
        // 使用模板引擎渲染页面的数据
        var htmlStr = template('tpl-table', res)
        $('tbody').html(htmlStr)
      }
    })
}

      

      2. 

    2. 

      在页面中添加表格结构如下：
      

      <!-- 列表区域 -->
<table class="layui-table">
  <colgroup>
    <col />
    <col width="150" />
    <col width="180" />
    <col width="150" />
    <col width="150" />
  </colgroup>
  <thead>
    <tr>
      <th>文章标题</th>
      <th>分类</th>
      <th>发表时间</th>
      <th>状态</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

      

      3. 

    3. 

      定义列表数据的模板结构：
      

      <script type="text/html" id="tpl-table">
  {{each data}}
  <tr>
    <td>{{$value.title}}</td>
    <td>{{$value.cate_name}}</td>
    <td>{{$value.pub_date|dataFormat}}</td>
    <td>{{$value.state}}</td>
    <td>
      <button type="button" class="layui-btn layui-btn-xs">编辑</button>
      <button type="button" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
    </td>
  </tr>
  {{/each}}
</script>

      

      4. 

    

    2.4 定义美化时间格式的过滤器
    

      

    1. 

      通过 template.defaults.imports 定义过滤器：
      

        // 定义美化时间的过滤器
  template.defaults.imports.dataFormat = function(date) {
    const dt = new Date(date)

    var y = dt.getFullYear()
    var m = padZero(dt.getMonth() + 1)
    var d = padZero(dt.getDate())

    var hh = padZero(dt.getHours())
    var mm = padZero(dt.getMinutes())
    var ss = padZero(dt.getSeconds())

    return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
  }

  // 定义补零的函数
  function padZero(n) {
    return n > 9 ? n : '0' + n
  }

      

      2. 

    2. 

      在模板引擎中使用过滤器：
      

      <td>{{$value.pub_date|dataFormat}}</td>

      

      3. 

    

    2.5 绘制筛选区域的UI结构
    

      

    1. 

      绘制 UI 结构：
      

      <!-- 筛选区域 -->
<form class="layui-form" id="form-search">
  <div class="layui-form-item layui-inline">
    <select name="cate_id"></select>
  </div>
  <div class="layui-form-item layui-inline">
    <select name="state">
      <option value="">所有状态</option>
      <option value="已发布">已发布</option>
      <option value="草稿">草稿</option>
    </select>
  </div>
  <div class="layui-form-item layui-inline">
    <button class="layui-btn" lay-submit lay-filter="formDemo">筛选</button>
  </div>
</form>

      

      2. 

    

    2.6 发起请求获取并渲染文章分类的下拉选择框
    

      

    1. 

      定义 initCate 函数请求文章分类的列表数据：
      

        initCate()

  // 初始化文章分类的方法
  function initCate() {
    $.ajax({
      method: 'GET',
      url: '/my/article/cates',
      success: function(res) {
        if (res.status !== 0) {
          return layer.msg('获取分类数据失败！')
        }
        // 调用模板引擎渲染分类的可选项
        var htmlStr = template('tpl-cate', res)
        $('[name=cate_id]').html(htmlStr)
        // 通过 layui 重新渲染表单区域的UI结构
        form.render()
      }
    })
  }

      

      2. 

    2. 

      定义分类可选项的模板结构：
      

      <script type="text/html" id="tpl-cate">
  <option value="">所有分类</option>
  {{each data}}
  <option value="{{$value.Id}}">{{$value.name}}</option>
  {{/each}}
</script>

      

      3. 

    

    2.7 实现筛选的功能
    

      

    1. 

      为筛选表单绑定 submit 事件：
      

      $('#form-search').on('submit', function(e) {
    e.preventDefault()
    // 获取表单中选中项的值
    var cate_id = $('[name=cate_id]').val()
    var state = $('[name=state]').val()
    // 为查询参数对象 q 中对应的属性赋值
    q.cate_id = cate_id
    q.state = state
    // 根据最新的筛选条件，重新渲染表格的数据
    initTable()
})

      

      2. 

    

    3. 分页
    

    3.1 定义渲染分页的 renderPage 方法
    

      

    1. 

      定义渲染分页的方法：
      

      function renderPage(total) {
    console.log(total)
}

      

      2. 

    2. 

      在 initTable 中调用 renderPage 方法：
      

      function initTable() {
    $.ajax({
          method: 'GET',
          url: '/my/article/list',
          data: q,
          success: function(res) {
                if (res.status !== 0) {
                     return layer.msg('获取文章列表失败！')
                }
                // 使用模板引擎渲染页面的数据
                var htmlStr = template('tpl-table', res)
                $('tbody').html(htmlStr)
                // 调用渲染分页的方法
                renderPage(res.total)
          }
    })
}

      

      3. 

    

    3.2 调用 laypage.render 方法渲染分页的基本结构
    

      

    1. 

      在页面中定义分页的区域：
      

      <!-- 分页区域 -->
<div id="pageBox"></div>

      

      2. 

    2. 

      调用 laypage.render() 方法来渲染分页的结构：
      

      // 定义渲染分页的方法
function renderPage(total) {
    // 调用 laypage.render() 方法来渲染分页的结构
    laypage.render({
      elem: 'pageBox', // 分页容器的 Id
      count: total, // 总数据条数
      limit: q.pagesize, // 每页显示几条数据
      curr: q.pagenum // 设置默认被选中的分页
    })
}

      

      3. 

    

    3.3 在jump回调函数中通过obj.curr获取到最新的页码值
    

    // 定义渲染分页的方法
function renderPage(total) {
    // 调用 laypage.render() 方法来渲染分页的结构
    laypage.render({
      elem: 'pageBox', // 分页容器的 Id
      count: total, // 总数据条数
      limit: q.pagesize, // 每页显示几条数据
      curr: q.pagenum, // 设置默认被选中的分页
      // 分页发生切换的时候，触发 jump 回调
      jump: function(obj) {
        console.log(obj.curr)
        // 把最新的页码值，赋值到 q 这个查询参数对象中
        q.pagenum = obj.curr
      }
    })
}

    

    3.4 解决 jump 回调函数发生死循环的问题
    

      // 定义渲染分页的方法
  function renderPage(total) {
    // 调用 laypage.render() 方法来渲染分页的结构
    laypage.render({
      elem: 'pageBox', // 分页容器的 Id
      count: total, // 总数据条数
      limit: q.pagesize, // 每页显示几条数据
      curr: q.pagenum, // 设置默认被选中的分页
      // 分页发生切换的时候，触发 jump 回调
      // 触发 jump 回调的方式有两种：
      // 1. 点击页码的时候，会触发 jump 回调
      // 2. 只要调用了 laypage.render() 方法，就会触发 jump 回调
      jump: function(obj, first) {
        // 可以通过 first 的值，来判断是通过哪种方式，触发的 jump 回调
        // 如果 first 的值为 true，证明是方式2触发的
        // 否则就是方式1触发的
        console.log(first)
        console.log(obj.curr)
        // 把最新的页码值，赋值到 q 这个查询参数对象中
        q.pagenum = obj.curr
        // 根据最新的 q 获取对应的数据列表，并渲染表格
        // initTable()
        if (!first) {
          initTable()
        }
      }
    })
  }

    

    3.5 自定义分页的功能项
    

    // 定义渲染分页的方法
function renderPage(total) {
    // 调用 laypage.render() 方法来渲染分页的结构
    laypage.render({
      elem: 'pageBox', // 分页容器的 Id
      count: total, // 总数据条数
      limit: q.pagesize, // 每页显示几条数据
      curr: q.pagenum, // 设置默认被选中的分页
      layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
      limits: [2, 3, 5, 10],
      // 分页发生切换的时候，触发 jump 回调
      // 触发 jump 回调的方式有两种：
      // 1. 点击页码的时候，会触发 jump 回调
      // 2. 只要调用了 laypage.render() 方法，就会触发 jump 回调
      jump: function(obj, first) {
        // 可以通过 first 的值，来判断是通过哪种方式，触发的 jump 回调
        // 如果 first 的值为 true，证明是方式2触发的
        // 否则就是方式1触发的
        console.log(first)
        console.log(obj.curr)
        // 把最新的页码值，赋值到 q 这个查询参数对象中
        q.pagenum = obj.curr
        // 根据最新的 q 获取对应的数据列表，并渲染表格
        // initTable()
        if (!first) {
          initTable()
        }
      }
    })
}

    

    3.6 实现切换每页展示多少条数据的功能
    

    // 定义渲染分页的方法
function renderPage(total) {
    // 调用 laypage.render() 方法来渲染分页的结构
    laypage.render({
      elem: 'pageBox', // 分页容器的 Id
      count: total, // 总数据条数
      limit: q.pagesize, // 每页显示几条数据
      curr: q.pagenum, // 设置默认被选中的分页
      layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
      limits: [2, 3, 5, 10],
      // 分页发生切换的时候，触发 jump 回调
      // 触发 jump 回调的方式有两种：
      // 1. 点击页码的时候，会触发 jump 回调
      // 2. 只要调用了 laypage.render() 方法，就会触发 jump 回调
      jump: function(obj, first) {
        // 可以通过 first 的值，来判断是通过哪种方式，触发的 jump 回调
        // 如果 first 的值为 true，证明是方式2触发的
        // 否则就是方式1触发的
        console.log(first)
        console.log(obj.curr)
        // 把最新的页码值，赋值到 q 这个查询参数对象中
        q.pagenum = obj.curr
        // 把最新的条目数，赋值到 q 这个查询参数对象的 pagesize 属性中
        q.pagesize = obj.limit
        // 根据最新的 q 获取对应的数据列表，并渲染表格
        // initTable()
        if (!first) {
          initTable()
        }
      }
    })
}

    

    4. 删除文章
    

    4.1 实现删除文章的功能
    

      

    1. 

      为删除按钮绑定 btn-delete 类名和 data-id 自定义属性：
      

      <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id="{{$value.Id}}">删除</button>

      

      2. 

    2. 

      通过代理的形式，为删除按钮绑定点击事件处理函数：
      

      $('tbody').on('click', '.btn-delete', function() {
    // 获取到文章的 id
    var id = $(this).attr('data-id')
    // 询问用户是否要删除数据
    layer.confirm('确认删除?', { icon: 3, title: '提示' }, function(index) {
      $.ajax({
        method: 'GET',
        url: '/my/article/delete/' + id,
        success: function(res) {
          if (res.status !== 0) {
            return layer.msg('删除文章失败！')
          }
          layer.msg('删除文章成功！')
          initTable()
        }
      })

      layer.close(index)
    })
})

      

      3. 

    

    4.2 解决删除文章时的小 Bug
    

    $('tbody').on('click', '.btn-delete', function() {
    // 获取删除按钮的个数
    var len = $('.btn-delete').length
    // 获取到文章的 id
    var id = $(this).attr('data-id')
    // 询问用户是否要删除数据
    layer.confirm('确认删除?', { icon: 3, title: '提示' }, function(index) {
      $.ajax({
        method: 'GET',
        url: '/my/article/delete/' + id,
        success: function(res) {
          if (res.status !== 0) {
            return layer.msg('删除文章失败！')
          }
          layer.msg('删除文章成功！')
          // 当数据删除完成后，需要判断当前这一页中，是否还有剩余的数据
          // 如果没有剩余的数据了,则让页码值 -1 之后,
          // 再重新调用 initTable 方法
          // 4
          if (len === 1) {
            // 如果 len 的值等于1，证明删除完毕之后，页面上就没有任何数据了
            // 页码值最小必须是 1
            q.pagenum = q.pagenum === 1 ? 1 : q.pagenum - 1
          }
          initTable()
        }
      })

      layer.close(index)
    })
})

    

    5. 发布文章
    

    5.1 创建文章发布页面的基本结构
    

      

    1. 

      新建 /article/art_pub.html 页面结构如下：
      

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/assets/lib/layui/css/layui.css" />
    <link rel="stylesheet" href="/assets/css/article/art_pub.css" />
  </head>
  <body>
    <!-- 卡片区域 -->
    <div class="layui-card">
      <div class="layui-card-header">写文章</div>
      <div class="layui-card-body">
        卡片式面板面板通常用于非白色背景色的主体内<br />
        从而映衬出边框投影
      </div>
    </div>

    <!-- 导入第三方的 JS 插件 -->
    <script src="/assets/lib/layui/layui.all.js"></script>
    <script src="/assets/lib/jquery.js"></script>
    <script src="/assets/js/baseAPI.js"></script>
    <!-- 导入自己的 JS -->
    <script src="/assets/js/article/art_pub.js"></script>
  </body>
</html>


      

      2. 

    2. 

      新建 /assets/css/article/art_pub.css 样式文件如下：
      

      html,
body {
  margin: 0;
  padding: 0;
}

body {
  padding: 15px;
  background-color: #f2f3f5;
}

      

      3. 

    3. 

      新建 /assets/js/article/art_pub.js 脚本文件如下：
      

      $(function() { })

      

      4. 

    

    5.2 新建基本的表单结构
    

    <!-- 发布文章的表单 -->
<form class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">文章标题</label>
    <div class="layui-input-block">
      <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" />
    </div>
  </div>
</form>

    

    5.3 渲染文章类别对应的下拉选择框结构
    

      

    1. 

      定义 UI 结构：
      

        <!-- 第二行 -->
  <div class="layui-form-item">
    <label class="layui-form-label">文章类别</label>
    <div class="layui-input-block">
      <select name="cate_id" lay-verify="required"></select>
    </div>
  </div>

      

      2. 

    2. 

      导入 art-template：
      

      <script src="/assets/lib/template-web.js"></script>

      

      3. 

    3. 

      定义模板结构：
      

      <script type="text/html" id="tpl-cate">
  <option value="">请选择文章类别</option>
  {{each data}}
  <option value="{{$value.Id}}">{{$value.name}}</option>
  {{/each}}
</script>

      

      4. 

    4. 

      定义 initCate 方法：
      

      $(function() {
  var layer = layui.layer
  var form = layui.form

  initCate()
  // 定义加载文章分类的方法
  function initCate() {
    $.ajax({
      method: 'GET',
      url: '/my/article/cates',
      success: function(res) {
        if (res.status !== 0) {
          return layer.msg('初始化文章分类失败！')
        }
        // 调用模板引擎，渲染分类的下拉菜单
        var htmlStr = template('tpl-cate', res)
        $('[name=cate_id]').html(htmlStr)
        // 一定要记得调用 form.render() 方法
        form.render()
      }
    })
  }
})

      

      5. 

    

    5.4 渲染富文本编辑器
    

    

    参考 素材/富文本和封面.md 中的实现步骤
    
https://blog.csdn.net/Satan_Devil/article/details/108004689
    

    

    5.5 渲染封面裁剪区域
    

    

    参考 素材/富文本和封面.md 中的实现步骤
    
https://blog.csdn.net/Satan_Devil/article/details/108004689
    

    

    5.6 渲染提交按钮区域
    

      <!-- 第五行 -->
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit>发布</button>
      <button class="layui-btn layui-btn-primary" lay-submit>存为草稿</button>
    </div>
  </div>

    

    5.7 点击选择封面按钮打开文件选择框
    

      

    1. 

      修改 UI 结构，为 选择封面 按钮添加 id，并且在按钮后面添加 文件选择框：
      

      <!-- 选择封面按钮 -->
<button type="button" class="layui-btn layui-btn-danger" id="btnChooseImage">选择封面</button>
<!-- 隐藏的文件选择框 -->
<input type="file" id="coverFile" style="display: none;" accept="image/png,image/jpeg,image/gif" />

      

      2. 

    2. 

      为选择封面的按钮，绑定点击事件处理函数：
      

      $('#btnChooseImage').on('click', function() {
	$('#coverFile').click()
})

      

      3. 

    

    5.8 将选择的图片设置到裁剪区域中
    

      

    1. 

      监听 coverFile 的 change 事件，获取用户选择的文件列表：
      

        // 监听 coverFile 的 change 事件，获取用户选择的文件列表
  $('#coverFile').on('change', function(e) {
    // 获取到文件的列表数组
    var files = e.target.files
    // 判断用户是否选择了文件
    if (files.length === 0) {
      return
    }
    // 根据文件，创建对应的 URL 地址
    var newImgURL = URL.createObjectURL(files[0])
    // 为裁剪区域重新设置图片
    $image
      .cropper('destroy') // 销毁旧的裁剪区域
      .attr('src', newImgURL) // 重新设置图片路径
      .cropper(options) // 重新初始化裁剪区域
  })

      

      2. 

    

    5.9 分析发布文章的实现步骤
    

      

    1. 

      为 存为草稿 按钮添加 id 属性：
      

      <button class="layui-btn layui-btn-primary" lay-submit id="btnSave2">存为草稿</button>

      

      2. 

    2. 

      定义文章的发布状态：
      

      var art_state = '已发布'

      

      3. 

    3. 

      为存为草稿按钮，绑定点击事件处理函数：
      

      $('#btnSave2').on('click', function() {
    art_state = '草稿'
})

      

      4. 

    

    5.10 基于Form表单创建FormData对象
    

      

    1. 

      为发布文章的 Form 表单添加 id 属性：
      

      <form class="layui-form" id="form-pub"></form>

      

      2. 

    2. 

      为表单绑定 submit 提交事件：
      

        $('#form-pub').on('submit', function(e) {
    // 1. 阻止表单的默认提交行为
    e.preventDefault()
    // 2. 基于 form 表单，快速创建一个 FormData 对象
    var fd = new FormData($(this)[0])
    // 3. 将文章的发布状态，存到 fd 中
    fd.append('state', art_state)
  })

      

      3. 

    

    5.11 将裁剪后的封面追加到FormData对象中
    

      // 为表单绑定 submit 提交事件
  $('#form-pub').on('submit', function(e) {
    // 1. 阻止表单的默认提交行为
    e.preventDefault()
    // 2. 基于 form 表单，快速创建一个 FormData 对象
    var fd = new FormData($(this)[0])
    // 3. 将文章的发布状态，存到 fd 中
    fd.append('state', art_state)
    // 4. 将封面裁剪过后的图片，输出为一个文件对象
    $image
      .cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 400,
        height: 280
      })
      .toBlob(function(blob) {
        // 将 Canvas 画布上的内容，转化为文件对象
        // 得到文件对象后，进行后续的操作
        // 5. 将文件对象，存储到 fd 中
        fd.append('cover_img', blob)
        // 6. 发起 ajax 数据请求
      })
  })

    

    5.12 发起Ajax请求实现发布文章的功能
    

      

    1. 

      定义一个发布文章的方法：
      

      function publishArticle(fd) {
    $.ajax({
      method: 'POST',
      url: '/my/article/add',
      data: fd,
      // 注意：如果向服务器提交的是 FormData 格式的数据，
      // 必须添加以下两个配置项
      contentType: false,
      processData: false,
      success: function(res) {
        if (res.status !== 0) {
          return layer.msg('发布文章失败！')
        }
        layer.msg('发布文章成功！')
        // 发布文章成功后，跳转到文章列表页面
        location.href = '/article/art_list.html'
      }
    })
}

      

      2. 

    2. 

      把裁剪的图片追加到 FormData 对象中之后，调用 publishArticle 方法：
      

      // 为表单绑定 submit 提交事件
$('#form-pub').on('submit', function(e) {
    // 1. 阻止表单的默认提交行为
    e.preventDefault()
    // 2. 基于 form 表单，快速创建一个 FormData 对象
    var fd = new FormData($(this)[0])
    // 3. 将文章的发布状态，存到 fd 中
    fd.append('state', art_state)
    // 4. 将封面裁剪过后的图片，输出为一个文件对象
    $image
      .cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 400,
        height: 280
      })
      .toBlob(function(blob) {
        // 将 Canvas 画布上的内容，转化为文件对象
        // 得到文件对象后，进行后续的操作
        // 5. 将文件对象，存储到 fd 中
        fd.append('cover_img', blob)
        // 6. 发起 ajax 数据请求
        publishArticle(fd)
      })
})

      

      3. 

    

    5.13 将开发完成的项目代码推送到GitHub
    

      

    1. 运行 git add . 命令
      2. 

    2. 运行 git commit -m "完成文章管理相关功能的开发" 命令
      3. 

    3. 运行 git push -u origin article 命令
      4. 

    4. 运行 git checkout master 命令
      5. 

    5. 运行 git merge article 命令
      6. 

    6. 运行 git push 命令
      7. 

    


    
                                    
    
                                    
    收起 
    
                                
    
                                        
                                            展开全文
                                            
                                        
                            
    
                                
    
                                    
                                        html   
                                        javascript   
                                        jquery   
                                        ajax   
                                        layui框架   
                                
    

                        
    • 
                

            


            

                

                

                    
                    
空空如也

                

            


            

                

                

                    
                    
空空如也

                

            


            

                


 

 
 
         

            
                     


                    
                        1 
                    
                    
                        2 
                    
                    
                        3 
                    
                    
                        4 
                    
                    
                        5 
                    
                    
                        6 
                    

                    
            
        

   

                

                

            


        

    

    

        

            

                收藏数
                    115
            

            

                精华内容
                    46
            

        

        

            
热门标签

            
    
            

        


        


        

            关键字：
富文本图片裁剪