那朵花~~

vue.js/webpack/vue-cli/vuex知识点

《vue.js》

第一章 vue基础

01.v-cloak指令用法
02.v-cloak和v-text的区别
03.什么是双向数据绑定，双向绑定的使用场景
04.事件函数的调用，事件函数参数传参
05.事件修饰符
06.常用按键修饰符
07.表单域修饰符用法
08.自定义指令之获取元素焦点
09.数组相关API--变异方法/替换数组
10. 组件命名方式

第二章 webpack

01.webpack指令
02.webpack益处

第三章 vue-cli（vue脚手架）

01.安装与查看版本号
02.创建vue项目的方式一：基于交互式命令行
03.创建vue项目的方式二：基于图形化界面
04.分析项目结构
05.vue脚手架自定义配置

第四章 vuex基础

01.使用 Vuex 统一管理状态的好处
02. Vuex 的基本使用
03. Vuex 的核心概念: State / Mutation / Action /Getter

------------------------------------------❀持续更新❀---------------------------------------------------------

第一章 vue基础

vue的指令

01.v-cloak指令用法

使用v-clock解决插值表达式闪烁的问题（解决在网络慢的情况下先出现了{{}}，再渲染数据的情况）


{{ msg }}

02.v-cloak和v-text的区别

v-text没有闪烁问题，但是会覆盖元素中原本的内容

++++++++ {{ msg }} ----------
==================

v-clock 会连同符号一起显示： ++++++++ 123----------
v-text 会把等于号覆盖只显示msg: 123

03.什么是双向数据绑定，双向绑定的使用场景

什么是双向数据绑定：

当数据发生变化的时候，视图也就发生变化
当视图发生变化的时候，数据也会跟着同步变化

双向绑定的使用场景：
v-model是一个指令，限制在 、、 components（组件） 中使用
</code></pre> 
  <h3>04.事件函数的调用，事件函数参数传参</h3> 
  <p>如果需要传递参数就使用say(),否则直接写say更简洁一些<br> <a href="http://img.e-com-net.com/image/info8/fe9ff62e494e4613a0e9fca6684cbeb8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fe9ff62e494e4613a0e9fca6684cbeb8.jpg" alt="vue.js/webpack/vue-cli/vuex知识点_第1张图片" width="650" height="121" style="border:1px solid black;"></a><br> 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event<br> <a href="http://img.e-com-net.com/image/info8/5a95289649d844bfbb0eebcb75b8bbcb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5a95289649d844bfbb0eebcb75b8bbcb.jpg" alt="在这里插入图片描述" width="650" height="59"></a></p> 
  <h3>05.事件修饰符</h3> 
  <p>.stop 阻止冒泡<br> .prevent 阻止默认事件<br> .capture 添加事件侦听器时使用事件捕获模式<br> .self 只当事件在该元素本身（比如不是子元素）触发时触发回调<br> .once 事件只触发一次</p> 
  <pre><code><!-- 使用  .stop  阻止冒泡，执行btnHandler不会连同div1Handler一起执行 -->
<div class="inner" @click="div1Handler">
  <input type="button" value="戳他" @click.stop="btnHandler">
</div>
</code></pre> 
  <pre><code><!-- 使用 .prevent 阻止默认行为，不会再跳转到百度页面 -->
<a href="http://www.baidu.com" @click.prevent="linkClick">跳转百度</a>
</code></pre> 
  <pre><code><!-- 使用.capture 实现捕获触发事件的机制 -->
<!-- 点击直接执行div1Handler，不会执行btnHandler -->
<div class="inner" @click.capture="div1Handler">
   <input type="button" value="戳他" @click="btnHandler">
</div>
</code></pre> 
  <pre><code><!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
<!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
<div class="inner" @click.self="div1Handler">
   <input type="button" value="戳他" @click="btnHandler">
</div>
</code></pre> 
  <pre><code><!-- 使用.once 只触发一次事件处理函数，第一次点击能阻止跳转百度，第二次就不能了
<a href="http://www.baidu.com" @click.prevent.once="linkClick">跳转百度</a>
</code></pre> 
  <h3>06.常用按键修饰符</h3> 
  <p>.enter => enter键<br> .tab => tab键<br> .delete (捕获“删除”和“退格”按键) => 删除键<br> .esc => 取消键<br> .space => 空格键<br> .up => 上<br> .down => 下<br> .left => 左<br> .right => 右</p> 
  <p><em><strong>用法如下：</strong></em><br> <a href="http://img.e-com-net.com/image/info8/c6c97fe8094c4df2950050ecaa12f056.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c6c97fe8094c4df2950050ecaa12f056.jpg" alt="vue.js/webpack/vue-cli/vuex知识点_第2张图片" width="650" height="124" style="border:1px solid black;"></a></p> 
  <h3>07.表单域修饰符用法</h3> 
  <p><a href="http://img.e-com-net.com/image/info8/bd0e11b1b0da433892adf2770bebb749.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bd0e11b1b0da433892adf2770bebb749.jpg" alt="vue.js/webpack/vue-cli/vuex知识点_第3张图片" width="650" height="129" style="border:1px solid black;"></a></p> 
  <pre><code>  <div id="app">
    <input type="text" v-model.number='age'>
    <input type="text" v-model.trim='info'>
    <input type="text" v-model.lazy='msg'>
    <div>{{msg}}</div>
    <button @click='handle'>点击</button>
  </div>

 <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        age: '',
        info: '',
        msg: ''
      },
      methods: {
        handle: function(){
          //如果不使用修饰符，假如age是2，那么打印结果为213，变成字符串拼接了，加了修饰符结果为：15
          // console.log(this.age + 13)
          
          // console.log(this.info.length)
        }
      }
    });
  </script>
</code></pre> 
  <p>trim：直白些就是当你在input 输入框内输入了多余的空格，它能将你收尾的空格去除；<br> lazy：转换成change事件之后，就是在输入框失去焦点后才触发事件，而不是每输入一个字符就触发一次；</p> 
  <h3>08.自定义指令之获取元素焦点</h3> 
  <pre><code>Vue.directive('focus', {
    inserted: function(el){
       // el表示指令所绑定的元素
       el.focus();
     }
 });
</code></pre> 
  <pre><code>  <input type="text" v-focus>
  //这样页面一打开，输入框就自动获取焦点，不用再点击一次input
