复制粘贴插件——clipboard.js的使用 clipboard.js为什么将文本复制到剪贴板应该不难。它不应该需要几十个步骤来配置或加载数百 KB。但最重要的是，它不应该依赖于 Flash 或任何臃肿的框架。这就是 clipboard.js 存在的原因。安装你可以在 npm 上得到它。npm install clipboard --save或者，如果您不喜欢包管理，只需 https://github.com/zenorocha/clipboard.js/archive/master.zip 。设置首先，包含位于dist文件夹中的脚本或从 第三方 CDN 提供商 加载它。<script src="dist/clipboard.min.js"></script>现在，您需要通过传递 DOM 选择器、HTML 元素或HTML 元素列表来实例化它。new ClipboardJS('.btn');在内部，我们需要获取与您的选择器匹配的所有元素，并为每个元素附加事件侦听器。但猜猜怎么了？如果您有数百个匹配项，则此操作会消耗大量内存。出于这个原因，我们使用事件委托，将多个事件侦听器替换为单个侦听器。毕竟，#perfmatters。用法我们正在经历一个声明式的复兴，这就是为什么我们决定利用HTML5 数据属性来提高可用性。从另一个元素复制文本一个非常常见的用例是从另一个元素复制内容。您可以通过data-clipboard-target在触发器元素中添加属性来实现。您在此属性中包含的值需要与另一个元素选择器相匹配。<!-- Target --> <input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> <!-- Trigger --> <button class="btn" data-clipboard-target="#foo"> <img src="assets/clippy.svg" alt="Copy to clipboard"> </button>从另一个元素剪切文本此外，您可以定义一个data-clipboard-action属性来指定您是否想要copy或cut内容。如果省略此属性，copy将默认使用。<!-- Target --> <textarea id="bar">Mussum ipsum cacilds...</textarea> <!-- Trigger --> <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"> Cut to clipboard </button>正如您所料，该cut操作仅适用于<input>或<textarea>元素。从属性复制文本事实是，您甚至不需要另一个元素来复制其内容。您可以只data-clipboard-text在触发器元素中包含一个属性。<!-- Trigger --> <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"> Copy to clipboard </button>活动在某些情况下，您希望显示一些用户反馈或捕获复制/剪切操作后选择的内容。这就是为什么我们会触发诸如success和 之类的自定义事件以error供您聆听和实现您的自定义逻辑。var clipboard = new ClipboardJS('.btn'); clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); e.clearSelection(); }); clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger); });高级用法如果您不想修改 HTML，可以使用非常方便的命令式 API。你需要做的就是声明一个函数，做你的事情，然后返回一个值。例如，如果您想动态设置 a target，则需要返回一个 Node.js 。new ClipboardJS('.btn', { target: function(trigger) { return trigger.nextElementSibling; } });如果您想动态设置 a text，您将返回一个字符串。new ClipboardJS('.btn', { text: function(trigger) { return trigger.getAttribute('aria-label'); } });要在 Bootstrap Modals 或任何其他更改焦点的库中使用，您需要将焦点元素设置为container值。new ClipboardJS('.btn', { container: document.getElementById('modal') });此外，如果您正在使用单页应用程序，您可能希望更精确地管理 DOM 的生命周期。以下是清理我们创建的事件和对象的方法。var clipboard = new ClipboardJS('.btn'); clipboard.destroy();

