sunnylinner
sunnylinner

HTML5+CSS3+jQuery制作视频播放器完全指南

HTML5+CSS3+jQuery制作视频播放器完全指南_第1张图片

播放器最终效果预览图

1.下载MediaElement.js

首先下载MediaElement.js脚本文件，这是一个开源的HTML5音、视频插件，解压后你会得到3个文件—— "flashmediaelement.swf"、 "mediaelement-and-player.min.js"和 "silverlightmediaelement.xap" ，分别是使用Flash、 JavaScript和 SilverLight实现视频播放，并且新建一个"js"文件夹并把它们放进去（当然本例中并不需要 "flashmediaelement.swf" 和 "silverlightmediaelement.xap" 两个文件，可以删去。）。

2.HTML标记

首先需要链接(link)一个jQuery库，这里使用的是Google托管的jQuery库。然后我们在链接"mediaelement-and-player.min.js"文件和CSS文件。

 
  
     
   
  1. <head> 
    2.  
   
  2.     <title>Video Playertitle> 
    3.  
   
  3.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">script> 
    4.  
   
  4.     <script src="js/mediaelement-and-player.min.js">script> 
    5.  
   
  5.     <link rel="stylesheet" href="css/style.css" media="screen"> 
    6.  
   
  6. head> 
    7.  
  
 
  
 当然我们还需要添加一个Html5 video标记来创建一个视频播放器，再添加一些属性将它初始化。（注：poster是指视频的预览图）
 
  
 
  
     
   
  1. <video width="640" height="267" poster="media/cars.png"> 
    2.  
   
  2.     <source src="media/cars.mp4" type="video/mp4"> 
    3.  
   
  3. video> 
    4.  
  
 
  
 接下来我们再加入下面的代码来创建控制面板，需要添加的控制器或功能有：
 
  
     
   
  • alwaysShowControls – "true"则设置video控制面板永远显示，"false"则在鼠标移走后隐藏。
    •  
   
  • videoVolume – "horizontal"设置音量滑动控制器为水平
    •  
   
  • 其它功能：暂停播放、前进播放、声音和全屏 
     
    
       
     
    1. <script type="text/javascript">//  
      2.  
     
    2. $(document).ready(function() { 
      3.  
     
    3.     $('video').mediaelementplayer({ 
      4.  
     
    4.         alwaysShowControls: true, 
      5.  
     
    5.         videoVolume: 'horizontal', 
      6.  
     
    6.         features: ['playpause','progress','volume','fullscreen'] 
      7.  
     
    7.     }); 
      8.  
     
    8. }); 
      9.  
     
    9. // ]]>script> 
      10.  
    
     
    •  
  
 
  
 更多设置请查阅MediaElement.js的设置文档。
 
  
 3.播放器基本样式设计
 
  
 先修改一下样式设置：
 
  
 
  
     
   
  1. .mejs-inner, 
    2.  
   
  2. .mejs-inner div, 
    3.  
   
  3. .mejs-inner a, 
    4.  
   
  4. .mejs-inner span, 
    5.  
   
  5. .mejs-inner button, 
    6.  
   
  6. .mejs-inner img { 
    7.  
   
  7.     margin: 0; 
    8.  
   
  8.     padding: 0; 
    9.  
   
  9.     border: none; 
    10.  
   
  10.     outline: none; 
    11.  
   
  11. } 
    12.  
  
 
  
 再给video Container添加样式，下面的代码全部都是用来控制布局的，没有对播放器样式做任何修改。
 
  
 
  
     
   
  1. .mejs-container { 
    2.  
   
  2.     position: relative; 
    3.  
   
  3.     background: #000000; 
    4.  
   
  4. } 
    5.  
   
  5.  
    6.  
   
  6. .mejs-inner { 
    7.  
   
  7.     position: relative; 
    8.  
   
  8.     width: inherit; 
    9.  
   
  9.     height: inherit; 
    10.  
   
  10. } 
    11.  
   
  11.  
    12.  
   
  12. .me-plugin { position: absolute; } 
    13.  
   
  13.  
    14.  
   
  14. .mejs-container-fullscreen .mejs-mediaelement, 
    15.  
   
  15. .mejs-container-fullscreen video, 
    16.  
   
  16. .mejs-embed, 
    17.  
   
  17. .mejs-embed body, 
    18.  
   
  18. .mejs-mediaelement { 
    19.  
   
  19.     width: 100%; 
    20.  
   
  20.     height: 100%; 
    21.  
   
  21. } 
    22.  
   
  22.  
    23.  
   
  23. .mejs-embed, 
    24.  
   
  24. .mejs-embed body { 
    25.  
   
  25.     margin: 0; 
    26.  
   
  26.     padding: 0; 
    27.  
   
  27.     overflow: hidden; 
    28.  
   
  28. } 
    29.  
   
  29.  
    30.  
   
  30. .mejs-container-fullscreen { 
    31.  
   
  31.     position: fixed; 
    32.  
   
  32.     left: 0; 
    33.  
   
  33.     top: 0; 
    34.  
   
  34.     right: 0; 
    35.  
   
  35.     bottom: 0; 
    36.  
   
  36.     overflow: hidden; 
    37.  
   
  37.     z-index: 1000; 
    38.  
   
  38. } 
    39.  
   
  39.  
    40.  
   
  40. .mejs-background, 
    41.  
   
  41. .mejs-mediaelement, 
    42.  
   
  42. .mejs-poster, 
    43.  
   
  43. .mejs-overlay { 
    44.  
   
  44.     position: absolute; 
    45.  
   
  45.     top: 0; 
    46.  
   
  46.     left: 0; 
    47.  
   
  47. } 
    48.  
   
  48.  
    49.  
   
  49. .mejs-poster img { display: block; } 
    50.  
  
 
  
 HTML5+CSS3+jQuery制作视频播放器完全指南_第2张图片
 
  
 4.控制面板样式设置
 
  
 让我们先从添加“播放按钮”开始：
 
  
 
  
     
   
  1. .mejs-overlay-play { cursor: pointer; } 
    2.  
   
  2.  
    3.  
   
  3. .mejs-inner .mejs-overlay-button { 
    4.  
   
  4.     position: absolute; 
    5.  
   
  5.     top: 50%; 
    6.  
   
  6.     left: 50%; 
    7.  
   
  7.     width: 50px; 
    8.  
   
  8.     height: 50px; 
    9.  
   
  9.     margin: -25px 0 0 -25px; 
    10.  
   
  10.     background: url(../img/play.png) no-repeat; 
    11.  
   
  11. } 
    12.  
  
 
  
 接下来再添加视频控制器布局：将它放在视频底部，高度为34px，再添加一个背景颜色，配合RGBA来设置透明度。最后给按钮添加基本样式和图元。
 
  
 
  
     
   
  1. .mejs-container .mejs-controls { 
    2.  
   
  2.     position: absolute; 
    3.  
   
  3.     width: 100%; 
    4.  
   
  4.     height: 34px; 
    5.  
   
  5.     left: 0; 
    6.  
   
  6.     bottom: 0; 
    7.  
   
  7.     background: rgb(0,0,0); 
    8.  
   
  8.     background: rgba(0,0,0, .7); 
    9.  
   
  9. } 
    10.  
   
  10.  
    11.  
   
  11. .mejs-controls .mejs-button button { 
    12.  
   
  12.     display: block; 
    13.  
   
  13.     cursor: pointer; 
    14.  
   
  14.     width: 16px; 
    15.  
   
  15.     height: 16px; 
    16.  
   
  16.     background: transparent url(../img/controls.png); 
    17.  
   
  17. } 
    18.  
  
 
  
 HTML5+CSS3+jQuery制作视频播放器完全指南_第3张图片
 
  
 5.视频控制器
 
  
 这一步我们要做的只是将控制器居右放置。所以首先我们将所有的按钮放到控制面板上，之后再对它们的宽度、位置和背景图片做详细的调整。
 
  
 
  
     
   
  1. .mejs-controls div.mejs-playpause-button { 
    2.  
   
  2.     position: absolute; 
    3.  
   
  3.     top: 12px; 
    4.  
   
  4.     left: 15px; 
    5.  
   
  5. } 
    6.  
   
  6.  
    7.  
   
  7. .mejs-controls .mejs-play button, 
    8.  
   
  8. .mejs-controls .mejs-pause button { 
    9.  
   
  9.     width: 12px; 
    10.  
   
  10.     height: 12px; 
    11.  
   
  11.     background-position: 0 0; 
    12.  
   
  12. } 
    13.  
   
  13.  
    14.  
   
  14. .mejs-controls .mejs-pause button { background-position: 0 -12px; } 
    15.  
   
  15.  
    16.  
   
  16. .mejs-controls div.mejs-volume-button { 
    17.  
   
  17.     position: absolute; 
    18.  
   
  18.     top: 12px; 
    19.  
   
  19.     left: 45px; 
    20.  
   
  20. } 
    21.  
   
  21.  
    22.  
   
  22. .mejs-controls .mejs-mute button, 
    23.  
   
  23. .mejs-controls .mejs-unmute button { 
    24.  
   
  24.     width: 14px; 
    25.  
   
  25.     height: 12px; 
    26.  
   
  26.     background-position: -12px 0; 
    27.  
   
  27. } 
    28.  
   
  28.  
    29.  
   
  29. .mejs-controls .mejs-unmute button { background-position: -12px -12px; } 
    30.  
   
  30.  
    31.  
   
  31. .mejs-controls div.mejs-fullscreen-button { 
    32.  
   
  32.     position: absolute; 
    33.  
   
  33.     top: 7px; 
    34.  
   
  34.     right: 7px; 
    35.  
   
  35. } 
    36.  
   
  36.  
    37.  
   
  37. .mejs-controls .mejs-fullscreen-button button, 
    38.  
   
  38. .mejs-controls .mejs-unfullscreen button { 
    39.  
   
  39.     width: 27px; 
    40.  
   
  40.     height: 22px; 
    41.  
   
  41.     background-position: -26px 0; 
    42.  
   
  42. } 
    43.  
   
  43.  
    44.  
   
  44. .mejs-controls .mejs-unfullscreen button { background-position: -26px -22px; } 
    45.  
  
 
  
 HTML5+CSS3+jQuery制作视频播放器完全指南_第4张图片
 
  
 6.音量滑动控制器
 
  
 音量滑动控制器的设置也一样，设置好位置和大小，再添加一个圆角效果就可以了。
 
  
 
  
     
   
  1. .mejs-controls div.mejs-horizontal-volume-slider { 
    2.  
   
  2.     position: absolute; 
    3.  
   
  3.     cursor: pointer; 
    4.  
   
  4.     top: 15px; 
    5.  
   
  5.     left: 65px; 
    6.  
   
  6. } 
    7.  
   
  7.  
    8.  
   
  8. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { 
    9.  
   
  9.     width: 60px; 
    10.  
   
  10.     background: #d6d6d6; 
    11.  
   
  11. } 
    12.  
   
  12.  
    13.  
   
  13. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { 
    14.  
   
  14.     position: absolute; 
    15.  
   
  15.     width: 0; 
    16.  
   
  16.     top: 0; 
    17.  
   
  17.     left: 0; 
    18.  
   
  18. } 
    19.  
   
  19.  
    20.  
   
  20. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, 
    21.  
   
  21. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { 
    22.  
   
  22.     height: 4px; 
    23.  
   
  23.  
    24.  
   
  24.     -webkit-border-radius: 2px; 
    25.  
   
  25.     -moz-border-radius: 2px; 
    26.  
   
  26.     border-radius: 2px; 
    27.  
   
  27. } 
    28.  
  
 
  
 HTML5+CSS3+jQuery制作视频播放器完全指南_第5张图片
 
  
 7.进度条
 
  
 进度条的设置也同样简单，将它紧贴在控制面板上方就可以了，之后就是设置不同状态（all和loaded状态）的背景颜色。现在将它初始化为零就可以在影片播放时自动改变了。（但是你看不出来。）
 
  
 
  
     
   
  1. .mejs-controls div.mejs-time-rail { 
    2.  
   
  2.     position: absolute; 
    3.  
   
  3.     width: 100%; 
    4.  
   
  4.     left: 0; 
    5.  
   
  5.     top: -10px; 
    6.  
   
  6. } 
    7.  
   
  7.  
    8.  
   
  8. .mejs-controls .mejs-time-rail span { 
    9.  
   
  9.     position: absolute; 
    10.  
   
  10.     display: block; 
    11.  
   
  11.     cursor: pointer; 
    12.  
   
  12.     width: 100%; 
    13.  
   
  13.     height: 10px; 
    14.  
   
  14.     top: 0; 
    15.  
   
  15.     left: 0; 
    16.  
   
  16. } 
    17.  
   
  17.  
    18.  
   
  18. .mejs-controls .mejs-time-rail .mejs-time-total { 
    19.  
   
  19.     background: rgb(152,152,152); 
    20.  
   
  20.     background: rgba(152,152,152, .5); 
    21.  
   
  21. } 
    22.  
   
  22.  
    23.  
   
  23. .mejs-controls .mejs-time-rail .mejs-time-loaded { 
    24.  
   
  24.     background: rgb(0,0,0); 
    25.  
   
  25.     background: rgba(0,0,0, .3); 
    26.  
   
  26. } 
    27.  
   
  27.  
    28.  
   
  28. .mejs-controls .mejs-time-rail .mejs-time-current { width: 0; } 
    29.  
  
 
  
 HTML5+CSS3+jQuery制作视频播放器完全指南_第6张图片
 
  
 8.进度条控制器和时间提示框
 
  
 这一步就该给进度条添加一个进度条控制器和一个时间提示框，同样我们还是调整位置，设置宽度、高度和背景图片，再添加一些排版样式。
 
  
 
  
     
   
  1. .mejs-controls .mejs-time-rail .mejs-time-handle { 
    2.  
   
  2.     position: absolute; 
    3.  
   
  3.     cursor: pointer; 
    4.  
   
  4.     width: 16px; 
    5.  
   
  5.     height: 18px; 
    6.  
   
  6.     top: -3px; 
    7.  
   
  7.     background: url(../img/handle.png); 
    8.  
   
  8. } 
    9.  
   
  9.  
    10.  
   
  10. .mejs-controls .mejs-time-rail .mejs-time-float { 
    11.  
   
  11.     position: absolute; 
    12.  
   
  12.     display: none; 
    13.  
   
  13.     width: 33px; 
    14.  
   
  14.     height: 23px; 
    15.  
   
  15.     top: -26px; 
    16.  
   
  16.     margin-left: -17px; 
    17.  
   
  17.     background: url(../img/tooltip.png); 
    18.  
   
  18. } 
    19.  
   
  19.  
    20.  
   
  20. .mejs-controls .mejs-time-rail .mejs-time-float-current { 
    21.  
   
  21.     position: absolute; 
    22.  
   
  22.     display: block; 
    23.  
   
  23.     left: 0; 
    24.  
   
  24.     top: 4px; 
    25.  
   
  25.  
    26.  
   
  26.     font-family: Helvetica, Arial, sans-serif; 
    27.  
   
  27.     font-size: 10px; 
    28.  
   
  28.     font-weight: bold; 
    29.  
   
  29.     color: #666666; 
    30.  
   
  30.     text-align: center; 
    31.  
   
  31. } 
    32.  
   
  32.  
    33.  
   
  33. .mejs-controls .mejs-time-rail .mejs-time-float-corner { display: none; } 
    34.  
  
 
  
 HTML5+CSS3+jQuery制作视频播放器完全指南_第7张图片
 
  
 9.绿色的已播放进度条
 
  
 本教程的最后一步就是在进度条和音量滑动条上添加绿色的已播放进度条和音量显示，这个也很简单。
 
  
 
  
     
   
  1. .mejs-controls .mejs-time-rail .mejs-time-current, 
    2.  
   
  2. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { 
    3.  
   
  3.     background: #82d344; 
    4.  
   
  4.     background: -webkit-linear-gradient(top, #82d344 0%, #51af34 100%); 
    5.  
   
  5.     background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%); 
    6.  
   
  6.     background: -o-linear-gradient(top, #82d344 0%, #51af34 100%); 
    7.  
   
  7.     background: -ms-linear-gradient(top, #82d344 0%, #51af34 100%); 
    8.  
   
  8.     background: linear-gradient(top, #82d344 0%, #51af34 100%); 
    9.  
   
  9. } 
    10.  
  
 
  
 HTML5+CSS3+jQuery制作视频播放器完全指南_第8张图片
 
  
     
   
  • CSDN本地下载
    •  
   
  • designmodo.com
    •  
  
 
 
 


                            

                        

                    

                    
                    

                    
                    
                    

                

                

                    
                

            

        

    

    

        
你可能感兴趣的:(前端)

        

            

                
    
                    
  • 解析：婚恋交友系统APP源码开发攻略,语音视频聊天功能实现步骤核心功能
                        
前端后端小程序数据库程序员
                        
    系统功能特点1.自定义小程序管理：本系统提供完整的后台管理功能，开发者可以根据自己的需求进行定制和修改，包括但不限于论坛版块管理、帖子管理、用户管理等功能。后台管理界面简洁明了，操作方便，大大降低了开发门槛。2.完整的安装代码包：本系统提供完整的安装代码包，包括小程序前端代码、后端服务代码以及数据库结构等。开发者只需按照说明进行安装和配置，即可快速搭建起一个功能完备的社区论坛小程序。3.丰富的功能
    
                    
    • 
                    
  • 前端学习——CSS+JS实现进度条动画
                        younger_LF
前端（HTML+CSS+JS）CSSJS进度条动画
                        
    CSS+JS实现进度条动画之前学习了导航条，那现在就来学习一下进度条。本次的学习试着写了两种风格的进度条，一种是圆点，一种是传统的条状。如下图：简单介绍一下，点击按钮之后，圆点的效果是蓝色部分从零开始变大，到充满了整个父标签，从左向右进行；传统条状的效果就单纯的从左向右进行。由于有光晕的效果，父标签应该允许溢出部分显示。再次点击按钮就重置为原来的样子。话不多说，直接开始。HTML部分HTML部分很
    
                    
    • 
                    
  • 前端学习——CSS3实现时钟效果
                        younger_LF
前端（HTML+CSS+JS）CSS动画时钟效果
                        
    CSS3实现时钟效果最近想开始认真学习，然后想把学习记录下来，就写在博客这里了。最先是用CSS实现的是一个时钟的效果，如下图：实现效果1.圆盘说到时钟，肯定最先想到的是一个圆，所以就从一个圆开始。先写一个div，然后给相关的样式.clock{position:absolute;width:250px;height:250px;left:50%;top:50%;transform:translate
    
                    
    • 
                    
  • 前端学习——css照片墙
                        野生小米椒
三大基础语言
                        
    照片墙案例body{background-color:gray;/*背景色*/text-align:center;/*照片居中*/}img{width:12%;/*设置高度*/padding:10px;/*设置内边距*/background-color:white;/*设置照片背景色*/transform:rotate(-10deg);/*设置倾斜角度*/margin:20px;/*设置内边距*/
    
                    
    • 
                    
  • 技术解析：格意互联商城系统（多端适配+开源二次开发
                        西安漫格科技
开源
                        
    一、系统概述格意互联商城系统由西安漫格网络科技有限公司独立研发，专注于商城线上销售场景，支持多端适配（APP、小程序、公众号、H5）及二次开发。系统基于JAVA技术栈构建，采用SpringBoot+JPA作为后端框架，前端用户端使用UniApp实现跨平台兼容，管理端基于Vue+ElementUI开发，具备高扩展性与灵活性111。二、技术架构核心技术栈后端服务：SpringBoot+JPA，支持高并
    
                    
    • 
                    
  • 探索前端应用的新纪元：FABs —— 前端应用包
                        祖崧革

                        
    探索前端应用的新纪元：FABs——前端应用包fabFABprojectspecification&monorepo项目地址:https://gitcode.com/gh_mirrors/fab2/fab项目介绍在现代Web开发中，前端应用的形式多种多样，从纯静态网站到复杂的单页应用（SPA），再到服务器端渲染（SSR）应用，每种形式都有其独特的优势和挑战。然而，如何将这些不同类型的应用统一打包并高
    
                    
    • 
                    
  • Node.js原型链污染之前端
                        AvskBug
node.js前端
                        
    原型链污染是一种常见的安全漏洞，特别是在前端开发中。本文将详细介绍Node.js中的原型链污染问题，并提供相应的源代码示例。在阅读本文之前，请确保您对JavaScript和Node.js的基本概念有一定的了解。什么是原型链污染？原型链污染是指攻击者能够通过修改JavaScript对象的原型链来影响属性和方法的访问。这种攻击通常利用了JavaScript中原型继承的特性，通过修改原型链来更改对象的行
    
                    
    • 
                    
  • 前端开发学习——CSS定位
                        先吃点再说
学习css前端
                        
    一、定位的基本介绍1、网页常见的布局方式1.标准流块级元素独占一行——垂直布局行内元素/行内块元素一行显示多个——水平布局2.浮动可以让原本垂直布局的块级元素变成水平布局3.定位可以让元素自由的摆放在网页的任意位置一般用于盒子之间的层叠情况2、定位的常见应用场景可以解决盒子与盒子之间的层叠问题（定位之后的元素层级最高，可以层叠在其他盒子的上面）可以让盒子始终固定在屏幕的某个位置二、定位的基本使用1
    
                    
    • 
                    
  • 前端学习——CSS
                        W起名有点难
学习笔记前端学习css
                        
    CSSCSS（CascadingStyleSheets）级联样式表语法选择器全局选择器元素选择器类选择器ID选择器合并选择器选择器的优先级字体属性字体颜色背景属性background-color属性background-image属性background-repeat属性background-size属性background-position属性文本属性text-aligntext-decorat
    
                    
    • 
                    
  • 4个 Vue 路由实现的过程
                        程序员大澈
vue.js前端javascriptuni-app
                        
    大家好，我是大澈！一个喜欢结交朋友、喜欢编程技术和科技前沿的老程序员‍，关注我，科技未来或许我能帮到你！Vue路由相信朋友们用的都很熟了，但是你知道Vue路由是如何实现的吗？其实，前端路由是通过监听URL的变化，然后根据不同的URL路径显示不同的页面内容。而Vue路由的实现，大体可归结为这4个过程：下面我拆成5部分来一一讲解！一、检测URL变化说起检测URL变化，主要是还是聊聊Vue的两种路由模式
    
                    
    • 
                    
  • Vue 组件化开发指南：构建高效、可维护的前端应用
                        m0_73523460
前端vue.jsjavascript
                        
    在现代前端开发中，组件化开发已经成为一种主流的开发模式。Vue.js作为一款流行的前端框架，提供了强大的组件化支持，使得开发者能够轻松构建可复用、可维护的应用程序。本文将深入探讨Vue组件化开发的核心概念、最佳实践以及如何通过组件化提升开发效率。1.什么是组件化开发？组件化开发是一种将用户界面拆分为独立、可复用的模块的开发方式。每个组件负责特定的功能或UI部分，并且可以独立开发、测试和维护。通过组
    
                    
    • 
                    
  • Vue中Scoped的原理及深度解析
                        喜欢代码的新之助
vue.js前端javascript
                        
    Vue中Scoped的原理及深度解析前言回想起几年前初入职场时，面对面试官的提问“Vue中Scoped的原理是什么？”时，我的回答虽然勉强过关，但内心却充满了不确定。那时，我对知识的理解还停留在表面，只能依靠死记硬背。如今，经过几年的开发经验积累，再次审视这个问题，我有了更深入的理解。CSS常见模块化方案在前端开发中，CSS模块化是一个重要的话题。常见的CSS模块化方案包括：BEM方案：通过.bl
    
                    
    • 
                    
  • 深入理解 HTTP 的 GET、POST 方法与 Request 和 Response
                        码上就位
http网络协议网络
                        
    HTTP协议是构建Web应用的基石，GET和POST是其中最常用的请求方法。无论是前端开发、后端开发，还是接口测试，对它们的深入理解都显得尤为重要。在本文中，我们将介绍GET和POST方法，以及Request和Response的工作机制。一、GET方法GET方法用于从服务器获取数据，是一种“只读”操作，通常用于查询操作。特点：1.参数在URL中传递：GET请求通过URL参数将数据发送到服务器。例如
    
                    
    • 
                    
  • Java必知必会系列：Web框架与Spring MVC
                        AI天才研究院
Java实战编程实践大数据人工智能语言模型JavaPython架构设计
                        
    作者：禅与计算机程序设计艺术1.背景介绍在企业级应用开发中，采用前后端分离模式和RESTfulAPI风格的Web服务架构逐渐成为主流。基于这些技术，前端可以采用JavaScript、HTML、CSS等多种技术进行开发，而后端则可以通过各种Web框架构建出高性能、可扩展性强的应用系统。在本章节中，我将介绍Java最具代表性的Web框架SpringMVC，并结合实际案例，展示如何利用SpringMVC
    
                    
    • 
                    
  • 【前端】【部署】【https】购买服务器、部署、设置https
                        allanGold
HTML5前端部署上线https证书
                        
    购买服务器：https://www.bilibili.com/video/BV1i5411c7xp?spm_id_from=333.788.videopod.episodes&vd_source=65c8707649747fd67b232866b69a5ebd&p=61部署上线：https://www.bilibili.com/video/BV1i5411c7xp?spm_id_from=333.
    
                    
    • 
                    
  • wsl安装及nginx安装
                        新阿伟先生
环境搭建前端linuxwindows10
                        
    Windows装wsl实现Linux搭建本地服务器目前大部分前端项目均运行在Linux服务器上在Windows上搭建环境可开始测试服务器相关问题Wsl官方教程：安装wslWsl版本控件：windowsterminal（微软商店下载）Wsl为纯命令行，windows预览版的话可以加装wslg有图形环境，wslg只在21h2和win11里提供搭建nginx服务器：安装nginx：sudoaptupda
    
                    
    • 
                    
  • 构建基于ASP.NET的教务管理系统
                        黃昱儒

                        
    本文还有配套的精品资源，点击获取简介：教务管理系统是一个Web应用程序，利用ASP.NET技术为高校和教育机构提供全面的教务管理功能。它包括学生信息管理、课程管理、考试安排和成绩录入等核心模块。系统支持权限控制和数据管理，以确保信息安全和操作便捷。ASP.NET框架使用C#或VB.NET编程，结合.NETFramework、SQLServer或MySQL数据库以及前端技术（HTML、CSS、Jav
    
                    
    • 
                    
  • PyScript 与 JavaScript
                        Q shen
javascript开发语言ecmascript
                        
    大家好。请不要将这篇文章视为神圣的真理。这是我个人的看法。JS如果您有超过两年的前端应用程序开发经验，您无疑已经知道一些尝试替换奇怪、丑陋的JavaScript的失败尝试。尽管已经尝试替代或避免使用JavaScript，但JS仍然是一个强大的对手！JavaScript在网络上无处不在。它是最常用的编程语言，97.7%的网站使用JavaScript作为客户端编程语言。脚本近年来，Python的使用大
    
                    
    • 
                    
  • 《从事件冒泡到处理：前端事件系统的“隐形逻辑”》
                        hyyyyy！
面试精选react.jsjavascript前端
                        
    “那天在document见到你的第一眼，我就下定决心要陪你到天荒地老”---React我将从事件从出现到被处理的各个过程来介绍事件机制：这张图片给我们展示了react事件的各个阶段，我们可以看到有DOM，合成事件层，还有事件处理函数。我觉得我们如果想要了解事件机制首先要知道的就是事件从注册到执行结束的全过程：事件注册与触发流程React事件的完整生命周期：初始化阶段：React在根容器上注册所有支
    
                    
    • 
                    
  • 如何在html中插入本地音乐
                        猫化
工具经验(杂)html
                        
    如何在html中插入本地音乐1.前言首先下载音乐文件夹结构2.源码3.修改1.前言没有呢懒得写首先下载音乐太麻烦了,直接下载一个音乐客户端,例如网易云,下载的音乐就是mp3格式找到它的本地下载路径,直接拖到你的网页项目里文件夹结构给萌新看的,有一定前端编程经验的大佬可以略过差不多就是这个样子的2.源码应该是这样的,试一下吧-->3.修改src是地址,music是所在文件夹,2.mp3是音乐的格式a
    
                    
    • 
                    
  • Python开发农村青年婚恋appq (实操)
                        Geeker-2025
python
                        
    开发一款农村青年婚恋APP是一个复杂且具有挑战性的项目。该应用需要整合用户管理、匹配算法、实时通信、数据分析等多个功能模块，并确保系统的安全性、稳定性和用户体验。使用Python开发可以充分利用其在数据处理、机器学习和Web开发方面的优势，构建一个高性能、可扩展且功能丰富的应用。以下是一个高层次的设计概述，涵盖主要的技术栈和功能模块，并提供使用Python开发的示例。##技术栈概述###前端-**
    
                    
    • 
                    
  • React 17 + StoryBook 打造自己团队的UI库
                        

                        
    前言为了提升团队前端工作效率，打造一套团队UI库是有一个有效的方法。既可以减少重复劳动，又可以提高组件的复用率与统一性。创建了团队UI库后，就很有必要搭建一个静态文档网站，用于规范UI库的开发扩展以及规范使用。毕竟这东西不是你一个人开发的，也不是面向你一个人用的，有手册可以查，当然比每天都去问开发人员或者自己摸索来的快。以前是比较趋向于Docz这种静态文档生成插件，Docz的特色是零配置、简单、快
    
                    
    • 
                    
  • 前端常用布局
                        ox0080
#北漂+滴滴出行VIP激励WebCSS前端布局html
                        
    1.传统两栏布局+响应式适配文件名:traditional-two-column.html传统两栏布局示例*{margin:0;padding:0;box-sizing:border-box;}/*导航栏*/.nav{background:#2c3e50;padding:1rem;color:white;}/*主体容器*/.container{overflow:hidden;/*清除浮动*/}/*
    
                    
    • 
                    
  • 前端知识点---路由模式-实例模式和单例模式(ts)
                        *星之卡比*
鸿蒙
                        
    在ArkTS（ArkUI框架）中，路由实例模式（StandardInstanceMode）主要用于管理页面跳转。当创建一个新页面时，可以选择标准实例模式（StandardMode）或单实例模式（SingleMode）。路由实例模式标准实例模式（StandardMode）每次跳转都会创建一个新的页面实例。适用于允许用户打开多个相同页面的情况。不会复用已有的页面实例，每次跳转都会创建新的页面实例，用户
    
                    
    • 
                    
  • CefSharp 文件下载和保存功能-监听前端事件
                        Ben_F
CefSharp前端
                        
    重点在启用文件下载和通过JavaScript调用C#保存文件：1.添加文件下载处理器(DownloadHandler)在VueFormService类中，添加一个实现IDownloadHandler接口的类，用于处理文件下载到本地。//新增的DownloadHandler类publicclassDownloadHandler:IDownloadHandler{publicvoidOnBeforeD
    
                    
    • 
                    
  • spring mvc实现自定义验证器Validator
                        罗汉爷
#玩转Springspringmvcjava自定义Validator
                        
    使用场景在接口开发的日常实践中，确保数据准确性是保障业务稳定性的关键一环。面对诸如登录时验证用户名密码非空、创建用户时检查邮箱和手机号格式的正确性等需求，手动编写校验逻辑不仅耗时费力，还会显著降低代码的可读性和维护性。鉴于网络环境的不确定性及前端数据易遭篡改的特性，后端实施严格的参数校验变得尤为关键，以确保存储和处理的数据在逻辑上的无懈可击。Validator介绍Validator框架凭借其遵循的
    
                    
    • 
                    
  • js操作数组常用的方法
                        weixin_46541579
javascript前端vue.js
                        
    在前端开发中，操作数组是常见的操作。这里列举下在开发中常用的一些方法。正文开始concat拼接数组constarr1=[1,2,3];constarr2=['q','w','e']constarr3=arr1.concat(arr2);console.log('arr3',arr3);//打印结果[1,2,3,'q','w','e']join数组转成字符串//这里使用上面声明的arr3consti
    
                    
    • 
                    
  • 上传文件到对象存储是选择前端还是后端
                        nangonghen
linux对象存储
                        
    对于云上对象存储的上传方式选择（前端直传或后端代理上传），需综合考虑安全性、性能、成本、业务需求等因素。1.推荐前端直传的场景适用条件：大文件上传（如视频、大型数据集）高并发场景（如用户生成内容平台）需节省服务器带宽成本业务对实时性要求高方案设计：临时凭证（STS）或预签名URL：通过后端服务生成短期有效的安全凭证（如AWSS3预签名URL、阿里云OSSSTS），避免暴露长期密钥。分片上传与断点续
    
                    
    • 
                    
  • 华为OD技术面试真题 - 技术面】- 前端八股文真题题库（8)
                        算法大师
华为od面试前端华为OD机试E卷javascriptjavapython
                        
    华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.vue中key的作用？为什么不能用index作为key作用为什么不能用index作为key示例说明2.Vue2和Vue3?defineProperty和Proxy?Vue2的`Object.defineProperty()`Vue3的`Proxy`比较和应用场景
    
                    
    • 
                    
  • JavaScript网页设计案例：动态交互式任务列表
                        学不完了是吧
jsjavascript
                        
    在现代网页开发中，JavaScript被广泛应用于实现动态交互效果。看完这一篇你就可以设计一个动态任务列表，全面展示HTML、CSS和JavaScript在前端开发中的实际应用。通过本案例，你将深入了解事件监听、DOM操作以及用户交互设计的实现过程。案例需求在设计动态任务列表时，我们需要满足以下功能需求：动态添加任务，并显示在列表中。勾选任务表示完成状态，并通过样式标记。单独删除任务。一键清空所有
    
                    
    • 
                                
  • redis学习笔记——不仅仅是存取数据
                                    Everyday都不同
returnSourceexpire/delincr/lpush数据库分区redis
                                    
    最近项目中用到比较多redis，感觉之前对它一直局限于get/set数据的层面。其实作为一个强大的NoSql数据库产品，如果好好利用它，会带来很多意想不到的效果。（因为我搞java，所以就从jedis的角度来补充一点东西吧。PS：不一定全，只是个人理解，不喜勿喷） 
  
1、关于JedisPool.returnSource(Jedis jeids) 
  
这个方法是从red
    
                                
    • 
                                
  • SQL性能优化-持续更新中。。。。。。
                                    atongyeye
oraclesql
                                    
    1 通过ROWID访问表--索引 
你可以采用基于ROWID的访问方式情况,提高访问表的效率, , ROWID包含了表中记录的物理位置信息..ORACLE采用索引(INDEX)实现了数据和存放数据的物理位置(ROWID)之间的联系. 通常索引提供了快速访问ROWID的方法,因此那些基于索引列的查询就可以得到性能上的提高. 
 
2 共享SQL语句--相同的sql放入缓存 
 
3 选择最有效率的表
    
                                
    • 
                                
  • [JAVA语言]JAVA虚拟机对底层硬件的操控还不完善
                                    comsci
JAVA虚拟机
                                    
     
     如果我们用汇编语言编写一个直接读写CPU寄存器的代码段，然后利用这个代码段去控制被操作系统屏蔽的硬件资源，这对于JVM虚拟机显然是不合法的，对操作系统来讲，这样也是不合法的，但是如果是一个工程项目的确需要这样做，合同已经签了，我们又不能够这样做，怎么办呢？ 那么一个精通汇编语言的那种X客，是否在这个时候就会发生某种至关重要的作用呢？ 
 
&n
    
                                
    • 
                                
  • lvs- real
                                    男人50
LVS
                                    
    #!/bin/bash 
# 
# Script to start LVS DR real server. 
# description: LVS DR real server 
# 
#.  /etc/rc.d/init.d/functions 
 
VIP=10.10.6.252 
host='/bin/hostname' 
 
case "$1" in 
sta
    
                                
    • 
                                
  • 生成公钥和私钥
                                    oloz
DSA安全加密
                                    
    package com.msserver.core.util;

import java.security.KeyPair;
import java.security.PrivateKey;
import java.security.PublicKey;
import java.security.SecureRandom;

public class SecurityUtil {

    
                                
    • 
                                
  • UIView 中加入的cocos2d，背景透明
                                    374016526
cocos2dglClearColor
                                    
    要点是首先pixelFormat:kEAGLColorFormatRGBA8，必须有alpha层才能透明。然后view设置为透明glView.opaque = NO;[director setOpenGLView:glView];[self.viewController.view setBackgroundColor:[UIColor clearColor]];[self.viewControll
    
                                
    • 
                                
  • mysql常用命令
                                    香水浓
mysql
                                    
    连接数据库 
mysql -u troy -ptroy 
 
备份表 
mysqldump -u troy -ptroy mm_database mm_user_tbl > user.sql 
 
恢复表（与恢复数据库命令相同） 
mysql -u troy -ptroy mm_database < user.sql 
 
备份数据库 
mysqldump -u troy -ptroy
    
                                
    • 
                                
  • 我的架构经验系列文章 - 后端架构 - 系统层面
                                    agevs
JavaScriptjquerycsshtml5
                                    
    系统层面：
高可用性

所谓高可用性也就是通过避免单独故障加上快速故障转移实现一旦某台物理服务器出现故障能实现故障快速恢复。一般来说，可以采用两种方式，如果可以做业务可以做负载均衡则通过负载均衡实现集群，然后针对每一台服务器进行监控，一旦发生故障则从集群中移除；如果业务只能有单点入口那么可以通过实现Standby机加上虚拟IP机制，实现Active机在出现故障之后虚拟IP转移到Standby的快速
    
                                
    • 
                                
  • 利用ant进行远程tomcat部署
                                    aijuans
tomcat
                                    
    在javaEE项目中，需要将工程部署到远程服务器上，如果部署的频率比较高，手动部署的方式就比较麻烦，可以利用Ant工具实现快捷的部署。这篇博文详细介绍了ant配置的步骤（http://www.cnblogs.com/GloriousOnion/archive/2012/12/18/2822817.html），但是在tomcat7以上不适用，需要修改配置，具体如下： 
1.配置tomcat的用户角色
    
                                
    • 
                                
  • 获取复利总收入
                                    baalwolf
获取
                                    
           public static void main(String args[]){ 
        int money=200; 
        int year=1; 
        double rate=0.1; 
&
    
                                
    • 
                                
  • eclipse.ini解释
                                    BigBird2012
eclipse
                                    
    大多数java开发者使用的都是eclipse，今天感兴趣去eclipse官网搜了一下eclipse.ini的配置，供大家参考，我会把关键的部分给大家用中文解释一下。还是推荐有问题不会直接搜谷歌，看官方文档，这样我们会知道问题的真面目是什么，对问题也有一个全面清晰的认识。 
Overview 
1、Eclipse.ini的作用 
Eclipse startup is controlled by th
    
                                
    • 
                                
  • AngularJS实现分页功能
                                    bijian1013
JavaScriptAngularJS分页
                                    
            对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。既然在整个应用中这是一种很常见的需求，那么把这一功能抽象成一个通用的、可复用的分页（Paginator）服务是很有意义的。 
  &nbs
    
                                
    • 
                                
  • [Maven学习笔记三]Maven archetype
                                    bit1129
ArcheType
                                    
    archetype的英文意思是原型，Maven archetype表示创建Maven模块的模版，比如创建web项目，创建Spring项目等等. 
  
mvn archetype提供了一种命令行交互式创建Maven项目或者模块的方式， 
  
mvn archetype 
  
1.在LearnMaven-ch03目录下，执行命令mvn archetype:gener
    
                                
    • 
                                
  • 【Java命令三】jps
                                    bit1129
Java命令
                                    
    jps很简单，用于显示当前运行的Java进程，也可以连接到远程服务器去查看 
  
[hadoop@hadoop bin]$ jps -help
usage: jps [-help]
       jps [-q] [-mlvV] [<hostid>]

Definitions:
    <hostid>:      <hostname>[:
    
                                
    • 
                                
  • ZABBIX2.2 2.4 等各版本之间的兼容性
                                    ronin47

                                    
    zabbix更新很快，从2009年到现在已经更新多个版本，为了使用更多zabbix的新特性，随之而来的便是升级版本，zabbix版本兼容性是必须优先考虑的一点 客户端AGENT兼容 
zabbix1.x到zabbix2.x的所有agent都兼容zabbix server2.4：如果你升级zabbix server，客户端是可以不做任何改变，除非你想使用agent的一些新特性。 Zabbix代理（p
    
                                
    • 
                                
  • unity 3d还是cocos2dx哪个适合游戏？
                                    brotherlamp
unity自学unity教程unity视频unity资料unity
                                    
    unity 3d还是cocos2dx哪个适合游戏？ 
问：unity 3d还是cocos2dx哪个适合游戏？ 
答：首先目前来看unity视频教程因为是3d引擎，目前对2d支持并不完善，unity 3d 目前做2d普遍两种思路，一种是正交相机，3d画面2d视角，另一种是通过一些插件，动态创建mesh来绘制图形单元目前用的较多的是2d toolkit，ex2d，smooth moves，sm2， 

    
                                
    • 
                                
  • 百度笔试题：一个已经排序好的很大的数组，现在给它划分成m段，每段长度不定，段长最长为k，然后段内打乱顺序，请设计一个算法对其进行重新排序
                                    bylijinnan
java算法面试百度招聘
                                    
    

import java.util.Arrays;

/**
 * 最早是在陈利人老师的微博看到这道题：
 * #面试题#An array with n elements which is K most sorted，就是每个element的初始位置和它最终的排序后的位置的距离不超过常数K
 * 设计一个排序算法。It should be faster than O(n*lgn)。
    
                                
    • 
                                
  • 获取checkbox复选框的值
                                    chiangfai
checkbox
                                    
    <title>CheckBox</title>
  <script type = "text/javascript">
	doGetVal: function  doGetVal()
	{
		//var fruitName = document.getElementById("apple").value;//根据
    
                                
    • 
                                
  • MySQLdb用户指南
                                    chenchao051
mysqldb
                                    
    原网页被墙，放这里备用。  MySQLdb User's Guide  
Contents 
 
 Introduction 
 Installation 
  _mysql 
   
   MySQL C API translation 
   MySQL C API function mapping 
   Some _mysql examples 
    
  MySQLdb 
   
 
    
                                
    • 
                                
  • HIVE 窗口及分析函数
                                    daizj
hive窗口函数分析函数
                                    
    窗口函数应用场景： 
（1）用于分区排序 
（2）动态Group By 
（3）Top N 
（4）累计计算 
（5）层次查询 
 
一、分析函数 
用于等级、百分点、n分片等。 
函数             说明 
RANK()     &nbs
    
                                
    • 
                                
  • PHP ZipArchive 实现压缩解压Zip文件
                                    dcj3sjt126com
PHPzip
                                    
      
PHP ZipArchive 是PHP自带的扩展类，可以轻松实现ZIP文件的压缩和解压，使用前首先要确保PHP ZIP 扩展已经开启，具体开启方法就不说了，不同的平台开启PHP扩增的方法网上都有，如有疑问欢迎交流。这里整理一下常用的示例供参考。 
一、解压缩zip文件        01   02   03   04   05   06   07   08   09   10   11   
    
                                
    • 
                                
  • 精彩英语贺词
                                    dcj3sjt126com
英语
                                    
    I'm always here  
            我会一直在这里支持你  
              &nb
    
                                
    • 
                                
  • 基于Java注解的Spring的IoC功能
                                    e200702084
javaspringbeanIOCOffice
                                    
                                    
  
    
                                
    • 
                                
  • java模拟post请求
                                    geeksun
java
                                    
    一般API接收客户端（比如网页、APP或其他应用服务）的请求，但在测试时需要模拟来自外界的请求，经探索，使用HttpComponentshttpClient可模拟Post提交请求。  此处用HttpComponents的httpclient来完成使命。   
import org.apache.http.HttpEntity ;
import org.apache.http.HttpRespon
    
                                
    • 
                                
  • Swift语法之 ---- ?和!区别
                                    hongtoushizi
?swift!
                                    
    转载自： http://blog.sina.com.cn/s/blog_71715bf80102ux3v.html 
  
Swift语言使用var定义变量，但和别的语言不同，Swift里不会自动给变量赋初始值，也就是说变量不会有默认值，所以要求使用变量之前必须要对其初始化。如果在使用变量之前不进行初始化就会报错：  
var stringValue : String 
//
    
                                
    • 
                                
  • centos7安装jdk1.7
                                    jisonami
jdkcentos
                                    
    安装JDK1.7 
步骤1、解压tar包在当前目录 
[root@localhost usr]#tar -xzvf jdk-7u75-linux-x64.tar.gz 
步骤2：配置环境变量 
在etc/profile文件下添加 
export JAVA_HOME=/usr/java/jdk1.7.0_75 
export CLASSPATH=/usr/java/jdk1.7.0_75/lib 

    
                                
    • 
                                
  • 数据源架构模式之数据映射器
                                    home198979
PHP架构数据映射器datamapper
                                    
    前面分别介绍了数据源架构模式之表数据入口、数据源架构模式之行和数据入口数据源架构模式之活动记录，相较于这三种数据源架构模式，数据映射器显得更加“高大上”。 
  
一、概念 
数据映射器（Data Mapper）：在保持对象和数据库（以及映射器本身）彼此独立的情况下，在二者之间移动数据的一个映射器层。概念永远都是抽象的，简单的说，数据映射器就是一个负责将数据映射到对象的类数据。 
&nb
    
                                
    • 
                                
  • 在Python中使用MYSQL
                                    pda158
mysqlpython
                                    
    缘由   　　近期在折腾一个小东西须要抓取网上的页面。然后进行解析。将结果放到 
数据库中。   　　了解到 
Python在这方面有优势，便选用之。   　　由于我有台 
server上面安装有 
mysql，自然使用之。在进行数据库的这个操作过程中遇到了不少问题，这里 
记录一下，大家共勉。   　　 
python中mysql的调用   　　 
百度之后能够通过MySQLdb进行数据库操作。
    
                                
    • 
                                
  • 单例模式
                                    hxl1988_0311
java单例设计模式单件
                                    
    package com.sosop.designpattern.singleton;

/*
 * 单件模式：保证一个类必须只有一个实例，并提供全局的访问点
 * 
 * 所以单例模式必须有私有的构造器，没有私有构造器根本不用谈单件
 * 
 * 必须考虑到并发情况下创建了多个实例对象
 * */

/**
 * 虽然有锁，但是只在第一次创建对象的时候加锁，并发时不会存在效率
    
                                
    • 
                                
  • 27种迹象显示你应该辞掉程序员的工作
                                    vipshichg
工作
                                    
    1、你仍然在等待老板在2010年答应的要提拔你的暗示。 2、你的上级近10年没有开发过任何代码。 3、老板假装懂你说的这些技术，但实际上他完全不知道你在说什么。 4、你干完的项目6个月后才部署到现场服务器上。 5、时不时的，老板在检查你刚刚完成的工作时，要求按新想法重新开发。 6、而最终这个软件只有12个用户。 7、时间全浪费在办公室政治中，而不是用在开发好的软件上。 8、部署前5分钟才开始测试。
    
                                
    • 
                

            

        

    




    

        

            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他