Tinycircle
Tinycircle

【GISer小O】JAVA后台的小白之路（一）_2 ——分分合合三剑客

【GISer小O】JAVA后台的小白之路（一）_2

——分分合合三剑客

本文简单介绍Web开发中的三剑客：HTML/CSS/Javascript，阐述其关系。然后用示例demo讲解三者的分分合合。相关资源的百度云盘链接为：链接：http://pan.baidu.com/s/1jIab1I2 密码：vue1

《JAVA后台的小白之路》是以掌握SSM框架进行实战后台开发为核心目的，那么为什们要讨论Web前端（HTML/CSS/JavaScript）的东西呢？在小Ｏ看来，后台必须要懂点前台的东西，才能更好的进行后台开发。不需要太精通，但是需要了解一些。这样一方面可以理解整个前后台的交互，另一方面，自己写后台程序的时候，可以简单方便地把结果显示在前端进行测试。最后，下一阶段的JSP必须要有HTML的基础才可以进一步进行。来，让我们放出炫酷的Web三剑客图镇楼。

Part one 三剑客的合

这一节从遵循纯html，html+css，html+css+javascript的顺序，逐步介绍完整的网页前端三剑客。

HTML简述

HTML，更确切的说是HTML5，小O在《JAVA后台的小白之路（一）_1 ——奔跑吧进击的Sublime》中已经阐明。这里小O在sublime里写个demo，只用一点点之前没有提到的知识，就是表格。表格的相关标签，小O在这里列出来了。想了解标签的具体属性值，就戳到菜鸟网里面去看吧：http://www.runoob.com/tags/ref-byfunc.html。

name age
定义一个表格
定义表格标题
定义表格中的表头单元格
定义表格中的行
定义表格中的单元
定义表格中的表头内容
定义表格中的主体内容
定义表格中的表注内容（脚注）
定义表格中一个或多个列的属性值
定义表格中供格式化的列组

下面这段代码实现了非常简单的表格html，表格被放在一个div标签中方便之后的处理。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <table border=1>
        <div>
        <tr >
            <td>姓名td>
            <td>年龄td>
            <td>性别td>
            <td>喜欢的颜色td>
            <td>不喜欢的颜色td>
            <td>身高td>
        tr>
        <tr>
            <td>小Otd>
            <td>20+td>
            <td>男td>
            <td>柠檬黄td>
            <td>shit黄td>
            <td>177+td>
        tr>
        <tr>
            <td>老王td>
            <td>30+td>
            <td>男td>
            <td>黑色td>
            <td>彩色td>
            <td>160+td>
        tr>
        div>
    table>
body>
html>

这样的代码已经把网页骨架搭建出来了，但是讲真，小O认为它实在是太丑了。别和小O说这是极简风，明明就是简陋啊。小O想要这个表格占满整个页面，想让它变得漂亮一点。那么这个时候，小O就需要CSS了。
【GISer小O】JAVA后台的小白之路（一）_2 ——分分合合三剑客_第1张图片

CSS简述

层叠样式表（英语：Cascading Style Sheets，简写 CSS）,目前的版本是CSS3，CSS 最主要的目的是将文件的内容与显示分隔开来。简单来说，html是骨架是血肉之躯，css是衣服是化妆师，让html内容变的漂亮起来。万千解释，顶不上一张效果图。来，让我们瞅瞅给上述的html里加入CSS会有什么效果。
【GISer小O】JAVA后台的小白之路（一）_2 ——分分合合三剑客_第2张图片
有没有，有没有，加入样式后，瞬间高大上起来了。让我们贴上完整的代码（初看跳过代码）：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
    html,body{
        width:100%;
        height:100%;
        margin: 0px;
        padding: 0px;
        background-color: #1e2b3a;
    }
    #divtest{
        width:100%;
        height:30%;
        text-align: center;
        background-color: yellow;
        margin: 0px;
        padding: 0px;
    }
    table,th,td
    {
        border:2px solid #1e2b3a;
        vertical-align: center;
        margin:0 auto;
    }
    #tabletest{
        border-collapse:collapse;
        width:80%;
        height:50px;
        color: #1e2b3a;
        position: relative;

    }
    .trclass1{
        background-color: orange;
        font-weight: bold;
    }
    .trclass2{
        background-color: #158e71;
        color:white;
    }

    style>

