wusq5477
vue-cli3.0引入pdf.js，解决Uncaught SyntaxError: Unexpected token报错

pdf.js的引入是在将官网下载的包放到static目录，然后通过iframe引用的。但是vue-cli3.0没有static文件夹，下面详细介绍一下vue-cli3.0的引入方式
1.下载包

百度搜索pdfjs，或者点击链接http://mozilla.github.io/pdf.js/getting_started/#download 点击下载
2.在public目录新建static文件夹，将下载的pdf包解压了放进去

注意static文件夹不能创建在src统计目录，否则访问不到，会报错Uncaught SyntaxError: Unexpected token '<'
3.这个包有7M，我为了缩小体积将语言包几乎都删了，只留下简体中文
4.在vue页面引用，src可以是绝对路径或者文件流，
我测试用的src: 'https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf'
      </code></pre> 
  <p>5. 运行效果（我对源码进行了改造，加了一个蓝色的可以勾选的按钮）</p> 
  <p><a href="http://img.e-com-net.com/image/info8/5cc24896f85d498f826809a23ae44554.jpg" target="_blank"><img alt="vue-cli3.0引入pdf.js，解决Uncaught SyntaxError: Unexpected token报错_第4张图片" height="439" src="http://img.e-com-net.com/image/info8/5cc24896f85d498f826809a23ae44554.jpg" width="650" style="border:1px solid black;"></a></p> 
  <p>6.由于我的项目不需要右边的所有功能，所以我将右边的按钮以及代码删掉了，我的项目效果，选择的页码和总页码存在sessionStorage</p> 
  <p><a href="http://img.e-com-net.com/image/info8/848fbe4efc634061b49b2f7ce23c2e10.jpg" target="_blank"><img alt="vue-cli3.0引入pdf.js，解决Uncaught SyntaxError: Unexpected token报错_第5张图片" height="358" src="http://img.e-com-net.com/image/info8/848fbe4efc634061b49b2f7ce23c2e10.jpg" width="650" style="border:1px solid black;"></a></p> 
  <p>7.贴下链接https://github.com/wsq-wushiqi/vue-pdf-use/tree/master/pdfwatcher </p> 
  <p>8.关于签名印章无法显示的问题已经在源码里面改正了，但是出现了一个问题，就是翻到有盖章的页面就会报下图的错，未解决，希望大家帮忙提点指正~</p> 
  <p><a href="http://img.e-com-net.com/image/info8/f30d4bd0e66c4244832850651ad6ee8a.png" target="_blank"><img alt="vue-cli3.0引入pdf.js，解决Uncaught SyntaxError: Unexpected token报错_第6张图片" height="147" src="http://img.e-com-net.com/image/info8/f30d4bd0e66c4244832850651ad6ee8a.png" width="296" style="border:1px solid black;"></a></p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1276178040895848448"></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">你可能感兴趣的:(pdf.js,vue)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1883450501127794688.htm"
                           title="SpringBoot使用 easy-captcha 实现验证码登录功能" target="_blank">SpringBoot使用 easy-captcha 实现验证码登录功能</a>
                        <span class="text-muted">八月五</span>
<a class="tag" taget="_blank" href="/search/%E5%AE%9E%E6%88%98%E9%A1%B9%E7%9B%AE/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>
                        <div>文章目录一、环境准备1.解决思路2.接口文档3.redis下载二、后端实现1.引入依赖2.添加配置3.后端代码实现4.前端代码实现在前后端分离的项目中，登录功能是必不可少的。为了提高安全性，通常会加入验证码验证。easy-captcha是一个简单易用的验证码生成库，支持多种类型的验证码（如字符、中文、算术等）。本文将介绍如何在SpringBoot后端和Vue.js前端中集成easy-captcha</div>
                    </li>
                    <li><a href="/article/1883414562208804864.htm"
                           title="Vue 2 + Element UI 实现密码显示、隐藏切换功能" target="_blank">Vue 2 + Element UI 实现密码显示、隐藏切换功能</a>
                        <span class="text-muted">半城风月-</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a>
                        <div>一、使用ElementUI的show-password属性1、ElementUI的组件提供了一个方便的show-password属性。启用后，它会自动添加一个切换密码显示、隐藏的按钮。2、代码3、优点：实现简单，无需额外代码。缺点：不支持自定义图标。二、自定义后缀图标实现密码显示/隐藏1、如果你想要使用自己的图标或实现更多自定义功能，可以通过插槽（slot）的方式来自定义后缀图标，并通过绑定事件来</div>
                    </li>
                    <li><a href="/article/1883399805426790400.htm"
                           title="vue el-upload 上传图片列表校验不通过后多删除了一张图片" target="_blank">vue el-upload 上传图片列表校验不通过后多删除了一张图片</a>
                        <span class="text-muted">＊且听风吟</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/2.x/1.htm">2.x</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><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>问题最近在使用element-ui的el-upload组件上传图片列表时，发现当上传的图片校验不通过时，会将上一张已经上传成功的图片删除了。场景已经上传了一张图片1，再上传另一张图片2，如果当前这张图片2校验不通过，会提示失败并且删除当前图片2，同时，也会将上一张已经上传成功的图片1也删除。组件主要代码：上传支持上传图片，单文件上传大小限制10MB，最多上传10张附件---------------</div>
                    </li>
                    <li><a href="/article/1883371570798325760.htm"
                           title="**让表单设计从未如此优雅——Vue Formly深度解析**" target="_blank">**让表单设计从未如此优雅——Vue Formly深度解析**</a>
                        <span class="text-muted">孙爽知Kody</span>

                        <div>让表单设计从未如此优雅——VueFormly深度解析vue-formlyJavaScriptpoweredformsforVue.js项目地址:https://gitcode.com/gh_mirrors/vu/vue-formly在Web开发中，处理复杂的表单逻辑往往让人头疼。无论是数据验证还是界面的统一风格，都需要开发者花费大量精力来维护代码的一致性和效率。今天，我们要向大家推荐一个强大的表单</div>
                    </li>
                    <li><a href="/article/1883326297392869376.htm"
                           title="简单的基于Spring Cloud和Vue的示例项目结构及部分关键代码" target="_blank">简单的基于Spring Cloud和Vue的示例项目结构及部分关键代码</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/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/cloud/1.htm">cloud</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
                        <div>后端（SpringCloud部分）1.创建SpringCloud项目（以SpringCloudGateway和SpringCloudEureka为例）首先，使用SpringInitializr创建一个基础的SpringBoot项目，并添加相关的SpringCloud依赖，比如：spring-cloud-starter-gateway：用于实现API网关功能。spring-cloud-starter</div>
                    </li>
                    <li><a href="/article/1883326171043655680.htm"
                           title="从零基础开始实现一个Spring Boot + Vue 项目的详细步骤指南" target="_blank">从零基础开始实现一个Spring Boot + Vue 项目的详细步骤指南</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/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.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
                        <div>一、准备工作1.开发环境搭建安装JDK（JavaDevelopmentKit）：前往Oracle官网（https://www.oracle.com/java/technologies/javase-jdk11-downloads.html，以JDK11为例）下载适合你操作系统的JDK安装包，按照安装向导完成安装。安装完成后，配置系统环境变量，确保在命令行中能通过java-version命令查看到正</div>
                    </li>
                    <li><a href="/article/1883325538844602368.htm"
                           title="elment plus 报错：ElementPlusError: [ElForm] unexpected width 0 at debugWarn (error.ts:13:37)" target="_blank">elment plus 报错：ElementPlusError: [ElForm] unexpected width 0 at debugWarn (error.ts:13:37)</a>
                        <span class="text-muted">m0_75101866</span>
