clfsw0201

开发HTML编辑器

转自：http://www.cnblogs.com/lucc/archive/2010/03/22/1692011.html

1.添加一个可编辑的iframe

实现HTML编辑器的第1步就是在网页中放置一个可编辑的iframe用来输入文本，使iframe可编辑方法相当简单，只需要将iframe的designMode设置为on即可，具体步骤如下：

var editor = document.getElementById("IFRAME的ID");

var editorDoc = editor.contentWindow.document;
var editorWindow = editor.contentWindow;

editorDoc.designMode = "on";

editorDoc.open();
editorDoc.write("<html><head></head><body style='margin:0px; padding: 0px;'></body></html>");
editorDoc.close();

2.设置选中文本的样式

设置选中文本样式的方法最简单的方式就是使用document.execCommand,但是execCommand功能比较局限，有时不能满足需求，例如：execCommand设置字体大小只能是1-7,不能使用像素大小，而且如果你在点击工具栏按钮到调用execCommand的过程中点击了其他的DIV，iframe的选中内容会消失，这时调用execCommand是无效的。因此本文介绍另一种方法，基本思路如下

(1) 获取选中的HTML；
(2) 修改HTML的样式；
(3) 用修改后的HTML替换选中的HTML。

2.1 获取选中的HTML

在不同的浏览器中获取选中的HTML的方法是不同的

var range = document.selection.createRange();//IE
var range = window.getSelection().getRangeAt(0);//FireFox、Chrome

2.2 替换选中的HTML

通过2.1的方法获取了表示选中内容的对象后，就可以调用其方法来替换掉选中的内容。在不同的浏览器中替换选中的HTML的方法有所差异，在IE中可以只需调用range.pasteHTML就行了，在Firefox,Chrome中则使用range.deleteContents 和 range.insertNode 两个方法来实现

2.3 封装一个操作选中HTML的类

由于2.1中获取的range对象的方法在不同浏览器中差异很大，因此，为了方便实现2.1和2.2提到的两个操作，封装了一个操作选中HTML的类SelectionRange，该类有两个方法，GetSelectedHtml和Replace，分别用于获取HTML和替换HTML。其代码如下：

//用于记录浏览器的类型
var browser = {};

var ua = navigator.userAgent.toLowerCase();

browser.msie = (/msie ([\d.]+)/).test(ua);
browser.firefox = (/firefox\/([\d.]+)/).test(ua);
browser.chrome = (/chrome\/([\d.]+)/).test(ua);

//获取多个节点的HTML
function GetInnerHTML(nodes)
{
    var builder = [];
    for (var i = 0; i < nodes.length; i++)
    {
        if (nodes[i].nodeValue != undefined)
        {
            builder.push(nodes[i].innerHTML);
        }
        else
        {
            if (nodes[i].textContent) builder.push(nodes[i].textContent.replace(/\</ig, function() { return "<"; }));
            else if (nodes[i].nodeValue) builder.push(nodes[i].nodeValue.replace(/\</ig, function() { return "<"; }));
        }
    }
    return builder.join("");
}

function SelectionRange(doc, range)
{
    //获取选中的内容的HTML
    this.GetSelectedHtml = function()
    {
        if (range == null) return "";

        if (browser.msie)
        {
            if (range.htmlText != undefined) return range.htmlText;
            else return "";
        }
        else if (browser.firefox || browser.chrome)
        {
            return GetInnerHTML(range.cloneContents().childNodes);
        }
        else
        {
            return "";
        }
    }

    //用html替换选中的内容的HTML
    this.Replace = function(html)
    {
        if (range != null)
        {
            if (browser.msie)
            {
                if (range.pasteHTML != undefined)
                {
                    //当前选中html可能以为某种原因（例如点击了另一个DIV）而丢失，重新选中
                    range.select();
                    range.pasteHTML(html);
                    return true;
                }
            }
            else if (browser.firefox || browser.chrome)
            {
                if (range.deleteContents != undefined && range.insertNode != undefined)
                {
                    //将文本html转换成DOM对象
                    var temp = doc.createElement("DIV");
                    temp.innerHTML = html;

                    var elems = [];
                    for (var i = 0; i < temp.childNodes.length; i++)
                    {
                        elems.push(temp.childNodes[i]);
                    }
                    
                    //删除选中的节点
                    range.deleteContents();
                    
                    //将html对应的节点(即temp的所有子节点)逐个插入到range中，并从temp中删除
                    for (var i in elems)
                    {
                        temp.removeChild(elems[i]);
                        range.insertNode(elems[i]);
                    }
                    return true;
                }
            }
        }
        return false;
    }
}

与此同时，还实现了一个函数GetSelectionRange用于获取当前选中文本对应的SelectionRange对象，

function GetSelectionRange(win)
{
    var range = null;

    if (browser.msie)
    {
        range = win.document.selection.createRange();
        if (range.parentElement().document != win.document)
        {
            range = null;
        }
    }
    else if (browser.firefox || browser.chrome)
    {
        var sel = win.getSelection();
        if (sel.rangeCount > 0) range = sel.getRangeAt(0); else range = null;
    }

    return new SelectionRange(win.document, range);
}