</code></pre> 
  <h3>09.数组相关API–变异方法/替换数组</h3> 
  <ol> 
   <li> <p>变异方法(修改原有数据，数据是响应式的，调用方法之后页面的数组也会随之发生变化)<br> ⚫ push() ----向数组的末尾添加元素<br> ⚫ pop() -----删除数组中的最后一个元素<br> ⚫ shift() ----删除数组中的第一个元素<br> ⚫ unshift() -----向数组的开头添加元素<br> ⚫ splice() ----去除数组中的指定数据<br> ⚫ sort() ----数组排序<br> ⚫ reverse() ----数组反转</p> </li> 
   <li> <p>替换数组(生成新的数组，不会影响原始数组，页面展示的还是原始的，所以需要重新赋值才能发生变化，this.list = this.list.slice(0,2)<br> ⚫ filter()<br> ⚫ concat()<br> ⚫ slice()</p> </li> 
   <li> <p>修改响应式数据<br> ⚫ Vue.set(vm.items, indexOfItem, newValue)<br> ⚫ vm.$set(vm.items, indexOfItem, newValue)<br> ① 参数一表示要处理的数组名称<br> ② 参数二表示要处理的数组的索引<br> ③ 参数三表示要处理的数组的值</p> </li> 
   <li> <p>案例：列表的增删改</p> </li> 
  </ol> 
  <pre><code>  <div id="app">
 	<label for="id">编号：</label>
	<input type="text" id="id" v-model='id' >
    <label for="name">名称： </label>
    <input type="text" id="name" v-model='name'>
    <button @click='handle' >增加</button>
  </div>
  <tbody>
     <tr :key='item.id' v-for='item in books'>
         <td>{{item.id}}</td>
         <td>{{item.name}}</td>
           <a href="" @click.prevent='toEdit(item.id)'>修改</a>
           <a href="" @click.prevent='deleteBook(item.id)'>删除</a>
         </td>
    </tr>
  </tbody>
</code></pre> 
  <pre><code>   var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        books: [{
          id: 1,
          name: '三国演义',
          date: 2525609975000
        },{
          id: 2,
          name: '水浒传',
          date: 2525609975000
        },{
          id: 3,
          name: '红楼梦',
          date: 2525609975000
        }]
      },
      methods: {
        handle: function(){
            // 添加图书
            var book = {};
            book.id = this.id;
            book.name = this.name;
            this.books.push(book)
        },
        toEdit: function(id){
          // 根据ID查询出要编辑的数据
          var book = this.books.filter(function(item){
            return item.id == id;
          });
          // 把获取到的信息填充到表单
          this.id = book[0].id;
          this.name = book[0].name;
          // 编辑图书，就是根据当前的ID去更新数组中对应的数据
            this.books.some((item) => {
              if(item.id == this.id) {
                item.name = this.name;
                // 完成更新操作之后，需要终止循环
                return true;
              }
        },
        deleteBook: function(id){
          // 删除图书
          // 根据id从数组中查找元素的索引
          // var index = this.books.findIndex(function(item){
          //   return item.id == id;
          // });
          // 根据索引删除数组元素
          // this.books.splice(index, 1);
          // -------------------------
          // 方法二：通过filter方法进行删除
          this.books = this.books.filter(function(item){
            return item.id != id;
          });
        }
      },
    });
</code></pre> 
  <h3>10. 组件命名方式</h3> 
  <p>⚫ 短横线方式</p> 
  <pre><code>Vue.component('my-component', { /* ... */ })
</code></pre> 
  <p>⚫ 驼峰方式</p> 
  <pre><code>Vue.component('MyComponent', { /* ... */ })
</code></pre> 
  <h1>第二章 webpack</h1> 
  <h3>01.webpack指令</h3> 
  <ul> 
   <li>删除全局webpack-cli：<br> npm uninstall -g webpack-cli</li> 
   <li>删除本地webpack-cli:<br> npm uninstall webpack-cli</li> 
   <li>删除全局webpack<br> npm uninstall -g webpack</li> 
   <li>删除本地webpack<br> npm uninstall webpack</li> 
   <li>全局安装webpack:（官网不推荐）<br> npm install --global webpack</li> 
   <li>本地安装webpack:<br> npm install --save-dev webpack</li> 
   <li>本地安装webpack -cli (使用 webpack 4+ 版本)<br> npm install --save-dev webpack-cli</li> 
   <li>检查webpack是否安装成功,出现版本号为成功。<br> 如果是全局安装则：webpack -v<br> 如果是本地安装则：node_modules.bin\webpack -v (注意是斜杆的方向)</li> 
  </ul> 
  <h3>02.webpack益处</h3> 
  <p>webpack是一个流行的前端项目构建工具(打包工具)，可以解决当前web开发中所面临的困境。<br> webpack提供了友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。</p> 
  <p>web开发中所面临的困境：<br> <a href="http://img.e-com-net.com/image/info8/4f4ad2fd10f34446a4a3d048467a81b1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4f4ad2fd10f34446a4a3d048467a81b1.jpg" alt="vue.js/webpack/vue-cli/vuex知识点_第4张图片" width="426" height="120" style="border:1px solid black;"></a></p> 
  <h1>第三章 vue-cli（vue脚手架）</h1> 
  <h3>01.安装与查看版本号</h3> 
  <p>安装：</p> 
  <pre><code>npm install -g @vue/cli
</code></pre> 
  <p>查看版本号：</p> 
  <pre><code>vue -V
</code></pre> 
  <h3>02.创建vue项目的方式一：基于交互式命令行</h3> 
  <p>1.在你想要放置项目的路径下打开cmd,执行命令：</p> 
  <pre><code>vue create 项目名称