<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><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>解决：Vue3警告问题记录二_elementpluserror:[elform]unexpectedwidth0-CSDN博客测试添加label-width依然warning，el-form-item包裹了el-button，拿出来就好了，为其他el-form-item都添加上label-width</div>
                    </li>
                    <li><a href="/article/1883320120747552768.htm"
                           title="vue局域网内访问" target="_blank">vue局域网内访问</a>
                        <span class="text-muted">Simorel</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue%E5%B1%80%E5%9F%9F%E7%BD%91%E8%AE%BF%E9%97%AE/1.htm">vue局域网访问</a>
                        <div>为了能在公司局域网内访问vue项目需要配置vue项目配置vue.config.jsmodule.exports={devServer:{/**为了在局域网内访问修改host*/host:'0.0.0.0',},};win10配置</div>
                    </li>
                    <li><a href="/article/1883315324950999040.htm"
                           title="vue 无法 局域网内访问" target="_blank">vue 无法 局域网内访问</a>
                        <span class="text-muted">m0_75101866</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/1.htm">开发工具</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
                        <div>资料Vue项目设置可以局域网访问_vue.js_脚本之家过程上午，前端vue服务能够在局域网内访问，下午就不行了，但是后端服务能够正常访问，本机也能正常访问ip：端口号前端服务判定不是下面的问题：同一局域网下访问vue项目_vue在局域网内访问-CSDN博客然后，关闭防火墙尝试。。-_-!netshadvfirewallfirewalladdrulename="Allow8080"dir=inac</div>
                    </li>
                    <li><a href="/article/1883309141791928320.htm"
                           title="Element table 表头吸顶效果（适用于表头无fixed属性使用）" target="_blank">Element table 表头吸顶效果（适用于表头无fixed属性使用）</a>
                        <span class="text-muted">阳光的男夹克</span>
<a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/2/1.htm">2</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>在main.js自定义sticky指令Vue.directive('sticky',{//当被绑定的元素插入到DOM中时……inserted(el,binding){//获取表格constthead=el.children[1]consttbody=el.children[2]//获取滚动元素constscrollParent=document.querySelector(binding.valu</div>
                    </li>
                    <li><a href="/article/1883307627673350144.htm"
                           title="vue 前端显示图片加token_手摸手，带你用vue撸后台 系列二(登录权限篇)" target="_blank">vue 前端显示图片加token_手摸手，带你用vue撸后台 系列二(登录权限篇)</a>
                        <span class="text-muted">weixin_39562579</span>
<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%E6%98%BE%E7%A4%BA%E5%9B%BE%E7%89%87%E5%8A%A0token/1.htm">前端显示图片加token</a><a class="tag" taget="_blank" href="/search/vue%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8/1.htm">vue本地存储</a><a class="tag" taget="_blank" href="/search/vue%E7%BC%96%E8%BE%91%E9%A1%B5%E9%9D%A2%E5%92%8C%E6%96%B0%E5%A2%9E/1.htm">vue编辑页面和新增</a>
                        <div>完整项目地址：vue-element-adminhttps://github.com/PanJiaChen/vue-element-admin前言拖更有点严重，过了半个月才写了第二篇教程。无奈自己是一个业务猿，每天被我司的产品虐的死去活来，之前又病了一下休息了几天，大家见谅。进入正题，做后台项目区别于做其它的项目，权限验证与安全性是非常重要的，可以说是一个后台项目一开始就必须考虑和搭建的基础核心功</div>
                    </li>
                    <li><a href="/article/1883305733085261824.htm"
                           title="Vite + Vue3 + TS项目配置前置路由守卫" target="_blank">Vite + Vue3 + TS项目配置前置路由守卫</a>
                        <span class="text-muted">洛*璃</span>