2.4 修改选中的HTML的样式

修改选中的HTML的样式方法并不复杂，只需要将HTML转成DOM对象，然后递归的设置每一个节点对应的样式的值即可,具体代码如下：

function SetNodeStyle(doc, node, name, value)
{
    if (node.innerHTML == undefined)
    {
        return node;
    }
    else
    {
        node.style[name] = value;

        for (var i = 0; i < node.childNodes.length; i++)
        {
            var cn = node.childNodes[i];
            if (node.innerHTML != undefined)
            {
                SetNodeStyle(doc, cn, name, value);
            }
        }

        return node;
    }
}

function SetStyle(doc, html, name, value)
{
    var dom = doc.createElement("DIV");
    dom.innerHTML = html;

    for (var i = 0; i < dom.childNodes.length; i++)
    {
        var node = dom.childNodes[i];

        if (node.innerHTML == undefined)
        {
            //如果是文本节点，则转换转换成span
            var span = doc.createElement("SPAN");
            span.style[name] = value;
            if (node.nodeValue != undefined) span.innerHTML = node.nodeValue.replace(/\</ig, function() { return "<"; });
            else if (node.textContent != undefined) span.innetHTML = node.textContent.replace(/\</ig, function() { return "<"; });
            //替换掉文本节点
            dom.replaceChild(span, node);
        }
        else
        {
            SetNodeStyle(doc, node, name, value);
        }
    }

    return dom.innerHTML;
}

2.5 示例

使用以上的代码，就可以相当方便的实现一个HTML编辑器，例如，以下代码实现将选中文本的字体大小设置为32px：

var range = GetSelectionRange(editorWindow);
var html = SetStyle(editorDoc, range.GetSelectedHtml(), "fontSize", "32px");
range.Replace(html);

同理，你可以实现设置行距，缩进，插入图片等功能。

