search

jackieli123723 / jackieli123723.github.io

✅lilidong 个人博客
9 stars 0 forks source link

vue 高亮html富文本 #16

Open jackieli123723 opened 7 years ago

jackieli123723 commented 7 years ago

vue 高亮html富文本

主要是做爬虫过滤html代码后放入自己项目来使用记录哈

配合使用vue2-editor

import { VueEditor } from 'vue2-editor'

data() {
    return {
             content:``,
            customToolbar: [
              ['bold', 'italic', 'underline'],
              [{ 'list': 'ordered'}, { 'list': 'bullet' }],
              ['image', 'code-block']
            ]
    }
}

<div  class="content-paper">
  <vue-editor v-model="content" :editorToolbar="customToolbar" :placeholder="在此添加新闻"></vue-editor>
 </div>
富文本源码（HTML）
<h1 >MySQL获取行数</h1>
<p>¥ 我要打赏 <a href="/mysql/">MySQL教程</a> 作者：初生不惑 评论：0 条 <a href="//shang.qq.com/wpa/qunwpa?idkey=c7c79783f2da15e2244981dfbd17c18b6a71b8bc5d018e248d59919bd614e18f" title="直接点击加群">IT技术QQ群：227270512</a></p>
<p><a href="https://jq.qq.com/?_wv=1027&amp;k=46RCS7y" title="java直播学习群QQ群:172393525"> <img src="http://www.yiibai.com/static/images/adv/javaweb730x90.jpg" alt="java直播学习群QQ群:172393525" title="java直播学习群QQ群:172393525"></a></p>
<p>在本教程中，您将学习在数据库中获取MySQL行计数的各种方法。</p>
<h2 id="-mysql-">获取单个表的MySQL行计数</h2>
<p>要获取单个表的行计数，可以在<a href="http://www.yiibai.com/mysql/select-statement-query-data.html" title="SELECT">SELECT</a>语句中使用<a href="http://www.yiibai.com/mysql/count.html" title="COUNT(*)">COUNT(*)</a>，如下所示：</p>
<pre><code>SELECT 
    COUNT(*)
FROM
    table_name;
</code></pre><p>例如，要获取<a href="http://www.yiibai.com/mysql/sample-database.html" title="示例数据库(yiibaidb)">示例数据库(yiibaidb)</a>中的<code>customers</code>表中的行数，可以使用以下语句：</p>
<pre><code>SELECT 
    COUNT(*)
FROM
    customers;
</code></pre><p>执行上面查询语句，得到以下结果 -</p>
<pre><code>+----------+
| COUNT(*) |
+----------+
|      122 |
+----------+
1 row in set (0.01 sec)
</code></pre><p><strong>获取MySQL两个或多个表的行计数</strong></p>
<p>要获取多个表的行数，可以使用<a href="http://www.yiibai.com/sql-union-mysql.html" title="UNION">UNION</a>运算符组合每个<code>SELECT</code>语句返回的结果集。</p>
<p>例如，要在单个查询中获取<code>customers</code>和<code>orders</code>表的行数，请使用以下语句。</p>
<pre><code>SELECT 
    &#39;customers&#39; tablename, 
     COUNT(*) rows
FROM
    customers 
UNION 
SELECT 
    &#39;orders&#39; tablename, 
     COUNT(*) rows
FROM
    orders;
</code></pre><p><strong>获取特定数据库中所有表的MySQL行计数</strong></p>
<p>要获取行计数特定数据库中的所有表，例如<code>yiibaidb</code>数据，请按照以下步骤：</p>
<ul>
<li>首先，获取数据库中的所有表名</li>
<li>第二步，构造一个SQL语句，其中包含由<code>UNION</code>分隔的所有表的所有<code>SELECT COUNT(*)FROM table_name</code>语句。</li>
<li>第三步，使用<a href="http://www.yiibai.com/mysql/prepared-statement.html" title="准备语句">准备语句</a>执行SQL语句。</li>
</ul>
<p><strong>第一步</strong>，要获取数据库的所有表名，请从<code>information_schema</code>数据库中查询如下：</p>
<pre><code>SELECT 
    table_name
FROM
    information_schema.tables
WHERE
    table_schema = &#39;yiibaidb&#39;
        AND table_type = &#39;BASE TABLE&#39;;