<a class="tag" taget="_blank" href="/search/Vue.js/1.htm">Vue.js</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</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/Vue-Router/1.htm">Vue-Router</a><a class="tag" taget="_blank" href="/search/Pinia/1.htm">Pinia</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a>
                        <div>在现代前端开发中，使用Vue3和TypeScript的组合是一种流行且高效的开发方式。Vite是一个极速的构建工具，可以显著提升开发体验。本文博主将指导你如何在Vite+Vue3+TypeScript项目中配置前置路由守卫（NavigationGuards）。前置条件在开始配置项目前置路由守卫前，博主希望你能够先达成以下前置条件：1.完成Vue3前端项目搭建:Vite创建Vue3+TS项目2.引入</div>
                    </li>
                    <li><a href="/article/1883302834150109184.htm"
                           title="el-table表格单行表头" target="_blank">el-table表格单行表头</a>
                        <span class="text-muted">Is无糖</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</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>
                        <div>最近开发项目遇到一个订单列表展示的需要在每一行表头上进行订单的某些操作和数据展示如图：表格一般我都是使用elementui的el-table正常使用肯定是不能满足这个效果想了想也是有点思绪便做了一个demo记录一下效果图：父组件代码:importchilTabelfrom'./components/chilTable.vue';exportdefault{data(){return{tableDa</div>
                    </li>
                    <li><a href="/article/1883302706844594176.htm"
                           title=".NET 7迁移后OutOfMemoryException的解决之旅" target="_blank">.NET 7迁移后OutOfMemoryException的解决之旅</a>
                        <span class="text-muted">t0_54coder</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%89%8B%E5%86%8C/1.htm">编程问题解决手册</a><a class="tag" taget="_blank" href="/search/%E4%B8%AA%E4%BA%BA%E5%BC%80%E5%8F%91/1.htm">个人开发</a>
                        <div>引言最近，我们将应用从.NET5升级到了.NET7，并将UI框架从标准MVC升级到了Vue3。升级后，一切看起来都运行良好，但仅仅一周后，我们开始遇到了令人困惑的System.OutOfMemoryException。这些异常出现在代码库的不同、看似无关的部分，而这些部分并不总是处理大量数据。这篇博客将详细记录我们如何解决这些内存异常的问题。问题描述在迁移到.NET7后，我们开始频繁地看到Syst</div>
                    </li>
                    <li><a href="/article/1883302580088532992.htm"
                           title="Vue2.0+ElementUI实现查询条件展开和收起功能组件" target="_blank">Vue2.0+ElementUI实现查询条件展开和收起功能组件</a>
                        <span class="text-muted">热忱1128</span>
<a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</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>
                        <div>一、需求el-form如果查询条件过多，影响页面的展示效果。查询条件表单是我们系统中非常常见的功能，我们需要把它封装成一个通用的组件，方便在系统开发中提升开发效率。除了在实现基本查询条件的功能上，还需要实现多条件的折叠和展开功能二、效果图三、代码示例封装查询条件表单组件SearchButton.vue查询重置{{word}}exportdefault{props:{showAll:{type:Bo</div>
                    </li>
                    <li><a href="/article/1883301698601021440.htm"
                           title="JHipster入门 - 生成单体架构的应用" target="_blank">JHipster入门 - 生成单体架构的应用</a>
                        <span class="text-muted">yorkwu1977</span>
<a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E5%B7%A5%E7%A8%8B/1.htm">软件工程</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a>
                        <div>JHipster入门-生成单体架构的应用目标准备工作生成基础功能输入指令开始问答环节问答环节结束，开始自动生成基础功能代码生成业务功能输入指令开始问答环节问答环节结束，开始自动生成业务功能代码调试启动启动后端服务启动前端服务访问前端页面打包启动构建启动访问前端页面关于数据库交给JHipster自己启动目标30分钟内生成一个开箱即用的单体架构应用。生成SpringBoot后端代码和Vue前端代码。基</div>
                    </li>
                    <li><a href="/article/1883297033922605056.htm"
                           title="【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞ 使用vue-content-menu定制可编辑树结构editableTree" target="_blank">【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞ 使用vue-content-menu定制可编辑树结构editableTree</a>
                        <span class="text-muted">小白Rachel</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%B7%A5%E4%BD%9C%E6%97%A5%E8%AE%B0%E9%9A%8F%E7%AC%94/1.htm">前端工作日记随笔</a><a class="tag" taget="_blank" href="/search/Vue%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98/1.htm">Vue项目实战</a><a class="tag" taget="_blank" href="/search/elementUI%E7%BB%84%E4%BB%B6%E4%BC%98%E5%8C%96/1.htm">elementUI组件优化</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/el-tree/1.htm">el-tree</a><a class="tag" taget="_blank" href="/search/%E7%BB%84%E7%BB%87%E6%9C%BA%E6%9E%84%E6%A0%91/1.htm">组织机构树</a>
                        <div>文章资源连接（如果需要付费，联系我修改即可）：https://download.csdn.net/download/Sabrina_cc/87607289好吧吐槽一下，公司决定之后的技术栈都是vue了，我又从React转战回来了。干巴爹好的生活方式，是和一群志同道合的人，一起奔跑在理想的路上！回头有一路的故事，低头有坚定的脚步，抬头有清晰的远方。首先了解Element-UI中定义的基础Tree树组</div>
                    </li>
                    <li><a href="/article/1883291484334125056.htm"
                           title="elementUI Table组件实现表头吸顶效果" target="_blank">elementUI Table组件实现表头吸顶效果</a>
                        <span class="text-muted">热忱1128</span>
<a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>需求描述当table内容过多的时候，页面上滑滚动，表头的信息也会随着被遮挡，无法将表头信息和表格内容对应起来，需要进行表头吸顶开始编码环境：vue2.6+、elementUIstep1：给el-table__header-wrapper加上样式//style/sticky-table-header.scss.el-table[is-sticky]{overflow:initial;--sticky</div>
                    </li>
                    <li><a href="/article/1883291231467925504.htm"
                           title="Vue 3中导航守卫（Navigation Guard）结合Axios实现token认证机制" target="_blank">Vue 3中导航守卫（Navigation Guard）结合Axios实现token认证机制</a>
                        <span class="text-muted">匹马夕阳</span>
<a class="tag" taget="_blank" href="/search/VUE%E6%8A%80%E6%9C%AF%E9%9B%86%E9%94%A6/1.htm">VUE技术集锦</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</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>
                        <div>在Vue3中，导航守卫（NavigationGuard）用于拦截路由的变化，可以在用户访问页面前进行检查。结合Axios进行token认证机制时，我们可以通过导航守卫在路由跳转时，检查用户的认证状态，确保用户有有效的token进行认证。下面，我将通过具体代码示例，逐步讲解如何实现这一功能：文章目录1.安装必要的依赖2.创建`axios`实例3.在`router.js`中使用导航守卫4.处理登录与登</div>
                    </li>
                    <li><a href="/article/1883263867824435200.htm"
                           title="【新创建项目快速推送到代码仓库】" target="_blank">【新创建项目快速推送到代码仓库】</a>
                        <span class="text-muted">sky10100100</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a>
                        <div>要将新创建的项目快速推送到Git仓库，可以按照以下步骤操作：1.在GitHub上创建一个新仓库登录GitHub，点击右上角的“+”号并选择“Newrepository”。给仓库命名，并设置是否公开或私有，点击“Createrepository”创建新仓库。创建完成后，拷贝仓库地址，如：https://github.com/{name}/vue-demo.github2.初始化项目并添加远程仓库进入</div>
                    </li>
                    <li><a href="/article/1883243422161104896.htm"
                           title="fuadmin" target="_blank">fuadmin</a>
                        <span class="text-muted">jcsx</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E5%AD%A6%E4%B9%A0/1.htm">开源学习</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
                        <div>fu-admin-web采用VUE3，TS开发。fu-admin-backend采用Python，Django和Django-Ninija开发。数据库支持MySql，SqlServer，Sqlite。‍‍前端采用VbenAdmin、Vue3、AntDesignVue。后端采用Python语言Django框架以及强大的DjangoNinja。支持加载动态权限菜单，多方式轻松权限控制。Vue2项目移步</div>
                    </li>
                    <li><a href="/article/1883227783065300992.htm"
                           title="请简述vue2和vue3的区别" target="_blank">请简述vue2和vue3的区别</a>
                        <span class="text-muted">youhebuke225</span>
<a class="tag" taget="_blank" href="/search/vue%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">vue面试题</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</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>
                        <div>Vue2和Vue3作为Vue.js框架的两个主要版本，在多个方面存在显著的差异。以下是它们之间主要区别的详细概述：生命周期函数钩子：Vue2：包含了一系列的生命周期钩子函数，如beforeCreate、created、beforeMount等，这些函数在组件的不同生命周期阶段被调用。Vue3：对生命周期函数进行了调整，setup成为了新的入口点，代替了beforeCreate和created。同时</div>
                    </li>
                    <li><a href="/article/1883226015656898560.htm"
                           title="vue3表格数据分2个表格序号连续展示" target="_blank">vue3表格数据分2个表格序号连续展示</a>
                        <span class="text-muted">我爱加班、、</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/1.htm">前端开发遇到的问题</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%8A%9F%E8%83%BD%E5%AE%9E%E7%8E%B0%E4%BB%A5%E5%8F%8A%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3/1.htm">前端功能实现以及问题解决</a><a class="tag" taget="_blank" href="/search/vue%E9%A1%B9%E7%9B%AE%E5%AE%9E%E9%99%85%E5%BC%80%E5%8F%91%E4%B8%AD%E7%9A%84bug/1.htm">vue项目实际开发中的bug</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</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>
                        <div>一、el-table表格在弹窗里面分两个表格展示。假设我们有一个数组tableData，我们希望在第一个表格中展示前半部分的数据，第二个表格中展示后半部分的数据。打开弹窗取消确定exportdefault{data(){return{dialogVisible:false,tableData:[{date:'2024-01-01',name:'张三',address:'上海市浦东新区',},{da</div>
                    </li>
                    <li><a href="/article/1883225889416736768.htm"
                           title="vue3实际开发bug解决" target="_blank">vue3实际开发bug解决</a>
                        <span class="text-muted">我爱加班、、</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/1.htm">前端开发遇到的问题</a><a class="tag" taget="_blank" href="/search/vue%E9%A1%B9%E7%9B%AE%E5%AE%9E%E9%99%85%E5%BC%80%E5%8F%91%E4%B8%AD%E7%9A%84bug/1.htm">vue项目实际开发中的bug</a><a class="tag" taget="_blank" href="/search/bug/1.htm">bug</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>
                        <div>index.vue:119Uncaught(inpromise)TypeError:Cannotcreateproperty'value'onstring'我是标题'问题分析：问题出在componentName的解构和赋值操作上。你尝试将一个字符串赋值给ref的.value属性，这导致了错误。ref是Vue3中用于响应式引用的工具，它返回一个对象，该对象的.value属性用于存储实际的值。解决：不</div>
                    </li>
                    <li><a href="/article/1883223619304222720.htm"
                           title="Vue3 - Element Plus 下拉菜单 el-dropdown 阻止冒泡传递到上层触发事件，解决 dropdown 下拉菜单组件被容器元素包裹时点击事件触发，会连带触发外层包裹容器的点击事件" target="_blank">Vue3 - Element Plus 下拉菜单 el-dropdown 阻止冒泡传递到上层触发事件，解决 dropdown 下拉菜单组件被容器元素包裹时点击事件触发，会连带触发外层包裹容器的点击事件</a>
                        <span class="text-muted">王二红</span>
<a class="tag" taget="_blank" href="/search/%2B/1.htm">+</a><a class="tag" taget="_blank" href="/search/Vue3/1.htm">Vue3</a><a class="tag" taget="_blank" href="/search/element/1.htm">element</a><a class="tag" taget="_blank" href="/search/plus/1.htm">plus</a><a class="tag" taget="_blank" href="/search/el-dropdown/1.htm">el-dropdown</a><a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/%E6%8A%8Acommand%E5%8A%A0%E4%B8%8A.stop/1.htm">把command加上.stop</a><a class="tag" taget="_blank" href="/search/%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95%E7%BB%84%E4%BB%B6%E5%A6%82%E4%BD%95%E7%82%B9%E5%87%BB%E4%B8%8D%E5%86%92%E6%B3%A1/1.htm">下拉菜单组件如何点击不冒泡</a><a class="tag" taget="_blank" href="/search/stop%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6%E9%98%BB%E6%AD%A2%E7%82%B9%E5%87%BB%E5%86%92%E6%B3%A1/1.htm">stop事件修饰符阻止点击冒泡</a><a class="tag" taget="_blank" href="/search/click.stop%E6%97%A0%E6%B3%95%E4%BD%BF%E7%94%A8/1.htm">click.stop无法使用</a>
                        <div>前言平常只需要给@click事件加入即可，但现在使用stop修饰符无法支持和识别语法。本文实现了在vue3+elementplus项目开发中，解决el-dropdown下拉菜单组件时点击事件冒泡问题（激活触发外层嵌套元素的点击事件，从而同时触发），使用.stop修饰符又没有地方可以加入的问题。本文提供完美解决方案，保证100%解决。如下图所示，常见于这种需求页面，点击“···”图标时就会引发点击事</div>
                    </li>
                    <li><a href="/article/1883222358546771968.htm"
                           title="vue-cli项目中使用Electron" target="_blank">vue-cli项目中使用Electron</a>
                        <span class="text-muted">骆驼Lara</span>
<a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>Vue项目中使用Electron一、安装二、创建background.js三、创建preload.js文件四、修改package.json文件五、修改vue.config.js文件六、启动1本地启动2打包补充：一、安装安装electron,electron-builder,vue-cli-plugin-electron-builder,electron-devtoolsnpmi--save-dev</div>
                    </li>
                    <li><a href="/article/1883221350747795456.htm"
                           title="Vue企业开发实战——学习心得" target="_blank">Vue企业开发实战——学习心得</a>
                        <span class="text-muted">sienn</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</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>
                        <div>一、Vue.js简介Vue.js是一个渐进式JavaScript框架，用于构建用户界面。它与其他大型框架的不同之处在于，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，也便于与第三方库或已有项目整合。二、环境配置安装Node.js和npm：Vue.js的开发需要使用Node.js和npm（Node包管理器）。可以从Node.js的官网下载并安装Node.js，它会自动</div>
                    </li>
                    <li><a href="/article/1883221351234334720.htm"
                           title="Vue3笔记——（五）路由" target="_blank">Vue3笔记——（五）路由</a>
                        <span class="text-muted">木子李BLOG</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
                        <div>组件通信_方式1_props作用：若父传子，属性值是飞函数若子传父，属性值是函数Parent.vue父组件汽车：{{car}}子给的玩具：{{toy}}importChildfrom'./Child.vue'import{ref}from'vue'//数据letcar=ref('奔驰')lettoy=ref('')letbb=ref(0)//方法functiongetToy(value:strin</div>
                    </li>
                    <li><a href="/article/1883219334340341760.htm"
                           title="深入理解 Vue 的 Diff 算法：从原理到实现的完整剖析" target="_blank">深入理解 Vue 的 Diff 算法：从原理到实现的完整剖析</a>
                        <span class="text-muted">qq_39279448</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>Vue的Diff算法如何工作？如何将传统树的比较复杂度从O(n^3)降到O(n)？Vue3的优化策略如何显著提升性能？Vue源码中Diff算法的实现细节是什么？实际开发中Diff算法的使用及优化实践。1.Diff算法的基本原理1.1为什么需要Diff算法？在浏览器中，直接操作真实DOM会导致：性能成本高：DOM是浏览器中的重量级对象，频繁操作会触发页面的回流（reflow）和重绘（repaint）</div>
                    </li>
                    <li><a href="/article/1883217441463529472.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/%E8%BD%AF%E4%BB%B6%E6%9E%84%E5%BB%BA/1.htm">软件构建</a>
                        <div>前端构建工具是开发现代Web应用时不可或缺的工具，用于优化代码、提升开发效率、以及实现高效的构建和部署。以下是常见的前端构建工具及其作用：1.模块打包工具Webpack特点：功能强大，插件与配置灵活。作用：将模块（JS、CSS、图片等）打包成浏览器可运行的文件。适用场景：中大型项目，需高度自定义。Vite特点：轻量、快速构建，基于ESModules。作用：适合现代框架如Vue、React，热更新速</div>
                    </li>
                                <li><a href="/article/37.htm"
                                       title="ASM系列五 利用TreeApi 解析生成Class" target="_blank">ASM系列五 利用TreeApi 解析生成Class</a>
                                    <span class="text-muted">lijingyao8206</span>
<a class="tag" taget="_blank" href="/search/ASM/1.htm">ASM</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E8%8A%82%E7%A0%81%E5%8A%A8%E6%80%81%E7%94%9F%E6%88%90/1.htm">字节码动态生成</a><a class="tag" taget="_blank" href="/search/ClassNode/1.htm">ClassNode</a><a class="tag" taget="_blank" href="/search/TreeAPI/1.htm">TreeAPI</a>
                                    <div>&nbsp; &nbsp;前面CoreApi的介绍部分基本涵盖了ASMCore包下面的主要API及功能，其中还有一部分关于MetaData的解析和生成就不再赘述。这篇开始介绍ASM另一部分主要的Api。TreeApi。这一部分源码是关联的asm-tree-5.0.4的版本。 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;在介绍前，先要知道一点， Tree工程的接口基本可以完</div>
                                </li>
                                <li><a href="/article/164.htm"
                                       title="链表树——复合数据结构应用实例" target="_blank">链表树——复合数据结构应用实例</a>
                                    <span class="text-muted">bardo</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E6%A0%91%E5%9E%8B%E7%BB%93%E6%9E%84/1.htm">树型结构</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E7%BB%93%E6%9E%84%E8%AE%BE%E8%AE%A1/1.htm">表结构设计</a><a class="tag" taget="_blank" href="/search/%E9%93%BE%E8%A1%A8/1.htm">链表</a><a class="tag" taget="_blank" href="/search/%E8%8F%9C%E5%8D%95%E6%8E%92%E5%BA%8F/1.htm">菜单排序</a>
                                    <div>我们清楚：数据库设计中，表结构设计的好坏，直接影响程序的复杂度。所以，本文就无限级分类（目录）树与链表的复合在表设计中的应用进行探讨。当然，什么是树，什么是链表，这里不作介绍。有兴趣可以去看相关的教材。 
需求简介： 
经常遇到这样的需求，我们希望能将保存在数据库中的树结构能够按确定的顺序读出来。比如，多级菜单、组织结构、商品分类。更具体的，我们希望某个二级菜单在这一级别中就是第一个。虽然它是最后</div>
                                </li>
                                <li><a href="/article/291.htm"
                                       title="为啥要用位运算代替取模呢" target="_blank">为啥要用位运算代替取模呢</a>
                                    <span class="text-muted">chenchao051</span>
<a class="tag" taget="_blank" href="/search/%E4%BD%8D%E8%BF%90%E7%AE%97/1.htm">位运算</a><a class="tag" taget="_blank" href="/search/%E5%93%88%E5%B8%8C/1.htm">哈希</a><a class="tag" taget="_blank" href="/search/%E6%B1%87%E7%BC%96/1.htm">汇编</a>
                                    <div>&nbsp; 
&nbsp; 在hash中查找key的时候，经常会发现用&amp;取代%，先看两段代码吧， 
&nbsp; 
&nbsp; JDK6中的HashMap中的indexFor方法： 
    /**
     * Returns index for hash code h.
     */
    static int indexFor(int h, int length) {
</div>
                                </li>
                                <li><a href="/article/418.htm"
                                       title="最近的情况" target="_blank">最近的情况</a>
                                    <span class="text-muted">麦田的设计者</span>
<a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%B4%BB/1.htm">生活</a><a class="tag" taget="_blank" href="/search/%E6%84%9F%E6%82%9F/1.htm">感悟</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E5%88%92/1.htm">计划</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E8%80%83/1.htm">软考</a><a class="tag" taget="_blank" href="/search/%E6%83%B3/1.htm">想</a>
                                    <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 今天是2015年4月27号 
&nbsp;&nbsp;&nbsp;&nbsp; 整理一下最近的思绪以及要完成的任务 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1、最近在驾校科目二练车，每周四天，练三周。其实做什么都要用心，追求合理的途径解决。为</div>
                                </li>
                                <li><a href="/article/545.htm"
                                       title="PHP去掉字符串中最后一个字符的方法" target="_blank">PHP去掉字符串中最后一个字符的方法</a>
                                    <span class="text-muted">IT独行者</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E7%AC%A6%E4%B8%B2/1.htm">字符串</a>
                                    <div>今天在PHP项目开发中遇到一个需求，去掉字符串中的最后一个字符&nbsp;原字符串1,2,3,4,5,6,&nbsp;去掉最后一个字符&quot;,&quot;，最终结果为1,2,3,4,5,6&nbsp;代码如下： 
$str = &quot;1,2,3,4,5,6,&quot;;
$newstr = substr($str,0,strlen($str)-1);
echo $newstr; </div>
                                </li>
                                <li><a href="/article/672.htm"
                                       title="hadoop在linux上单机安装过程" target="_blank">hadoop在linux上单机安装过程</a>
                                    <span class="text-muted">_wy_</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a>
                                    <div>1、安装JDK 
&nbsp; &nbsp; jdk版本最好是1.6以上，可以使用执行命令java -version查看当前JAVA版本号，如果报命令不存在或版本比较低，则需要安装一个高版本的JDK，并在/etc/profile的文件末尾，根据本机JDK实际的安装位置加上以下几行： 
&nbsp; &nbsp;export JAVA_HOME=/usr/java/jdk1.7.0_25 &nbsp</div>
                                </li>
                                <li><a href="/article/799.htm"
                                       title="JAVA进阶----分布式事务的一种简单处理方法" target="_blank">JAVA进阶----分布式事务的一种简单处理方法</a>
                                    <span class="text-muted">无量</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%B3%BB%E7%BB%9F%E4%BA%A4%E4%BA%92/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/%E4%BA%8B%E5%8A%A1/1.htm">事务</a>
                                    <div>每个方法都是原子操作： 
 
提供第三方服务的系统，要同时提供执行方法和对应的回滚方法 
 
A系统调用B,C,D系统完成分布式事务 
 
 
=========执行开始======== 
A.aa(); 
 
try { 
 B.bb(); 
} catch(Exception e) { 
 A.rollbackAa(); 
} 
 
try { 
 C.cc(); 
} catch(Excep</div>
                                </li>
                                <li><a href="/article/926.htm"
                                       title="安墨移动广 告：移动DSP厚积薄发 引领未来广 告业发展命脉" target="_blank">安墨移动广 告：移动DSP厚积薄发 引领未来广 告业发展命脉</a>
                                    <span class="text-muted">矮蛋蛋</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/%E4%BA%92%E8%81%94%E7%BD%91/1.htm">互联网</a>
                                    <div>　　“谁掌握了强大的DSP技术，谁将引领未来的广 告行业发展命脉。”2014年，移动广 告行业的热点非移动DSP莫属。各个圈子都在纷纷谈论，认为移动DSP是行业突破点，一时间许多移动广 告联盟风起云涌，竞相推出专属移动DSP产品。 
 
　　到底什么是移动DSP呢? 
 
　　DSP(Demand-SidePlatform)，就是需求方平台，为解决广 告主投放的各种需求，真正实现人群定位的精准广 </div>
                                </li>
                                <li><a href="/article/1053.htm"
                                       title="myelipse设置" target="_blank">myelipse设置</a>
                                    <span class="text-muted">alafqq</span>
<a class="tag" taget="_blank" href="/search/IP/1.htm">IP</a>
                                    <div>&nbsp; 在一个项目的完整的生命周期中，其维护费用，往往是其开发费用的数倍。因此项目的可维护性、可复用性是衡量一个项目好坏的关键。而注释则是可维护性中必不可少的一环。 
 
 
 
注释模板导入步骤&nbsp; 
 
 
 
安装方法： 
打开eclipse/myeclipse 
选择 window--&gt;Preferences--&gt;JAVA--&gt;Code--&gt;Code </div>
                                </li>
                                <li><a href="/article/1180.htm"
                                       title="java数组" target="_blank">java数组</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/java%E6%95%B0%E7%BB%84/1.htm">java数组</a>
                                    <div>java数组的 &nbsp; 声明 &nbsp;创建 &nbsp;初始化； &nbsp;&nbsp;java支持C语言 
&nbsp;&nbsp; 
&nbsp; 
数组中的每个数都有唯一的一个下标 
  一维数组的定义   声明：  int[] a = new int[3];声明数组中有三个数int[3]    
int[] a 中有三个数，下标从0开始，可以同过for来遍历数组中的数

</div>
                                </li>
                                <li><a href="/article/1307.htm"
                                       title="javascript读取表单数据" target="_blank">javascript读取表单数据</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
                                    <div>利用javascript读取表单数据，可以利用以下三种方法获取： 
1、通过表单ID属性：var a = document.getElementByIdx_x_x(&quot;id&quot;); 
2、通过表单名称属性：var b = document.getElementsByName(&quot;name&quot;); 
3、直接通过表单名字获取：var c = form.content.</div>
                                </li>
                                <li><a href="/article/1434.htm"
                                       title="探索JUnit4扩展：使用Theory" target="_blank">探索JUnit4扩展：使用Theory</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/JUnit/1.htm">JUnit</a><a class="tag" taget="_blank" href="/search/Theory/1.htm">Theory</a>
                                    <div>理论机制（Theory） 
一.为什么要引用理论机制（Theory） 
&nbsp; &nbsp; &nbsp; &nbsp; 当今软件开发中，测试驱动开发（TDD — Test-driven development）越发流行。为什么 TDD 会如此流行呢？因为它确实拥有很多优点，它允许开发人员通过简单的例子来指定和表明他们代码的行为意图。 
TDD 的优点： 
&nbsp; &nbsp; &nb</div>
                                </li>
                                <li><a href="/article/1561.htm"
                                       title="[Spring Data Mongo一]Spring Mongo Template操作MongoDB" target="_blank">[Spring Data Mongo一]Spring Mongo Template操作MongoDB</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/template/1.htm">template</a>
                                    <div>什么是Spring Data Mongo 
Spring Data MongoDB项目对访问MongoDB的Java客户端API进行了封装，这种封装类似于Spring封装Hibernate和JDBC而提供的HibernateTemplate和JDBCTemplate，主要能力包括 
1. 封装客户端跟MongoDB的链接管理 
2. 文档-对象映射，通过注解:@Document(collectio</div>
                                </li>
                                <li><a href="/article/1688.htm"
                                       title="【Kafka八】Zookeeper上关于Kafka的配置信息" target="_blank">【Kafka八】Zookeeper上关于Kafka的配置信息</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a>
                                    <div>问题： 
1. Kafka的哪些信息记录在Zookeeper中 2. Consumer Group消费的每个Partition的Offset信息存放在什么位置 
3. Topic的每个Partition存放在哪个Broker上的信息存放在哪里 
4. Producer跟Zookeeper究竟有没有关系？没有关系！！！ 
&nbsp; 
//consumers、config、brokers、cont</div>
                                </li>
                                <li><a href="/article/1815.htm"
                                       title="java OOM内存异常的四种类型及异常与解决方案" target="_blank">java OOM内存异常的四种类型及异常与解决方案</a>
                                    <span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/java+OOM+%E5%86%85%E5%AD%98%E5%BC%82%E5%B8%B8/1.htm">java OOM 内存异常</a>
                                    <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 　OOM异常的四种类型： 
　　　 
　　一：　StackOverflowError ：通常因为递归函数引起（死递归，递归太深）。-Xss 128k 一般够用。 
&nbsp; 
&nbsp; 　&nbsp; 二：　out Of memory: PermGen Space：通常是动态类大多，比如web 服务器自动更新部署时引起。-Xmx</div>
                                </li>
                                <li><a href="/article/1942.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>20120422更新： 
对链表中部分节点进行反转操作，这些节点相隔k个： 
0-&gt;1-&gt;2-&gt;3-&gt;4-&gt;5-&gt;6-&gt;7-&gt;8-&gt;9 
k=2 
8-&gt;1-&gt;6-&gt;3-&gt;4-&gt;5-&gt;2-&gt;7-&gt;0-&gt;9 
注意1 3 5 7 9 位置是不变的。 
解法： 
将链表拆成两部分： 
a.0-&</div>
                                </li>
                                <li><a href="/article/2069.htm"
                                       title="Netty源码学习-DelimiterBasedFrameDecoder" target="_blank">Netty源码学习-DelimiterBasedFrameDecoder</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/netty/1.htm">netty</a>
                                    <div> 看DelimiterBasedFrameDecoder的API，有举例： 
 接收到的ChannelBuffer如下： 
 
 +--------------+
 | ABC\nDEF\r\n |
 +--------------+ 
 经过DelimiterBasedFrameDecoder(Delimiters.lineDelimiter())之后，得到： 
 
 +-----+----</div>
                                </li>
                                <li><a href="/article/2196.htm"
                                       title="linux的一些命令 -查看cc攻击-网口ip统计等" target="_blank">linux的一些命令 -查看cc攻击-网口ip统计等</a>
                                    <span class="text-muted">hotsunshine</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                                    <div>Linux判断CC攻击命令详解 
2011年12月23日 ⁄ 安全 ⁄ 暂无评论 
查看所有80端口的连接数 
 
 
netstat -nat|grep -i '80'|wc -l
对连接的IP按连接数量进行排序

netstat -ntu | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -n
查看TCP连接状态

n</div>
                                </li>
                                <li><a href="/article/2323.htm"
                                       title="Spring获取SessionFactory" target="_blank">Spring获取SessionFactory</a>
                                    <span class="text-muted">ctrain</span>
<a class="tag" taget="_blank" href="/search/sessionFactory/1.htm">sessionFactory</a>
                                    <div>
String sql = &quot;select sysdate from dual&quot;;
		
WebApplicationContext wac = ContextLoader.getCurrentWebApplicationContext(); 
String[] names = wac.getBeanDefinitionNames();
for(int i=0; i&</div>
                                </li>
                                <li><a href="/article/2450.htm"
                                       title="Hive几种导出数据方式" target="_blank">Hive几种导出数据方式</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA/1.htm">数据导出</a>
                                    <div>Hive几种导出数据方式 
&nbsp;    
1.拷贝文件 
&nbsp; 
如果数据文件恰好是用户需要的格式，那么只需要拷贝文件或文件夹就可以。 
hadoop fs –cp&nbsp;source_path target_path 
&nbsp; 
2.导出到本地文件系统 
&nbsp; 
--不能使用insert into local directory来导出数据，会报错 
--只能使用</div>
                                </li>
                                <li><a href="/article/2577.htm"
                                       title="编程之美" target="_blank">编程之美</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E9%87%8D%E6%9E%84/1.htm">重构</a>
                                    <div>我个人的 PHP 编程经验中，递归调用常常与静态变量使用。静态变量的含义可以参考 PHP 手册。希望下面的代码，会更有利于对递归以及静态变量的理解 
&nbsp; 
header(&quot;Content-type: text/plain&quot;);
function static_function () {
    static $i = 0;
    if ($i++ &lt; 1</div>
                                </li>
                                <li><a href="/article/2704.htm"
                                       title="Android保存用户名和密码" target="_blank">Android保存用户名和密码</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
                                    <div>转自：http://www.2cto.com/kf/201401/272336.html 
我们不管在开发一个项目或者使用别人的项目，都有用户登录功能，为了让用户的体验效果更好，我们通常会做一个功能，叫做保存用户，这样做的目地就是为了让用户下一次再使用该程序不会重新输入用户名和密码，这里我使用3种方式来存储用户名和密码 
1、通过普通 的txt文本存储 
2、通过properties属性文件进行存</div>
                                </li>
                                <li><a href="/article/2831.htm"
                                       title="Oracle 复习笔记之同义词" target="_blank">Oracle 复习笔记之同义词</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/Oracle+%E5%90%8C%E4%B9%89%E8%AF%8D/1.htm">Oracle 同义词</a><a class="tag" taget="_blank" href="/search/Oracle+synonym/1.htm">Oracle synonym</a>
                                    <div>转载请出自出处：http://eksliang.iteye.com/blog/2098861 
1.什么是同义词 
&nbsp; &nbsp; &nbsp; 同义词是现有模式对象的一个别名。 
&nbsp; &nbsp; &nbsp; 概念性的东西，什么是模式呢？创建一个用户，就相应的创建了 一个模式。模式是指数据库对象，是对用户所创建的数据对象的总称。模式对象包括表、视图、索引、同义词、序列、过</div>
                                </li>
                                <li><a href="/article/2958.htm"
                                       title="Ajax案例" target="_blank">Ajax案例</a>
                                    <span class="text-muted">gongmeitao</span>
<a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a>
                                    <div>数据库采用Sql Server2005 
项目名称为:Ajax_Demo 
1.com.demo.conn包 
package com.demo.conn; 
import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException; 
//获取数据库连接的类public class DBConnec</div>
                                </li>
                                <li><a href="/article/3085.htm"
                                       title="ASP.NET中Request.RawUrl、Request.Url的区别" target="_blank">ASP.NET中Request.RawUrl、Request.Url的区别</a>
                                    <span class="text-muted">hvt</span>
<a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a>
                                    <div>&nbsp; 
如果访问的地址是：http://h.keleyi.com/guestbook/addmessage.aspx?key=hovertree%3C&amp;n=myslider#zonemenu那么Request.Url.ToString() 的值是：http://h.keleyi.com/guestbook/addmessage.aspx?key=hovertree&lt;&amp;</div>
                                </li>
                                <li><a href="/article/3212.htm"
                                       title="SVG 教程 （七）SVG 实例，SVG 参考手册" target="_blank">SVG 教程 （七）SVG 实例，SVG 参考手册</a>
                                    <span class="text-muted">天梯梦</span>
<a class="tag" taget="_blank" href="/search/svg/1.htm">svg</a>
                                    <div>SVG 实例   在线实例 
下面的例子是把SVG代码直接嵌入到HTML代码中。 
谷歌Chrome，火狐，Internet Explorer9，和Safari都支持。 
注意：下面的例子将不会在Opera运行，即使Opera支持SVG - 它也不支持SVG在HTML代码中直接使用。  &nbsp; SVG 实例 
SVG基本形状 
一个圆 
矩形 
不透明矩形 
一个矩形不透明2 
一个带圆角矩</div>
                                </li>
                                <li><a href="/article/3339.htm"
                                       title="事务管理" target="_blank">事务管理</a>
                                    <span class="text-muted">luyulong</span>
<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/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E5%8A%A1/1.htm">事务</a>
                                    <div>事物管理 
 
spring事物的好处 
 
为不同的事物API提供了一致的编程模型 
支持声明式事务管理 
提供比大多数事务API更简单更易于使用的编程式事务管理API 
整合spring的各种数据访问抽象 
 
TransactionDefinition 
定义了事务策略 
 
int getIsolationLevel()得到当前事务的隔离级别 
 
READ_COMMITTED&nbsp;</div>
                                </li>
                                <li><a href="/article/3466.htm"
                                       title="基础数据结构和算法十一：Red-black binary search tree" target="_blank">基础数据结构和算法十一：Red-black binary search tree</a>
                                    <span class="text-muted">sunwinner</span>
<a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a><a class="tag" taget="_blank" href="/search/Red-black/1.htm">Red-black</a>
                                    <div>&nbsp; 
The insertion algorithm for 2-3 trees just described is not difficult to understand; now, we will see that it is also not difficult to implement. We will consider a simple representation known</div>
                                </li>
                                <li><a href="/article/3593.htm"
                                       title="centos同步时间" target="_blank">centos同步时间</a>
                                    <span class="text-muted">stunizhengjia</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E7%BE%A4%E5%90%8C%E6%AD%A5%E6%97%B6%E9%97%B4/1.htm">集群同步时间</a>
                                    <div>做了集群，时间的同步就显得非常必要了。&nbsp;以下是查到的如何做时间同步。&nbsp;在CentOS 5不再区分客户端和服务器，只要配置了NTP，它就会提供NTP服务。&nbsp;1)确认已经ntp程序包：&nbsp;# yum install ntp&nbsp;2)配置时间源（默认就行，不需要修改）&nbsp;# vi /etc/ntp.conf&nbsp;server pool.ntp.o</div>
                                </li>
                                <li><a href="/article/3720.htm"
                                       title="ITeye 9月技术图书有奖试读获奖名单公布" target="_blank">ITeye 9月技术图书有奖试读获奖名单公布</a>
                                    <span class="text-muted">ITeye管理员</span>
<a class="tag" taget="_blank" href="/search/ITeye/1.htm">ITeye</a>
                                    <div>ITeye携手博文视点举办的9月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。&nbsp;9月试读活动回顾：http://webmaster.iteye.com/blog/2118112本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）：&nbsp; 
&nbsp; 
&nbsp; 
《NFC：Arduino、Andro</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>