完整样例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Untitled Page</title> 
 
    <script type="text/javascript" language="javascript"> 
  //判断浏览器
        var browser = {};
 
        var ua = navigator.userAgent.toLowerCase();
 
        browser.msie = (/msie ([\d.]+)/).test(ua);
        browser.firefox = (/firefox\/([\d.]+)/).test(ua);
        browser.chrome = (/chrome\/([\d.]+)/).test(ua);
  
        function SetNodeStyle(doc, node, name, value)
        {
            if (node.innerHTML == undefined)
            {
                return node;
            }
            else
            {
                node.style[name] = value;
 
                for (var i = 0; i < node.childNodes.length; i++)
                {
                    var cn = node.childNodes[i];
                    if (node.innerHTML != undefined)
                    {
                        SetNodeStyle(doc, cn, name, value);
                    }
                }
 
                return node;
            }
        }
 
        function SetStyle(doc, html, name, value)
        {
            var dom = doc.createElement("DIV");
            dom.innerHTML = html;
 
            for (var i = 0; i < dom.childNodes.length; i++)
            {
                var node = dom.childNodes[i];
 
                if (node.innerHTML == undefined)
                {
                    var span = doc.createElement("SPAN");
                    span.style[name] = value;
                    if (node.nodeValue != undefined) span.innerHTML = node.nodeValue.replace(/\</ig, function() { return "&lt;"; });
                    else if (node.textContent != undefined) span.innetHTML = node.textContent.replace(/\</ig, function() { return "&lt;"; });
                    dom.replaceChild(span, node);
                }
                else
                {
                    SetNodeStyle(doc, node, name, value);
                }
            }
 
            return dom.innerHTML;
        }
 
        function GetInnerHTML(nodes)
        {
            var builder = [];
            for (var i = 0; i < nodes.length; i++)
            {
                if (nodes[i].innerHTML != undefined)
                {
                    builder.push(nodes[i].innerHTML);
                }
                else
                {
                    if (nodes[i].textContent) builder.push(nodes[i].textContent.replace(/\</ig, function() { return "&lt;"; }));
                    else if (nodes[i].nodeValue) builder.push(nodes[i].nodeValue.replace(/\</ig, function() { return "&lt;"; }));
                }
            }
            return builder.join("");
        }
 
        function SelectionRange(doc, range)
        {
            this.GetSelectedHtml = function()
            {
                if (range == null) return "";
                
                if (browser.msie)
                {
                    if (range.htmlText != undefined) return range.htmlText;
                    else return "";
                }
                else if (browser.firefox || browser.chrome)
                {
                    return GetInnerHTML(range.cloneContents().childNodes);
                }
                else
                {
                    return "";
                }
            }
 
            this.Replace = function(html)
            {
                if (range != null)
                {
                    if (browser.msie)
                    {
                        if (range.pasteHTML != undefined)
                        {
                            range.select();
                            range.pasteHTML(html);
                            return true;
                        }
                    }
                    else if (browser.firefox || browser.chrome)
                    {
                        if (range.deleteContents != undefined && range.insertNode != undefined)
                        {
                            var temp = doc.createElement("DIV");
                            temp.innerHTML = html;
 
                            var elems = [];
                            for (var i = 0; i < temp.childNodes.length; i++)
                            {
                                elems.push(temp.childNodes[i]);
                            }
 
                            range.deleteContents();
 
                            for (var i in elems)
                            {
                                temp.removeChild(elems[i]);
                                range.insertNode(elems[i]);
                            }
                            return true;
                        }
                    }
                }
                return false;
            }
        }
 
        function GetSelectionRange(win)
        {
            var range = null;
 
            if (browser.msie)
            {
                range = win.document.selection.createRange();
                if (range.parentElement().document != win.document)
                {
                    range = null;
                }
            }
            else if (browser.firefox || browser.chrome)
            {
                var sel = win.getSelection();
                if (sel.rangeCount > 0) range = sel.getRangeAt(0); else range = null;
            }
 
            return new SelectionRange(win.document, range);
        }
 
        function RichEditor(container, width, height)
        {
			
            container.innerHTML =
            '<div style="margin: 0px; padding: 0px; background-color: #DDDDDD;">' +
                '<img alt="" unselectable="on" src="image/img.gif" style="float: left; cursor:pointer; -moz-user-select:-moz-none; -webkit-user-select:none;" />' +
                '<img alt="" unselectable="on" src="image/b.gif" style="float: left; cursor:pointer; -moz-user-select:-moz-none; -webkit-user-select:none;" />' +
                '<img alt="" unselectable="on" src="image/u.gif" style="float: left; cursor:pointer; -moz-user-select:-moz-none; -webkit-user-select:none;" />' +
                '<img alt="" unselectable="on" src="image/i.gif" style="float: left; cursor:pointer; -moz-user-select:-moz-none; -webkit-user-select:none;" />' +
                '<span style="font-size:12px; margin:6px; float: left;">大小</span>' +
                '<select style="width: 70px; margin-left:4px; margin-top: 2px; float: left;">' +
                    '<option value="12px">12</option>' +
                    '<option value="14px">14</option>' +
                    '<option value="16px">16</option>' +
                    '<option value="18px">18</option>' +
                    '<option value="20px">20</option>' +
                    '<option value="22px">22</option>' +
                    '<option value="24px">24</option>' +
                    '<option value="36px">36</option>' +
                    '<option value="48px">48</option>' +
                    '<option value="72px">72</option>' +
                '</select>' +
                '<span style="font-size:12px; margin:6px; float: left;">字体</span>' +
                '<select style="width: 150px; margin-left:4px; margin-top: 2px; float: left;">' +
                    '<option value="宋体">宋体</option>' +
                    '<option value="Times New Roman">Times New Roman</option>' +
                    '<option value="Courier New">Courier New</option>' +
                    '<option value="Verdana">Verdana</option>' +
                '</select>' +
            '</div>' +
            '<iframe frameborder="0" style="padding: 0px;"></iframe>';
 
            var toolbar = container.childNodes[0];
            var editor = container.childNodes[1];
 
            var editorDoc = editor.contentWindow.document;
            var editorWindow = editor.contentWindow;
 
            toolbar.style.width = width + 'px';
            toolbar.style.height = '24px';
 
            editor.style.width = width + 'px';
            editor.style.height = (height - 24) + 'px';
 
            if (browser.firefox)
            {
                editor.onload = function()
                {
                    editorDoc.designMode = "on";
                }
            }
            else
            {
                editorDoc.designMode = "on";
            }
 
            editorDoc.open();
            editorDoc.write("<html><head></head><body style='margin:0px; padding: 0px;'></body></html>");
            editorDoc.close();
            toolbar.childNodes[0].onclick = function()
            {
                var src = prompt("请输入图片的URL:", "");
                if (src != null)
                {
                    var range = GetSelectionRange(editorWindow);
                    range.Replace("<img src='" + src + "'></img>");
                }
            }
 
            toolbar.childNodes[1].onclick = function()
            {
                editorDoc.execCommand("Bold", false, null);
            }
 
            toolbar.childNodes[2].onclick = function()
            {
                editorDoc.execCommand("Underline", false, null);
            }
 
            toolbar.childNodes[3].onclick = function()
            {
                editorDoc.execCommand("Italic", false, null);
            }
 
 
            toolbar.childNodes[5].onchange = function()
            {
                var range = GetSelectionRange(editorWindow);
                var html = SetStyle(editorDoc, range.GetSelectedHtml(), "fontSize", toolbar.childNodes[5].value);
                range.Replace(html);
            }
 
            toolbar.childNodes[7].onchange = function()
            {
                var range = GetSelectionRange(editorWindow);
                var html = SetStyle(editorDoc, range.GetSelectedHtml(), "fontFamily", toolbar.childNodes[7].value);
                range.Replace(html);
            }
        }
 
        window.onload = function()
        {
            var editor = new RichEditor(document.getElementById("richEditor"), 600, 250);
        }
	
    </script> 
 
</head> 
<body> 
    <div id="richEditor" style="width: 600px; border: 1px solid #000000;"> 
    </div> 
</body> 
</html>