</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/1599890426584e3796b98ea6cc8cf1a8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1599890426584e3796b98ea6cc8cf1a8.jpg" alt="vue.js/webpack/vue-cli/vuex知识点_第5张图片" width="650" height="145" style="border:1px solid black;"></a><br> 2.执行完命令后会出现两个选项，点击上下箭头可进行切换，然后回车进入下一步</p> 
  <ul> 
   <li>default：默认的帮你搭配好功能的，一键创建完毕；</li> 
   <li>Manually：手动选择安装自己所需的功能，这里我选择手动安装，好自由搭配自己想要的；<br> <a href="http://img.e-com-net.com/image/info8/5827b57392824149ac14480961300cf0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5827b57392824149ac14480961300cf0.jpg" alt="vue.js/webpack/vue-cli/vuex知识点_第6张图片" width="650" height="168" style="border:1px solid black;"></a><br> 3.上图展示的是供你选择的功能，打*号的代表安装，空的括号代表不安装，点击空格键选中你需要的，然后回车下一步吧<br> <a href="http://img.e-com-net.com/image/info8/642c1b98fca341fabc4158681cccaac7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/642c1b98fca341fabc4158681cccaac7.jpg" alt="vue.js/webpack/vue-cli/vuex知识点_第7张图片" width="650" height="117" style="border:1px solid black;"></a><br> 4.接下来会让你选择路由模式，这里我选择哈希模式的路由，所以执行命令n<br> <a href="http://img.e-com-net.com/image/info8/b1d70d2171e74e4e9b2ba9659df6b103.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b1d70d2171e74e4e9b2ba9659df6b103.jpg" alt="vue.js/webpack/vue-cli/vuex知识点_第8张图片" width="650" height="140" style="border:1px solid black;"></a><br> 5.然后需要再选择下ESLint的语法版本，这里推荐选择标准版，如下<br> <a href="http://img.e-com-net.com/image/info8/81f775cb666849c2a82eb0be1b0ded32.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/81f775cb666849c2a82eb0be1b0ded32.jpg" alt="vue.js/webpack/vue-cli/vuex知识点_第9张图片" width="650" height="140" style="border:1px solid black;"></a><br> 6.默认保存时进行ESLint语法校验，所以选择第一项<br> <a href="http://img.e-com-net.com/image/info8/ef347ad51f4546cb9c6a9bff588810b5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ef347ad51f4546cb9c6a9bff588810b5.jpg" alt="vue.js/webpack/vue-cli/vuex知识点_第10张图片" width="650" height="140" style="border:1px solid black;"></a><br> 7.再然后会询问你， Babel, ESLint等等配置文件是单独创建还是全部归于package.json中，为了更好的维护配置文件，选择第一个选项<br> <a href="http://img.e-com-net.com/image/info8/207f73f722064bcc8766beeb69d2e740.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/207f73f722064bcc8766beeb69d2e740.jpg" alt="vue.js/webpack/vue-cli/vuex知识点_第11张图片" width="650" height="145" style="border:1px solid black;"></a><br> 8.最后，提示你是否将你刚刚选择的配置保存为一个模板，这样下次你就不用再重复这些步骤，直接使用模版即可，y:是 n:否<br> <a href="http://img.e-com-net.com/image/info8/54854c53a14442a7a0b2ac1a41cbf732.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/54854c53a14442a7a0b2ac1a41cbf732.jpg" alt="vue.js/webpack/vue-cli/vuex知识点_第12张图片" width="650" height="134" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/80cea247a4e947ecb4844246dab9d331.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/80cea247a4e947ecb4844246dab9d331.jpg" alt="vue.js/webpack/vue-cli/vuex知识点_第13张图片" width="650" height="124" style="border:1px solid black;"></a><br> 9.下载完成之后，执行命令cd vue_proj_01进入到项目路径下，然后再执行命令npm run serve运行项目<br> <a href="http://img.e-com-net.com/image/info8/5d014d1d70eb4ecba97337ea22578c2c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5d014d1d70eb4ecba97337ea22578c2c.jpg" alt="vue.js/webpack/vue-cli/vuex知识点_第14张图片" width="650" height="284" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/efbe97c6d88b4951a5a04096e4c31529.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/efbe97c6d88b4951a5a04096e4c31529.jpg" alt="vue.js/webpack/vue-cli/vuex知识点_第15张图片" width="650" height="131" style="border:1px solid black;"></a><br> 10.成功创建之后，你只需要在浏览器打开 http://localhost:8080/，就可以看到你刚创建的项目啦<br> <a href="http://img.e-com-net.com/image/info8/f7d3881b92e443d9a98b3c51cd0b48f4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f7d3881b92e443d9a98b3c51cd0b48f4.jpg" alt="vue.js/webpack/vue-cli/vuex知识点_第16张图片" width="650" height="237" style="border:1px solid black;"></a></li> 
  </ul> 
  <h3>03.创建vue项目的方式二：基于图形化界面</h3> 
  <p>介绍一种更为直观的创建vue项目的方法：<br> 1.打开命令窗口执行命令 vue ui 会在浏览器打开一个创建项目的图形化界面<br> <a href="http://img.e-com-net.com/image/info8/e7984c4ad22848aba8be014faef67688.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e7984c4ad22848aba8be014faef67688.jpg" alt="vue.js/webpack/vue-cli/vuex知识点_第17张图片" width="650" height="107" style="border:1px solid black;"></a><br> 2.不介绍了，我发现这个项目创建只能默认在C盘，我不愿意，所以结束。。。。<br> <a href="http://img.e-com-net.com/image/info8/ed31845e39f746a391dd197e53fc52ea.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ed31845e39f746a391dd197e53fc52ea.jpg" alt="vue.js/webpack/vue-cli/vuex知识点_第18张图片" width="650" height="291" style="border:1px solid black;"></a></p> 
  <h3>04.分析项目结构</h3> 
  <p><a href="http://img.e-com-net.com/image/info8/8ad7648b9153478b92c49df0dd9f6227.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8ad7648b9153478b92c49df0dd9f6227.jpg" alt="vue.js/webpack/vue-cli/vuex知识点_第19张图片" width="650" height="243" style="border:1px solid black;"></a></p> 
  <h3>05.vue脚手架自定义配置</h3> 
  <p>1.在项目的根目录创建文件：vue.config.js<br> 2.配置你所需要的配置项，例如端口号，启动项目时是否自动打开网页等等，如下所示：<br> <a href="http://img.e-com-net.com/image/info8/0080a9dfef634b5897b6db47d50faa10.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0080a9dfef634b5897b6db47d50faa10.jpg" alt="vue.js/webpack/vue-cli/vuex知识点_第20张图片" width="650" height="340" style="border:1px solid black;"></a><br> 3.更多配置内容，例如配置项目代理等请移步官网</p> 
  <h1>第四章 vuex基础</h1> 
  <h3>01.使用 Vuex 统一管理状态的好处</h3> 
  <p>① 能够在 vuex 中集中管理共享的数据，易于开发和后期维护<br> ② 能够高效地实现组件之间的数据共享，提高开发效率<br> ③ 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步</p> 
  <h3>02. Vuex 的基本使用</h3> 
  <ol> 
   <li>安装 vuex 依赖包</li> 
  </ol> 
  <pre><code>npm install vuex --save
</code></pre> 
  <ol start="2"> 
   <li>导入 vuex 包</li> 
  </ol> 
  <pre><code> import Vuex from 'vuex' 
 Vue.use(Vuex) 
