聊聊《重学前端》

这两天票圈被@Winter大大在极客时间平台推出的《重学前端》刷屏了,而且在微信群和知乎上都有相关讨论。讨论中各种声音都有,可算是热闹了。今天我也凑个热闹,来聊聊我对这个课程的看法。

先来看个大纲

整个系列包含三个部分,即构建Web应用程序或页面要用的最基本的三部分:HTMLCSSJavaScript

HTML部分

  1. HTML语义:只用divspan是不是就够了?

  2. HTML语义:一篇wiki文章究竟会用到哪些语义元素?

  3. 文档元信息:你知道head里一共能写哪几种标签吗?

  4. 链接:除了a标签,还有标签叫链接?

  5. 嵌入型元素:怎么link一个CSS要用href,而引入JS要用src呢?

  6. HTML标签:标签总结

  7. HTML语言:dtd到底是什么?

  8. ARIA:可访问性不止是给盲人用户的特性

初看了一下提纲中的八个部分。细思了一下,原本自以为相对了解HTML的我,有几点还是不敢肯定、准确的说出答案。那么从我自己的角度来看这几点。

HTML语义化

早期的前端开发者都会比较在意和注重这方面。随着时代的迁移,其实有很多同学开始不太在意这方面的细节。因此在很多网站通篇的只能看到div这样的标签元素。但事实上,像divspan这样的标签元素是没有任何语义化的,他们仅仅是只被运用于布局上。而且在任何浏览器中,都无法使用键盘让其获得焦点,另外也可访问性API也无法进行任何通信。事实上,构建一个具有语义化的页面或应用程序,我们除了使用具有语义化的HTML标签之外,还需要在结构做一些考量,比如说,headerfootermainasideemstrong标签,应该放在什么位置,应该在什么地方使用它们。

在我的认知里,一个具有语义化的页面是要经得起HTML标记验证服务的验证。另外还有一种更土的方式,那就是当你的Web页面在CSS裸奔的时候,结构清晰,而且不会影响用户对网站的浏览。更为高层次的呢?

写出来的HTML结构要让机器可以读懂,也要能让人可以读懂!

有关于HTML语义化相关的讨论也较多,其中 @E0 大大在知乎上的回答就很详细。有关于其他的讨论和文章,要是感兴趣的话,可以阅读下面的几篇文章:

  • The practical value of semantic HTML

  • Semantics in HTML 5

  • semantic html

  • Semantic HTML

  • Accessibility Through Semantic HTML

  • Let’s Talk about Semantics

能放些什么标签