Vite Plugin Inspect插件问题听风说雨的人儿前端 javascript 开发语言
有些小伙伴可能还不清楚，VitePluginInspect是由Antfu开发的一款Vite插件，它的目标是让Vue、React等框架的开发者能够更容易地查看和理解构建过程中经过转换的源码。通过集成到Vite环境中，Inspect插件可以在浏览器的开发者工具中直接展示ES模块、CSS、甚至是编译后的模板的原始状态，极大地增强了我们在实际开发中的调试能力windows命令以上这些大家需要注意，不然在使
python：一次简单的爬虫 wstkqzl python 爬虫开发语言
importrequestsimportparselimporttimefromparselimportSelector#第一章链接https://www.qu04.cc/book/45808/2.html#第二章链接https://www.qu04.cc/book/45808/3.html#小说目录：https://www.qu04.cc/book/45808/url="https://www.
Docker如何以配置文件方式安装nginx 小白写代码hh docker nginx java
目录1准备挂载目录2拉去nginx镜像3启动命令1准备挂载目录mkdir-p/temp/nginx/html#创建nginx的html挂载目录mkdir-p/temp/nginx/conf#创建nginx的配置文件挂载目录自定义nginx配置文件放在conf目录下#usernobody;worker_processes1;#error_loglogs/error.log;#error_loglog
Python中常见的抓取图片的方法 qq_31397725 python 开发语言
在Python中，抓取图片的方法可以根据你的具体需求和使用场景有所不同。以下是一些常见的方法：使用requests库从URL下载图片：这是最常见的方法，适用于从网络上的URL下载图片。你可以使用requests库发送HTTP请求，然后将响应的内容保存到本地文件中。使用selenium库抓取网页中的图片：如果你需要从一个动态加载的网页中抓取图片，selenium可以帮助你模拟浏览器行为，等待页面加载
如何绕开浏览器批量下载的限制露露在前端前端 javascript html 状态模式学习面试 vue.js
前言最近遇到一个需求，需要将批量选择的图片，批量一个个下载。触发单个下载在浏览器中触发下载，我们可以借用a元素来触发。constdownloadFile=async(url:string,name:string)=>{constres=awaitfetch(url);constblob=awaitres.blob();conststrList=url.split('.');consttype=st
Linux运维技术之Linux云计算架构极客事纪 Linux 《Linux一学就会》程序员 linux 运维服务器
我以下图为基础，说明Linux的架构(architecture)。最内层是硬件，最外层是用户常用的应用，比如说firefox浏览器，evolution查看邮件，一个计算流体模型等等。硬件是物质基础，而应用提供服务。但在两者之间，还要经过一番周折。还记得Linux启动。Linux首先启动内核(kernel)，内核是一段计算机程序，这个程序直接管理管理硬件，包括CPU、内存空间、硬盘接口、网络接口等等
Vue2 - 详解实现网站使用企业微信二维码扫描登录，企业微信授权第三方网站接入企业微信登陆功能，扫二维码登录后获取用户信息，登录页展示企业微信二维码或iframe新开一页或弹框，解决各种报错登录失败王二红 +Vue 企业微信网站授权企业微信扫码登录最新 vue2.js nuxt2.js 如何在新窗口弹出企业微信二维码解决显示报错回调错误无法渲染 vue企业微信扫一扫二维码登录
前言如果您需要Vue3版本，请访问这篇文章。在vue2|nuxt2网站开发中，详解实现网页集成使用“企业微信扫一扫登录”功能，用户使用手机企业微信app扫描网站的登录二维码后，获取用户身份信息及号码并完成授权登录教程，新手小白完整流程及示例运行代码，支持多种企业微信二维码“展现方式”，可构造独立窗口登录二维码(iframe一个小弹框网页窗口或浏览器新页签全屏展示)、内嵌登录二维码(放到弹框组件中或
HTML 元素和有效 DOCTYPES 智慧浩海 HTML html 前端
HTML元素-有效DOCTYPES下面的表格列出了所有的HTML5/HTML4.01/XHTML元素，以及它们会出现在什么文档类型(!DOCTYPE)中：HTML4.01/XHTML1.0TagHTML5TransitionalStrictFramesetXHTML1.1YesYesYesYesYesYesYesYesYesYesNoYesYesYesYesYesYesYesYesYesNoYes
PHP前置知识-HTML学习 freesec html 学习前端
HTML学习1、因特网和万维网1.1、Internet因特网：全球资源的总汇，连接网络的网络1.2、TCP/IP协议簇：传输层/网络层协议1.3、万维网：www（worldwideweb）HTTP超文本传输协议作用：接受和发布HTMl页面URL统一资源定位符协议://域名:端口号/文件路径/文件名.文件后缀http://www.QQ.com.cn:80/tq/index.html1.4、W3C组织
解决Spring Boot中Chrome浏览器Session ID频繁变动的问题遥不可及~~斌 spring boot chrome 后端
解决SpringBoot中Chrome浏览器SessionID频繁变动的问题在使用SpringBoot实现RedisSession后，Chrome内核的浏览器（如Chrome、Edge等）可能会出现SessionID频繁变动的问题，而IE浏览器则表现正常。这通常与浏览器对Cookie的处理机制以及SpringSession的配置有关。本文将详细分析问题的原因，并提供相应的解决方案。问题原因分析1.
c++基础冰凉的保温瓶 c++开发 c++
extern关键字https://www.cnblogs.com/honernan/p/13431431.html定义和声明在介绍extern之前，我们需要了解一下变量的声明和定义。变量的声明指向程序表名变量的类型和名字，即使得名字为程序所知，一个文件如果想使用别处定义的名字则必须包含对那个名字的声明。而变量的定义指申请存储空间，并将其与变量名相关联，除此之外，还可以为变量指定初始值。在程序中变量
Springboot乐动健身房管理系统6xl64计算机毕业设计-课程设计-期末作业-毕设程序代做含宇网络 spring boot java 后端
Springboot乐动健身房管理系统6xl64计算机毕业设计-课程设计-期末作业-毕设程序代做【免费赠送源码】Springboot乐动健身房管理系统6xl64计算机毕业设计-课程设计-期末作业-毕设程序代做本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、
Pytest项目_day01（HTTP接口）丿罗小黑 Pytest pytest http 网络协议
HTTPHTTP是一个协议（服务器传输超文本到浏览器的传送协议），是基于TCP/IP通信协议来传输数据（HTML文件，图片文件，查询结果等）。访问域名例如www.baidu.com就是百度的域名，我们想要访问百度，就需要使用DNS，来将www.baidu.com域名解析为ip地址。随后客户端向服务端发起TCP请求，三次握手进行连接，三次握手如下：客户端向服务端说：你准备好了吗，我要发送请求了服务端
大语言模型的训练数据清洗策略 gs80140 AI python
目录大语言模型的训练数据清洗策略1.数据去重与标准化问题解决方案示例代码（Python实现数据去重）：2.过滤有害内容问题解决方案示例代码（基于关键词过滤有害内容）：3.纠正数据不均衡问题解决方案示例代码（欠采样非均衡数据）：4.识别和纠正刻板印象问题解决方案示例代码（简单的数据增强）：5.处理低质量与无关数据问题解决方案示例代码（去除HTML标签）：6.处理时效性数据问题解决方案示例代码（基于时
用VSCode做前端开发北子ALF 杂谈 vscode ide 编辑器
vscode写前端和记markdown还是很好用的，虽然在C++,Java和Python大型项目开发的体验不如vs,idea和pycharm自动生成html骨架打个感叹号预览网页：liveserver插件
超全Java入门学习路线指南 Javaaaaaaaaaaa13 java 开发语言前端 spring spring boot eclipse tomcat
Java基础入门Java高级阶段数据库和JDBCHtml&JavascriptJsp&ServletStruts2框架讲解Spring框架讲解Hibernate框架讲解流行技术学习1、Java基础入门1、Java入门基础如果你没有任何的编程基础，那么本栏目的内容对你来说是至关重要的。打好基础，以后学习就会一帆风顺了。我们会先讲解了Java程序的开发环境的搭建、编写流程、工作原理等内容，接着学习有关
网络安全入门教程（非常详细）从零基础入门到精通，看完这一篇就够了白帽黑客坤哥 web安全安全网络网络安全物联网
href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css"rel="stylesheet"/>href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_v
WebRTC 介绍 KillFuckBugs webrtc
WebRTC简介WebRTC（WebRealTimeCommunication，网页实时通信）是一个开源项目和技术标准，旨在为浏览器和应用程序提供实时通信功能，无需额外的插件或第三方软件。它最初由Google在2011年发起，现由W3C（万维网联盟）和IETF（互联网工程任务组）共同维护和标准化。WebRTC的核心目标是实现低延迟、高质量的音视频通信以及点对点数据传输，广泛应用于视频会议、实时聊天
Spring Boot - Spring Boot 静态资源映射（默认静态资源映射、自定义静态资源映射）我命由我12345 Java -简化库与框架编程 spring boot 后端 java java-ee spring intellij-idea intellij idea
一、静态资源映射在SpringBoot中，静态资源的映射是指将特定的URL路径与静态资源关联起来静态资源有例如，HTML、CSS、JS、图片等这使得客户端可以通过URL路径访问这些资源二、默认静态资源映射概述SpringBoot默认会将以下目录中的文件映射为静态资源classpath:/static/classpath:/public/classpath:/resources/classpath:
JAVA毕业设计河南口腔医疗机构线上服务系统计算机源码+lw文档+系统+调试部署+数据库煦洋cxsj985 java jvm 开发语言
JAVA毕业设计河南口腔医疗机构线上服务系统计算机源码+lw文档+系统+调试部署+数据库JAVA毕业设计河南口腔医疗机构线上服务系统计算机源码+lw文档+系统+调试部署+数据库本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5
Python 视频爬取教程小白教程 python Python Python 视频爬取教程 Python 视频爬取 Python教程 Python 视频教程
文章目录前言基本原理环境准备Python安装选择Python开发环境安装必要库示例1：爬取简单直链视频示例2：爬取基于HTML5的视频（以某简单视频网站为例）前言以下是一个较为完整的Python视频爬取教程，包含基本原理、不同网站的爬取示例以及注意事项。基本原理视频爬取本质上是模拟浏览器向服务器发送请求，获取包含视频信息的网页内容，解析出视频的真实下载地址，然后将视频文件下载到本地。一般会用到re
试用qxl-wddm-0.18 henweimei
今天发现spice官网上有qxl-wddm的驱动，决定研究一下https://www.spice-space.org/download.html关于WDDM，来自百科https://baike.baidu.com/item/WDDM/1408199?fr=aladdin是对旧版的WindowsXP上的XPDM架构的改良，XPDM使用2D的GDI（GraphicsDeviceInterface）
Python搭建静态web服务器 7 号 Python python
Python内置的web静态服务器Python内置的`http.server`模块可以快速启动一个简单的HTTP服务器。在Python3中，打开命令行或终端，在你想要作为静态服务器根目录的文件夹下，运行以下命令：python-mhttp.server8000这将会在当前目录启动一个HTTP服务器，监听端口8000，端口可以随意指定。你可以在浏览器中访问`http://localhost:8000`
HTML基础部分倒霉男孩 html+css学习笔记 html 前端
HTML基础部分所有HTML文档必须以开始。所有HTML文档本身以开始，以结尾。HTML文档中看见部分以开始，以结尾。标题：由到定义，定义最重要的标题，定义最不重要的标题。段落：使用定义，链接：使用定义，图片：使用标签定义scr（图片源路径）alt（附加信息）宽度width和高度height也可以添加。元素定义了文档，该元素又含两个其他HTML元素和定义了一个标题定义了一个段落标题段落结束标签是非
SSL/TLS 和 SSH 区别张紫娃网络编程 ssl ssh 网络
SSL/TLS干啥的？：SSL（SecureSocketsLayer）和TLS（TransportLayerSecurity）是一种用于在网络通信中提供安全性的协议。它们的主要目的是在客户端（如浏览器）和服务器之间建立加密连接，确保数据传输的安全性和隐私性。SSL是由Netscape开发的一种早期的安全协议，TLS是SSL的继任者，修复了SSL中的许多安全漏洞。提供了更安全和高效的通信机制。SSL
HTML期末设计——代码篇 green5+1 html
事先声明这个网页设计也就是用了我学到的知识做的一个中规中矩的网页，可以给以后的大一新生们做个参考，和商业网站的效果肯定是没得比的，期望太高的可以关掉了引入页效果图：欢迎来到香氛密语body{background:url(img/1的背景图.jpg)no-repeatcentercenter;background-size:cover;/*让背景图基于容器大小伸缩*/background-attac
HTML CSS样式齐尹秦 HTML学习笔记前端学习
CSS(CascadingStyleSheets)用于渲染HTML元素标签的样式。如何使用CSSCSS是在HTML4开始使用的,是为了更好的渲染HTML元素而引入的.CSS可以通过以下方式添加到HTML中:内联样式-在HTML元素中使用"style"属性内部样式表-在HTML文档头部区域使用元素来包含CSS外部引用-使用外部CSS文件最好的方式是通过外部引用CSS文件.内联样式当特殊的样式需要应用
NFS,Nginx综合实验小何学计算机云原生 nginx 运维
1.实验要求配置NFS服务器作为ngxin服务的存储目录，并在目录中创建index.html文件，当访问http://你的IP地址时，可以成功显示index.html文件的内容。|角色|软件|IP|主机名|系统||NFS服务器|nfs-utils|192.168.72.7|server|RHEL9||WEB服务|nfs-utils,nginx|192.168.72.8|web|openEuler|
ArcGIS 10.1 Engine Developer Kit 和 ArcGIS 10.1 Engine 快速入门指南冷月宫主 arcinfo
http://resources.arcgis.com/zh-cn/help/quick-start-guides/10.1/index.html#//01q100000004000000ArcGIS10.1EngineDeveloperKit和ArcGIS10.1Engine快速入门指南
企业信息化整体架构图 weixin_33937913 系统架构
今天无意间发现一张企业信息化的图，放在这里以后参考。CollaboraticeCommerce转载于:https://www.cnblogs.com/Masterpiece/archive/2004/12/29/83696.html
枚举的构造函数中抛出异常会怎样 bylijinnan java enum 单例
首先从使用enum实现单例说起。为什么要用enum来实现单例？这篇文章（ http://javarevisited.blogspot.sg/2012/07/why-enum-singleton-are-better-in-java.html）阐述了三个理由： 1.enum单例简单、容易，只需几行代码： public enum Singleton { INSTANCE;
CMake 教程 aigo C++
转自：http://xiang.lf.blog.163.com/blog/static/127733322201481114456136/ CMake是一个跨平台的程序构建工具，比如起自己编写Makefile方便很多。介绍：http://baike.baidu.com/view/1126160.htm 本文件不介绍CMake的基本语法，下面是篇不错的入门教程： http:
cvc-complex-type.2.3: Element 'beans' cannot have character Cb123456 spring Webgis
cvc-complex-type.2.3: Element 'beans' cannot have character Line 33 in XML document from ServletContext resource [/WEB-INF/backend-servlet.xml] is i
jquery实例:随页面滚动条滚动而自动加载内容 120153216 jquery
<script language="javascript"> $(function (){ var i = 4;$(window).bind("scroll", function (event){ //滚动条到网页头部的高度，兼容ie,ff,chrome var top = document.documentElement.s
将数据库中的数据转换成dbs文件何必如此 sql dbs
旗正规则引擎通过数据库配置器（DataBuilder）来管理数据库，无论是Oracle，还是其他主流的数据都支持，操作方式是一样的。旗正规则引擎的数据库配置器是用于编辑数据库结构信息以及管理数据库表数据，并且可以执行SQL 语句，主要功能如下。 1)数据库生成表结构信息：主要生成数据库配置文件(.conf文
在IBATIS中配置SQL语句的IN方式 357029540 ibatis
在使用IBATIS进行SQL语句配置查询时，我们一定会遇到通过IN查询的地方，在使用IN查询时我们可以有两种方式进行配置参数：String和List。具体使用方式如下： 1.String:定义一个String的参数userIds，把这个参数传入IBATIS的sql配置文件，sql语句就可以这样写： <select id="getForms" param
Spring3 MVC 笔记（一） 7454103 spring mvc bean REST JSF
自从 MVC 这个概念提出来之后 struts1.X struts2.X jsf 。。。。。这个view 层的技术一个接一个！都用过！不敢说哪个绝对的强悍！要看业务，和整体的设计！最近公司要求开发个新系统！
Timer与Spring Quartz 定时执行程序 darkranger spring bean 工作 quartz
有时候需要定时触发某一项任务。其实在jdk1.3，java sdk就通过java.util.Timer提供相应的功能。一个简单的例子说明如何使用，很简单： 1、第一步，我们需要建立一项任务，我们的任务需要继承java.util.TimerTask package com.test; import java.text.SimpleDateFormat; import java.util.Date;
大端小端转换，le32_to_cpu 和cpu_to_le32 aijuans C语言相关
大端小端转换，le32_to_cpu 和cpu_to_le32 字节序 http://oss.org.cn/kernel-book/ldd3/ch11s04.html 小心不要假设字节序. PC 存储多字节值是低字节为先(小端为先, 因此是小端), 一些高级的平台以另一种方式(大端)
Nginx负载均衡配置实例详解 avords
[导读] 负载均衡是我们大流量网站要做的一个东西，下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法，希望对有需要的同学有所帮助哦。负载均衡先来简单了解一下什么是负载均衡，单从字面上的意思来理解就可以解负载均衡是我们大流量网站要做的一个东西，下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法，希望对有需要的同学有所帮助哦。负载均衡先来简单了解一下什么是负载均衡
乱说的 houxinyou 框架敏捷开发软件测试
从很久以前，大家就研究框架，开发方法，软件工程，好多！反正我是搞不明白！这两天看好多人研究敏捷模型，瀑布模型！也没太搞明白. 不过感觉和程序开发语言差不多，瀑布就是顺序，敏捷就是循环. 瀑布就是需求、分析、设计、编码、测试一步一步走下来。而敏捷就是按摸块或者说迭代做个循环，第个循环中也一样是需求、分析、设计、编码、测试一步一步走下来。也可以把软件开发理
欣赏的价值——一个小故事 bijian1013 有效辅导欣赏欣赏的价值
　　第一次参加家长会，幼儿园的老师说："您的儿子有多动症，在板凳上连三分钟都坐不了，你最好带他去医院看一看。"　　回家的路上，儿子问她老师都说了些什么，她鼻子一酸，差点流下泪来。因为全班30位小朋友，惟有他表现最差；惟有对他，老师表现出不屑，然而她还在告诉她的儿子："老师表扬你了，说宝宝原来在板凳上坐不了一分钟，现在能坐三分钟。其他妈妈都非常羡慕妈妈，因为全班只有宝宝
包冲突问题的解决方法 bingyingao eclipse maven exclusions 包冲突
包冲突是开发过程中很常见的问题：其表现有： 1.明明在eclipse中能够索引到某个类，运行时却报出找不到类。 2.明明在eclipse中能够索引到某个类的方法，运行时却报出找不到方法。 3.类及方法都有，以正确编译成了.class文件，在本机跑的好好的，发到测试或者正式环境就抛如下异常： java.lang.NoClassDefFoundError: Could not in
【Spark七十五】Spark Streaming整合Flume-NG三之接入log4j bit1129 Stream
先来一段废话：实际工作中，业务系统的日志基本上是使用Log4j写入到日志文件中的，问题的关键之处在于业务日志的格式混乱，这给对日志文件中的日志进行统计分析带来了极大的困难，或者说，基本上无法进行分析，每个人写日志的习惯不同，导致日志行的格式五花八门，最后只能通过grep来查找特定的关键词缩小范围，但是在集群环境下，每个机器去grep一遍，分析一遍，这个效率如何可想之二，大好光阴都浪费在这上面了
sudoku solver in Haskell bookjovi sudoku haskell
这几天没太多的事做，想着用函数式语言来写点实用的程序，像fib和prime之类的就不想提了（就一行代码的事），写什么程序呢？在网上闲逛时发现sudoku游戏，sudoku十几年前就知道了，学生生涯时也想过用C/Java来实现个智能求解，但到最后往往没写成，主要是用C/Java写的话会很麻烦。现在写程序，本人总是有一种思维惯性，总是想把程序写的更紧凑，更精致，代码行数最少，所以现
java apache ftpClient bro_feng java
最近使用apache的ftpclient插件实现ftp下载，遇见几个问题，做如下总结。 1. 上传阻塞，一连串的上传，其中一个就阻塞了，或是用storeFile上传时返回false。查了点资料，说是FTP有主动模式和被动模式。将传出模式修改为被动模式ftp.enterLocalPassiveMode();然后就好了。看了网上相关介绍，对主动模式和被动模式区别还是比较的模糊，不太了解被动模
读《研磨设计模式》-代码笔记-工厂方法模式 bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 工厂方法模式：使一个类的实例化延迟到子类 * 某次，我在工作不知不觉中就用到了工厂方法模式（称为模板方法模式更恰当。2012-10-29）： * 有很多不同的产品，它
面试记录语 chenyu19891124 招聘
或许真的在一个平台上成长成什么样，都必须靠自己去努力。有了好的平台让自己展示，就该好好努力。今天是自己单独一次去面试别人，感觉有点小紧张，说话有点打结。在面试完后写面试情况表，下笔真的好难，尤其是要对面试人的情况说明真的好难。今天面试的是自己同事的同事，现在的这个同事要离职了，介绍了我现在这位同事以前的同事来面试。今天这位求职者面试的是配置管理，期初看了简历觉得应该很适合做配置管理，但是今天面
Fire Workflow 1.0正式版终于发布了 comsci 工作 workflow Google
Fire Workflow 是国内另外一款开源工作流，作者是著名的非也同志，哈哈.... 官方网站是 http://www.fireflow.org 经过大家努力,Fire Workflow 1.0正式版终于发布了正式版主要变化: 1、增加IWorkItem.jumpToEx(...)方法，取消了当前环节和目标环节必须在同一条执行线的限制，使得自由流更加自由 2、增加IT
Python向脚本传参 daizj python 脚本传参
如果想对python脚本传参数，python中对应的argc, argv(c语言的命令行参数)是什么呢？需要模块：sys 参数个数：len(sys.argv) 脚本名： sys.argv[0] 参数1： sys.argv[1] 参数2： sys.argv[
管理用户分组的命令gpasswd dongwei_6688 passwd
NAME： gpasswd - administer the /etc/group file SYNOPSIS： gpasswd group gpasswd -a user group gpasswd -d user group gpasswd -R group gpasswd -r group gpasswd [-A user,...] [-M user,...] g
郝斌老师数据结构课程笔记 dcj3sjt126com 数据结构与算法
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
yii2 cgridview加上选择框进行操作 dcj3sjt126com GridView
页面代码 <?=Html::beginForm(['controller/bulk'],'post');?> <?=Html::dropDownList('action','',[''=>'Mark selected as: ','c'=>'Confirmed','nc'=>'No Confirmed'],['class'=>'dropdown',])
linux mysql fypop linux
enquiry mysql version in centos linux yum list installed | grep mysql yum -y remove mysql-libs.x86_64 enquiry mysql version in yum repositoryyum list | grep mysql oryum -y list mysql* install mysq
Scramble String hcx2013 String
Given a string s1, we may represent it as a binary tree by partitioning it to two non-empty substrings recursively. Below is one possible representation of s1 = "great":
跟我学Shiro目录贴 jinnianshilongnian 跟我学shiro
历经三个月左右时间，《跟我学Shiro》系列教程已经完结，暂时没有需要补充的内容，因此生成PDF版供大家下载。最近项目比较紧，没有时间解答一些疑问，暂时无法回复一些问题，很抱歉，不过可以加群（334194438/348194195）一起讨论问题。 ----广告-----------------------------------------------------
nginx日志切割并使用flume-ng收集日志 liyonghui160com
nginx的日志文件没有rotate功能。如果你不处理，日志文件将变得越来越大，还好我们可以写一个nginx日志切割脚本来自动切割日志文件。第一步就是重命名日志文件，不用担心重命名后nginx找不到日志文件而丢失日志。在你未重新打开原名字的日志文件前，nginx还是会向你重命名的文件写日志，linux是靠文件描述符而不是文件名定位文件。第二步向nginx主
Oracle死锁解决方法 pda158 oracle
　select p.spid,c.object_name,b.session_id,b.oracle_username,b.os_user_name from v$process p,v$session a, v$locked_object b,all_objects c where p.addr=a.paddr and a.process=b.process and c.object_id=b.
java之List排序 shiguanghui list排序
在Java Collection Framework中定义的List实现有Vector，ArrayList和LinkedList。这些集合提供了对对象组的索引访问。他们提供了元素的添加与删除支持。然而，它们并没有内置的元素排序支持。　　你能够使用java.util.Collections类中的sort()方法对List元素进行排序。你既可以给方法传递
servlet单例多线程 utopialxw 单例多线程 servlet
转自http://www.cnblogs.com/yjhrem/articles/3160864.html 和 http://blog.chinaunix.net/uid-7374279-id-3687149.html Servlet 单例多线程 Servlet如何处理多个请求访问？Servlet容器默认是采用单实例多线程的方式处理多个请求的：1.当web服务器启动的