</code></pre> 
  <ol start="3"> 
   <li>创建 store 对象</li> 
  </ol> 
  <pre><code> const store = new Vuex.Store({ 
     // state 中存放的就是全局共享的数据 
     state: { count: 0 } 
 }
</code></pre> 
  <ol start="4"> 
   <li>将 store 对象挂载到 vue 实例中</li> 
  </ol> 
  <pre><code>new Vue({ 
  el: '#app', 
  render: h => h(app), 
  router, 
  // 将创建的共享数据对象，挂载到 Vue 实例中 
  // 所有的组件，就可以直接从 store 中获取全局的数据了 
  store 
}) 
</code></pre> 
  <h3>03. Vuex 的核心概念: State / Mutation / Action /Getter</h3> 
  <p>(1) State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。</p> 
  <pre><code> // 创建store数据源，提供唯一公共数据 
  const store = new Vuex.Store({ 
    state: { count: 0 } 
  }) 
</code></pre> 
  <p>组件访问 State 中数据的第一种方式：</p> 
  <pre><code>this.$store.state.全局数据名称
</code></pre> 
  <p>组件访问 State 中数据的第二种方式：</p> 
  <pre><code>// 1. 从 vuex 中按需导入 mapState 函数 
import { mapState } from 'vuex' 
</code></pre> 
  <p>通过刚才导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed 计算属性：</p> 
  <pre><code>// 2. 将全局数据，映射为当前组件的计算属性 
computed: { 
  ...mapState(['count']) 
}
</code></pre> 
  <p>(2)Mutation 用于变更 Store中 的数据。<br> ① 只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据<br> ② 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。</p> 
  <pre><code> // 定义Mutation   
const store = new Vuex.Store({     
 state: { 
      	count: 0    
       },    
 mutations: {     
   add(state) { 
        // 变更状态 
        state.count++     
    }    
 }  
 })       
</code></pre> 
  <pre><code> // 触发mutation 
  methods: { 
    handle1() { 
      // 触发 mutations 的第一种方式 
      this.$store.commit('add') 
    } 
  }
</code></pre> 
  <p>可以在触发 mutations 时传递参数：</p> 
  <pre><code> const store = new Vuex.Store({     
 state: { 
      count: 0    
 },   
 mutations: {    
    addN(state, step) { 
        // 变更状态 
        state.count += step     
    }   
}  })
</code></pre> 
  <pre><code> // 触发mutation 
  methods: { 
    handle2() { 
      // 在调用 commit 函数， 
      // 触发 mutations 时携带参数 
      this.$store.commit('addN', 3) 
    } 
  }    
</code></pre> 
  <p>this.$store.commit() 是触发 mutations 的第一种方式，触发 mutations 的第二种方式：</p> 
  <pre><code>// 1. 从 vuex 中按需导入 mapMutations 函数 
import { mapMutations } from 'vuex' 
</code></pre> 
  <p>通过刚才导入的 mapMutations 函数，将需要的 mutations 函数，映射为当前组件的 methods 方法：</p> 
  <pre><code>// 2. 将指定的 mutations 函数，映射为当前组件的 methods 函数 
methods: { 
  ...mapMutations(['add', 'addN']) 
} 
</code></pre> 
  <p>(3)Action:用于处理异步任务<br> 如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。</p> 
  <pre><code> // 定义 Action   
 const store = new Vuex.Store({    
  // ...省略其他代码    
   mutations: { 
      add(state) {         
      	state.count++       
      }     
    },   
   actions: {       
       addAsync(context) {        
      	  setTimeout(() => {           
        	context.commit('add')  
               }, 1000 }   
        } 
 })
</code></pre> 
  <pre><code> // 触发 Action 
  methods: { 
    handle() { 
      // 触发 actions 的第一种方式 
      this.$store.dispatch('addAsync') 
    } 
  }
</code></pre> 
  <p>触发 actions 异步任务时携带参数：</p> 
  <pre><code>// 定义 Action   
const store = new Vuex.Store({    
 // ...省略其他代码     
	 mutations: { 
	      addN(state, step) {       
	        state.count += step    
	           }   
	},     
	actions: {     
     addNAsync(context, step) {    
           setTimeout(() => {         
                    context.commit('addN', step)        
            }, 1000) 
            }      
    } 
 })      

</code></pre> 
  <pre><code>  // 触发 Action 
  methods: { 
    handle() { 
      // 在调用 dispatch 函数， 
      // 触发 actions 时携带参数 
      this.$store.dispatch('addNAsync', 5) 
    } 
  } 
</code></pre> 
  <p>this.$store.dispatch() 是触发 actions 的第一种方式，触发 actions 的第二种方式：</p> 
  <pre><code>// 1. 从 vuex 中按需导入 mapActions 函数 
import { mapActions } from 'vuex' 
</code></pre> 
  <p>通过刚才导入的 mapActions 函数，将需要的 actions 函数，映射为当前组件的 methods 方法：</p> 
  <pre><code>// 2. 将指定的 actions 函数，映射为当前组件的 methods 函数 
methods: { 
  ...mapActions(['addASync', 'addNASync']) 
}
</code></pre> 
  <p>(4) Getter 用于对 Store 中的数据进行加工处理形成新的数据<br> ① Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。<br> ② Store 中数据发生变化，Getter 的数据也会跟着变化。</p> 
  <pre><code> // 定义 Getter 
  const store = new Vuex.Store({ 
    state: { 
      count: 0 
    }, 
    getters: { 
      showNum: state => { 
        return '当前最新的数量是【'+ state.count +'】' 
      } 
    } 
  })
</code></pre> 
  <p>使用 getters 的第一种方式：</p> 
  <pre><code>this.$store.getters.名称
</code></pre> 
  <p>使用 getters 的第二种方式：</p> 
  <pre><code>import { mapGetters } from 'vuex' 
 
computed: { 
  ...mapGetters(['showNum']) 
} 
</code></pre> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1280945697851457536"></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">你可能感兴趣的:(VUE)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1835512920797179904.htm"
                           title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a>
                        <span class="text-muted">软件技术NINI</span>
<a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/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>
                        <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div>
                    </li>
                    <li><a href="/article/1835492740536823808.htm"
                           title="node.js学习" target="_blank">node.js学习</a>
                        <span class="text-muted">小猿L</span>
<a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a>
                        <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div>
                    </li>
                    <li><a href="/article/1835453535777550336.htm"
                           title="vue3中el-table中点击图片放大时，被表格覆盖" target="_blank">vue3中el-table中点击图片放大时，被表格覆盖</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported</div>
                    </li>
                    <li><a href="/article/1835452528599330816.htm"
                           title="vue项目element-ui的table表格单元格合并" target="_blank">vue项目element-ui的table表格单元格合并</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/elementui/1.htm">elementui</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>一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'</div>
                    </li>
                    <li><a href="/article/1835450384655675392.htm"
                           title="Vue中table合并单元格用法" target="_blank">Vue中table合并单元格用法</a>
                        <span class="text-muted">weixin_30613343</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ViewUI/1.htm">ViewUI</a>
                        <div>地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex</div>
                    </li>
                    <li><a href="/article/1835448238103162880.htm"
                           title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a>
                        <span class="text-muted">苹果酱0567</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div>
                    </li>
                    <li><a href="/article/1835443569528238080.htm"
                           title="Vue( ElementUI入门、vue-cli安装)" target="_blank">Vue( ElementUI入门、vue-cli安装)</a>
                        <span class="text-muted">m0_l5z</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>
                        <div>一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n</div>
                    </li>
                    <li><a href="/article/1835437775344726016.htm"
                           title="博客网站制作教程" target="_blank">博客网站制作教程</a>
                        <span class="text-muted">2401_85194651</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
                        <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div>
                    </li>
                    <li><a href="/article/1835435885760442368.htm"
                           title="vue+el-table 可输入表格使用上下键进行input框切换" target="_blank">vue+el-table 可输入表格使用上下键进行input框切换</a>
                        <span class="text-muted">以对_</span>
<a class="tag" taget="_blank" href="/search/vue%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei</div>
                    </li>
                    <li><a href="/article/1835435885122908160.htm"
                           title="vue + Element UI table动态合并单元格" target="_blank">vue + Element UI table动态合并单元格</a>
                        <span class="text-muted">我家媳妇儿萌哒哒</span>
<a class="tag" taget="_blank" href="/search/element/1.htm">element</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</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>一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre</div>
                    </li>
                    <li><a href="/article/1835431726982197248.htm"
                           title="vue 创建项目报错：command failed: npm install --loglevel error" target="_blank">vue 创建项目报错：command failed: npm install --loglevel error</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-cli3/1.htm">vue-cli3</a>
                        <div>这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/cli@3.12.1npminstall-g@vue/cli@3.12.1（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错</div>
                    </li>
                    <li><a href="/article/1835428821877223424.htm"
                           title="计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署）" target="_blank">计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署）</a>
                        <span class="text-muted">java毕设程序源码王哥</span>
<a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
                        <div>该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发</div>
                    </li>
                    <li><a href="/article/1835411044768509952.htm"
                           title="字节二面" target="_blank">字节二面</a>
                        <span class="text-muted">Redstone Monstrosity</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div>
                    </li>
                    <li><a href="/article/1835401975269781504.htm"
                           title="vue render 函数详解 (配参数详解)" target="_blank">vue render 函数详解 (配参数详解)</a>
                        <span class="text-muted">你的眼睛會笑</span>
<a class="tag" taget="_blank" href="/search/vue2/1.htm">vue2</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>vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素</div>
                    </li>
                    <li><a href="/article/1835398064727224320.htm"
                           title="前端代码上传文件" target="_blank">前端代码上传文件</a>
                        <span class="text-muted">余生逆风飞翔</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div>
                    </li>
                    <li><a href="/article/1835393400380157952.htm"
                           title="VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。" target="_blank">VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。</a>
                        <span class="text-muted">焚木灵</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>
                        <div>可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，</div>
                    </li>
                    <li><a href="/article/1835390752381825024.htm"
                           title="详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因" target="_blank">详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因</a>
                        <span class="text-muted">hw_happy</span>
<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%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出</div>
                    </li>
                    <li><a href="/article/1835376631733121024.htm"
                           title="Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘" target="_blank">Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘</a>
                        <span class="text-muted">周bro</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><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a>
                        <div>node-v是否显示nodenpm-v报错Error:Cannotfindmodule‘node:path'是因为node版本和npm版本不匹配安装相对应的版本node版本10.16.0对应npm版本6.9.0npminstallnpm@6.14.17-g执行该命令即可匹配版本官网https://nodejs.org/en/about/previous-releases</div>
                    </li>
                    <li><a href="/article/1835376632366460928.htm"
                           title="vue2实现复制,粘贴功能" target="_blank">vue2实现复制,粘贴功能</a>
                        <span class="text-muted">周bro</span>
<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>一、需求说明在项目中点击按钮复制某行文本是很常见的应用场景，在Vue项目中实现复制功能需要借助vue-clipboard2插件。二、代码实现1、安装vue-clipboard2依赖（出现错误的话，可以试试切换成淘宝镜像源npmconfigsetregistryhttps://registry.npm.taobao.org）npminstall--savevue-clipboard22、在main.</div>
                    </li>
                    <li><a href="/article/1835370074102394880.htm"
                           title="【vite 自动配置路由】" target="_blank">【vite 自动配置路由】</a>
                        <span class="text-muted">CODER-V</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/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/%E8%BD%AF%E4%BB%B6%E6%9E%84%E5%BB%BA/1.htm">软件构建</a>
                        <div>手动配置路由，是一个没有技术含量又浪费时间的工作。本文将介绍vite构建的vue3项目如何编写一个自动配置路由的脚本。约定大于配置要想使用脚本完成路由的自动配置，我们就需要遵循以下目录规则：每一个页面对应一个包，当前包下的主页面命名为index.vue；每个包里必须配置一个page.js；在每一个page.js里边配置，额外的路由信息，比如：exportdefault{title:'商品',men</div>
                    </li>
                    <li><a href="/article/1835368019430305792.htm"
                           title="Vue + Express实现一个表单提交" target="_blank">Vue + Express实现一个表单提交</a>
                        <span class="text-muted">九旬大爷的梦</span>

                        <div>最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo</div>
                    </li>
                    <li><a href="/article/1835365412099944448.htm"
                           title="Vue3 vant组件库自动导入" target="_blank">Vue3 vant组件库自动导入</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/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/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a>
                        <div>实现：完整使用vant组件库文档安装：#Vue3项目，安装最新版Vantnpmivant#通过yarn安装yarnaddvant#通过pnpm安装pnpmaddvant【一】按需引入：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#fang-fa-er.-an-xu-yin-ru-zu-jian-yang-shi【二】批量引入在基于vit</div>
                    </li>
                    <li><a href="/article/1835361379343757312.htm"
                           title="vant-element-ts一起使用存在的问题" target="_blank">vant-element-ts一起使用存在的问题</a>
                        <span class="text-muted">flynn_</span>
<a class="tag" taget="_blank" href="/search/%E9%97%AE%E9%A2%98%E6%80%BB%E7%BB%93/1.htm">问题总结</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a>
                        <div>由于vant-ui与element-ui部分组件存在冲突，导致在vue-typescript中出现错误:Subsequentpropertydeclarationsmusthavethesametype.Property'$notify'mustbeoftype'ElNotification',butherehastype'Notify'.方案：一个全局导入，一个按需导入,避免冲突的组件同时使用，</div>
                    </li>
                    <li><a href="/article/1835352325032603648.htm"
                           title="第三十一节:Vue路由:前端路由vs后端路由的了解" target="_blank">第三十一节:Vue路由:前端路由vs后端路由的了解</a>
                        <span class="text-muted">曹老师</span>

                        <div>1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访</div>
                    </li>
                    <li><a href="/article/1835344485802930176.htm"
                           title="基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台" target="_blank">基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台</a>
                        <span class="text-muted">网顺技术团队</span>
<a class="tag" taget="_blank" href="/search/%E6%88%90%E5%93%81%E7%A8%8B%E5%BA%8F%E9%A1%B9%E7%9B%AE/1.htm">成品程序项目</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E6%B1%BD%E8%BD%A6/1.htm">汽车</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/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>
                        <div>基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台作者主页网顺技术团队欢迎点赞收藏⭐留言文末获取源码联系方式查看下方微信号获取联系方式承接各种定制系统精彩系列推荐精彩专栏推荐订阅不然下次找不到哟Java毕设项目精品实战案例《1000套》感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人文章目录基</div>
                    </li>
                    <li><a href="/article/1835331375377510400.htm"
                           title="【前端】vue 报错:The template root requires exactly one element" target="_blank">【前端】vue 报错:The template root requires exactly one element</a>
                        <span class="text-muted">程序员-张师傅</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行</div>
                    </li>
                    <li><a href="/article/1835295766747377664.htm"
                           title="C# 开发教程-入门基础" target="_blank">C# 开发教程-入门基础</a>
                        <span class="text-muted">天马3798</span>
<a class="tag" taget="_blank" href="/search/%E6%95%99%E7%A8%8B%E7%B3%BB%E5%88%97%E6%95%B4%E7%90%86/1.htm">教程系列整理</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>1.C#简介、环境，程序结构2.C#基本语法，变量，控制局域，数据类型，类型转换3.C#数组、循环，Linq4.C#类，封装，方法5.C#枚举、字符串6.C#面相对象，继承，封装，多态7.C#特性、属性、反射、索引器8.C#委托，事件，集合，泛型9.C#匿名方法10.C#多线程更多：JQuery开发教程入门基础Vue开发基础入门教程Vue开发高级学习教程</div>
                    </li>
                    <li><a href="/article/1835290475628687360.htm"
                           title="若依后端正常启动但是uniapp移动端提示后端接口异常" target="_blank">若依后端正常启动但是uniapp移动端提示后端接口异常</a>
                        <span class="text-muted">大可大可抖</span>
<a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a>
                        <div>pc端能用模拟器也能正常连接接口，手机端真机调试连不上接口解决：1.先看config.js的填自己的ip地址module.exports={//baseUrl:'https://vue.ruoyi.vip/prod-api',baseUrl:"http://192.168.101.5:8080",}2.网络环境问题（防火墙）点击属性然后选择专用</div>
                    </li>
                    <li><a href="/article/1835279008393162752.htm"
                           title="好看的vue登录页面(附 源代码 背景图)" target="_blank">好看的vue登录页面(附 源代码 背景图)</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>一、效果展示二、代码你好!欢迎回来登录忘记密码?注册exportdefault{name:"MedLogin",data(){return{confirm_disabled:false,loginForm:{no:'',password:''},rules:{no:[{required:true,message:'请输入账号',trigger:'blur'},{min:3,max:6,messag</div>
                    </li>
                    <li><a href="/article/1835264261794918400.htm"
                           title="uniapp 获取各种小程序code" target="_blank">uniapp 获取各种小程序code</a>
                        <span class="text-muted">灵魂清零</span>
<a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a>
                        <div>各种小程序在进入小程序是都需要去获取code才能拿到基础信息，自己记录一下用uniapp开发小程序是获取微信小程序、百度小程序、头条小程序、支付宝小程序的codeVue.prototype.$global={appLogin(){returnnewPromise((resole,reject)=>{varthat=this;varwxLoginUrl=app.globalData.url+"/lo</div>
                    </li>
                                <li><a href="/article/19.htm"
                                       title="解线性方程组" target="_blank">解线性方程组</a>
                                    <span class="text-muted">qiuwanchi</span>

                                    <div>package gaodai.matrix;

import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;

public class Test {

	public static void main(String[] args) {
		Scanner scanner = new Sc</div>
                                </li>
                                <li><a href="/article/146.htm"
                                       title="在mysql内部存储代码" target="_blank">在mysql内部存储代码</a>
                                    <span class="text-muted">annan211</span>
<a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD/1.htm">性能</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E5%82%A8%E8%BF%87%E7%A8%8B/1.htm">存储过程</a><a class="tag" taget="_blank" href="/search/%E8%A7%A6%E5%8F%91%E5%99%A8/1.htm">触发器</a>
                                    <div>

在mysql内部存储代码
  在mysql内部存储代码，既有优点也有缺点，而且有人倡导有人反对。
  先看优点：
  1 她在服务器内部执行，离数据最近，另外在服务器上执行还可以节省带宽和网络延迟。
  2 这是一种代码重用。可以方便的统一业务规则，保证某些行为的一致性，所以也可以提供一定的安全性。
  3 可以简化代码的维护和版本更新。
  4 可以帮助提升安全，比如提供更细</div>
                                </li>
                                <li><a href="/article/273.htm"
                                       title="Android使用Asynchronous Http Client完成登录保存cookie的问题" target="_blank">Android使用Asynchronous Http Client完成登录保存cookie的问题</a>
                                    <span class="text-muted">hotsunshine</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
                                    <div>Asynchronous Http Client是android中非常好的异步请求工具 
除了异步之外还有很多封装比如json的处理，cookie的处理 
 
  引用   
 
Persistent Cookie Storage with PersistentCookieStore 
 
This library also includes a PersistentCookieStore whi</div>
                                </li>
                                <li><a href="/article/400.htm"
                                       title="java面试题" target="_blank">java面试题</a>
                                    <span class="text-muted">Array_06</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                                    <div>java面试题 
 
 
第一，谈谈final, finally, finalize的区别。 
final-修饰符（关键字）如果一个类被声明为final，意味着它不能再派生出新的子类，不能作为父类被继承。因此一个类不能既被声明为 abstract的，又被声明为final的。将变量或方法声明为final，可以保证它们在使用中不被改变。被声明为final的变量必须在声明时给定初值，而在以后的引用中只能</div>
                                </li>
                                <li><a href="/article/527.htm"
                                       title="网站加速" target="_blank">网站加速</a>
                                    <span class="text-muted">oloz</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E5%8A%A0%E9%80%9F/1.htm">网站加速</a>
                                    <div>前序:本人菜鸟，此文研究总结来源于互联网上的资料，大牛请勿喷！本人虚心学习，多指教. 
 
 
1、减小网页体积的大小，尽量采用div+css模式，尽量避免复杂的页面结构，能简约就简约。 
 
 
2、采用Gzip对网页进行压缩； 
   GZIP最早由Jean-loup Gailly和Mark Adler创建，用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz</div>
                                </li>
                                <li><a href="/article/654.htm"
                                       title="正确书写单例模式" target="_blank">正确书写单例模式</a>
                                    <span class="text-muted">随意而生</span>
<a class="tag" taget="_blank" href="/search/java+%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F+%E5%8D%95%E4%BE%8B/1.htm">java 设计模式 单例</a>
                                    <div>　　单例模式算是设计模式中最容易理解，也是最容易手写代码的模式了吧。但是其中的坑却不少，所以也常作为面试题来考。本文主要对几种单例写法的整理，并分析其优缺点。很多都是一些老生常谈的问题，但如果你不知道如何创建一个线程安全的单例，不知道什么是双检锁，那这篇文章可能会帮助到你。 
 
　　懒汉式，线程不安全 
 
　　当被问到要实现一个单例模式时，很多人的第一反应是写出如下的代码，包括教科书上也是这样</div>
                                </li>
                                <li><a href="/article/781.htm"
                                       title="单例模式" target="_blank">单例模式</a>
                                    <span class="text-muted">香水浓</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>懒汉  调用getInstance方法时实例化 
 

public class Singleton {

	private static Singleton instance;
	
	private Singleton() {}

	public static synchronized Singleton getInstance() {
		if(null == ins</div>
                                </li>
                                <li><a href="/article/908.htm"
                                       title="安装Apache问题：系统找不到指定的文件 No installed service named "Apache2"" target="_blank">安装Apache问题：系统找不到指定的文件 No installed service named "Apache2"</a>
                                    <span class="text-muted">AdyZhang</span>
<a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a><a class="tag" taget="_blank" href="/search/http+server/1.htm">http server</a>
                                    <div>安装Apache问题：系统找不到指定的文件 No installed service named "Apache2" 
每次到这一步都很小心防它的端口冲突问题，结果，特意留出来的80端口就是不能用，烦。 
解决方法确保几处： 
1、停止IIS启动 
2、把端口80改成其它 （譬如90，800，，，什么数字都好） 
3、防火墙(关掉试试) 
在运行处输入 cmd 回车，转到apa</div>
                                </li>
                                <li><a href="/article/1035.htm"
                                       title="如何在android 文件选择器中选择多个图片或者视频？" target="_blank">如何在android 文件选择器中选择多个图片或者视频？</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
                                    <div>我的android app有这样的需求，在进行照片和视频上传的时候，需要一次性的从照片/视频库选择多条进行上传 
但是android原生态的sdk中，只能一个一个的进行选择和上传。 
我想知道是否有其他的android上传库可以解决这个问题，提供一个多选的功能，可以使checkbox之类的，一次选择多个   处理方法 
官方的图片选择器(但是不支持所有版本的androi，只支持API Level </div>
                                </li>
                                <li><a href="/article/1162.htm"
                                       title="mysql中查询生日提醒的日期相关的sql" target="_blank">mysql中查询生日提醒的日期相关的sql</a>
                                    <span class="text-muted">baalwolf</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>SELECT sysid,user_name,birthday,listid,userhead_50,CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')),CURDATE(),  dayofyear( CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')))-dayofyear(</div>
                                </li>
                                <li><a href="/article/1289.htm"
                                       title="MongoDB索引文件破坏后导致查询错误的问题" target="_blank">MongoDB索引文件破坏后导致查询错误的问题</a>
                                    <span class="text-muted">BigBird2012</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a>
                                    <div>问题描述： 
MongoDB在非正常情况下关闭时，可能会导致索引文件破坏，造成数据在更新时没有反映到索引上。 
解决方案： 
  
使用脚本，重建MongoDB所有表的索引。 
var names  = db.getCollectionNames();
for( var i in names ){
    var name = names[i];
    print(name);
</div>
                                </li>
                                <li><a href="/article/1416.htm"
                                       title="Javascript Promise" target="_blank">Javascript Promise</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/Promise/1.htm">Promise</a>
                                    <div>        Parse JavaScript SDK现在提供了支持大多数异步方法的兼容jquery的Promises模式，那么这意味着什么呢，读完下文你就了解了。 
一.认识Promises 
        “Promises”代表着在javascript程序里下一个伟大的范式，但是理解他们为什么如此伟大不是件简</div>
                                </li>
                                <li><a href="/article/1543.htm"
                                       title="[Zookeeper学习笔记九]Zookeeper源代码分析之Zookeeper构造过程" target="_blank">[Zookeeper学习笔记九]Zookeeper源代码分析之Zookeeper构造过程</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a>
                                    <div>   Zookeeper重载了几个构造函数，其中构造者可以提供参数最多，可定制性最多的构造函数是   
  
public ZooKeeper(String connectString, int sessionTimeout, Watcher watcher, long sessionId, byte[] sessionPasswd, boolea</div>
                                </li>
                                <li><a href="/article/1670.htm"
                                       title="【Java命令三】jstack" target="_blank">【Java命令三】jstack</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/jstack/1.htm">jstack</a>
                                    <div>jstack是用于获得当前运行的Java程序所有的线程的运行情况(thread dump），不同于jmap用于获得memory dump 
  
[hadoop@hadoop sbin]$ jstack
Usage:
    jstack [-l] <pid>
        (to connect to running process)
    jstack -F </div>
                                </li>
                                <li><a href="/article/1797.htm"
                                       title="jboss 5.1启停脚本　动静分离部署" target="_blank">jboss 5.1启停脚本　动静分离部署</a>
                                    <span class="text-muted">ronin47</span>

                                    <div>以前启动jboss，往各种xml配置文件，现只要运行一句脚本即可。start nohup sh /**/run.sh -c servicename  -b ip -g  clustername   -u broatcast jboss.messaging.ServerPeerID=int  -Djboss.service.binding.set=p</div>
                                </li>
                                <li><a href="/article/1924.htm"
                                       title="UI之如何打磨设计能力?" target="_blank">UI之如何打磨设计能力?</a>
                                    <span class="text-muted">brotherlamp</span>
<a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/ui%E6%95%99%E7%A8%8B/1.htm">ui教程</a><a class="tag" taget="_blank" href="/search/ui%E8%87%AA%E5%AD%A6/1.htm">ui自学</a><a class="tag" taget="_blank" href="/search/ui%E8%B5%84%E6%96%99/1.htm">ui资料</a><a class="tag" taget="_blank" href="/search/ui%E8%A7%86%E9%A2%91/1.htm">ui视频</a>
                                    <div>  
在越来越拥挤的初创企业世界里，视觉设计的重要性往往可以与杀手级用户体验比肩。在许多情况下，尤其对于 Web 初创企业而言，这两者都是不可或缺的。前不久我们在《右脑革命：别学编程了，学艺术吧》中也曾发出过重视设计的呼吁。如何才能提高初创企业的设计能力呢?以下是 9 位创始人的体会。 
1.找到自己的方式 
如果你是设计师，要想提高技能可以去设计博客和展示好设计的网站如D-lists或</div>
                                </li>
                                <li><a href="/article/2051.htm"
                                       title="三色旗算法" target="_blank">三色旗算法</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a>
                                    <div>

import java.util.Arrays;

/**
问题：
假设有一条绳子，上面有红、白、蓝三种颜色的旗子，起初绳子上的旗子颜色并没有顺序，
您希望将之分类，并排列为蓝、白、红的顺序，要如何移动次数才会最少，注意您只能在绳
子上进行这个动作，而且一次只能调换两个旗子。

网上的解法大多类似：
在一条绳子上移动，在程式中也就意味只能使用一个阵列，而不使用其它的阵列来</div>
                                </li>
                                <li><a href="/article/2178.htm"
                                       title="警告:No configuration found for the specified action: \'s" target="_blank">警告:No configuration found for the specified action: \'s</a>
                                    <span class="text-muted">chiangfai</span>
<a class="tag" taget="_blank" href="/search/configuration/1.htm">configuration</a>
                                    <div>1.index.jsp页面form标签未指定namespace属性。 
<!--index.jsp代码--> 
 
<%@taglib prefix="s" uri="/struts-tags"%>
...
<s:form action="submit" method="post"&g</div>
                                </li>
                                <li><a href="/article/2305.htm"
                                       title="redis -- hash_max_zipmap_entries设置过大有问题" target="_blank">redis -- hash_max_zipmap_entries设置过大有问题</a>
                                    <span class="text-muted">chenchao051</span>
<a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/hash/1.htm">hash</a>
                                    <div>使用redis时为了使用hash追求更高的内存使用率，我们一般都用hash结构，并且有时候会把hash_max_zipmap_entries这个值设置的很大，很多资料也推荐设置到1000，默认设置为了512，但是这里有个坑 
  
#define ZIPMAP_BIGLEN 254
#define ZIPMAP_END 255 
  
  
/* Return th</div>
                                </li>
                                <li><a href="/article/2432.htm"
                                       title="select into outfile access deny问题" target="_blank">select into outfile access deny问题</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/txt/1.htm">txt</a><a class="tag" taget="_blank" href="/search/%E5%AF%BC%E5%87%BA%E6%95%B0%E6%8D%AE%E5%88%B0%E6%96%87%E4%BB%B6/1.htm">导出数据到文件</a>
                                    <div>本文转自：http://hatemysql.com/2010/06/29/select-into-outfile-access-deny%E9%97%AE%E9%A2%98/ 
 
为应用建立了rnd的帐号，专门为他们查询线上数据库用的，当然，只有他们上了生产网络以后才能连上数据库，安全方面我们还是很注意的，呵呵。 
授权的语句如下： 
grant select on armory.* to rn</div>
                                </li>
                                <li><a href="/article/2559.htm"
                                       title="phpexcel导出excel表简单入门示例" target="_blank">phpexcel导出excel表简单入门示例</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/Excel/1.htm">Excel</a><a class="tag" taget="_blank" href="/search/phpexcel/1.htm">phpexcel</a>
                                    <div>  
<?php 
error_reporting(E_ALL); 
ini_set('display_errors', TRUE); 
ini_set('display_startup_errors', TRUE); 
  
if (PHP_SAPI == 'cli') 
 die('This example should only be run from a Web Brows</div>
                                </li>
                                <li><a href="/article/2686.htm"
                                       title="美国电影超短200句" target="_blank">美国电影超短200句</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E7%94%B5%E5%BD%B1/1.htm">电影</a>
                                    <div>1. I see． 我明白了。2. I quit! 我不干了!3. Let go! 放手!4. Me too． 我也是。5. My god! 天哪!6. No way! 不行!7. Come on． 来吧(赶快)8. Hold on． 等一等。9. I agree。 我同意。10. Not bad． 还不错。11. Not yet． 还没。12. See you． 再见。13. Shut up! </div>
                                </li>
                                <li><a href="/article/2813.htm"
                                       title="Java访问远程服务" target="_blank">Java访问远程服务</a>
                                    <span class="text-muted">dyy_gusi</span>
<a class="tag" taget="_blank" href="/search/httpclient/1.htm">httpclient</a><a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a><a class="tag" taget="_blank" href="/search/get/1.htm">get</a><a class="tag" taget="_blank" href="/search/post/1.htm">post</a>
                                    <div>    随着webService的崛起，我们开始中会越来越多的使用到访问远程webService服务。当然对于不同的webService框架一般都有自己的client包供使用，但是如果使用webService框架自己的client包，那么必然需要在自己的代码中引入它的包，如果同时调运了多个不同框架的webService，那么就需要同时引入多个不同的clien</div>
                                </li>
                                <li><a href="/article/2940.htm"
                                       title="Maven的settings.xml配置" target="_blank">Maven的settings.xml配置</a>
                                    <span class="text-muted">geeksun</span>
<a class="tag" taget="_blank" href="/search/settings.xml/1.htm">settings.xml</a>
                                    <div>settings.xml是Maven的配置文件，下面解释一下其中的配置含义： 
settings.xml存在于两个地方： 
1.安装的地方：$M2_HOME/conf/settings.xml 
2.用户的目录：${user.home}/.m2/settings.xml 
前者又被叫做全局配置，后者被称为用户配置。如果两者都存在，它们的内容将被合并，并且用户范围的settings.xml优先。 
</div>
                                </li>
                                <li><a href="/article/3067.htm"
                                       title="ubuntu的init与系统服务设置" target="_blank">ubuntu的init与系统服务设置</a>
                                    <span class="text-muted">hongtoushizi</span>
<a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a>
                                    <div>转载自： 
http://iysm.net/?p=178  init 
Init是位于/sbin/init的一个程序，它是在linux下，在系统启动过程中，初始化所有的设备驱动程序和数据结构等之后，由内核启动的一个用户级程序，并由此init程序进而完成系统的启动过程。 
ubuntu与传统的linux略有不同，使用upstart完成系统的启动，但表面上仍维持init程序的形式。  
运行</div>
                                </li>
                                <li><a href="/article/3194.htm"
                                       title="跟我学Nginx+Lua开发目录贴" target="_blank">跟我学Nginx+Lua开发目录贴</a>
                                    <span class="text-muted">jinnianshilongnian</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/lua/1.htm">lua</a>
                                    <div>使用Nginx+Lua开发近一年的时间，学习和实践了一些Nginx+Lua开发的架构，为了让更多人使用Nginx+Lua架构开发，利用春节期间总结了一份基本的学习教程，希望对大家有用。也欢迎谈探讨学习一些经验。  
  目录 
第一章 安装Nginx+Lua开发环境 
第二章 Nginx+Lua开发入门 
第三章 Redis/SSDB+Twemproxy安装与使用 
第四章 L</div>
                                </li>
                                <li><a href="/article/3321.htm"
                                       title="php位运算符注意事项" target="_blank">php位运算符注意事项</a>
                                    <span class="text-muted">home198979</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/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%26/1.htm">&</a>
                                    <div>$a = $b = $c = 0;
$a & $b = 1;
$b | $c = 1 
 问a,b,c最终为多少? 
  
当看到这题时，我犯了一个低级错误，误 以为位运算符会改变变量的值。所以得出结果是1 1 0 
但是位运算符是不会改变变量的值的，例如： 
$a=1;$b=2;
$a&$b;
 
 这样a,b的值不会有任何改变 
</div>
                                </li>
                                <li><a href="/article/3448.htm"
                                       title="Linux shell数组建立和使用技巧" target="_blank">Linux shell数组建立和使用技巧</a>
                                    <span class="text-muted">pda158</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                                    <div>1.数组定义   　　[chengmo@centos5 ~]$ a=(1 2 3 4 5)   　　[chengmo@centos5 ~]$ echo $a   　　1   　　一对括号表示是数组，数组元素用“空格”符号分割开。   　　 
2.数组读取与赋值   　　得到长度：   　　[chengmo@centos5 ~]$ echo ${#a[@]}   　　5   　　用${#数组名[@或</div>
                                </li>
                                <li><a href="/article/3575.htm"
                                       title="hotspot源码(JDK7)" target="_blank">hotspot源码(JDK7)</a>
                                    <span class="text-muted">ol_beta</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a>
                                    <div>源码结构图，方便理解： 
  
├─agent                            Serviceab</div>
                                </li>
                                <li><a href="/article/3702.htm"
                                       title="Oracle基本事务和ForAll执行批量DML练习" target="_blank">Oracle基本事务和ForAll执行批量DML练习</a>
                                    <span class="text-muted">vipbooks</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a>
                                    <div>基本事务的使用： 
从账户一的余额中转100到账户二的余额中去，如果账户二不存在或账户一中的余额不足100则整笔交易回滚 
 
 

select * from account;
-- 创建一张账户表
create table account(
       -- 账户ID
       id number(3) not null,
       -- 账户名称
       nam</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>