标签是所有文档元素的容器,它包含了文档的全部信息。常见的信息主要包括:</code>、<code><base></code>、<code><style></code>、<code><link></code>、<code><script></code>和<code><noscript></code>等标签。而其中<code><meta></code>的信息量是最大的。比如:</p> <pre class="has"><code class="language-php"><meta charset="UTF-8"> <meta http-equiv="refresh" content="5;url=" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="150 words" /> <meta name="keywords" content="your tags" /> <meta name="robots" content="index,follow" /> <meta name="author" content="author name" /> <meta name="google" content="index,follow" /> <meta name="googlebot" content="index,follow" /> <meta name="verify" content="index,follow" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /><meta name="apple-mobile-web-app-title" content="标题"> <meta content="telephone=no" name="format-detection" /><meta content="email=no" name="format-detection" /> <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" /> <meta name="HandheldFriendly" content="true"> <meta name="MobileOptimized" content="320"><meta name="screen-orientation" content="portrait"><meta name="x5-orientation" content="portrait"><meta name="full-screen" content="yes"><meta name="x5-fullscreen" content="true"><meta name="browsermode" content="application"><meta name="x5-page-mode" content="app"><meta name="msapplication-tap-highlight" content="no"> </code></pre> <p>有关于<code>meta</code>标签更详细的介绍可以阅读:</p> <ul> <li><p>Meta 标签与搜索引擎优化</p></li> <li><p>meta 标签大全</p></li> <li><p>HTML Meta标签知多少</p></li> <li><p>HTML Tags for SEO: to use or not to use?</p></li> <li><p>Complete list of html meta tags/</p></li> </ul> <h4>链接:除了<code>a</code>标签,还有标签叫链接?</h4> <p>这个话题我比较期待。在HTML中除了<code><a></code>标签,还有什么标签叫链接?在我的印象中,<code><area></code>标签有点类似于<code><a></code>标签,可以做链接跳转。但是不是这个答案,我将期待着。</p> <h4>怎么<code>link</code>一个CSS要用<code>href</code>,而引入JS要用<code>src</code>呢?</h4> <p>这个问题真没有细想过。前段时间刚好在哪翻到过这方面的讨论,可以找不到答案了。不过在stackoverflow网站上也有一个类似的问题。看了一个点赞较高的答案:</p> <blockquote> <p>简单点说,使用<code>src</code>表达的是该无事的内容可以被替换,比如<code>img</code>、<code>script</code>、<code>iframe</code>元素;<code>href</code>表达的是超链接,与引用文档或外部资源建立关系,比如<code>a</code>,<code>link</code>等元素。</p> </blockquote> <h4>其他</h4> <p>另外几条,相对而言接触的比较多。特别是ARIA相关的方面。有关于ARIA相关的东西,在24 Accessibility网站有很多话题。另外在Web内容无障碍指南 2.0是ARIA方面最新的规范指南。</p> <h3>CSS部分</h3> <ol> <li><p>媒体、分页、视口:除了属性和选择器,你还要知道这些带<code>@</code>的规则</p></li> <li><p>选择器:为什么只有子元素选择器,没有父元素选择器</p></li> <li><p>布局正常流:其实从毕升开始,你们就在用正常流</p></li> <li><p>布局弹性盒:垂直居中为什么这么难?</p></li> <li><p>文本:<code>baseline</code>到底是啥东西?</p></li> <li><p>颜色与形状:CSS是如何绘制颜色与形状的?</p></li> <li><p>动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?</p></li> <li><p>CSS属性:CSS总结</p></li> </ol> <p>对于CSS部分而言,自己相对接触的比较多一点,如果要把CSS方面的东西讲全,那足可以讲好久,甚至花一本书的章节来介绍,都不一定难阐述的完。简单的列了一个大纲,差不多有26章节的内容可聊。自己也在根据这个大纲完善内容。相比之下,我在完善的内容是怎么使用CSS,而@winter大大在聊的是为什么?比如其中:</p> <ul> <li><p>选择器:为什么只有子元素选择器,没有父元素选择器</p></li> <li><p>布局弹性盒:垂直居中为什么这么难?</p></li> <li><p>文本:<code>baseline</code>到底是啥东西?</p></li> <li><p>颜色与形状:CSS是如何绘制颜色与形状的?</p></li> <li><p>动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?</p></li> </ul> <p>上述几个问题?好几个都不知道是为什么?正好跟着大大的思路学习一下,大神是如何深入理解这些。这将为我以后深入学习CSS将会有很大的帮助。对于贝塞尔曲线和颜色,向大家推荐一篇文章,介绍的非常详细:</p> <ul> <li><p>Bezier Curves from the Ground Up</p></li> <li><p>Color: From Hexcodes to Eyeballs</p></li> </ul> <h3>JavaScript</h3> <ol> <li><p>类型:关于类型,有哪些你忽视的细节</p></li> <li><p>对象:JavaScript是面向对象还是基于对象</p></li> <li><p>对象:JavaScript中,我们真的需要模拟类吗</p></li> <li><p>函数:<code>this</code>有什么用?应该怎么用?</p></li> <li><p>函数:JavaScript里的闭包到底要怎么用?适合用在哪里?</p></li> <li><p>事件循环与微任务:<code>Promise</code>里的代码为什么比<code>setTimeout</code>先执行</p></li> <li><p>语句:<code>try</code>里面放<code>return</code>,<code>finally</code>还会执行吗</p></li> <li><p>语句:为什么<code>1.toString</code>会报错</p></li> <li><p>运算符与表达式:新加入的<code>**</code>运算符,好像有哪里不一样</p></li> <li><p>语句,程序与表达式:在<code>script</code>标签里写<code>export</code>为什么会抛错</p></li> <li><p>分号自动补全:到底要不要写分号呢</p></li> </ol> <p>对于JavaScript部分,一直是我的弱项,今年立个flag,希望能跟着把这方面的知识增强一些。</p> <h3>浏览器实现原与API</h3> <p>很早温大就跟我说,要好好把浏览器的原理方面的知识理解透,这将有益学习和理解一些深层次的东西。但一直以来没有进展。这次专栏中提到了:</p> <ul> <li><p>浏览器的工作原理:你最熟悉的浏览器,是怎么写出来的(上)</p></li> <li><p>浏览器的工作原理:你最熟悉的浏览器,是怎么写出来的(中)</p></li> <li><p>浏览器的工作原理:你最熟悉的浏览器,是怎么写出来的(下)</p></li> <li><p>DOM:如何用JS操作文档</p></li> <li><p>CSSOM:如何获取一个元素的准确位置</p></li> <li><p>事件:捕获模型和冒泡模型到底是怎么来的</p></li> <li><p>其它一些API:API总集合</p></li> </ul> <p>有关于浏览器原理相关的文章,在互联网上也相当的多,其中有几篇文章我觉得还是不错的,值得推荐给大家:</p> <ul> <li><p>浏览器的渲染原理简介</p></li> <li><p>图解浏览器的工作原理</p></li> <li><p>浏览器的工作原理:新式网络浏览器幕后揭秘</p></li> </ul> <p>要Google开发者网站上,2018年@Mariko Kosaka也推出了四篇文章,深入的介绍了浏览器的工作原理:</p> <ul> <li><p>Inside look at modern web browser (part 1)【译文】</p></li> <li><p>Inside look at modern web browser (part 2)【译文】</p></li> <li><p>Inside look at modern web browser (part 3)【译文】</p></li> <li><p>Inside look at modern web browser (part 4)</p></li> </ul> <p>对于DOM和CSSOM,在18年还是花了不少时间在学习,其中还是有不少的收获,但我想听完这个课之后,再回过头来对比之前学习的笔记,我想也会有较大的收获吧。</p> <h3>前端综合应用</h3> <ol> <li><p>性能:前端性能到底对业务数据有多大的影响</p></li> <li><p>工具链:什么样的工具链才能提升团队效率</p></li> <li><p>持续集成:几十个前端一起工作,怎么保证基本质量</p></li> <li><p>搭建系统:大量的低价值需求如何应付</p></li> <li><p>架构与基础库: 如何设计基础库</p></li> </ol> <p>这是专栏的第四部分,我也很感兴趣。期待专栏也早点出来,估计很多同学都对这一部分很感兴趣的吧。有关于性能方面的,我也推荐几篇文章:</p> <ul> <li><p>Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word]</p></li> <li><p>前端性能优化の备忘录(2018版)</p></li> <li><p>前端性能优化の备忘录(2017版)</p></li> </ul> <h2>最后说一点</h2> <p>不少同学在说:</p> <blockquote> <p>购买,这个课程是在交智商税</p> </blockquote> <p>就此问题,@winter也针对性的做了阐述。感兴趣的可以点击这里。我只想说,<strong>智者见知,仁者见仁</strong>。</p> <p>也有不少同学在说:</p> <blockquote> <p>这个专栏的内容太简单了。</p> </blockquote> <p>对而我言,虽然”<strong>很基础</strong>“,但我还有很多都不知道,特别是其中的为什么?就拿我擅长的CSS来说吧,大纲中的八个,我就有一大半不知道为什么?这就是与大神的差距。</p> <p>另外,我记得前段时间在Hacker News上提出这样的一个问题”<strong>Stop Learning Frameworks</strong>“。平时也有同学问我,应该不应该去学习JS框架。其实就我个人而言,我更强调先把基础学好,如果工作是要用到框架,可以边学边用,但对于基础还是要扎实一点。</p> <p>不扯了,如果大家觉得这个课程不错,可以入手:</p> <p style="text-align: center"><a href="http://img.e-com-net.com/image/info8/0b3fee499ad340ba9c1db4e79488e442.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0b3fee499ad340ba9c1db4e79488e442.jpg" width="650" height="1156" alt="聊聊《重学前端》_第1张图片" style="border:1px solid black;"></a></p> </div> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1276484832758611968"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(聊聊《重学前端》)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题,尤其是当后端使用Java的Long类型(64位)与前端JavaScript的Number类型(最大安全整数为2^53-1,即16位)进行数据交互时,很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业:【HTML5网页期末作业(1000套)】程序员有趣的告白方式:【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> <span class="text-muted">加密社</span> <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中,事件(Events)是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更,还能够让外部系统(如前端应用)监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时,该事件会被记录在区块链的交易收据中。具体而言,事件</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业,Web大学生网页HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript:做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835469862235893760.htm" title="为什么你总是对下属不满意?" target="_blank">为什么你总是对下属不满意?</a> <span class="text-muted">ZhaoWu1050</span> <div>【ZhaoWu的听课笔记】大多数公司,都存在两种问题。我创业四年,更是体会深切。这两种问题就是:老板经常不满意下属的表现;下属总是不知道老板想要什么;虽然这两种问题普遍存在,其实解决方法并不复杂。这节课,我们再聊聊第一个问题:为什么老板经常不满意下属表现?其实,这背后也是一条管理常识。管理学家德鲁克先生早就说过:管理者的任务,不是去改变人。*来自《卓有成效的管理者》只是大多数老板和我一样,都是一边</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> <span class="text-muted">苹果酱0567</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>这段时间抽空给女朋友搭建一个个人博客,想着记录一下建站的过程,就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站,或者用cms系统,三四个小时就可以做出一个前后台都有的网站,而且想做成啥样也都行。但是就是要从新做,自己做的意义不一样,更何况,俺就是专门干这个的,嘿嘿嘿要做一个网站,而且从零开始,首先呢就是技术选型了,经过一番思量决定选择-SpringBoot做后端,前端使用Vue做一</div> </li> <li><a href="/article/1835441611320946688.htm" title="阅读笔记:阅读方法中的逻辑和转念" target="_blank">阅读笔记:阅读方法中的逻辑和转念</a> <span class="text-muted">施吉涛</span> <div>聊聊一些阅读的方法论吧,别人家的读书方法刚开始想写,然后就不知道写什么了,因为作者写的非常的“精致”我有一种乡巴佬进城的感觉,看到精美的摆盘,精致的食材不知道该如何下口也就是《阅读的方法》,我们姑且来试一下强劲的大脑篇,第一节:逻辑通俗的来讲,也就是表达的排列和顺序,再进一步就是因果关系和关联实际上书已经看了大概一遍,但直到打算写一下笔记的时候,才发现作者讲的推理更多的是阅读的对象中呈现出的逻辑也</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> <span class="text-muted">2401_85194651</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架:后端:Java+SpringBoot数据库:MySQL前端:Vue.js数据库连接:JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835428317084348416.htm" title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a> <span class="text-muted">全能全知者</span> <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了,所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态:sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器:安装Apache:sudoyuminstallhttpd启动Apache:sudosystemctl</div> </li> <li><a href="/article/1835427057752961024.htm" title="补充元象二面" target="_blank">补充元象二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.请尽可能详细地说明,防抖和节流的区别,应用场景?你的回答中不要写出示例代码。防抖(Debounce)和节流(Throttle)是两种常用的前端性能优化技术,它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明:防抖和节流的定义防抖:在一段时间内,多次执行变为只执行最后一次。防抖的原理是,当事件被触发后,设置一个延迟定时器。如果在这个延迟时间内事件再次被触发,则重</div> </li> <li><a href="/article/1835420753252675584.htm" title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a> <span class="text-muted">jun778895</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务(可选)以及微信小程序平台特性的综合性项目。这里,我将详细介绍一个典型的小程序开发项目的全过程,包括项目规划、设计、开发、测试及部署上线等各个环节,并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序,旨在为学生提供一站式校园生活服务,包括课程表查询、图书馆座位预约、食堂</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人,面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中,我获得了宝贵的实践经验和深刻的行业洞察,以下是我的主要收获和感悟:一、专业技能提升框架应用熟练度:通过实际项目,我深入掌握了React、Vue等前端框架的使用,不仅提升了编码效率,还学会了如何根据项目需求选择合适的框架。问题解决能力:在实习期间,我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835399688270999552.htm" title="新的一年,春节假期期间,你有没有去深度思考过自己的未来?" target="_blank">新的一年,春节假期期间,你有没有去深度思考过自己的未来?</a> <span class="text-muted">十八点心理</span> <div>新的一年,是不是应该思考些什么?是继续和亲朋好友聊聊天,还是想一条属于自己的路?我们很多人会在过年的氛围中去享受当下的一切,打打麻将、打打牌、聊聊天、侃侃大山,整个人的精神状态特别好。觉得完全有一种自我满足的状态体验。但是从另外一个层面看,看到那些厉害的人,那些对于自己人生取得巨大成就的人来说,根本没有春节休息一说,在春节时分,还在见缝插针去写点文章、录个视频、思考新一年的规划。当看到那种忙碌的身</div> </li> <li><a href="/article/1835398064727224320.htm" title="前端代码上传文件" target="_blank">前端代码上传文件</a> <span class="text-muted">余生逆风飞翔</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div> </li> <li><a href="/article/1835386714550530048.htm" title="2021.9.26 王老师直播笔记" target="_blank">2021.9.26 王老师直播笔记</a> <span class="text-muted">wan恋空</span> <div>案例一孩子想要iPad,爸爸妈妈不同意,孩子在家闹平时老公暴躁会摔手机,孩子会不尊重骂自己总结问题老公儿子很任性1.注意力放到老公和自己的身上一个成熟比较横的男人,需要一个成熟比较理智的女人。2.做好自己的角色*儿子你必须尊重我,接受原则做事。少说教,多谈感受3.找一群志同道合的朋友聊聊,改变圈子案例二女儿六岁觉得老师讲课有问题指出来。做事要有策略六岁可以指出来,六岁以后就不可以了女儿小时候在姥姥</div> </li> <li><a href="/article/1835385458356482048.htm" title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a> <span class="text-muted">2401_85123349</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢?比如说上面gif图中的这些人物对象,有一些已被该用户添加为关心,那么当用户下一次进入该页面时,这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大,只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先,整体的思路是利用动态类名对不同的元素进行选择。</div> </li> <li><a href="/article/1835375021443346432.htm" title="山东名面孔-名医扁鹊" target="_blank">山东名面孔-名医扁鹊</a> <span class="text-muted">西城诫子</span> <div>一场新冠疫情,让世人领略了中医的博大精深,今天的“山东名面孔”我们就一起聊聊第一位被载入史册的中医:扁鹊。扁鹊墓位于今天的济南市北郊鹊山脚下,元代大画家赵孟頫的《鹊华秋色图》里描绘的就是鹊山一带的景色。关于扁鹊,世人误解颇多,首先,扁鹊到底是不是真人呢?其实,古人认为医生所到之处,病患消散,像喜鹊一样能够带来吉兆,所以想象出一个神话形象,取名“扁鹊”。如此说来,扁鹊只是个神话人物吗?其实不然。《史</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> <span class="text-muted">马小蜗</span> <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点:灵活度、可控性、性能</div> </li> <li><a href="/article/1835368019430305792.htm" title="Vue + Express实现一个表单提交" target="_blank">Vue + Express实现一个表单提交</a> <span class="text-muted">九旬大爷的梦</span> <div>最近在折腾一个cms系统,用的vue+express,但是就一个表单提交就弄了好久,记录一下。环境:Node10+前端:Vue服务端:Express依赖包:vueexpressaxiosexpress-formidableelement-ui(可选)前言:axiosget请求参数是:paramsaxiospost请求参数是:dataexpressget接受参数是req.queryexpresspo</div> </li> <li><a href="/article/1835355669612556288.htm" title="学习| 积极心理学—习得性无助" target="_blank">学习| 积极心理学—习得性无助</a> <span class="text-muted">benignHu</span> <div>习得性无助——不知不觉,你居然习得了可怕的无助,从此,它将长久伴随着你,轻易不肯离去。“习得性无助”是积极心理学之父塞利格曼的研究成果,其概念由其提出。也正是因为“习得性无助”的发现,才有后来的积极心理学,所以今天我们来好好聊聊何谓习得性无助,如何走出习得性无助。01、习得性无助一、习得性无助的由来习得性无助源于经典心理学实验:美国著名心理学家、教育心理学的创始人爱德华·李·桑代克是一个科学心理学</div> </li> <li><a href="/article/1835354447627251712.htm" title="前端知识点" target="_blank">前端知识点</a> <span class="text-muted">ZhangTao_zata</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div> </li> <li><a href="/article/1835352325032603648.htm" title="第三十一节:Vue路由:前端路由vs后端路由的了解" target="_blank">第三十一节:Vue路由:前端路由vs后端路由的了解</a> <span class="text-muted">曹老师</span> <div>1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访</div> </li> <li><a href="/article/1835350917352878080.htm" title="华雁智科前端面试题" target="_blank">华雁智科前端面试题</a> <span class="text-muted">因为奋斗超太帅啦</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AF%95%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98%E6%95%B4%E7%90%86/1.htm">前端笔试面试问题整理</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>1.var变量的提升题目:vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果:undefined、1答错了,给一个大嘴巴子,错误答案输出结果为:2,1此题主要考察var定义的变量,作用域提升的问题,相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l</div> </li> <li><a href="/article/1835350535818014720.htm" title="如何建设数据中台(五)——数据汇集—打破企业数据孤岛" target="_blank">如何建设数据中台(五)——数据汇集—打破企业数据孤岛</a> <span class="text-muted">weixin_47088026</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95%E5%92%8C%E6%80%BB%E7%BB%93/1.htm">学习记录和总结</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E5%8F%B0/1.htm">中台</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%8F%B0/1.htm">数据中台</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>数据汇集——打破企业数据孤岛要构建企业级数据中台,第一步就是将企业内部各个业务系统的数据实现互通互联,打破数据孤岛,主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种,对应有系统平台、网页、H5、小程序、App等,可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集,例如:WiFi</div> </li> <li><a href="/article/1835343473629294592.htm" title="分布式锁和spring事务管理" target="_blank">分布式锁和spring事务管理</a> <span class="text-muted">暴躁的鱼</span> <a class="tag" taget="_blank" href="/search/%E9%94%81%E5%8F%8A%E4%BA%8B%E5%8A%A1/1.htm">锁及事务</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点,对景点地区或者城市标记是否想去,那么需要统计一个地点被标记的人数,以及记录某个用户对某个地点是否标记为想去,用两个表存储数据,一个地点表记录改地点被标记的次数,一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点,每个用户在前端点击想去按钮之后,后台接收到请求,从数据</div> </li> <li><a href="/article/1835340577596600320.htm" title="前端CSS面试常见题" target="_blank">前端CSS面试常见题</a> <span class="text-muted">剑亦未配妥</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>边界塌陷盒模型有两种:W3C盒模型和IE盒模型,区别在于宽度是否包含边框定义:同时给兄弟/父子盒模型设置上下边距,理论上边距值是两者之和,实际上不是注意:浮动和定位不会产生边界塌陷;只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负:取绝对值大的值一正一负:求和父子元素边界塌陷解决父元素可以通过调整padding处理;设置overflowhidden,触发BFC子</div> </li> <li><a href="/article/1835331376895848448.htm" title="【JS】前端文件读取FileReader操作总结" target="_blank">【JS】前端文件读取FileReader操作总结</a> <span class="text-muted">程序员-张师傅</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI,它允许web应用程序异步读取用户计算机上的文件(或原始数据缓冲区)的内容,例如读取文件以获取其内容,并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用,尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先,你需要创建一个Fi</div> </li> <li><a href="/article/1835331375377510400.htm" title="【前端】vue 报错:The template root requires exactly one element" target="_blank">【前端】vue 报错:The template root requires exactly one element</a> <span class="text-muted">程序员-张师傅</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中,当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时,这通常意味着你的Vue组件的模板(template)根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况:模板中有多个并行</div> </li> <li><a href="/article/1835326105335197696.htm" title="和大家聊聊跨境电子商务网购保税进口的那些事。" target="_blank">和大家聊聊跨境电子商务网购保税进口的那些事。</a> <span class="text-muted">万一我爱上你了呢</span> <div>怎么知道自己购买的商品是否如商家宣传的那样,属于“正规方式”进口的跨境商品?可以通过查询个人跨境电商年度消费额度的方式进行验证:1.登录中国国际贸易单一窗口,进行用户注册或登录。2.找到相应入口,进入“公共服务”页面。如图所示,选择对应年份进行个人额度查询。3.在“已消费金额”一栏中,如果存在消费金额,还可以点击消费金额从而打开消费明细,列出消费者在跨境电商渠道购买,并正式向海关申报的跨境电商零售</div> </li> <li><a href="/article/21.htm" title="矩阵求逆(JAVA)利用伴随矩阵" target="_blank">矩阵求逆(JAVA)利用伴随矩阵</a> <span class="text-muted">qiuwanchi</span> <a class="tag" taget="_blank" href="/search/%E5%88%A9%E7%94%A8%E4%BC%B4%E9%9A%8F%E7%9F%A9%E9%98%B5%E6%B1%82%E9%80%86%E7%9F%A9%E9%98%B5/1.htm">利用伴随矩阵求逆矩阵</a> <div>package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(利用伴随矩阵) * @author 邱万迟 </div> </li> <li><a href="/article/148.htm" title="单例(Singleton)模式" target="_blank">单例(Singleton)模式</a> <span class="text-muted">aoyouzi</span> <a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E5%BC%8F/1.htm">模式</a><a class="tag" taget="_blank" href="/search/Singleton/1.htm">Singleton</a> <div>3.1           概述 如果要保证系统里一个类最多只能存在一个实例时,我们就需要单例模式。这种情况在我们应用中经常碰到,例如缓存池,数据库连接池,线程池,一些应用服务实例等。在多线程环境中,为了保证实例的唯一性其实并不简单,这章将和读者一起探讨如何实现单例模式。 3.2</div> </li> <li><a href="/article/275.htm" title="[开源与自主研发]就算可以轻易获得外部技术支持,自己也必须研发" target="_blank">[开源与自主研发]就算可以轻易获得外部技术支持,自己也必须研发</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a> <div>       现在国内有大量的信息技术产品,都是通过盗版,免费下载,开源,附送等方式从国外的开发者那里获得的。。。。。。        虽然这种情况带来了国内信息产业的短暂繁荣,也促进了电子商务和互联网产业的快速发展,但是实际上,我们应该清醒的看到,这些产业的核心力量是被国外的</div> </li> <li><a href="/article/402.htm" title="页面有两个frame,怎样点击一个的链接改变另一个的内容" target="_blank">页面有两个frame,怎样点击一个的链接改变另一个的内容</a> <span class="text-muted">Array_06</span> <a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/XHTML/1.htm">XHTML</a> <div><a src="地址"  targets="这里写你要操作的Frame的名字" />搜索 然后你点击连接以后你的新页面就会显示在你设置的Frame名字的框那里 targerts="",就是你要填写目标的显示页面位置 ===================== 例如: <frame src=&</div> </li> <li><a href="/article/529.htm" title="Struts2实现单个/多个文件上传和下载" target="_blank">Struts2实现单个/多个文件上传和下载</a> <span class="text-muted">oloz</span> <a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0/1.htm">文件上传</a><a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a> <div>struts2单文件上传:     步骤01:jsp页面 <!--在进行文件上传时,表单提交方式一定要是post的方式,因为文件上传时二进制文件可能会很大,还有就是enctype属性,这个属性一定要写成multipart/form-data,不然就会以二进制文本上传到服务器端-->   <form action="fileUplo</div> </li> <li><a href="/article/656.htm" title="推荐10个在线logo设计网站" target="_blank">推荐10个在线logo设计网站</a> <span class="text-muted">362217990</span> <a class="tag" taget="_blank" href="/search/logo/1.htm">logo</a> <div>在线设计Logo网站。 1、http://flickr.nosv.org(这个太简单) 2、http://www.logomaker.com/?source=1.5770.1 3、http://www.simwebsol.com/ImageTool 4、http://www.logogenerator.com/logo.php?nal=1&tpl_catlist[]=2 5、ht</div> </li> <li><a href="/article/783.htm" title="jsp上传文件" target="_blank">jsp上传文件</a> <span class="text-muted">香水浓</span> <a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/fileupload/1.htm">fileupload</a> <div>1. jsp上传 Notice: 1. form表单 method 属性必须设置为 POST 方法 ,不能使用 GET 方法 2. form表单 enctype 属性需要设置为 multipart/form-data 3. form表单 action 属性需要设置为提交到后台处理文件上传的jsp文件地址或者servlet地址。例如 uploadFile.jsp 程序文件用来处理上传的文</div> </li> <li><a href="/article/910.htm" title="我的架构经验系列文章 - 前端架构" target="_blank">我的架构经验系列文章 - 前端架构</a> <span class="text-muted">agevs</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/jQuer/1.htm">jQuer</a> <div>框架层面:近几年前端发展很快,前端之所以叫前端因为前端是已经可以独立成为一种职业了,js也不再是十年前的玩具了,以前富客户端RIA的应用可能会用flash/flex或是silverlight,现在可以使用js来完成大部分的功能,因此js作为一门前端的支撑语言也不仅仅是进行的简单的编码,越来越多框架性的东西出现了。越来越多的开发模式转变为后端只是吐json的数据源,而前端做所有UI的事情。MVCMV</div> </li> <li><a href="/article/1037.htm" title="android ksoap2 中把XML(DataSet) 当做参数传递" target="_blank">android ksoap2 中把XML(DataSet) 当做参数传递</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>我的android app中需要发送webservice ,于是我使用了 ksop2 进行发送,在测试过程中不是很顺利,不能正常工作.我的web service 请求格式如下     [html]  view plain copy   <Envelope xmlns="http://schemas.</div> </li> <li><a href="/article/1164.htm" title="使用Spring进行统一日志管理 + 统一异常管理" target="_blank">使用Spring进行统一日志管理 + 统一异常管理</a> <span class="text-muted">baalwolf</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>统一日志和异常管理配置好后,SSH项目中,代码以往散落的log.info() 和 try..catch..finally 再也不见踪影! 统一日志异常实现类: [java]  view plain copy   package com.pilelot.web.util;      impor</div> </li> <li><a href="/article/1291.htm" title="Android SDK 国内镜像" target="_blank">Android SDK 国内镜像</a> <span class="text-muted">BigBird2012</span> <a class="tag" taget="_blank" href="/search/android+sdk/1.htm">android sdk</a> <div>一、镜像地址: 1、东软信息学院的 Android SDK 镜像,比配置代理下载快多了。 配置地址, http://mirrors.neusoft.edu.cn/configurations.we#android 2、北京化工大学的: IPV4:ubuntu.buct.edu.cn  IPV4:ubuntu.buct.cn IPV6:ubuntu.buct6.edu.cn </div> </li> <li><a href="/article/1418.htm" title="HTML无害化和Sanitize模块" target="_blank">HTML无害化和Sanitize模块</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/Linky/1.htm">Linky</a><a class="tag" taget="_blank" href="/search/Sanitize/1.htm">Sanitize</a> <div>一.ng-bind-html、ng-bind-html-unsafe         AngularJS非常注重安全方面的问题,它会尽一切可能把大多数攻击手段最小化。其中一个攻击手段是向你的web页面里注入不安全的HTML,然后利用它触发跨站攻击或者注入攻击。         考虑这样一个例子,假设我们有一个变量存</div> </li> <li><a href="/article/1545.htm" title="[Maven学习笔记二]Maven命令" target="_blank">[Maven学习笔记二]Maven命令</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>mvn compile compile编译命令将src/main/java和src/main/resources中的代码和配置文件编译到target/classes中,不会对src/test/java中的测试类进行编译 MVN编译使用 maven-resources-plugin:2.6:resources maven-compiler-plugin:2.5.1:compile &nbs</div> </li> <li><a href="/article/1672.htm" title="【Java命令二】jhat" target="_blank">【Java命令二】jhat</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Java%E5%91%BD%E4%BB%A4/1.htm">Java命令</a> <div>jhat用于分析使用jmap dump的文件,,可以将堆中的对象以html的形式显示出来,包括对象的数量,大小等等,并支持对象查询语言。 jhat默认开启监听端口7000的HTTP服务,jhat是Java Heap Analysis Tool的缩写 1. 用法: [hadoop@hadoop bin]$ jhat -help Usage: jhat [-stack <bool&g</div> </li> <li><a href="/article/1799.htm" title="JBoss 5.1.0 GA:Error installing to Instantiated: name=AttachmentStore state=Desc" target="_blank">JBoss 5.1.0 GA:Error installing to Instantiated: name=AttachmentStore state=Desc</a> <span class="text-muted">ronin47</span> <div>进到类似目录 server/default/conf/bootstrap,打开文件 profile.xml找到: Xml代码<bean    name="AttachmentStore"  class="org.jboss.system.server.profileservice.repository.AbstractAtta</div> </li> <li><a href="/article/1926.htm" title="写给初学者的6条网页设计安全配色指南" target="_blank">写给初学者的6条网页设计安全配色指南</a> <span class="text-muted">brotherlamp</span> <a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/ui%E8%87%AA%E5%AD%A6/1.htm">ui自学</a><a class="tag" taget="_blank" href="/search/ui%E8%A7%86%E9%A2%91/1.htm">ui视频</a><a class="tag" taget="_blank" href="/search/ui%E6%95%99%E7%A8%8B/1.htm">ui教程</a><a class="tag" taget="_blank" href="/search/ui%E8%B5%84%E6%96%99/1.htm">ui资料</a> <div>网页设计中最基本的原则之一是,不管你花多长时间创造一个华丽的设计,其最终的角色都是这场秀中真正的明星——内容的衬托     我仍然清楚地记得我最早的一次美术课,那时我还是一个小小的、对凡事都充满渴望的孩子,我摆放出一大堆漂亮的彩色颜料。我仍然记得当我第一次看到原色与另一种颜色混合变成第二种颜色时的那种兴奋,并且我想,既然两种颜色能创造出一种全新的美丽色彩,那所有颜色</div> </li> <li><a href="/article/2053.htm" title="有一个数组,每次从中间随机取一个,然后放回去,当所有的元素都被取过,返回总共的取的次数。写一个函数实现。复杂度是什么。" target="_blank">有一个数组,每次从中间随机取一个,然后放回去,当所有的元素都被取过,返回总共的取的次数。写一个函数实现。复杂度是什么。</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div> import java.util.Random; import java.util.Set; import java.util.TreeSet; /** * http://weibo.com/1915548291/z7HtOF4sx * #面试题#有一个数组,每次从中间随机取一个,然后放回去,当所有的元素都被取过,返回总共的取的次数。 * 写一个函数实现。复杂度是什么</div> </li> <li><a href="/article/2180.htm" title="struts2获得request、session、application方式" target="_blank">struts2获得request、session、application方式</a> <span class="text-muted">chiangfai</span> <a class="tag" taget="_blank" href="/search/application/1.htm">application</a> <div>1、与Servlet API解耦的访问方式。 a.Struts2对HttpServletRequest、HttpSession、ServletContext进行了封装,构造了三个Map对象来替代这三种对象要获取这三个Map对象,使用ActionContext类。 ----->   package pro.action; import java.util.Map; imp</div> </li> <li><a href="/article/2307.htm" title="改变python的默认语言设置" target="_blank">改变python的默认语言设置</a> <span class="text-muted">chenchao051</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div> import sys sys.getdefaultencoding()  可以测试出默认语言,要改变的话,需要在python lib的site-packages文件夹下新建: sitecustomize.py, 这个文件比较特殊,会在python启动时来加载,所以就可以在里面写上: import sys sys.setdefaultencoding('utf-8') &n</div> </li> <li><a href="/article/2434.htm" title="mysql导入数据load data infile用法" target="_blank">mysql导入数据load data infile用法</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%AF%BC%E5%85%A5%E6%95%B0%E6%8D%AE/1.htm">导入数据</a> <div>我们常常导入数据!mysql有一个高效导入方法,那就是load data infile 下面来看案例说明 基本语法: load data  [low_priority] [local] infile 'file_name txt' [replace | ignore] into table tbl_name [fields [terminated by't'] [OPTI</div> </li> <li><a href="/article/2561.htm" title="phpexcel导入excel表到数据库简单入门示例" target="_blank">phpexcel导入excel表到数据库简单入门示例</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/Excel/1.htm">Excel</a> <div> 跟导出相对应的,同一个数据表,也是将phpexcel类放在class目录下,将Excel表格中的内容读取出来放到数据库中 <?php error_reporting(E_ALL); set_time_limit(0); ?> <html> <head> <meta http-equiv="Content-Type" </div> </li> <li><a href="/article/2688.htm" title="22岁到72岁的男人对女人的要求" target="_blank">22岁到72岁的男人对女人的要求</a> <span class="text-muted">dcj3sjt126com</span> <div>22岁男人对女人的要求是:一,美丽,二,性感,三,有份具品味的职业,四,极有耐性,善解人意,五,该聪明的时候聪明,六,作小鸟依人状时尽量自然,七,怎样穿都好看,八,懂得适当地撒娇,九,虽作惊喜反应,但看起来自然,十,上了床就是个无条件荡妇。 32岁的男人对女人的要求,略作修定,是:一,入得厨房,进得睡房,二,不必服侍皇太后,三,不介意浪漫蜡烛配盒饭,四,听多过说,五,不再傻笑,六,懂得独</div> </li> <li><a href="/article/2815.htm" title="Spring和HIbernate对DDM设计的支持" target="_blank">Spring和HIbernate对DDM设计的支持</a> <span class="text-muted">e200702084</span> <a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/%E9%A2%86%E5%9F%9F%E6%A8%A1%E5%9E%8B/1.htm">领域模型</a> <div>A:数据访问对象     DAO和资源库在领域驱动设计中都很重要。DAO是关系型数据库和应用之间的契约。它封装了Web应用中的数据库CRUD操作细节。另一方面,资源库是一个独立的抽象,它与DAO进行交互,并提供到领域模型的“业务接口”。    资源库使用领域的通用语言,处理所有必要的DAO,并使用领域理解的语言提供对领域模型的数据访问服务。</div> </li> <li><a href="/article/2942.htm" title="NoSql 数据库的特性比较" target="_blank">NoSql 数据库的特性比较</a> <span class="text-muted">geeksun</span> <a class="tag" taget="_blank" href="/search/NoSQL/1.htm">NoSQL</a> <div>Redis 是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库,并提供多种语言的API。目前由VMware主持开发工作。   1. 数据模型 作为Key-value型数据库,Redis也提供了键(Key)和值(Value)的映射关系。除了常规的数值或字符串,Redis的键值还可以是以下形式之一: Lists (列表) Sets</div> </li> <li><a href="/article/3069.htm" title="使用 Nginx Upload Module 实现上传文件功能" target="_blank">使用 Nginx Upload Module 实现上传文件功能</a> <span class="text-muted">hongtoushizi</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div>转载自: http://www.tuicool.com/wx/aUrAzm   普通网站在实现文件上传功能的时候,一般是使用Python,Java等后端程序实现,比较麻烦。Nginx有一个Upload模块,可以非常简单的实现文件上传功能。此模块的原理是先把用户上传的文件保存到临时文件,然后在交由后台页面处理,并且把文件的原名,上传后的名称,文件类型,文件大小set到页面。下</div> </li> <li><a href="/article/3196.htm" title="spring-boot-web-ui及thymeleaf基本使用" target="_blank">spring-boot-web-ui及thymeleaf基本使用</a> <span class="text-muted">jishiweili</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/thymeleaf/1.htm">thymeleaf</a> <div>视图控制层代码demo如下:   @Controller @RequestMapping("/") public class MessageController { private final MessageRepository messageRepository; @Autowired public MessageController(Mes</div> </li> <li><a href="/article/3323.htm" title="数据源架构模式之活动记录" target="_blank">数据源架构模式之活动记录</a> <span class="text-muted">home198979</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8%E8%AE%B0%E5%BD%95/1.htm">活动记录</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%98%A0%E5%B0%84/1.htm">数据映射</a> <div>hello!架构 一、概念 活动记录(Active Record):一个对象,它包装数据库表或视图中某一行,封装数据库访问,并在这些数据上增加了领域逻辑。 对象既有数据又有行为。活动记录使用直截了当的方法,把数据访问逻辑置于领域对象中。   二、实现简单活动记录 活动记录在php许多框架中都有应用,如cakephp。 <?php /** * 行数据入口类 *</div> </li> <li><a href="/article/3450.htm" title="Linux Shell脚本之自动修改IP" target="_blank">Linux Shell脚本之自动修改IP</a> <span class="text-muted">pda158</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a><a class="tag" taget="_blank" href="/search/Debian/1.htm">Debian</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div>作为一名 Linux SA,日常运维中很多地方都会用到脚本,而服务器的ip一般采用静态ip或者MAC绑定,当然后者比较操作起来相对繁琐,而前者我们可以设置主机名、ip信息、网关等配置。修改成特定的主机名在维护和管理方面也比较方便。如下脚本用途为:修改ip和主机名等相关信息,可以根据实际需求修改,举一反三! #!/bin/sh #auto Change ip netmask ga</div> </li> <li><a href="/article/3577.htm" title="开发环境搭建" target="_blank">开发环境搭建</a> <span class="text-muted">独浮云</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a> <div>       最近在开发过程中,经常出现MyEclipse内存溢出等错误,需要重启的情况,好麻烦。对于一般的JAVA+TOMCAT项目开发,其实没有必要使用重量级的MyEclipse,使用eclipse就足够了。尤其是开发机器硬件配置一般的人。         &n</div> </li> <li><a href="/article/3704.htm" title="操作日期和时间的工具类" target="_blank">操作日期和时间的工具类</a> <span class="text-muted">vipbooks</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E5%85%B7%E7%B1%BB/1.htm">工具类</a> <div>   大家好啊,好久没有来这里发文章了,今天来逛逛,分享一篇刚写不久的操作日期和时间的工具类,希望对大家有所帮助。 /* * @(#)DataFormatUtils.java 2010-10-10 * * Copyright 2010 BianJing,All rights reserved. */ package test; impor</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类:</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>