Vue2封装axios，axios在Vue.cli中的使用 添加http.js文件在src目录下新增一个目录utils，并新增一个js文件http.js，用以实现axios的封装 编辑http.js，首先导入axios import axios from 'axios'定义Http Request公共信息，用以添加授权等 axios.interceptors.request.use( config => { let token = 'lanol' config.headers.token = token; if (config.method == 'get') { config.params.token = token } if (config.method == 'post') { config.data.token = token } return config; }, error => { return Promise.reject(err); } )封装Get方法export function get(uri, params = {}) { return new Promise((resolve, reject) => { axios.get(uri, { params: params }) .then(response => { resolve(response.data) }) .catch(err => { reject(err) }) }) }封装POST方法export function post(uri, data = {}) { return new Promise((resolve, reject) => { axios.get(uri, { params: params }) .then(response => { resolve(response.data) }) .catch(err => { reject(err) }) }) }封装patch请求export function patch(url, data = {}) { return new Promise((resolve, reject) => { axios.patch(url, data) .then(response => { resolve(response.data); }, err => { reject(err) }) }) }封装PUT请求export function put(url, data = {}) { return new Promise((resolve, reject) => { axios.put(url, data) .then(response => { resolve(response.data); }, err => { reject(err) }) }) }实现跨域const downloadUrl = url => { let iframe = document.createElement('iframe') iframe.style.display = 'none' iframe.src = url iframe.onload = function() { document.body.removeChild(iframe) } document.body.appendChild(iframe) }Main.js中引用import axios from 'axios' import {get,post} from '@/utils/http.js' Vue.prototype.$ajax = axios Vue.prototype.$post = post Vue.prototype.$get = get使用http.js<template> <div id="app"> {{Lan}} </div> </template> <script> import axios from '@/utils/http.js' export default { name: 'app', components: { }, data() { return { Lan: '' } }, mounted() { this.$get('https://v1.hitokoto.cn').then((response)=>{ this.Lan = response.hitokoto console.log(response); }) } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> 参考链接https://www.cnblogs.com/zhangbs/p/9681032.html

微信小程序扫描二维码进入小程序指定页面并传递参数 诶，我会，我就不写，诶，我就是玩儿

论Ajax请求拦截表单时为何不能return值，异步和同步 现在验证表单经常会用到Ajax验证，去查看用户名是否存在或者手机号是否存在啥的，为了方便，就可以使用Ajax进行验证了。第一次遇到这个问题是上课时用.Net MVC然后里面有一个要求是验证用户名是否存在，一开始我也是半天请求之后不能进行表单拦截。随便写了一个样例如下：        public ActionResult Index()         {             return View();         }         public bool veruser(string username)         {             return true ? username.Equals("Lan") : false;         }@{     ViewBag.Title = "Home Page"; } <div class="row">     <form class="bs-example bs-example-form" action="/" method="post">         <div class="form-group">             <label for="name">用户名</label>             <input type="text" class="form-control" id="username" placeholder="请输入用户名">         </div>         <button type="submit" onclick="return checkUser()" class="btn btn-default">提交</button>     </form> </div> @section scripts{     <script>         function checkUser() {             $.ajax({                 url: "/Home/veruser",                 method: "POST",                 data: { "username": $("#username").val() },                 success: function (res) {                     console.log("请求返回值：" + res)                     return true ? res === "True" : false                 }             })         }     </script> }大概是这样的，如果请求的用户名中包含Lan则返回true否则返回false实际页面效果展示：可以看到控制台，一次输出FALSE一次输出True，但是两次页面都跳转了，所以拦截没有成功。然后我以为是ajax里面不能返回值，然后进行了修改，在外面指定了一个result变量，进行赋值，然后再return这个result<script>         function checkUser() {             var result = false;             $.ajax({                 url: "/Home/veruser",                 method: "POST",                 data: { "username": $("#username").val() },                 success: function (res) {                     console.log("请求返回值：" + res)                     result = true ? res === "True" : false                 }             })             console.log(result)             return result         }     </script>然后发现赋值没有附上，然后我以为是变量的作用域问题，于是又指定了一个that去指定方法中的this，于是这样赋值直接为空然后偶尔几次，还能重新赋值，这时候考虑到是不是线程问题。后来百度发现Ajax默认是开启异步的，恍然大悟。于是将async关闭后。    <script>         function checkUser() {             $.ajax({                 url: "/Home/veruser",                 method: "POST",                 async: false,                 data: { "username": $("#username").val() },                 success: function (res) {                     result = true ? res === "True" : false                 }             })             console.log(result)             return result         }     </script>成功解决。其实一开始我用的教室电脑，反应可能没那么快，所以能够赋值到result上，我刚刚重现的时候用的自己电脑，速度可能快一些，所以来不及赋值就走了。之前我以为是作用域问题，然后看似好像解决了，但是其实是错误的，昨天我用Python写验证拦截的时候，发现也是直接跳转了，试了一节课，总算发现了Ajax异步的问题。

课表HTML有课的随机背景颜色     td {         border-radius: 5%;     }<font color="#ffffff">     <table border="0" width="100%" align="center" style="font-size: 0.5rem" bgcolor="#fec7ff"            height="700">         <tr align="middle" style="font-weight: bold">             <td width="30"></td>             <td width="50" align="center" height="30">周一</td>             <td width="50" align="center" height="30">周二</td>             <td width="50" align="center" height="30">周三</td>             <td width="50" align="center" height="30">周四</td>             <td width="50" align="center" height="30">周五</td>             <td width="50" align="center" height="30">周六</td>             <td width="50" align="center" height="30">周日</td>         </tr>         <tr align="middle">             <td style="font-weight: bold">1</td>             <td bgcolor="#73b3f0" rowspan="2">{{ course.0.0|safe }}</td>             <td rowspan="2">{{ course.1.0|safe }}</td>             <td rowspan="2">{{ course.2.0|safe }}</td>             <td rowspan="2">{{ course.3.0|safe }}</td>             <td rowspan="2">{{ course.4.0|safe }}</td>             <td rowspan="2">{{ course.5.0|safe }}</td>             <td rowspan="2">{{ course.6.0|safe }}</td>         </tr>         <tr align="middle">             <td style="font-weight: bold">2</td>         </tr>         <tr align="middle">             <td style="font-weight: bold">3</td>             <td rowspan="2" align="middle">{{ course.0.1|safe }}</td>             <td rowspan="2">{{ course.1.1|safe }}</td>             <td rowspan="2">{{ course.2.1|safe }}</td>             <td rowspan="2">{{ course.3.1|safe }}</td>             <td rowspan="2">{{ course.4.1|safe }}</td>             <td rowspan="2">{{ course.5.1|safe }}</td>             <td rowspan="2">{{ course.6.1|safe }}</td>             <td rowspan="2">{{ course.7.1|safe }}</td>         </tr>         <tr align="middle">             <td style="font-weight: bold">4</td>         </tr>         <tr align="middle">             <td style="font-weight: bold">5</td>             <td rowspan="2">{{ course.0.2|safe }}</td>             <td rowspan="2">{{ course.1.2|safe }}</td>             <td rowspan="2">{{ course.2.2|safe }}</td>             <td rowspan="2">{{ course.3.2|safe }}</td>             <td rowspan="2">{{ course.4.2|safe }}</td>             <td rowspan="2">{{ course.5.2|safe }}</td>             <td rowspan="2">{{ course.6.2|safe }}</td>         </tr>         <tr align="middle">             <td style="font-weight: bold">6</td>         </tr>         <tr align="middle">             <td style="font-weight: bold">7</td>             <td rowspan="2">{{ course.0.3|safe }}</td>             <td rowspan="2">{{ course.1.3|safe }}</td>             <td rowspan="2">{{ course.2.3|safe }}</td>             <td rowspan="2">{{ course.3.3|safe }}</td>             <td rowspan="2">{{ course.4.3|safe }}</td>             <td rowspan="2">{{ course.5.3|safe }}</td>             <td rowspan="2">{{ course.6.3|safe }}</td>         </tr>         <tr align="middle">             <td style="font-weight: bold">8</td>         </tr>         <tr align="middle">             <td style="font-weight: bold">9</td>             <td rowspan="2">{{ course.0.4|safe }}</td>             <td rowspan="2">{{ course.1.4|safe }}</td>             <td rowspan="2">{{ course.2.4|safe }}</td>             <td rowspan="2">{{ course.3.4|safe }}</td>             <td rowspan="2">{{ course.4.4|safe }}</td>             <td rowspan="2">{{ course.5.4|safe }}</td>             <td rowspan="2">{{ course.6.4|safe }}</td>         </tr>         <tr align="middle">             <td style="font-weight: bold">10</td>         </tr>     </table> </font><script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <script>     var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];     function generateMixed(n) {         var res = "";         for (var i = 0; i < n; i++) {             var id = Math.ceil(Math.random() * 16);             res += chars[id];         }         return res;     }     $('td').each(function () {         if ($(this).text().length > 2 && $(this).text() !== ' ') {             $(this).css('background', '#' + Math.random().toString(16).substr(2, 6).toUpperCase())         }     }) </script>