head>
<body>
    <div id="divtest">
        <h2>小O的测试表h1>
    <table id="tabletest" border=1>
        <tr class="trclass1" >
            <td>姓名td>
            <td>年龄td>
            <td>性别td>
            <td>喜欢的颜色td>
            <td>不喜欢的颜色td>
            <td>身高td>
        tr>
        <tr class="trclass2">
            <td>小Otd>
            <td>20+td>
            <td>男td>
            <td>柠檬黄td>
            <td>shit黄td>
            <td>177+td>
        tr>
        <tr class="trclass2">
            <td>老王td>
            <td>30+td>
            <td>男td>
            <td>黑色td>
            <td>彩色td>
            <td>160+td>
        tr>

    table>

    div>
body>
html>

小O这一长串代码看不懂啊，啊，啊，啊！！！！！！！！Smilecrying，那咱拆开看吧。

使用CSS，要做的事情就两件，第一，说明这一段代码是给哪个或哪些元素用的>指定对象。形象地说，就是衣服或者裤子的问题。这一段CSS代码是内裤，修饰名为test的div标签，那一段CSS代码是外套，修饰类型为testclass的的table标签。第二，说明和指定元素的各种属性>编辑属性。形象的说，就是给具体衣物选择不同的花纹，比如这件外套是黑白条纹状L码，那条内裤是个花裤衩。

STEP1 : 指定对象。首先在body中，给各个标签加上id或者class属性，然后在head部分加入style标签，在里面用名称加花括号的形式指定要给谁加上样式。其中”#”对应的是id属性，”.”对应的是class属性。

<head>
<style>
#divtest{
    .............
    }
</head>
<body>
    <div id="testdiv">
    ......
    <div>
    <div class="testclass">
    ......
    <div>
    <div class="testclass">
    ......
    <div>
</body>

STEP2 : 编辑属性。 无非就是在花括号中填补各种属性罢了。形式是“属性名：属性值;”。

        border-collapse:collapse;
        width:80%;
        height:50px;
        color: #1e2b3a;
        position: relative;

分开讲了，我们再合起来看看完整的CSS代码到底是什么。喏，就是下面这段小东西：

.trclass1{
        background-color: orange;
        font-weight: bold;
    }

到这里，恭喜你已经双剑合璧了。CSS可以实现你想要的几乎所有效果，也可以做出动画来。想要进一步学习，可以去菜鸟网又或者w3cschool的CSS专栏学习。基础知识在这些地方真的已经很详尽了。
其实，另一种更好的学习方式是哪里不懂问哪里，有什么语法或者想实现的效果不会的可以直接在度娘或者谷歌上查。
另外，可以在网上找html/css模版，只要能看懂，你就能改能用。方便快捷，而且能迅速提高你的实战能力。

Javascript简述

之前说，HTML是躯体，CSS是衣物。那么在这种类比下，JavaScript又是什么？JavaScript是大脑！！只有HTML的话，这个人是个浑身赤裸的植物人。不堪入目不说，戳他他还没反应。加上CSS，她就变成了睡美人。你想吻醒她，就需要给她注入JavaScript，让她有意识，能对外界刺激做出反应。
感性认知后，我们再来看看稍微正式点的说明：下面的说明分别来自W3school，菜鸟网和廖雪峰的官方网站。

【GISer小O】JAVA后台的小白之路（一）_2 ——分分合合三剑客_第3张图片

简而言之，统而言之，JS，JavaScript是可以直接被浏览器直接解析，用在Web里面的轻量级脚本语言。简单易学，应用广泛。接下来我们在上面CSS的代码里面稍做修改，加入一点点JS代码，实现点击按钮后表上标题变换和表格颜色变换。
按照惯例，先上效果图：
【GISer小O】JAVA后台的小白之路（一）_2 ——分分合合三剑客_第4张图片
然后贴上完整版的代码：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
    html,body{
        width:100%;
        height:100%;
        margin: 0px;
        padding: 0px;
        background-color: #1e2b3a;
    }
    #divtest{
        width:100%;
        height:30%;
        text-align: center;
        background-color: yellow;
        margin: 0px;
        padding: 0px;
    }
    table,th,td
    {
        border:2px solid #1e2b3a;
        vertical-align: center;
        margin:0 auto;
    }
    #tabletest{
        border-collapse:collapse;
        width:80%;
        height:50px;
        color: #1e2b3a;
        position: relative;

    }
    #trclass1{
        background-color: orange;
        font-weight: bold;
    }
    .trclass2{
        background-color: #158e71;
        color:white;
    }

    style>
    <script>
     i=0;
    function changeTitle(){
        i=i+1;
        document.getElementById('htest').innerHTML="小O的测试表 No/."+i;
    }

    function changeStyle()
    {
        if(i%2==1)
        document.getElementById('trclass1').style.background="blue";
        else    
        document.getElementById('trclass1').style.background="white";
    }
    script>
    div>
