本文主要介绍如何用vue开发的标准化工具vue-cli快速搭建一个符合实际业务项目结构的hello world网页项目并理解vue的代码文件结构以及页面渲染流程。
文章目录
- 一、准备工作：安装node.js
- 二、项目搭建
-
- 创建项目目录
- 全局安装vue-cli
- 使用Webpack初始化项目
- 启动项目
- 学会如何修改页面内容
-
一、准备工作：安装node.js
Windows系统的node.js安装十分简易，没有环境安装经验的伙伴可以参考文章：Windows系统下安装node.js
二、项目搭建
创建项目目录
我们需要先创建一个用于放置项目文件的目录，之后该项目相关的命令操作都需要在该路径下执行。我们新建一个hellovue的目录，然后进入到该目录，命令行路径提示如下：C:\hellovue>
全局安装vue-cli
- 运行命令：
npm install --global vue-cli
- 安装完毕后，运行命令：
vue -V验证安装情况，如果输出版本号，则说明安装成狗
使用Webpack初始化项目
Webpack是一个模块打包器。 它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用。
vue-cli可以使用webpack模板对项目进行初始化，即生成webpack模板的项目初始代码文件。
可以运行命令：vue init webpack hellovue ，然后根据提示填写项目基本信息以及相关工具配置。
各个选项的含义如下：
| 选项 |
意思 |
建议 |
| Project name |
项目名称 |
起一个你喜欢的项目名称即可 |
| Proiect description |
项目描述 |
描述一下项目是什么应用即可；练手项目可以直接默认回车 |
| Author |
作者 |
练手项目写自己即可；业务项目写团队名或具体成员名称 |
| Vue build |
项目构建模式 |
回车选择默认方式即可 |
| Install vue-router |
项目是否安装vue路由 |
选择yes |
| Use ESLint to lint your code |
是否选择ESLint开发验证功能 |
建议选择No，否则可能因为格式检查报错导致代码无法运行 |
| Set up unit tests |
是否开启单元测试 |
选择yes，项目后期越写越完善肯定需要测试来保证功能和效率 |
| Pick a test runner |
选择测试方式 |
默认Jtest即可 |
| Setup e2e tests with Nightwatch |
是否开启e2e测试 |
建议选择no |
| Should we runnpm install for you after the project has been created |
项目初始化后是否选择指定的包管理工具自动下载项目所需要的包 |
建议选择 Yes.use NPM |
启动项目
初始化结束之后，会有如下输出：
上面的输出已经提示我们，如果我们要启动项目，需要运行两个命令：
cd hellovue：进到我们刚才新建并且初始化的子项目中npm run dev：dev模式运行项目（开发模式，用于开发者开发和测试）
运行后会有如下提示：
根据输出，我们的项目已经运行起来了，浏览器访问http://localhost:8080即可以到看到了。于是 我们浏览器访问指定地址后可以看到如下页面：
学会如何修改页面内容
网页内容是如何展示出来的
我们要修改网页内容，就要知道网页内容是如何展示出来的。
首先用你喜欢的编辑器打开项目（我个人偏爱并强推VS Code），可以看到如下右侧项目代码文件结构：
如果过了解过网页开发的基础知识，会知道我们看到的网页都是html，然后通过css和js在html上添加样式以及交互效果。所以我们可以点开项目根目录的index.html，看到代码内容如下：
index.html内容中的</code>与我们看到的页面tab名称是对应的，说明我们看到的确实是这个<code>html</code>里面的内容。但是<code><body></code>标签中并没有内容，那么我们在页面上看到的<code>vue</code>图片、文字和链接是哪来的呢？</p>
<p><font color="#009C95"><strong>这里提两种探索的方法</strong></font>：</p>
<h4>方法一：搜索关键内容</h4>
<p><a href="http://img.e-com-net.com/image/info8/a4003b23593943069d8052547cde5321.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a4003b23593943069d8052547cde5321.jpg" alt="「Vue｜网页开发｜前端开发」01 快速入门：用vue-cli快速写一个Vue的HelloWorld项目_第7张图片" width="650" height="370" style="border:1px solid black;"></a><br> 我们看到页面有三个文本，所以我们可以直接用IDE搜索这三条文本所在位置，如下：<br> <a href="http://img.e-com-net.com/image/info8/79498606a7e54993b73ae16c1b661716.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/79498606a7e54993b73ae16c1b661716.jpg" alt="「Vue｜网页开发｜前端开发」01 快速入门：用vue-cli快速写一个Vue的HelloWorld项目_第8张图片" width="650" height="290" style="border:1px solid black;"></a>我们尝试修改一下找到的<code>HelloWolrd.vue</code>中的<code>Welcom to Your Vue.js App</code>，改成<code>Hello Vue World!</code>并保存，然后刷新浏览器查看页面是否发生变化，可以看到页面如下：<br> <a href="http://img.e-com-net.com/image/info8/1f772d654a59445aa7f244259b136ff1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1f772d654a59445aa7f244259b136ff1.jpg" alt="「Vue｜网页开发｜前端开发」01 快速入门：用vue-cli快速写一个Vue的HelloWorld项目_第9张图片" width="650" height="540" style="border:1px solid black;"></a>页面内容确实跟预期一样发生了变化。再去看<code>HelloWorld.vue</code>文件中的其他内容，可以看到浏览器页面里展示的其他内容也都在这个代码文件中。</p>
<p><font color="#009C95"><strong>所以我们可以确定，如果我们想修改页面内容只需要修改<code>HelloWorld.vue</code>即可</strong></font></p>
<p>同样地，当我们想进一步去探索<code>vue</code>是如何知道要把<code>HelloWorld.vue</code>的内容渲染到浏览器页面上的，我们就可以搜索<code>HelloWorld.vue</code>，看哪里用到了这个文件。由于<code>HelloWorld.vue</code>搜索结果为空，于是我们改成搜索<code>HelloWorld</code>，搜索结果如下：</p>
<p><a href="http://img.e-com-net.com/image/info8/3c2fa1da5c9d4986a7321e6cb4ebd463.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3c2fa1da5c9d4986a7321e6cb4ebd463.jpg" alt="「Vue｜网页开发｜前端开发」01 快速入门：用vue-cli快速写一个Vue的HelloWorld项目_第10张图片" width="650" height="317" style="border:1px solid black;"></a>我们可以看到，这是在一个<code>router</code>目录下<code>index.js</code>文件中，根据名称可以知道，<code>router</code>控制路由（即浏览器地址到代码文件的对应）, <code>index.js</code>是入口文件。代码中写明对于<code>path</code>为<code>/</code>的，对应到的导入的<code>HelloWorld</code>代码，这意味着对于地址<code>http://localhost:8080/#/</code>（<code>#</code>后面是<code>/</code>），会使用<code>/</code>对应的<code>HelloWorld</code>进行页面渲染。</p>
<h4>方法二：看目录</h4>
<p>使用标准化工具来组织代码的好处是，文件的位置和命令都有迹可循。我们看到根目录下<code>index.html</code>之外的文件名字都表明这些文件是一些配置相关的文件。而其他文件夹根据名字可以知道：</p>
<ul>
<li><code>build</code>是写好代码之后构建完毕用于部署到服务器上的文件夹</li>
<li><code>config</code>是用来放配置的目录</li>
<li><code>node_modules</code>存放项目相关的依赖包</li>
<li><code>src</code>是<code>source</code>的缩写，所以是存放源代码的地方</li>
<li><code>static</code>是静态的意思，该目录是用来存放一些静态文件的地方</li>
<li><code>test</code>是放代码测试文件的地方</li>
</ul>
<p>所以如果我们要查找页面的内容（涉及代码，属于可改变的内容而非静态文件），应该在<code>src</code>目录下找，打开<code>src</code>目录，可以看到三个目录和两个文件。一般来说，直接存放在目录下的，是类似于"程序入口"一样的文件。根据文件名称，我们班先尝试打开<code>main.js</code>，查看内容<br> <a href="http://img.e-com-net.com/image/info8/58556a4c55e540dd8147f3e648ee12e1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/58556a4c55e540dd8147f3e648ee12e1.jpg" alt="「Vue｜网页开发｜前端开发」01 快速入门：用vue-cli快速写一个Vue的HelloWorld项目_第11张图片" width="650" height="412" style="border:1px solid black;"></a><br> 可以看到<code>main.js</code>里面<code>import</code> 导入了一些东西，虽然我们不知道具体是什么，但是我们的代码是标准化的，所以根据命名，可以推测：</p>
<ul>
<li><code>App</code>作为appliaction（应用）的简写，应该代表跟应用相关的内容；</li>
<li><code>router</code>是路由器的意思，所以应该是控制网页路由的部分。路由就是道路向导的意思，指的是告诉浏览器地址栏输入的地址对应着代码中哪一部分的内容。</li>
<li><code>Vue</code>是我们用的前端框架的名称。前端框架就是生成页面内容的工具，所以这里使用了<code>vue()</code>，并且传入了<code>App</code>和<code>router</code>这两部分内容，以及我们看到了<code>#app</code>这个用法，<code>app</code>是我们在<code>index.html</code>代码中看到的<code><body id='app'></body></code>的id，所以这里应该是定位到了<code>index.html</code>的body位置</li>
</ul>
<p>根据以上三点，我们可以基本确定，我们在浏览器中看到的内容就是从这里传到<code>index.html</code>并被浏览器展示出来的。</p>
<p>进一步，我们查看<code>App</code>的内容，看页面的图片和文字是如何引入到页面的，打开<code>App.vue</code>之后，可以看到内容如下：</p>
<p><a href="http://img.e-com-net.com/image/info8/2ceca1a91ea641da9f39d6d222bf5493.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2ceca1a91ea641da9f39d6d222bf5493.jpg" alt="「Vue｜网页开发｜前端开发」01 快速入门：用vue-cli快速写一个Vue的HelloWorld项目_第12张图片" width="650" height="406" style="border:1px solid black;"></a>我们看到光标所在位置有一个<code><img></code>引用了一个<code>logo.png</code>，这就是页面展示的<code>vue</code>logo图片来源。至于logo图片下面的文本和跳转链接没有看到具体的代码，只有一行<code><router-view/></code>，所以考虑这些内容是由这行代码处理的。</p>
<p>接下来我们查资料可以知道（看着<code>router-view</code>愣猜只能知道是跟路由和展示有关，其他的就得靠查资料补充了），在<code>main.js</code>中传入的<code>router</code>会把<code><router-view></code>替换成与<code>path</code>值对应的<code>components</code>。</p>
<p>打开router目录下的<code>index.js</code>，这里我们浏览器输入的<code>path</code>是<code>/</code>，在<code>index.js</code>中该路径对应的<code>components</code>是<code>HelloWorld</code>（由<code>HelloWorld.vue</code>导入）<br> ，如下：<br> <a href="http://img.e-com-net.com/image/info8/2f872d9438ce410ba48447b2dfef43d8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2f872d9438ce410ba48447b2dfef43d8.jpg" alt="「Vue｜网页开发｜前端开发」01 快速入门：用vue-cli快速写一个Vue的HelloWorld项目_第13张图片" width="650" height="343" style="border:1px solid black;"></a>于是我们果断打开<code>HelloWorld.vue</code>，可以看到浏览器页面展示的内容基本都在<code>HelloWorld</code>里面了：<br> <a href="http://img.e-com-net.com/image/info8/213ed7de040740f9858f5fab7cd40907.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/213ed7de040740f9858f5fab7cd40907.jpg" alt="「Vue｜网页开发｜前端开发」01 快速入门：用vue-cli快速写一个Vue的HelloWorld项目_第14张图片" width="650" height="498" style="border:1px solid black;"></a>但是我们看到代码中的<code><h1></code>内容不是我们在浏览器看到的<code>Welcome to Your Vue.js App</code>而是<code>{{ msg }}</code>，可以推测这里是一个变量引用的方式，<code>msg</code>的值应该是<code>Welcome to Your Vue.js App</code>，所以我们搜索找到<code>msg</code>位置如下：<br> <a href="http://img.e-com-net.com/image/info8/203bb37dad224543a903da06aa76510c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/203bb37dad224543a903da06aa76510c.jpg" alt="「Vue｜网页开发｜前端开发」01 快速入门：用vue-cli快速写一个Vue的HelloWorld项目_第15张图片" width="650" height="207" style="border:1px solid black;"></a>如我们所料，<code>msg</code>的值是<code>Welcome to Your Vue.js App</code>，于是我们将值改成<code>Hello Vue World!</code>，并刷新页面，可以看到页面内容如下：<br> <a href="http://img.e-com-net.com/image/info8/6f0bc1847243431281a3bb54c9918e4f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6f0bc1847243431281a3bb54c9918e4f.jpg" alt="「Vue｜网页开发｜前端开发」01 快速入门：用vue-cli快速写一个Vue的HelloWorld项目_第16张图片" width="650" height="370" style="border:1px solid black;"></a>页面展示的标题文本变成了我们修改后的内容。<br> 我们的推测都得到了验证，我们也明白了<code>vue</code>是如何将代码渲染到浏览器的。</p>
<p><font color="#009C95"><strong>至此，我们通过一个HelloWorld项目掌握了vue如何将浏览器地址对应到具体代码，标准化的代码文件结构以及如何修改代码使得页面展示我们希望的内容。</strong> </font><br> <font color="#009C95"><strong><code>vue</code>入门，(●ˇ∀ˇ●) 达成✔</strong> </font></p>
<blockquote>
<p><font color="#009C95"><strong>写文不易，如果对你有帮助的话，来一波点赞、收藏、关注吧~</strong></font></p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1693973137500221440"></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">你可能感兴趣的:(web编程技术,vue.js,前端框架,前端,javascript,vue)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1881293498154545152.htm"
title="AWS GCR EKS Resource：构建高效弹性云原生应用的利器" target="_blank">AWS GCR EKS Resource：构建高效弹性云原生应用的利器</a>
<span class="text-muted">杨女嫚</span>
<div>AWSGCREKSResource：构建高效弹性云原生应用的利器eks-workshop-greater-chinaAWSWorkshopforLearningEKSforGreaterChina项目地址:https://gitcode.com/gh_mirrors/ek/eks-workshop-greater-china在云计算的浪潮中，AWS（AmazonWebServices）一直处于创新</div>
</li>
<li><a href="/article/1881293118876217344.htm"
title="学习ASP.NET Core的身份认证（基于JwtBearer的身份认证1）" target="_blank">学习ASP.NET Core的身份认证（基于JwtBearer的身份认证1）</a>
<span class="text-muted">gc_2299</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E7%BC%96%E7%A8%8B/1.htm">网页编程</a><a class="tag" taget="_blank" href="/search/JWT/1.htm">JWT</a><a class="tag" taget="_blank" href="/search/%E8%BA%AB%E4%BB%BD%E8%AE%A4%E8%AF%81/1.htm">身份认证</a><a class="tag" taget="_blank" href="/search/JwtBear/1.htm">JwtBear</a>
<div> 本文开始学习基于JWT的身份认证基本用法，相比Cookie、Session等方式，JWT要复杂一些，除了注册认证服务之外，还需提供JWTToken的生成函数或生成类，以便在访问需授权的函数之前获取Token。参考文献1-7中大部分示例都是基于WebApi项目，本文基于Microsoft.AspNetCore.Authentication.JwtBearer包，参照参考文献中的代码，实现最简单的</div>
</li>
<li><a href="/article/1881288067185176576.htm"
title="深度解析 React 合成事件：机制、作用及与 Vue 事件机制的对比" target="_blank">深度解析 React 合成事件：机制、作用及与 Vue 事件机制的对比</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFvue.jsreact/1.htm">前端vue.jsreact</a>
<div>在前端开发领域，React与Vue作为两款备受瞩目的框架，凭借独特的设计理念和技术架构，为开发者打造出截然不同的开发体验。React的合成事件是其核心亮点之一，Vue则采用了别具一格的事件处理机制，二者的差异背后蕴藏着多方面的考量。一、React合成事件的底层剖析（一）事件创建与封装细节当DOM事件触发，React会第一时间在内部事件池中检索对应的合成事件实例。若未找到，便依据原生事件类型，像cl</div>
</li>
<li><a href="/article/1881284163101847552.htm"
title="PHP语言的语法" target="_blank">PHP语言的语法</a>
<span class="text-muted">Quantum&Coder</span>
<a class="tag" taget="_blank" href="/search/%E5%8C%85%E7%BD%97%E4%B8%87%E8%B1%A1/1.htm">包罗万象</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</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/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
<div>PHP语言的语法与应用引言PHP（HypertextPreprocessor）是一种广泛使用的开源服务器端脚本语言，特别适合于Web开发。由于其简单易学的语法、高效的运行性能以及强大的功能，PHP已成为开发动态网页和应用程序的热门选择。本文将深入探讨PHP的语法特性、常用功能，以及在实际开发中的应用示例。PHP基础语法1.PHP代码的基本结构PHP代码通常放在标签之间。这些标签告诉服务器开始和结束</div>
</li>
<li><a href="/article/1881282752628715520.htm"
title="告别代码堆砌！AI生成前端页面，让开发效率飞升" target="_blank">告别代码堆砌！AI生成前端页面，让开发效率飞升</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>在当今快节奏的数字世界中，前端开发效率至关重要。面对日益增长的市场需求和复杂的项目，开发者们常常面临着巨大的压力。而一款优秀的AI生成前端页面工具，无疑能成为提升效率的利器。本文将深入探讨谷歌Gemini的强大功能，并结合ScriptEcho——一款基于大模型AI技术的前端代码生成工具，展现如何将AI技术应用于前端开发，从而实现效率的显著提升。谷歌Gemini：AI赋能的未来谷歌Gemini的出现</div>
</li>
<li><a href="/article/1881282624140406784.htm"
title="零售业的AI赋能与前端开发效率革命：ScriptEcho 的助力" target="_blank">零售业的AI赋能与前端开发效率革命：ScriptEcho 的助力</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>零售业正经历着前所未有的数字化转型，但同时也面临着巨大的挑战。库存管理混乱、个性化客户体验不足等问题，严重制约着零售企业的盈利能力。而人工智能（AI）的兴起，为解决这些问题提供了新的思路。通过AI驱动的实时库存管理和客户行为分析，零售企业可以显著提升运营效率和客户满意度。然而，构建这些AI赋能的零售应用，需要强大的前端开发能力，这正是AI代码生成器ScriptEcho能够发挥关键作用的地方。AI赋</div>
</li>
<li><a href="/article/1881282243914166272.htm"
title="AI时代的前端开发：技能提升与职业发展之路" target="_blank">AI时代的前端开发：技能提升与职业发展之路</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>在瞬息万变的科技时代，个人职业发展的重要性日益凸显。提升技能，不断学习，已经不再是锦上添花，而是立足之本，是我们在竞争激烈的职场中脱颖而出的关键。而人工智能（AI）技术的快速发展，为我们提供了前所未有的机遇，特别是对于前端开发领域，AI正以前所未有的速度改变着我们的工作方式和学习方式。AI赋能前端开发：个性化学习路径前端开发领域的技术栈庞大而复杂，涵盖HTML、CSS、JavaScript、各种框</div>
</li>
<li><a href="/article/1881280254593527808.htm"
title="Ruby语言的数据库编程" target="_blank">Ruby语言的数据库编程</a>
<span class="text-muted">Quantum&Coder</span>
<a class="tag" taget="_blank" href="/search/%E5%8C%85%E7%BD%97%E4%B8%87%E8%B1%A1/1.htm">包罗万象</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</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/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
<div>Ruby语言的数据库编程引言在现代软件开发中，数据库几乎是每个应用程序的重要组成部分。无论是简单的Web应用还是复杂的企业系统，数据存储和管理都是不可或缺的环节。Ruby是一种动态、面向对象的编程语言，因其优雅的语法和丰富的库支持而受到广泛欢迎。在Ruby的生态系统中，ActiveRecord是最常用的数据库编程工具，它源自RubyonRails框架，为开发者提供了简单而强大的数据库交互能力。本文</div>
</li>
<li><a href="/article/1881277057846013952.htm"
title="Web三维CAD绘制一个窗户模型" target="_blank">Web三维CAD绘制一个窗户模型</a>
<span class="text-muted"></span>
<div>前言本文使用mxcad3d在网页中创建一个简单的三维窗户模型，mxcad3d提供了丰富的三维建模功能和便捷的API，使得创建各种三维模型变得简单方便，最终效果如下图：环境搭建和入门首先学习mxcad的基本使用方法，可通过官方的入门教程来搭建一个最基本的项目模板，依次查看教程：安装Node.js以及VSCode开发工具、创建mxcad开发项目、API文档接口使用说明。压缩包下载解压后需要在项目目录下</div>
</li>
<li><a href="/article/1881276976682037248.htm"
title="前后端分离VUE3+Springboot项目集成PageOffice核心代码" target="_blank">前后端分离VUE3+Springboot项目集成PageOffice核心代码</a>
<span class="text-muted">wqqqianqian</span>
<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/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/pageoffice/1.htm">pageoffice</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E5%9C%A8%E7%BA%BF%E7%BC%96%E8%BE%91/1.htm">在线编辑</a>
<div>后端Springboot项目在项目的pom.xml中通过下面的代码引入PageOffice依赖。pageoffice.jar已发布到Maven中央仓库，建议使用最新版本。com.zhuozhengsoftpageoffice6.3.3.1-javax在项目的启动类Application类中添加一项@Bean配置，此为PageOffice服务器端的必要配置，代码如下：@Value("${posysp</div>
</li>
<li><a href="/article/1881276970587713536.htm"
title="前后端分离VUE+Springboot项目集成PageOffice核心代码" target="_blank">前后端分离VUE+Springboot项目集成PageOffice核心代码</a>
<span class="text-muted">wqqqianqian</span>
<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/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/pageoffice/1.htm">pageoffice</a><a class="tag" taget="_blank" href="/search/%E5%9C%A8%E7%BA%BF%E7%BC%96%E8%BE%91/1.htm">在线编辑</a>
<div>后端Springboot项目在项目的pom.xml中通过下面的代码引入PageOffice依赖。pageoffice.jar已发布到Maven中央仓库，建议使用最新版本。com.zhuozhengsoftpageoffice6.3.3.1-javax在项目的启动类Application类中添加一项@Bean配置，此为PageOffice服务器端的必要配置，代码如下：@Value("${posysp</div>
</li>
<li><a href="/article/1881276299192889344.htm"
title="关于告警，要想做好，从这些方面着手" target="_blank">关于告警，要想做好，从这些方面着手</a>
<span class="text-muted"></span>
<div>各类监控系统都会产生告警事件，于是，就产生了FlashDuty、PagerDuty、Opsgenie这类产品，做告警事件的收敛降噪、排班认领升级等。如果你想增强自己公司的告警事件处理能力，参考（chaoxi）这些产品的功能就可以了。告警集成：目标是在一个Oncall平台上处理所有告警，一般常见的监控工具，都有对接webhook的能力，因此Oncall平台可以对不同监控工具进行接口适配，提供一个相应</div>
</li>
<li><a href="/article/1881271039372095488.htm"
title="python no module name _lzma,安装/编译pylzma（LZMA Python绑定）" target="_blank">python no module name _lzma,安装/编译pylzma（LZMA Python绑定）</a>
<span class="text-muted">蓝精灵国王乄</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/no/1.htm">no</a><a class="tag" taget="_blank" href="/search/module/1.htm">module</a><a class="tag" taget="_blank" href="/search/name/1.htm">name</a><a class="tag" taget="_blank" href="/search/_lzma/1.htm">_lzma</a>
<div>I'vealreadypostedthisquestionontheauthorswebsite,butIthoughtImightaskhereaswell.I'vebeentryingtoinstallpylzmawiththissetup:Windows7x64Python2.6.6x64theamd64compilercomingfromwindowsserver2003sdkcloned</div>
</li>
<li><a href="/article/1881270879778828288.htm"
title="在线CAD绘制条形码和二维码的方法（VUE集成DWG）" target="_blank">在线CAD绘制条形码和二维码的方法（VUE集成DWG）</a>
<span class="text-muted"></span>
<div>一、条形码绘制1.原理绘制条形码需要根据不同的应用场景选择适当的条形码标准，如常见的codabar、CODE30、CODE128等，每一种条形码标准都有它特定的数据编码规则，调用这些编码规则进行数据编码时会将数据字符按照所选编码规则转换成条和空的组合（一组二进制数据）。不同的条形码标准使用不同的编码规则来表示0到9的数字或26个英文字母。其中，为了确保扫描的准确性，条形码中还包括一个校验字符。这个</div>
</li>
<li><a href="/article/1881270157452570624.htm"
title="出海工具集" target="_blank">出海工具集</a>
<span class="text-muted">web前端进阶者</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>群聊分享的一个工具集合，看了几个，感觉有点子用，收藏一波，下面有GitHub的地址；吃水不忘挖井人；GitHub地址分类目录导航Web开发框架或模板Chrome插件开发前端开发后端开发数据库管理对象关系映射（ORM）样式与UI框架原型设计认证与授权支付集成邮件服务网站分析在线客服和反馈服务部署与托管网站管理域名注册文档管理协议生成图标资源字体资源图片视频素材图片视频处理工具屏幕录制短链或长链信息渠</div>
</li>
<li><a href="/article/1881268391084355584.htm"
title="Springboot毕设项目动物园售票管理系统96zau（java+VUE+Mybatis+Maven+Mysql）" target="_blank">Springboot毕设项目动物园售票管理系统96zau（java+VUE+Mybatis+Maven+Mysql）</a>
<span class="text-muted">韩元计算机毕设</span>
<a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</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>
<div>项目运行环境配置：Jdk1.8+Tomcat8.5+Mysql+HBuilderX（Webstorm也行）+Eclispe（IntelliJIDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：Springboot+mybatis+Maven+Vue等等组成，B/S模式+Maven管理等等。环境需要1.运行环境：最好是javajdk1.8，我们在这个平台上运行的。其他版本理论上也</div>
</li>
<li><a href="/article/1881268264647061504.htm"
title="网络安全笔记-信息安全工程师与网络安全工程师考试大纲（附：Web安全大纲）_信息网络安全师认证(inspc)培训工作大纲" target="_blank">网络安全笔记-信息安全工程师与网络安全工程师考试大纲（附：Web安全大纲）_信息网络安全师认证(inspc)培训工作大纲</a>
<span class="text-muted">程序员鬼鬼</span>
<a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/1.htm">计算机网络</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>Web安全大纲2024信息安全工程师考试大纲1、考试目标通过本考试的合格人员能够掌握网络信息安全的基础知识和技术原理；根据国家网络信息安全相关法律法规及业务安全保障要求，能够规划、设计信息系统安全方案，能够配置和维护常见的网络安全设备及系统；能够对信息系统的网络安全风险进行监测和分析，并给出网络安全风险问题的整改建议；能够协助相关部门对单位的信息系统进行网络安全审计和网络安全事件调查；能够对网络信</div>
</li>
<li><a href="/article/1881263720148037632.htm"
title="成功编译和运行roslaunch qbo_webi qbo_webi.launch(解决qbo_object_recognition之后的其他问题)" target="_blank">成功编译和运行roslaunch qbo_webi qbo_webi.launch(解决qbo_object_recognition之后的其他问题)</a>
<span class="text-muted">皮熊</span>
<a class="tag" taget="_blank" href="/search/ROS%E6%A1%86%E6%9E%B6/1.htm">ROS框架</a><a class="tag" taget="_blank" href="/search/opencv/1.htm">opencv</a><a class="tag" taget="_blank" href="/search/qbo/1.htm">qbo</a><a class="tag" taget="_blank" href="/search/robot/1.htm">robot</a>
<div>折腾一天的问题，SurfFeatureDetectortype-specifier问题解决了。需要在cv.h中添加includenonfree/features2d.hpp。fromposter.encodeimportmultipart_encodeImportError:Nomodulenamedposter.encodesudoapt-getinstallpython-postersudoa</div>
</li>
<li><a href="/article/1881261955583373312.htm"
title="【2023华为OD-C卷-第三题-跳马】100%通过率（JavaScript&Java&Python&C++）" target="_blank">【2023华为OD-C卷-第三题-跳马】100%通过率（JavaScript&Java&Python&C++）</a>
<span class="text-muted">塔子哥学算法</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a>
<div>本题已有网友报告代码100%通过率OJ&答疑服务购买任意专栏，即可私信博主，获取答疑/辅导服务题目描述马是象棋(包括中国象棋和国际象棋)中的棋子，走法是每步直一格再斜一格，即先横着或直着走一格，然后再斜着走一个对角线，可进可退，可越过河界，俗称马走“日”字。给定mmm行n</div>
</li>
<li><a href="/article/1881257793311272960.htm"
title="三套uniapp视频教程，让你彻底搞懂uniapp。学习路上助你一臂之力！" target="_blank">三套uniapp视频教程，让你彻底搞懂uniapp。学习路上助你一臂之力！</a>
<span class="text-muted">guoguo507</span>
<a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
<div>快速入口在文章最后，大家耐心观看！谢谢(想学其他更多编程技术视频，请进我的博客查看。)Uniapp开发：视频教程的助力之旅在当今数字化飞速发展的时代，移动应用开发已成为众多开发者关注的焦点领域。无论是为了满足企业业务的拓展需求，还是个人开发者想要实现自己的创意想法，开发一款成功的移动应用都面临着诸多挑战和机遇。在这样的大背景下，Uniapp作为一款跨平台开发框架，正以其独特的优势吸引着越来越多开发</div>
</li>
<li><a href="/article/1881255897360035840.htm"
title="QtWebEngine模块发布程序之后，软件崩溃的问题。" target="_blank">QtWebEngine模块发布程序之后，软件崩溃的问题。</a>
<span class="text-muted">学习，学习，在学习</span>
<a class="tag" taget="_blank" href="/search/%E5%85%B6%E4%BB%96/1.htm">其他</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/qt5/1.htm">qt5</a>
<div>使用QtWebEngine模块，加载网页功能。程序发布后，点击加载会在有的系统上崩溃的解决办法第一种原因是：机器的显卡和系统所带的显卡驱动不匹配，导致QtWebEngine在渲染时出现了崩溃。解决办法：升级显卡驱动（如果是集成显卡，可能需要升级主板驱动）。第二种-在软件运行目录下添加文件，目前还不知道这几个文件起到什么作用，随后再看目录是：.\Qt5.9\5.9.1\msvc2015_64\res</div>
</li>
<li><a href="/article/1881255896705724416.htm"
title="QWebEngineView之加载html打印PDF" target="_blank">QWebEngineView之加载html打印PDF</a>
<span class="text-muted">学习，学习，在学习</span>
<a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/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/qt5/1.htm">qt5</a>
<div>QWebEngineView通过QWebEngineView加载html文件打印pdf相比自己手动绘制pdf简单的多，制作好对应的html文件，然后Qfile读取html文件模板，替换函数需要替换的value，存成html文件，然后QWebEngineView加载，就直接能够打印成对应格式的pdf了。//读取html文件QFileoutFile(QStringLiteral("C://Users/</div>
</li>
<li><a href="/article/1881251105032171520.htm"
title="Nginx反向代理时传递客户端真实IP&Nginx配置使用缓存机制&压力测试" target="_blank">Nginx反向代理时传递客户端真实IP&Nginx配置使用缓存机制&压力测试</a>
<span class="text-muted">Field_Yang</span>
<a class="tag" taget="_blank" href="/search/Nginx%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">Nginx服务器</a><a class="tag" taget="_blank" href="/search/Nginx%E4%BC%A0%E9%80%92%E5%AE%A2%E6%88%B7%E7%AB%AF%E7%9C%9F%E5%AE%9EIP/1.htm">Nginx传递客户端真实IP</a><a class="tag" taget="_blank" href="/search/Nginx%E9%85%8D%E7%BD%AE%E7%BC%93%E5%AD%98%E6%9C%BA%E5%88%B6/1.htm">Nginx配置缓存机制</a><a class="tag" taget="_blank" href="/search/Nginx%E5%8E%8B%E6%B5%8B/1.htm">Nginx压测</a>
<div>win7客户端请求web服务，win7；nginx作为反向代理服务器：192.168.88.130:8080test.field.com；nginx作为后端web服务器：192.168.88.131:8080www.field.com；httpd作为后端web服务器：192.168.88.131:80www.field.com；1、Nginx反向代理时传递客户端真实IPngx_http_proxy</div>
</li>
<li><a href="/article/1881247829620486144.htm"
title="Arch - 架构安全性_验证（Verification）" target="_blank">Arch - 架构安全性_验证（Verification）</a>
<span class="text-muted">小小工匠</span>
<a class="tag" taget="_blank" href="/search/%E3%80%90%E5%87%A4%E5%87%B0%E6%9E%B6%E6%9E%84%E3%80%91/1.htm">【凤凰架构】</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E9%AA%8C%E8%AF%81/1.htm">验证</a><a class="tag" taget="_blank" href="/search/Verification/1.htm">Verification</a>
<div>文章目录OverView导图1.引言：数据验证的重要性概述2.数据验证的基本概念3.数据验证的层次前端验证后端验证4.数据验证的标准做法5.自定义校验注解6.校验结果的处理7.性能考虑与副作用8.小结OverView即使只限定在“软件架构设计”这个语境下，系统安全仍然是一个很大的话题。接下来我们将对系统安全架构的各个方面进行详细分析，包括认证、授权、凭证、保密、传输安全和验证，结合案例实践，展示如</div>
</li>
<li><a href="/article/1881238749820547072.htm"
title="SpringBoot 整合 Grizzly" target="_blank">SpringBoot 整合 Grizzly</a>
<span class="text-muted">❀͜͡傀儡师</span>
<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>
<div>SpringBoot整合Grizzly是一种提高Web应用性能的有效方式，尤其适用于需要处理大量并发请求的高流量网站。Grizzly是一个高性能的、异步的、非阻塞的HTTP服务器框架，它可以与SpringBoot一起提供比传统的Tomcat或Jetty更高的吞吐量和更低的延迟。为什么选择Grizzly？Grizzly作为一个基于NIO（Non-blockingI/O）的服务器框架，它特别适合于处理</div>
</li>
<li><a href="/article/1881229916637294592.htm"
title="如何利用 Dexie.js 管理前端状态或持久化复杂数据" target="_blank">如何利用 Dexie.js 管理前端状态或持久化复杂数据</a>
<span class="text-muted">maply</span>
<a class="tag" taget="_blank" href="/search/Node.js/1.htm">Node.js</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</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/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a><a class="tag" taget="_blank" href="/search/Dexie.js/1.htm">Dexie.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86/1.htm">前端状态管理</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%8A%B6%E6%80%81%E6%8C%81%E4%B9%85%E5%8C%96/1.htm">前端状态持久化</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>使用Dexie.js管理前端状态或持久化复杂数据Dexie.js是一个功能强大的IndexedDB封装库，不仅适用于简单的离线存储，还非常适合管理前端状态和持久化复杂数据。以下是如何利用Dexie.js管理前端状态或持久化复杂数据的详细介绍：1.Dexie.js管理前端状态的优势数据持久化：将应用状态存储在浏览器中，即使刷新页面或关闭浏览器，状态仍然存在。异步数据操作：支持异步读取和写入，提高性能</div>
</li>
<li><a href="/article/1881229409541746688.htm"
title="SpringBoot3使用Swagger3" target="_blank">SpringBoot3使用Swagger3</a>
<span class="text-muted">m0_74825260</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>SpringBoot3使用Swagger3项目中的后端接口进行简单的前端展示一、依赖引入二、快速启动1.在application.yml中配置2.或者properties文件,则配置3.启动项目访问swagger三、使用注解标注接口Swagger配置文件Swagger注解迁移举例五种常用@Api@ApiOperation@ApiImplicitParam@ApiModel@ApiModelProp</div>
</li>
<li><a href="/article/1881221580894302208.htm"
title="Amazon Virtual Private Cloud（VPC）" target="_blank">Amazon Virtual Private Cloud（VPC）</a>
<span class="text-muted">HaoHao_010</span>
<a class="tag" taget="_blank" href="/search/aws/1.htm">aws</a><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/%E4%BA%91%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">云服务器</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E8%AE%A1%E7%AE%97/1.htm">云计算</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
<div>AmazonVirtualPrivateCloud（VPC）是AmazonWebServices（AWS）的一项强大服务，它提供了一个完全隔离的私有网络环境，使得用户能够在云中精细控制网络资源。以下是VPC更详细的功能和扩展内容：1.VPC网络设计和管理VPC允许你完全控制网络配置，包括：IP地址范围：你可以选择适合自己需求的IPv4和IPv6地址范围。例如，你可以选择10.0.0.0/16，为V</div>
</li>
<li><a href="/article/1881219816640016384.htm"
title="深入理解 JavaScript 引擎与消息队列的底层原理" target="_blank">深入理解 JavaScript 引擎与消息队列的底层原理</a>
<span class="text-muted">D.eL</span>
<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>深入理解JavaScript引擎与消息队列的底层原理JavaScript是现代Web开发中最为重要的编程语言之一，它的运行和执行方式常常是开发者关注的重点。为了更好地理解JavaScript的执行过程，我们需要深入探索JavaScript引擎的工作原理，尤其是事件循环（EventLoop）、消息队列（MessageQueue）以及它们如何协同工作来处理异步任务。在这篇文章中，我们将深入分析Java</div>
</li>
<li><a href="/article/1881216784795758592.htm"
title="JavaScript详解十三 ——节点操作" target="_blank">JavaScript详解十三 ——节点操作</a>
<span class="text-muted">遇见~未来</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/JavaScript%E8%AF%A6%E8%A7%A3/1.htm">JavaScript详解</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、创建节点2、创建文本3、添加节点(先有父母才能生孩子)4、替换节点5、删除节点6、克隆节点7、创建节点另外几种方式（1）、element.innerHTML（2）、element.innerText（3）、document.write()（4）、insertAdjacentHTML()节点操作1、创建节点docment.createElement('节点')参数：标签名字符串这些元</div>
</li>
<li><a href="/article/58.htm"
title="多线程编程之理财" target="_blank">多线程编程之理财</a>
<span class="text-muted">周凡杨</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E4%BA%A7%E8%80%85/1.htm">生产者</a><a class="tag" taget="_blank" href="/search/%E6%B6%88%E8%B4%B9%E8%80%85/1.htm">消费者</a><a class="tag" taget="_blank" href="/search/%E7%90%86%E8%B4%A2/1.htm">理财</a>
<div> 现实生活中，我们一边工作，一边消费，正常情况下会把多余的钱存起来，比如存到余额宝，还可以多挣点钱，现在就有这个情况：我每月可以发工资20000万元 （暂定每月的1号），每月消费5000（租房+生活费）元（暂定每月的1号），其中租金是大头占90%，交房租的方式可以选择（一月一交，两月一交、三月一交），理财：1万元存余额宝一天可以赚1元钱，</div>
</li>
<li><a href="/article/185.htm"
title="[Zookeeper学习笔记之三]Zookeeper会话超时机制" target="_blank">[Zookeeper学习笔记之三]Zookeeper会话超时机制</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a>
<div>首先，会话超时是由Zookeeper服务端通知客户端会话已经超时，客户端不能自行决定会话已经超时，不过客户端可以通过调用Zookeeper.close()主动的发起会话结束请求，如下的代码输出内容
Created /zoo-739160015
CONNECTEDCONNECTED
.............CONNECTEDCONNECTED
CONNECTEDCLOSEDCLOSED
</div>
</li>
<li><a href="/article/312.htm"
title="SecureCRT快捷键" target="_blank">SecureCRT快捷键</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/secureCRT/1.htm">secureCRT</a><a class="tag" taget="_blank" href="/search/%E5%BF%AB%E6%8D%B7%E9%94%AE/1.htm">快捷键</a>
<div>ctrl + a : 移动光标到行首ctrl + e ：移动光标到行尾crtl + b: 光标前移1个字符crtl + f: 光标后移1个字符crtl + h : 删除光标之前的一个字符ctrl + d ：删除光标之后的一个字符crtl + k ：删除光标到行尾所有字符crtl + u : 删除光标至行首所有字符crtl + w: 删除光标至行首</div>
</li>
<li><a href="/article/439.htm"
title="Java 子类与父类这间的转换" target="_blank">Java 子类与父类这间的转换</a>
<span class="text-muted">周凡杨</span>
<a class="tag" taget="_blank" href="/search/java+%E7%88%B6%E7%B1%BB%E4%B8%8E%E5%AD%90%E7%B1%BB%E7%9A%84%E8%BD%AC%E6%8D%A2/1.htm">java 父类与子类的转换</a>
<div> 最近同事调的一个服务报错，查看后是日期之间转换出的问题。代码里是把 java.sql.Date 类型的对象 强制转换为 java.sql.Timestamp 类型的对象。报java.lang.ClassCastException。
代码：
</div>
</li>
<li><a href="/article/566.htm"
title="可视化swing界面编辑" target="_blank">可视化swing界面编辑</a>
<span class="text-muted">朱辉辉33</span>
<a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/swing/1.htm">swing</a>
<div> 今天发现了一个WindowBuilder插件，功能好强大，啊哈哈，从此告别手动编辑swing界面代码，直接像VB那样编辑界面，代码会自动生成。
首先在Eclipse中点击help，选择Install New Software,然后在Work with中输入WindowBui</div>
</li>
<li><a href="/article/693.htm"
title="web报表工具FineReport常用函数的用法总结（文本函数）" target="_blank">web报表工具FineReport常用函数的用法总结（文本函数）</a>
<span class="text-muted">老A不折腾</span>
<a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/web%E6%8A%A5%E8%A1%A8%E5%B7%A5%E5%85%B7/1.htm">web报表工具</a><a class="tag" taget="_blank" href="/search/%E6%8A%A5%E8%A1%A8%E8%BD%AF%E4%BB%B6/1.htm">报表软件</a><a class="tag" taget="_blank" href="/search/java%E6%8A%A5%E8%A1%A8/1.htm">java报表</a>
<div>文本函数
CHAR
CHAR(number):根据指定数字返回对应的字符。CHAR函数可将计算机其他类型的数字代码转换为字符。
Number:用于指定字符的数字，介于1Number:用于指定字符的数字，介于165535之间（包括1和65535）。
示例:
CHAR(88)等于“X”。
CHAR(45)等于“-”。
CODE
CODE(text):计算文本串中第一个字</div>
</li>
<li><a href="/article/820.htm"
title="mysql安装出错" target="_blank">mysql安装出错</a>
<span class="text-muted">林鹤霄</span>
<a class="tag" taget="_blank" href="/search/mysql%E5%AE%89%E8%A3%85/1.htm">mysql安装</a>
<div>[root@localhost ~]# rpm -ivh MySQL-server-5.5.24-1.linux2.6.x86_64.rpm Preparing... #####################</div>
</li>
<li><a href="/article/947.htm"
title="linux下编译libuv" target="_blank">linux下编译libuv</a>
<span class="text-muted">aigo</span>
<a class="tag" taget="_blank" href="/search/libuv/1.htm">libuv</a>
<div>下载最新版本的libuv源码，解压后执行：
./autogen.sh
这时会提醒找不到automake命令，通过一下命令执行安装（redhat系用yum，Debian系用apt-get）：
# yum -y install automake
# yum -y install libtool
如果提示错误：make: *** No targe</div>
</li>
<li><a href="/article/1074.htm"
title="中国行政区数据及三级联动菜单" target="_blank">中国行政区数据及三级联动菜单</a>
<span class="text-muted">alxw4616</span>
<div>近期做项目需要三级联动菜单,上网查了半天竟然没有发现一个能直接用的!
呵呵,都要自己填数据....我了个去这东西麻烦就麻烦的数据上.
哎,自己没办法动手写吧.
现将这些数据共享出了,以方便大家.嗯,代码也可以直接使用
文件说明
lib\area.sql -- 县及县以上行政区划分代码（截止2013年8月31日)来源：国家统计局 发布时间：2014-01-17 15:0</div>
</li>
<li><a href="/article/1201.htm"
title="哈夫曼加密文件" target="_blank">哈夫曼加密文件</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/%E5%93%88%E5%A4%AB%E6%9B%BC%E5%8E%8B%E7%BC%A9/1.htm">哈夫曼压缩</a><a class="tag" taget="_blank" href="/search/%E5%93%88%E5%A4%AB%E6%9B%BC%E5%8A%A0%E5%AF%86/1.htm">哈夫曼加密</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%8F%89%E6%A0%91/1.htm">二叉树</a>
<div> 在上一篇介绍过哈夫曼编码的基础知识,下面就直接介绍使用哈夫曼编码怎么来做文件加密或者压缩与解压的软件,对于新手来是有点难度的,主要还是要理清楚步骤;
加密步骤:
1,统计文件中字节出现的次数,作为权值
2,创建节点和哈夫曼树
3,得到每个子节点01串
4,使用哈夫曼编码表示每个字节
</div>
</li>
<li><a href="/article/1328.htm"
title="JDK1.5 Cyclicbarrier实例" target="_blank">JDK1.5 Cyclicbarrier实例</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a><a class="tag" taget="_blank" href="/search/Cyclicbarrier/1.htm">Cyclicbarrier</a>
<div>CyclicBarrier类
一个同步辅助类，它允许一组线程互相等待，直到到达某个公共屏障点 (common barrier point)。在涉及一组固定大小的线程的程序中，这些线程必须不时地互相等待，此时 CyclicBarrier 很有用。因为该 barrier 在释放等待线程后可以重用，所以称它为循环的 barrier。
CyclicBarrier支持一个可选的 Runnable 命令，</div>
</li>
<li><a href="/article/1455.htm"
title="九项重要的职业规划" target="_blank">九项重要的职业规划</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
<div>一. 学习的步伐不停止 古人说，活到老，学到老。终身学习应该是您的座右铭。 世界在不断变化，每个人都在寻找各自的事业途径。 您只有保证了足够的技能储</div>
</li>
<li><a href="/article/1582.htm"
title="【Java范型四】范型方法" target="_blank">【Java范型四】范型方法</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>范型参数不仅仅可以用于类型的声明上，例如
package com.tom.lang.generics;
import java.util.List;
public class Generics<T> {
private T value;
public Generics(T value) {
this.value = </div>
</li>
<li><a href="/article/1709.htm"
title="【Hadoop十三】HDFS Java API基本操作" target="_blank">【Hadoop十三】HDFS Java API基本操作</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a>
<div>
package com.examples.hadoop;
import org.apache.hadoop.conf.Configuration;
import org.apache.hadoop.fs.FSDataInputStream;
import org.apache.hadoop.fs.FileStatus;
import org.apache.hadoo</div>
</li>
<li><a href="/article/1836.htm"
title="ua实现split字符串分隔" target="_blank">ua实现split字符串分隔</a>
<span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/lua+split/1.htm">lua split</a>
<div>LUA并不象其它许多"大而全"的语言那样，包括很多功能，比如网络通讯、图形界面等。但是LUA可以很容易地被扩展：由宿主语言(通常是C或 C++)提供这些功能，LUA可以使用它们，就像是本来就内置的功能一样。LUA只包括一个精简的核心和最基本的库。这使得LUA体积小、启动速度快，从 而适合嵌入在别的程序里。因此在lua中并没有其他语言那样多的系统函数。习惯了其他语言的字符串分割函</div>
</li>
<li><a href="/article/1963.htm"
title="java-从先序遍历和中序遍历重建二叉树" target="_blank">java-从先序遍历和中序遍历重建二叉树</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>
public class BuildTreePreOrderInOrder {
/**
* Build Binary Tree from PreOrder and InOrder
* _______7______
/ \
__10__ ___2
/ \ /
4</div>
</li>
<li><a href="/article/2090.htm"
title="openfire开发指南《连接和登陆》" target="_blank">openfire开发指南《连接和登陆》</a>
<span class="text-muted">开窍的石头</span>
<a class="tag" taget="_blank" href="/search/openfire/1.htm">openfire</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/1.htm">开发指南</a><a class="tag" taget="_blank" href="/search/smack/1.htm">smack</a>
<div>第一步
官网下载smack.jar包
下载地址：http://www.igniterealtime.org/downloads/index.jsp#smack
第二步
把smack里边的jar导入你新建的java项目中
开始编写smack连接openfire代码
p</div>
</li>
<li><a href="/article/2217.htm"
title="[移动通讯]手机后盖应该按需要能够随时开启" target="_blank">[移动通讯]手机后盖应该按需要能够随时开启</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8/1.htm">移动</a>
<div> 看到新的手机，很多由金属材质做的外壳，内存和闪存容量越来越大，CPU速度越来越快，对于这些改进，我们非常高兴，也非常欢迎
但是，对于手机的新设计，有几点我们也要注意
第一：手机的后盖应该能够被用户自行取下来，手机的电池的可更换性应该是必须保留的设计,</div>
</li>
<li><a href="/article/2344.htm"
title="20款国外知名的php开源cms系统" target="_blank">20款国外知名的php开源cms系统</a>
<span class="text-muted">cuiyadll</span>
<a class="tag" taget="_blank" href="/search/cms/1.htm">cms</a>
<div>内容管理系统，简称CMS，是一种简易的发布和管理新闻的程序。用户可以在后端管理系统中发布，编辑和删除文章，即使您不需要懂得HTML和其他脚本语言，这就是CMS的优点。
在这里我决定介绍20款目前国外市面上最流行的开源的PHP内容管理系统，以便没有PHP知识的读者也可以通过国外内容管理系统建立自己的网站。
1. Wordpress
WordPress的是一个功能强大且易于使用的内容管</div>
</li>
<li><a href="/article/2471.htm"
title="Java生成全局唯一标识符" target="_blank">Java生成全局唯一标识符</a>
<span class="text-muted">darrenzhu</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/uuid/1.htm">uuid</a><a class="tag" taget="_blank" href="/search/unique/1.htm">unique</a><a class="tag" taget="_blank" href="/search/identifier/1.htm">identifier</a><a class="tag" taget="_blank" href="/search/id/1.htm">id</a>
<div>How to generate a globally unique identifier in Java
http://stackoverflow.com/questions/21536572/generate-unique-id-in-java-to-label-groups-of-related-entries-in-a-log
http://stackoverflow</div>
</li>
<li><a href="/article/2598.htm"
title="php安装模块检测是否已安装过, 使用的SQL语句" target="_blank">php安装模块检测是否已安装过, 使用的SQL语句</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a>
<div>
SHOW [FULL] TABLES [FROM db_name] [LIKE 'pattern']
SHOW TABLES列举了给定数据库中的非TEMPORARY表。您也可以使用mysqlshow db_name命令得到此清单。
本命令也列举数据库中的其它视图。支持FULL修改符，这样SHOW FULL TABLES就可以显示第二个输出列。对于一个表，第二列的值为BASE T</div>
</li>
<li><a href="/article/2725.htm"
title="5天学会一种 web 开发框架" target="_blank">5天学会一种 web 开发框架</a>
<span class="text-muted">dcj3sjt126com</span>
<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/framework/1.htm">framework</a>
<div>web framework层出不穷，特别是ruby/python,各有10+个,php/java也是一大堆 根据我自己的经验写了一个to do list,按照这个清单，一条一条的学习，事半功倍，很快就能掌握 一共25条，即便很磨蹭，2小时也能搞定一条，25*2=50。只需要50小时就能掌握任意一种web框架
各类web框架大同小异:现代web开发框架的6大元素，把握主线，就不会迷路
建议把本文</div>
</li>
<li><a href="/article/2852.htm"
title="Gson使用三(Map集合的处理,一对多处理)" target="_blank">Gson使用三(Map集合的处理,一对多处理)</a>
<span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/gson/1.htm">gson</a><a class="tag" taget="_blank" href="/search/Gson+map/1.htm">Gson map</a><a class="tag" taget="_blank" href="/search/Gson+%E9%9B%86%E5%90%88%E5%A4%84%E7%90%86/1.htm">Gson 集合处理</a>
<div>转载请出自出处：http://eksliang.iteye.com/blog/2175532 一、概述
Map保存的是键值对的形式，Json的格式也是键值对的，所以正常情况下，map跟json之间的转换应当是理所当然的事情。 二、Map参考实例
package com.ickes.json;
import java.lang.refl</div>
</li>
<li><a href="/article/2979.htm"
title="cordova实现“再点击一次退出”效果" target="_blank">cordova实现“再点击一次退出”效果</a>
<span class="text-muted">gundumw100</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
<div>基本的写法如下：
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//navigator.splashscreen.hide();
document.addEventListener("b</div>
</li>
<li><a href="/article/3106.htm"
title="openldap configuration leaning note" target="_blank">openldap configuration leaning note</a>
<span class="text-muted">iwindyforest</span>
<a class="tag" taget="_blank" href="/search/configuration/1.htm">configuration</a>
<div>hostname // to display the computer name
hostname <changed name> // to change
go to: /etc/sysconfig/network, add/modify HOSTNAME=NEWNAME to change permenately
dont forget to change /etc/hosts</div>
</li>
<li><a href="/article/3233.htm"
title="Nullability and Objective-C" target="_blank">Nullability and Objective-C</a>
<span class="text-muted">啸笑天</span>
<a class="tag" taget="_blank" href="/search/Objective-C/1.htm">Objective-C</a>
<div>https://developer.apple.com/swift/blog/?id=25
http://www.cocoachina.com/ios/20150601/11989.html
http://blog.csdn.net/zhangao0086/article/details/44409913
http://blog.sunnyxx</div>
</li>
<li><a href="/article/3360.htm"
title="jsp中实现参数隐藏的两种方法" target="_blank">jsp中实现参数隐藏的两种方法</a>
<span class="text-muted">macroli</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a>
<div>在一个JSP页面有一个链接，//确定是一个链接?点击弹出一个页面，需要传给这个页面一些参数。//正常的方法是设置弹出页面的src="***.do?p1=aaa&p2=bbb&p3=ccc"//确定目标URL是Action来处理?但是这样会在页面上看到传过来的参数，可能会不安全。要求实现src="***.do"，参数通过其他方法传！//////</div>
</li>
<li><a href="/article/3487.htm"
title="Bootstrap A标签关闭modal并打开新的链接解决方案" target="_blank">Bootstrap A标签关闭modal并打开新的链接解决方案</a>
<span class="text-muted">qiaolevip</span>
<a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a><a class="tag" taget="_blank" href="/search/%E7%BA%B5%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">纵观千象</a>
<div>Bootstrap里面的js modal控件使用起来很方便，关闭也很简单。只需添加标签 data-dismiss="modal" 即可。
可是偏偏有时候需要a标签既要关闭modal，有要打开新的链接，尝试多种方法未果。只好使用原始js来控制。
<a href="#/group-buy" class="btn bt</div>
</li>
<li><a href="/article/3614.htm"
title="二维数组在Java和C中的区别" target="_blank">二维数组在Java和C中的区别</a>
<span class="text-muted">流淚的芥末</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a>
<div>Java代码：
public class test03 {
public static void main(String[] args) {
int[][] a = {{1},{2,3},{4,5,6}};
System.out.println(a[0][1]);
}
}
运行结果：
Exception in thread "mai</div>
</li>
<li><a href="/article/3741.htm"
title="systemctl命令用法" target="_blank">systemctl命令用法</a>
<span class="text-muted">wmlJava</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/systemctl/1.htm">systemctl</a>
<div>对比表，以 apache / httpd 为例 任务 旧指令 新指令 使某服务自动启动 chkconfig --level 3 httpd on systemctl enable httpd.service 使某服务不自动启动 chkconfig --level 3 httpd off systemctl disable httpd.service 检查服务状态 service h</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>