</code></pre><p>执行上面查询，得到以下结果 -</p>
<pre><code>+--------------+
| TABLE_NAME   |
+--------------+
| customers    |
| employees    |
| offices      |
| orderdetails |
| orders       |
| payments     |
| productlines |
| products     |
+--------------+
8 rows in set (0.02 sec)
</code></pre><p><strong>第二步</strong>，构造SQL语句，我们使用<a href="http://www.yiibai.com/mysql/group_concat.html" title="GROUP_CONCAT">GROUP_CONCAT</a>和<a href="http://www.yiibai.com/sql-concat-in-mysql.html" title="CONCAT">CONCAT</a>函数如下：</p>
<pre><code>SELECT 
    CONCAT(GROUP_CONCAT(CONCAT(&#39;SELECT &#39;&#39;,
                        table_name,
                        &#39;&#39; table_name,COUNT(*) rows FROM &#39;,
                        table_name)
                SEPARATOR &#39; UNION &#39;),
            &#39; ORDER BY table_name&#39;)
INTO @sql 
FROM
    table_list;
</code></pre><p>在此查询中，<code>table_list</code>是第一步中查询结果的表名列表。</p>
<p>以下查询使用第一个查询作为派生表，并以字符串形式返回SQL语句。</p>
<pre><code>SELECT 
    CONCAT(GROUP_CONCAT(CONCAT(&#39;SELECT &#39;&#39;,
                        table_name,
                        &#39;&#39; table_name,COUNT(*) rows FROM &#39;,
                        table_name)
                SEPARATOR &#39; UNION &#39;),
            &#39; ORDER BY table_name&#39;)
INTO @sql 
FROM
    (SELECT 
        table_name
    FROM
        information_schema.tables
    WHERE
        table_schema = &#39;yiibaidb&#39;
            AND table_type = &#39;BASE TABLE&#39;) table_list;
</code></pre><p>如果您使用<em>MySQL 8.0+</em>，则可以使用<a href="http://www.yiibai.com/mysql/cte.html" title="MySQL CTE">MySQL CTE</a>(通用表表达式)而不是派生表：</p>
<pre><code>WITH table_list AS (
SELECT
    table_name
  FROM information_schema.tables 
  WHERE table_schema = &#39;yiibaidb&#39; AND
        table_type = &#39;BASE TABLE&#39;
) 
SELECT CONCAT(
            GROUP_CONCAT(CONCAT(&quot;SELECT &#39;&quot;,table_name,&quot;&#39; table_name,COUNT(*) rows FROM &quot;,table_name) SEPARATOR &quot; UNION &quot;),
            &#39; ORDER BY table_name&#39;
        )
INTO @sql
FROM table_list;
</code></pre><p><strong>第三步</strong>，使用<a href="http://www.yiibai.com/mysql/prepared-statement.html" title="prepare语句">prepare语句</a>执行<code>@sql</code>语句，如下所示：</p>
<pre><code>USE yiibaidb;
PREPARE s FROM  @sql;
EXECUTE s;
DEALLOCATE PREPARE s;
</code></pre><p>执行上面查询统计语句，得到以下结果 -</p>
<pre><code>+--------------+------+
| table_name   | rows |
+--------------+------+
| customers    |  122 |
| departments  |    0 |
| employees    |   23 |
| items        |    9 |
| offices      |    7 |
| orderdetails | 2998 |
| orders       |  327 |
| payments     |  273 |
| productlines |    7 |
| products     |  110 |
| tasks        |    0 |
| tokens       |    1 |
+--------------+------+
12 rows in set
</code></pre><p><strong>使用一个查询获取数据库中所有表的MySQL行计数</strong></p>
<p>获取数据库中所有表的行计数的快速方法是直接从<code>information_schema</code>数据库中查询数据：</p>
<pre><code>SELECT 
    table_name, 
    table_rows
FROM
    information_schema.tables
WHERE
    table_schema = &#39;yiibaidb&#39;
ORDER BY table_rows desc;
</code></pre><p>执行上面查询，得到以下结果 -</p>
<pre><code>mysql&gt; SELECT 
    table_name, 
    table_rows
FROM
    information_schema.tables
WHERE
    table_schema = &#39;yiibaidb&#39;
ORDER BY table_rows desc;
+--------------+------------+
| table_name   | table_rows |
+--------------+------------+
| orderdetails |       2731 |
| orders       |        326 |
| payments     |        256 |
| customers    |        122 |
| products     |        110 |
| employees    |         23 |
| items        |          9 |
| productlines |          7 |
| offices      |          7 |
| tokens       |          0 |
| tasks        |          0 |
| departments  |          0 |
+--------------+------------+
12 rows in set

高亮highlight.js（可局部组件引用或者全局引用，可修改highlight_code-css样式）

 <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">  
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>

vue-main.js

//html code 
Vue.directive('highlight',function (el) {
  let blocks = el.querySelectorAll('pre code');
  blocks.forEach((block)=>{
    hljs.highlightBlock(block)
  })
})

//美化
<div class="ui-dialog-info"  v-html="content" v-scroll v-highlight></div>