head>
<body>
    <div id="divtest">
        <h id="htest">小O的测试表h>
    <table id="tabletest" border=1>
        <tr id="trclass1" >
            <td>姓名td>
            <td>年龄td>
            <td>性别td>
            <td>喜欢的颜色td>
            <td>不喜欢的颜色td>
            <td>身高td>
        tr>
        <tr class="trclass2">
            <td>小Otd>
            <td>20+td>
            <td>男td>
            <td>柠檬黄td>
            <td>shit黄td>
            <td>177+td>
        tr>
        <tr class="trclass2">
            <td>老王td>
            <td>30+td>
            <td>男td>
            <td>黑色td>
            <td>彩色td>
            <td>160+td>
        tr>
    table>
    <br>
    <div id="buttonbox">
        <input type="button" value="换标题" onClick="changeTitle()">
        <input type="button" value="换颜色" onClick="changeStyle()">
    div>
body>
html>

根据惯例，我们拆开来一点点看。重要的点有两个，第一，js长什么样，第二，如何用js。

<script>
    XXX xxxxx;               //脚本，直接执行
    .......
    function XXX(){           //函数，需要调用
        ........
    }
script>

当JavaScript直接写在Html文档里的时候，JavaScript程序应该位于script标签之中。作为一种脚本语言，js用起来当然是既有直接执行的脚本，又有间接执行的函数了。如果看官对Matlab这样的东西比较熟悉，那么JavaScript也就毫无问题了。
在HTML中用js，要么是写脚本它自己跑，要么就是在html里面设置响应事件。比如在html里给按钮注册一个onClick事件，该事件的响应是change()函数。
STEP 1: 注册事件

type="button" value="测试" onClick="change()">

STEP 2: 完成响应函数

function change()
{
    alert("小O你好，我是js测试函数");
}

JavaScript 能够实现的东西实在是多，在这种篇幅有限的情况下，小Ｏ就不需要仔仔细细讲细节了。细节上的问题请去菜鸟网看吧。

【GISer小O】JAVA后台的小白之路（一）_2 ——分分合合三剑客_第5张图片

对了，为了看懂JavaScript中的如下代码，看官还需要去简单的了解一下DOM对象，其实也很简单。

    document.getElementById('trclass1').style.background="white";