让你的博客在QQ中以XML形式显示 效果图：1、复制下面链接，把后面域名更为成自己的 (红色区域，注意域名前面HTTPS)，复制到浏览器打开 。  https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshareget_urlinfo?url=https://pan.lanol.cn/ 2、必须要用电脑打开链接，然后刷新页面，（F5），刷出一堆 json数据，这时候就可以了。自定义内容，修改页面的meta标签<meta itemprop="name" content="网站标题"/> <meta itemprop="image" content="网站要显示的图片链接" /> <meta name="description" itemprop="description" content="网站内容" />

deterministic=True requires SQLite 3.8.3 or higher 大概意思就是sqlite版本低了，我本地测试是没有问题的，部署到服务器之后就会这样的报错，以前都是用MySQL所以不会出现这个问题sqlite方便一些，之前也遇到过，解决了一次，办法很麻烦，需要更新本地的sqllite版本，以及更新软连接之类的，或者降低Django版本，都太麻烦了。今天在网上找到了另一个解决办法：更换sqlite3 为 pysqlite3新装模块pysqlite3pip install pysqlite3然后将报错的文件修改一下/Team/Team_venv/lib/python3.8/site-packages/django/db/backends/sqlite3/base.pyfrom pysqlite3 import dbapi2 as Database  # 将默认数据库获取位置改为 pysqlite3修改之后解决