恭喜你，小伙子，你达成了三剑合璧的成就。
补充：
看客们可能存在一个疑问，就是在HTML页面中，CSS样式代码和js脚本代码应该放在哪里？答案是你爱放在哪里放在哪里。你要你把对应代码放在之间，放在之间就好。这些片段在HTML中的具体哪个地方并没有什么影响。
不过，小O的个人习惯是如果要把CSS还有JavaScript写在HTML文档里，那就把他们放在部分因为这样相对容易管理、理解。`

Part two 三剑客的分

这一节阐述对HTML、CSS、Javascript的进一步理解，并将一个.html拆分成.html+.css+.js的形式。

谈理解

小Ｏ曾经傻傻地学着html，css，还有js。但是一直没有一个整体的把握，因此学习起来的感觉就是书上有什么示例代码就敲一敲，敲完就忘记了。不知道自己想要的是什么。那么在这里，就让小O来形象地理一理三剑客间的关系，三剑客与后台大佬又是个什么样的联系。

牧云流同学的博客里面向新手简单总结了HTML,CSS,JavaScript之间的关联，小O也从中得到了一定的帮助。这里同样推荐大家阅读：《新手理解HTML、CSS、javascript之间的关系》。
STEP 1: 小O说要有人，结果法力过差，只出现了个白白的骷髅架子。——小O现在只写了HTML标签。
【GISer小O】JAVA后台的小白之路（一）_2 ——分分合合三剑客_第6张图片

小O没办法，开始玩泥巴，把骷髅架子的缝隙都用泥巴填好，于是小O有了一个有骨骼奇特的泥巴人。——小O现在在HTML标签内部加上了内容，让HTML丰满起来了。
【GISer小O】JAVA后台的小白之路（一）_2 ——分分合合三剑客_第7张图片
小Ｘ说这泥巴人太丑了，于是小Ｏ下深海上九天，采来各种珍奇装饰。淡妆浓抹总相宜，于是小Ｏ有了个五彩泥塑，看上去微妙微翘。——小O这个时候给HTML加上了CSS代码，来控制显示效果。

小X不要小O了，小Ｏ很孤单，天天和泥塑说话。可那泥塑不理小O，小O想让它活过来陪伴小O，于是分出一缕精魂，注入泥塑。泥塑有了心，也有了脑，从它变成了她。从此和小O过上了没羞没躁的快乐生活。——小O有加入了javascript代码，使得html页面能够良好交互。至此，前端完成。

这个社会发展的太快，小O需要一个智囊在身边，帮助小O分析局势把握机会。人脑毕竟有限，她已经无法仅仅依靠自己的力量就满足小O的需求了。幸好已经进入了超算时代，小O给她买了最新的人工智能辅助设施，那是一台有智慧的超级计算机，能够帮助她实现很多她凭借人脑完全无法胜任的计算与分析。——小O给前端程序配上了对应的后台程序，完成了整个项目。

总而言之，前台是人，后台是辅助人工智能。人有三层，其一曰骨肉，其二曰衣冠，其三曰思想。

我们的后台语言是ＪＡＶＡ,那么JAVA与JavaScript又有什么区别呢？
一句话总结，印度与印度尼西亚的关系。二者名称相似有点历史因素，但并不相同、也不类似。想进一步理清这个问题，推荐阅读下面阮一峰的《JavaScript诞生记》。

一分为三

JavaScript和CSS代码除了可以写在HTML文档里，还可以单独成文件，然后在HTML文档中进行调用。
调用语句写在head标签内，关键语句形式如下。前者是引入外部css文件，后退着是引入外部js文件：

 <link href="Tinycircle_seperate.css" rel="stylesheet" type="text/css" />
     <script src="Tinycircle_seperate.js" type="text/javascript">script>

把三剑客分开，是为了代码的条理性更加清晰和方便维护，是一种良好的编码习惯。也有利于后期向后台开发转型。那么分开后的三个文件如下所示：
这里写图片描述

Tineycircle_seperate.html文件内容


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
     <link href="Tinycircle_seperate.css" rel="stylesheet" type="text/css" />
     <script src="Tinycircle_seperate.js" type="text/javascript">script>
head>
<body>
    <div id="divtest">
        <h id="htest">小O的测试表h>
    <table id="tabletest" border=1>
        <tr id="trclass1" >
            <td>姓名td>
            <td>年龄td>
            <td>性别td>
            <td>喜欢的颜色td>
            <td>不喜欢的颜色td>
            <td>身高td>
        tr>
        <tr class="trclass2">
            <td>小Otd>
            <td>20+td>
            <td>男td>
            <td>柠檬黄td>
            <td>shit黄td>
            <td>177+td>
        tr>
        <tr class="trclass2">
            <td>老王td>
            <td>30+td>
            <td>男td>
            <td>黑色td>
            <td>彩色td>
            <td>160+td>
        tr>
    table>
    <br>
    <div id="buttonbox">
        <input type="button" value="换标题" onClick="changeTitle()">
        <input type="button" value="换颜色" onClick="changeStyle()">
    div>
body>
html>

Tineycircle_seperate.css文件内容

html,body{
        width:100%;
        height:100%;
        margin: 0px;
        padding: 0px;
        background-color: #1e2b3a;
    }
    #divtest{
        width:100%;
        height:30%;
        text-align: center;
        background-color: yellow;
        margin: 0px;
        padding: 0px;
    }
    table,th,td
    {
        border:2px solid #1e2b3a;
        vertical-align: center;
        margin:0 auto;
    }
    #tabletest{
        border-collapse:collapse;
        width:80%;
        height:50px;
        color: #1e2b3a;
        position: relative;

    }
    #trclass1{
        background-color: orange;
        font-weight: bold;
    }
    .trclass2{
        background-color: #158e71;
        color:white;
    }

Tineycircle_seperate.js文件内容

 i=0;
    function changeTitle(){
        i=i+1;
        document.getElementById('htest').innerHTML="小O的测试表 No/."+i;
    }

    function changeStyle()
    {
        if(i%2==1)
        document.getElementById('trclass1').style.background="blue";
        else    
        document.getElementById('trclass1').style.background="white";
    }

如果想要仔细研究CSS和JavaScript引入到HTML里，可以参考如下两个链接：
①CSS引入：http://www.lvyestudy.com/les_cj/cj_1.3.aspx
②JavaScript引入：http://www.lvyestudy.com/les_js/js_1.3.aspx

有了从三剑合璧到三剑分离的过程和理解，之后再理解掌握诸如openlayers、D3、echarts这样的js库就会方便许多，也更容易上手。
最后放上一张相关图片作为本文的结束： 

update 2017080６ by Giser Tinycircle

你可能感兴趣的:(JAVA,GIS,HTML/CSS,JavaScript,web,javascript,css,html,java)

  • 理解Gunicorn：Python WSGI服务器的基石 范范0825 ipythonlinux运维
    理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • LocalDateTime 转 String igotyback java开发语言
    importjava.time.LocalDateTime;importjava.time.format.DateTimeFormatter;publicclassMain{publicstaticvoidmain(String[]args){//获取当前时间LocalDateTimenow=LocalDateTime.now();//定义日期格式化器DateTimeFormatterformat
  • swagger访问路径 igotyback swagger
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
  • Linux下QT开发的动态库界面弹出操作（SDL2） 13jjyao QT类qt开发语言sdl2linux
    需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
  • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
  • ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值） 研学随笔 arcgis经验分享
    我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
  • Google earth studio 简介 陟彼高冈yu 旅游
    GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G
  • PHP环境搭建详细教程 好看资源平台 前端php
    PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【华为OD机试真题2023B卷 JAVA&JS】We Are A Team 若博豆 java算法华为javascript
    华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • git - Webhook让部署自动化 大猪大猪
    我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 【华为OD技术面试真题 - 技术面】- python八股文真题题库（1） 算法大师 华为od面试python
    华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.数据预处理流程数据预处理的主要步骤工具和库2.介绍线性回归、逻辑回归模型线性回归（LinearRegression）模型形式：关键点：逻辑回归（LogisticRegression）模型形式：关键点：参数估计与评估：3.python浅拷贝及深拷贝浅拷贝（Shal
  • Java 重写(Override)与重载(Overload) 叨唧唧的
    Java重写(Override)与重载(Overload)重写(Override)重写是子类对父类的允许访问的方法的实现过程进行重新编写,返回值和形参都不能改变。即外壳不变，核心重写！重写的好处在于子类可以根据需要，定义特定于自己的行为。也就是说子类能够根据需要实现父类的方法。重写方法不能抛出新的检查异常或者比被重写方法申明更加宽泛的异常。例如：父类的一个方法申明了一个检查异常IOExceptio
  • 简单了解 JVM 记得开心一点啊 jvm
    目录♫什么是JVM♫JVM的运行流程♫JVM运行时数据区♪虚拟机栈♪本地方法栈♪堆♪程序计数器♪方法区/元数据区♫类加载的过程♫双亲委派模型♫垃圾回收机制♫什么是JVMJVM是JavaVirtualMachine的简称，意为Java虚拟机。虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统（如：JVM、VMwave、VirtualBox）。JVM和其他两个虚拟机
  • 1分钟解决 -bash: mvn: command not found，在Centos 7中安装Maven Energet!c 开发语言
    1分钟解决-bash:mvn:commandnotfound，在Centos7中安装Maven检查Java环境1下载Maven2解压Maven3配置环境变量4验证安装5常见问题与注意事项6总结检查Java环境Maven依赖Java环境，请确保系统已经安装了Java并配置了环境变量。可以通过以下命令检查：java-version如果未安装，请先安装Java。1下载Maven从官网下载：前往Apach
  • 「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验 张风捷特烈 iderust开发语言后端
    theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言，但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里，我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站，可通过下面的链接访问https://www
  • Java企业面试题3 马龙强_ java
    1.break和continue的作用(智*图)break：用于完全退出一个循环（如for,while）或一个switch语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在for循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。2.if分支语句和switch分
  • JVM、JRE和 JDK：理解Java开发的三大核心组件 Y雨何时停T Javajava
    Java是一门跨平台的编程语言，它的成功离不开背后强大的运行环境与开发工具的支持。在Java的生态中，JVM（Java虚拟机）、JRE（Java运行时环境）和JDK（Java开发工具包）是三个至关重要的核心组件。本文将探讨JVM、JDK和JRE的区别，帮助你更好地理解Java的运行机制。1.JVM：Java虚拟机（JavaVirtualMachine）什么是JVM？JVM，即Java虚拟机，是Ja
  • Java面试题精选：消息队列(二) 芒果不是芒 Java面试题精选javakafka
    一、Kafka的特性1.消息持久化：消息存储在磁盘，所以消息不会丢失2.高吞吐量：可以轻松实现单机百万级别的并发3.扩展性：扩展性强，还是动态扩展4.多客户端支持：支持多种语言（Java、C、C++、GO、）5.KafkaStreams（一个天生的流处理）:在双十一或者销售大屏就会用到这种流处理。使用KafkaStreams可以快速的把销售额统计出来6.安全机制：Kafka进行生产或者消费的时候会
  • 白骑士的Java教学基础篇 2.5 控制流语句 白骑士所长 Java教学java开发语言
    欢迎继续学习Java编程的基础篇！在前面的章节中，我们了解了Java的变量、数据类型和运算符。接下来，我们将探讨Java中的控制流语句。控制流语句用于控制程序的执行顺序，使我们能够根据特定条件执行不同的代码块，或重复执行某段代码。这是编写复杂程序的基础。通过学习这一节内容，你将掌握如何使用条件语句和循环语句来编写更加灵活和高效的代码。条件语句条件语句用于根据条件的真假来执行不同的代码块。if语句‘
  • python语法——三目运算符 HappyRocking pythonpython三目运算符
    在java中，有三目运算符，如：intc=(a>b)?a:b表示c取两者中的较大值。但是在python，不能直接这样使用，估计是因为冒号在python有分行的关键作用。那么在python中，如何实现类似功能呢？可以使用ifelse语句，也是一行可以完成，格式为：aifbelsec表示如果b为True，则表达式等于a，否则等于c。如：c=(aif(a>b)elseb)同样是完成了取最大值的功能。
  • ArrayList 源码解析 程序猿进阶 Java基础ArrayListListjava面试性能优化架构设计idea
    ArrayList是Java集合框架中的一个动态数组实现，提供了可变大小的数组功能。它继承自AbstractList并实现了List接口，是顺序容器，即元素存放的数据与放进去的顺序相同，允许放入null元素，底层通过数组实现。除该类未实现同步外，其余跟Vector大致相同。每个ArrayList都有一个容量capacity，表示底层数组的实际大小，容器内存储元素的个数不能多于当前容量。当向容器中添
  • Python神器！WEB自动化测试集成工具 DrissionPage 亚丁号 python开发语言
    一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率
  • Java爬虫框架（一）--架构设计 狼图腾-狼之传说 java框架java任务html解析器存储电子商务
    一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast
  • 异常的核心类Throwable 无量 java源码异常处理exception
    java异常的核心是Throwable，其他的如Error和Exception都是继承的这个类 里面有个核心参数是detailMessage，记录异常信息，getMessage核心方法，获取这个参数的值，我们可以自己定义自己的异常类，去继承这个Exception就可以了，方法基本上，用父类的构造方法就OK，所以这么看异常是不是很easy package com.natsu;
  • mongoDB 游标（cursor） 实现分页 迭代 开窍的石头 mongodb
    上篇中我们讲了mongoDB 中的查询函数，现在我们讲mongo中如何做分页查询      如何声明一个游标        var mycursor = db.user.find({_id:{$lte:5}});       迭代显示游标数
  • MySQL数据库INNODB 表损坏修复处理过程 0624chenhong tomcatmysql
    最近mysql数据库经常死掉，用命令net stop mysql命令也无法停掉，关闭Tomcat的时候，出现Waiting for N instance(s) to be deallocated 信息。查了下，大概就是程序没有对数据库连接释放，导致Connection泄露了。因为用的是开元集成的平台，内部程序也不可能一下子给改掉的，就验证一下咯。启动Tomcat,用户登录系统，用netstat -
  • 剖析如何与设计人员沟通 不懂事的小屁孩 工作
    最近做图烦死了，不停的改图，改图……。烦，倒不是因为改，而是反反复复的改，人都会死。很多需求人员不知该如何与设计人员沟通，不明白如何使设计人员知道他所要的效果，结果只能是沟通变成了扯淡，改图变成了应付。 那应该如何与设计人员沟通呢？ 我认为设计人员与需求人员先天就存在语言障碍。对一个合格的设计人员来说，整天玩的都是点、线、面、配色，哪种构图看起来协调；哪种配色看起来合理心里跟明镜似的，
  • qq空间刷评论工具 换个号韩国红果果 JavaScript
    var a=document.getElementsByClassName('textinput'); var b=[]; for(var m=0;m<a.length;m++){ if(a[m].getAttribute('placeholder')!=null) b.push(a[m]) } var l
  • S2SH整合之session 灵静志远 springAOPstrutssession
    错误信息： Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'cartService': Scope 'session' is not active for the current thread; consider defining a scoped
  • xmp标签 a-john 标签
    今天在处理数据的显示上遇到一个问题： var html = '<li><div class="pl-nr"><span class="user-name">' + user + '</span>' + text + '</div></li>'; ulComme
  • Ajax的常用技巧（2）---实现Web页面中的级联菜单 aijuans Ajax
    在网络上显示数据，往往只显示数据中的一部分信息，如文章标题，产品名称等。如果浏览器要查看所有信息，只需点击相关链接即可。在web技术中，可以采用级联菜单完成上述操作。根据用户的选择，动态展开，并显示出对应选项子菜单的内容。 在传统的web实现方式中，一般是在页面初始化时动态获取到服务端数据库中对应的所有子菜单中的信息，放置到页面中对应的位置，然后再结合CSS层叠样式表动态控制对应子菜单的显示或者隐
  • 天-安-门，好高 atongyeye 情感
        我是85后，北漂一族，之前房租1100，因为租房合同到期，再续，房租就要涨150。最近网上新闻，地铁也要涨价。算了一下，涨价之后，每次坐地铁由原来2块变成6块。仅坐地铁费用，一个月就要涨200。内心苦痛。     晚上躺在床上一个人想了很久，很久。        我生在农
  • android 动画 百合不是茶 android透明度平移缩放旋转
    android的动画有两种  tween动画和Frame动画   tween动画;,透明度,缩放,旋转,平移效果   Animation   动画 AlphaAnimation 渐变透明度 RotateAnimation 画面旋转 ScaleAnimation 渐变尺寸缩放 TranslateAnimation 位置移动 Animation
  • 查看本机网络信息的cmd脚本 bijian1013 cmd
    @echo 您的用户名是：%USERDOMAIN%\%username%>"%userprofile%\网络参数.txt" @echo 您的机器名是：%COMPUTERNAME%>>"%userprofile%\网络参数.txt" @echo ___________________>>"%userprofile%\
  • plsql 清除登录过的用户 征客丶 plsql
    tools---preferences----logon history---history  把你想要删除的删除 -------------------------------------------------------------------- 若有其他凝问或文中有错误，请及时向我指出， 我好及时改正，同时也让我们一起进步。 email ： binary_spac
  • 【Pig一】Pig入门 bit1129 pig
    Pig安装 1.下载pig   wget http://mirror.bit.edu.cn/apache/pig/pig-0.14.0/pig-0.14.0.tar.gz   2. 解压配置环境变量      如果Pig使用Map/Reduce模式，那么需要在环境变量中，配置HADOOP_HOME环境变量   expor
  • Java 线程同步几种方式 BlueSkator volatilesynchronizedThredLocalReenTranLockConcurrent
    为何要使用同步？      java允许多线程并发控制，当多个线程同时操作一个可共享的资源变量时（如数据的增删改查），      将会导致数据不准确，相互之间产生冲突，因此加入同步锁以避免在该线程没有完成操作之前，被其他线程的调用，      从而保证了该变量的唯一性和准确性。 1.同步方法&
  • StringUtils判断字符串是否为空的方法（转帖） BreakingBad nullStringUtils“”
    转帖地址：http://www.cnblogs.com/shangxiaofei/p/4313111.html   public static boolean isEmpty(String str)   　　判断某字符串是否为空，为空的标准是 str== null  或 str.length()== 0  
  • 编程之美-分层遍历二叉树 bylijinnan java数据结构算法编程之美
    import java.util.ArrayList; import java.util.LinkedList; import java.util.List; public class LevelTraverseBinaryTree { /** * 编程之美 分层遍历二叉树 * 之前已经用队列实现过二叉树的层次遍历，但这次要求输出换行，因此要
  • jquery取值和ajax提交复习记录 chengxuyuancsdn jquery取值ajax提交
    // 取值 // alert($("input[name='username']").val()); // alert($("input[name='password']").val()); // alert($("input[name='sex']:checked").val()); // alert($("
  • 推荐国产工作流引擎嵌入式公式语法解析器-IK Expression comsci java应用服务器工作Excel嵌入式
    这个开源软件包是国内的一位高手自行研制开发的，正如他所说的一样，我觉得它可以使一个工作流引擎上一个台阶。。。。。。欢迎大家使用，并提出意见和建议。。。 ----------转帖--------------------------------------------------- IK Expression是一个开源的（OpenSource），可扩展的（Extensible），基于java语言
  • 关于系统中使用多个PropertyPlaceholderConfigurer的配置及PropertyOverrideConfigurer daizj spring
    1、PropertyPlaceholderConfigurer Spring中PropertyPlaceholderConfigurer这个类，它是用来解析Java Properties属性文件值，并提供在spring配置期间替换使用属性值。接下来让我们逐渐的深入其配置。 基本的使用方法是：(1) <bean id="propertyConfigurerForWZ&q
  • 二叉树:二叉搜索树 dieslrae 二叉树
        所谓二叉树,就是一个节点最多只能有两个子节点,而二叉搜索树就是一个经典并简单的二叉树.规则是一个节点的左子节点一定比自己小,右子节点一定大于等于自己(当然也可以反过来).在树基本平衡的时候插入,搜索和删除速度都很快,时间复杂度为O(logN).但是,如果插入的是有序的数据,那效率就会变成O(N),在这个时候,树其实变成了一个链表. tree代码:
  • C语言字符串函数大全 dcj3sjt126com cfunction
    C语言字符串函数大全     函数名: stpcpy 功 能: 拷贝一个字符串到另一个 用 法: char *stpcpy(char *destin, char *source); 程序例:   #include <stdio.h> #include <string.h>   int main
  • 友盟统计页面技巧 dcj3sjt126com 技巧
    在基类调用就可以了, 基类ViewController示例代码 -(void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; [MobClick beginLogPageView:[NSString stringWithFormat:@"%@",self.class]];
  • window下在同一台机器上安装多个版本jdk，修改环境变量不生效问题处理办法 flyvszhb javajdk
    window下在同一台机器上安装多个版本jdk，修改环境变量不生效问题处理办法 本机已经安装了jdk1.7，而比较早期的项目需要依赖jdk1.6，于是同时在本机安装了jdk1.6和jdk1.7. 安装jdk1.6前，执行java -version得到 C:\Users\liuxiang2>java -version java version "1.7.0_21&quo
  • Java在创建子类对象的同时会不会创建父类对象 happyqing java创建子类对象父类对象
      1.在thingking in java 的第四版第六章中明确的说了，子类对象中封装了父类对象，   2."When you create an object of the derived class, it contains within it a subobject of the base class. This subobject is the sam
  • 跟我学spring3 目录贴及电子书下载 jinnianshilongnian spring
        一、《跟我学spring3》电子书下载地址： 《跟我学spring3》  （1-7 和 8-13） http://jinnianshilongnian.iteye.com/blog/pdf     跟我学spring3系列 word原版 下载     二、 源代码下载 最新依
  • 第12章 Ajax（上） onestopweb Ajax
    index.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/
  • BI and EIM 4.0 at a glance blueoxygen BO
    http://www.sap.com/corporate-en/press.epx?PressID=14787   有机会研究下EIM家族的两个新产品~~~~   New features of the 4.0 releases of BI and EIM solutions include: Real-time in-memory computing –
  • Java线程中yield与join方法的区别 tomcat_oracle java
    长期以来，多线程问题颇为受到面试官的青睐。虽然我个人认为我们当中很少有人能真正获得机会开发复杂的多线程应用(在过去的七年中，我得到了一个机会)，但是理解多线程对增加你的信心很有用。之前，我讨论了一个wait()和sleep()方法区别的问题，这一次，我将会讨论join()和yield()方法的区别。坦白的说，实际上我并没有用过其中任何一个方法，所以，如果你感觉有不恰当的地方，请提出讨论。 &nb
  • android Manifest.xml选项 阿尔萨斯 Manifest
    结构 继承关系 public final class Manifest extends Objectjava.lang.Objectandroid.Manifest 内部类 class Manifest.permission权限 class Manifest.permission_group权限组 构造函数 public Manifest () 详细 androi
  • Oracle实现类split函数的方 zhaoshijie oracle
    关键字：Oracle实现类split函数的方 项目里需要保存结构数据，批量传到后他进行保存，为了减小数据量，子集拼装的格式，使用存储过程进行保存。保存的过程中需要对数据解析。但是oracle没有Java中split类似的函数。从网上找了一个，也补全了一下。 CREATE OR REPLACE TYPE t_split_100 IS TABLE OF VARCHAR2(100); cr