Web学习笔记——Vue（下）

Vue学习笔记（下）

七、表单处理
- - 1、基本用法
  - - - 文本
      - 多行文本
      - 单选按钮
      - 复选框
      - 多个复选框
      - 选择框
  - 2、值绑定
  - - - 单选按钮
      - 复选框
      - 选择框
  - 3、修饰符
  - - - .number
      - .trim
八、组件
- - 1、组件注册
  - - - 全局注册
      - 局部组件
  - 2、组件复用
  - 3、组件间通信
  - - - props 类型检测
      - 子父组件通信之 emit
  - 4、动态组件
  - 5、生命周期函数
九、Axios 的使用
- - 1、Axios 简介
  - 2、Axios 与 Vue 的钩子函数的结合使用
十、Vue-Router 路由管理器
- - 1、前端路由的概念及作用
  - 2、Vue-Router 的安装
  - 3、Vue-Router 的基本使用
十一、Vuex 状态管理器
- - 1、Vuex 的简介
  - 2、Vuex 的安装与配置
  - 3、Vuex 的核心概念
  - - - 核心概念之：State
      - 核心概念之：Mutations
      - 核心概念之：Actions
      - 心概念之：Getters
      - Vuex 规则
      - 核心概念之：Module

七、表单处理

在一般开发中处理表单，需要通过操作 DOM 来实现，是一个相对繁琐且低效率的工作。然而在 Vue 项目中你可以用 v-model 指令在表单、及 <select> 元素上创建双向数据绑定。轻松地实现表单数据收集或绑定，提高了开发效率。它会根据控件类型自动选取正确的方法来更新元素。负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 <h3>1、基本用法</h3> 常用表单元素 <table> <thead> <tr> <th>元素</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>input[type=*]</td> <td>文本输入框</td> </tr> <tr> <td>textarea</td> <td>多行文本</td> </tr> <tr> <td>radio</td> <td>单选按钮</td> </tr> <tr> <td>checkbox</td> <td>复选框</td> </tr> <tr> <td>select</td> <td>选择框</td> </tr> </tbody> </table> 注意 注意一：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。直接给元素 value 赋值不会生效的，应该通过 JavaScript 在组件的 data 选项中声明初始值。 注意二：v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件： <ul> <li>text 和 textarea 元素使用 value 属性和 input 事件（内部监听 input 事件）；</li> <li>checkbox 和 radio 使用 checked 属性和 change 事件（内部监听 change 事件）；</li> <li>select 字段将 value 作为 prop 并将 change 作为事件（内部监听 change 事件）。 说明： change 和 input 区别就是，input 实时更新数据，change 不是实时更新。</li> </ul> <h5>文本</h5> 直接为文本绑定 v-model 指令，在 data 数据项中声明绑定数据项，可以轻松完成双向数据绑定。让我们来看看神奇的 v-model 指令。 <pre><code class="prism language-html"> <div id="app"> <input v-model="msg" placeholder="请输入..." /> <p>输入的是: {{ msg }}</p> </div> <script> var app = new Vue({ el: "#app", data: { msg: "", }, }); </script> </code></pre> <h5>多行文本</h5> 多行文本和文本用法相同，使用 v-model 指令，在实例 data 中声明绑定的 message 数据项，即可完成多行文本数据双向绑定。 <pre><code class="prism language-html"> <div id="app"> <span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <br /> <textarea v-model="message" placeholder="add multiple lines"></textarea> </div> <script> var vue = new Vue({ el: "#app", data() { return { message: "", }; }, }); </script> </code></pre> <h5>单选按钮</h5> 将单选按钮绑定到同一个 picked，即可完成数据绑定，当第一个单选被选中 picked 的值为第一个单选按钮的 value，同样当第二个单选被选中 picked 的值为第二个单选按钮的 value。 <pre><code class="prism language-html"> <div id="app">  <input type="radio" id="one" value="One" v-model="picked" /> <label for="one">One</label> <br /> <input type="radio" id="two" value="Two" v-model="picked" /> <label for="two">Two</label> <br /> <span>Picked: {{ picked }}</span> </div> <script> var vue = new Vue({ el: "#app", data() { return { picked: "", }; }, }); </script> </code></pre> <h5>复选框</h5> 复选框绑定的是一个布尔值（true or false），同样在复选框元素上使用 v-model 指令，在实例 data 中声明 checked，即可完成复选框数据的双向绑定。 <pre><code class="prism language-html"> <div id="app"> <input type="checkbox" id="checkbox" v-model="checked" /> <label for="checkbox">{{ checked }}</label> </div> <script> // 绑定布尔值 var vue = new Vue({ el: "#app", data() { return { checked: false, }; }, }); </script> </code></pre> <h5>多个复选框</h5> 通常开发中，会用到多个复选框，那么我们就需要把复选框，绑定到同一个数组，方便数据收集。 <pre><code class="prism language-html"> <div id="app"> <input type="checkbox" id="syl1" value="syl1" v-model="checkedNames" /> <label for="syl1">syl1</label> <input type="checkbox" id="syl2" value="syl2" v-model="checkedNames" /> <label for="syl2">syl2</label> <input type="checkbox" id="syl3" value="syl3" v-model="checkedNames" /> <label for="syl3">syl3</label> <br /> <span>Checked names: {{ checkedNames }}</span> </div> <script> var vue = new Vue({ el: "#app", data() { return { checkedNames: [], }; }, }); </script> </code></pre> <h5>选择框</h5> 在 select 元素上使用 v-model 指令，可以绑定当前选中的 option。 <pre><code class="prism language-html"> <div id="app">  <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> <script> var vue = new Vue({ el: "#app", data() { return { selected: "", }; }, }); </script> </code></pre> <h3>2、值绑定</h3> 文本和多行文本值绑定 直接在标签上指定 value 是不能成功的，会被 Vue 忽略。 <pre><code class="prism language-html"> <div id="app">  <input v-model="msg" value="hello" /> </div> <script> var app = new Vue({ el: "#app", data: { msg: "", }, }); </script> </code></pre> 正确模式，通过 JavaScript 在组件的 data 选项中声明初始值： <pre><code class="prism language-html"> <div id="app">  <input v-model="msg" /> <br /> <br /> <br /> <textarea v-model="msg"></textarea> </div> <script> var app = new Vue({ el: "#app", data: { msg: "hello", }, }); </script> </code></pre> <h5>单选按钮</h5> checkbox 和 radio 使用 checked 属性，所以直接给元素 value 值，当选中时 data 中声明的绑定项的值就为元素 value。 <pre><code class="prism language-html"> <div id="app">  <input type="radio" v-model="picked" value="a" /> {{picked}} </div> <script> var vue = new Vue({ el: "#app", data() { return { picked: "", }; }, }); </script> </code></pre> <h5>复选框</h5> 复选框可以是布尔值，toggle 为 true 或 false，当选中时，toggle 为 true，未选中时，toggle 为 false。 <pre><code class="prism language-html"> <div id="app">  <input type="checkbox" v-model="toggle" /> {{toggle}} </div> <script> var vue = new Vue({ el: "#app", data() { return { toggle: false, }; }, }); </script> </code></pre> 在日常开发中，复选框的值很多情况是特定的值，那么我们可以这样做，在标签中声明 true-value=“yes” 和 false-value=“no” 这两个属性，当选中时就是 true-value 属性指定的值，当未选中时就是 false-value 属性值。 <pre><code class="prism language-html"> <div id="app"> <input type="checkbox" v-model="toggle" true-value="yes" false-value="no" /> <p>toggle:{{toggle}}</p> </div> <script> // 通过 true-value="yes" false-value="no" 属性控制，选中时 toggle 值为 yes，未选中时为 no var vue = new Vue({ el: "#app", data() { return { toggle: "", }; }, }); </script> </code></pre> 如果只想要选中有值，可以这样做，true-value 属性指定值，false-value 属性设为空值。 <pre><code class="prism language-html"><input type="checkbox" v-model="toggle" true-value="name" false-value="" /> </code></pre> <h5>选择框</h5> 选择框的值绑定，直接指定每个 option 的 value，可以是固定的，也可以是使用 v-bind:value 动态绑定的： <pre><code class="prism language-html"> <div id="app">  <select v-model="selected">  <option value="abc">ABC</option>  <option v-bind:value="optionValue">DEF</option> </select> <p>{{selected}}</p> </div> <script> var vue = new Vue({ el: "#app", data() { return { selected: "", // 第二个 option 的值 optionValue: "efg", }; }, }); </script> </code></pre> <h3>3、修饰符</h3> .lazy 不同的元素，使用的值不同，抛出的事件也不同。可能开发中，我们不需要数据实时更新，可以使用 .lazy 修饰符，将 input 事件与 change 事件替换，可以将抛出事件由 input 改为 change，使表单元素惰性更新，不实时更新。 <pre><code class="prism language-html"> <div id="app">  <input v-model.lazy="msg" /> <p>{{msg}}</p> </div> <script> var vue = new Vue({ el: "#app", data: { msg: "hello", }, }); </script> </code></pre> <h5>.number</h5> 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符： 这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值返回字符串（默认），需要自己进行类型转换。如果这个值无法被 parseFloat() 解析，则会返回原始的值。给 v-model 添加 number 修饰符，用户即使输入的是非数值类型，也会进行转换，无法转换时，会返回原始的。 <pre><code class="prism language-html"> <div id="app"> <p>没有使用 .number 修饰符</p> <input v-model="number1" type="number" />  <p>{{typeof(number1)}}</p> <p>使用 .number 修饰符</p> <input v-model.number="number2" type="number" />  <p>{{typeof(number2)}}</p> </div> <script> var vue = new Vue({ el: "#app", data: { number1: "", number2: "", }, }); </script> </code></pre> <h5>.trim</h5> 表单元素值首尾空格，自动过滤。 <pre><code class="prism language-html"> <div id="app"> <input v-model.trim="msg" type="text" /> <p>首尾空格被过滤了：{{msg}}</p> </div> <script> var vue = new Vue({ el: "#app", data: { msg: "", }, }); </script> </code></pre> <h1>八、组件</h1> Vue 支持模块化和组件化开发，可以将整个页面进行模块化分割，低耦合高内聚，使得代码可以在各个地方使用。 <h3>1、组件注册</h3> 组件分为全局组件和局部组件。 <h5>全局注册</h5> Vue.component() 方法注册全局组件。 <pre><code class="prism language-html"> <div id="app"> <syl></syl> <syl></syl> <syl></syl> </div> <script> // Vue.component(组件名字,template:{元素标签}) Vue.component("syl", { template: "<h1>河科院全局组件</h1>", }); var app = new Vue({ el: "#app", }); </script> </code></pre> <h5>局部组件</h5> 在父级 components 对象中声明，局部组件只有它的父级才能调用。 局部组件使用： <pre><code class="prism language-javascript"> <div id="header"> <syl-header></syl-header> </div> <div id="mid"> <syl-mid></syl-mid> </div> <script> // 头部组件 var childComponent = { template: "<h2>我是河科院局部组件header，只有我们父级才能调用</h2>", }; // 中间部分组件 var childComponent2 = { template: "<h2>我是河科院局部组件mid，只有我们父级才能调用</h2>", }; // header vm var header = new Vue({ el: "#header", // 子组件必须声明后使用，不然不能起效 components: { "syl-header": childComponent, }, }); var mid = new Vue({ el: "#mid", // 子组件必须声明后使用，不然不能起效 components: { "syl-mid": childComponent2, }, }); </script> </code></pre> <h3>2、组件复用</h3> 组件的优点就在于能够复用，一次代码编写，整个项目受用。 注意：复用组件内的 data 必须是一个函数，如果是一个对象（引用类型），组件与组件间会相互影响，组件数据不能独立管理。 <pre><code class="prism language-javascript"> <div id="app"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div> <script> // 注册一个全局可复用组件 Vue.component("button-counter", { // data 必须是一个函数不然会影响其他组件 data() { return { counter: 0, }; }, template: '<button @click="counter++">{{counter}}</button>', }); var app = new Vue({ el: "#app", }); </script> </code></pre> <h3>3、组件间通信</h3> 组件之间也面临着数据流动，也可以进行通信。下面我们来学习组件间的通信。 父子组件之 props props 是一个单向的数据流，只允许父组件向子组件传值，值类型可以是一个数值、字符、布尔值、数值、对象，子组件需要显式地用 props 选项声明 “prop”。 注意：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 需要使用其等价的 kebab-case (短横线分隔命名) 命名。 <pre><code class="prism language-javascript"> <div id="app"> <title-component post-title="syl1"></title-component> <title-component post-title="syl2"></title-component> <title-component post-title="syl3"></title-component> </div> <script> // 注册一个 title 组件，通过传入不同的 title 值，渲染不同的东西 // 组件上传递的 props 属性名为 kebab-case（短横线分隔命名）的要转换为驼峰命名 Vue.component("title-component", { props: ["postTitle"], // post-title 转换为驼峰命名 template: "{{postTitle}}", }); var app = new Vue({ el: "#app", }); </script> </code></pre> <h5>props 类型检测</h5> 到这里，我们只看到了以字符串数组形式列出的 prop： <pre><code class="prism language-javascript">props: ["postTitle"]; </code></pre> 但是，通常希望每个 prop 都有指定的值类型。这时，可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型： <pre><code class="prism language-javascript">props:{ title:String, id:Number, content:String } </code></pre> <pre><code class="prism language-html"> <div id="app"> <child-component id="1" title="hello syl" content="you are welcom" ></child-component> </div> <script> // 注册一个子组件 Vue.component("child-component", { // props 对象形式，传递属性值进行类型检测，在脚手架环境中很有用 props: { id: Number, title: String, content: String, }, // 使用 es6 模板字符串书写格式更优美 template: `<div>id:{{id}}title:{{title}}content:{{content}}</div>`, }); var app = new Vue({ el: "#app", }); </script> </code></pre> <h5>子父组件通信之 emit</h5> 上面提到 props 实现父向子组件传递数据是单向流的，那么，如何实现子组件向父组件通信呢？这里要使用自定义事件 emit 方法，通过自定义事件来由下到上的数据流动。 语法如下： <pre><code class="prism language-javascript">this.$emit('自定义事件名'，参数) </code></pre> <pre><code class="prism language-html"> <div id="app"> <child-component v-on:send-msg="getMsg"></child-component> </div> <script> // 定义一个子组件，template 绑定 click 事件 // 当 click 事件触发就使用 emit 自定义一个事件 send-msg，传入参数 “我是子组件请求与你通信” // $emit('send-msg','我是子组件请求与你通信') // 子组件标签上绑定自定义事件 send-msg，并绑定上父级的方法 getMsg，即可完成了子父组件通信 // <child-component v-on:send-msg="getMsg"></child-component> Vue.component("child-component", { template: ` <button v-on:click="$emit('send-msg','我是子组件请求与你通信')"> Click me </button> `, }); var app = new Vue({ el: "#app", methods: { getMsg: function (msg) { // 弹出子组件传递的信息 alert(msg); }, }, }); </script> </code></pre> 子组件向父组件数据传递套路： 第一步：子组件绑定事件。 第二步：子组件绑定事件触发，使用 $emit 创建自定义事件并传入需要传值给父组件的数据。 第三步：在子组件标签上用 v-on 绑定自定义事件，在父组件中声明自定义事件处理的方法。 第四步：父组件方法，接受自定义事件传的参数，就完成了整个由下到上的数据流。 <h3>4、动态组件</h3> 上面例子我们传值都是直接传的固定值，其实动态传值我们也支持，生成动态组件，使用 v-bind 动态绑定 props 值。 <pre><code class="prism language-html"> <div id="app">  <child-component :name="name" :age="age" :height="height" ></child-component> <child-component :name="name+'2'" :age="age+1" :height="height" ></child-component> </div> <script> // 定义一个子组件 Vue.component("child-component", { // 使用属性类型检测 props: { name: String, age: Number, height: String, }, template: ` <ul> <li>{{name}}</li> <li>{{age}}</li> <li>{{height}}</li> </ul> `, }); var app = new Vue({ el: "#app", data() { return { name: "syl", age: 20, height: "180cm", }; }, }); </script> </code></pre> <h3>5、生命周期函数</h3> 接触了组件后，应该需要了解整个实例的生命周期是怎么样的，有哪些钩子函数，在哪个阶段我们能操作什么，实例在不同的阶段都会抛出不同的钩子函数，方便开发者能够精确的控制整个流程。 <pre><code class="prism language-html"> <div id="app"> <button @click="handleClick">{{name}}</button> </div> <script> var app = new Vue({ el: "#app", data() { return { name: "syl", }; }, methods: { handleClick: function () { this.name = "syl syl"; }, }, beforeCreate() { alert( "在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用" ); }, created() { alert( "在实例创建完成后被立即调用,挂载阶段还没开始，$el 属性目前不可见" ); }, beforeMount() { alert("在挂载开始之前被调用：相关的 render 函数首次被调用"); }, mounted() { alert("el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子"); }, beforeUpdate() { alert("数据更新时调用"); }, updated() { alert("组件 DOM 已经更新"); }, beforeDestroy() {}, destroyed() {}, }); </script> </code></pre> 经常主要用到有： 1、created 钩子函数内我们可以进行异步数据请求。 <pre><code class="prism language-javascript">created() { fetch('url') .then(function(response) { console.log(response) }) } </code></pre> 2、mounted 我们可以直接操作元素 DOM 了，但是并不推荐这样做，不利于性能提升。 <pre><code class="prism language-html"> <div id="app"> <div id="box" style="width:40px;background: tomato;">点击</div> </div> <script> var app = new Vue({ el: "#app", data() { return {}; }, // div#box 开始并没有绑定事件，挂载后我们直接操作原生 dom mounted() { var box = document.querySelector("#box"); box.addEventListener("click", function () { alert("我们挂载后原生点击事件"); }); }, }); </script> </code></pre> 生命周期示意图 一个 Vue 实例从创建到销毁的完善周期，以及相关周期，向外抛出的钩子函数。 <a href="http://img.e-com-net.com/image/info8/726013acf0054b9baa1f0232cc7a5b55.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/726013acf0054b9baa1f0232cc7a5b55.jpg" alt="Web学习笔记——Vue（下）_第1张图片" width="650" height="837" style="border:1px solid black;"></a> <h1>九、Axios 的使用</h1> <h3>1、Axios 简介</h3> Axios 是一个基于 Promise 语法的、用于浏览器和 Node.js 的 HTTP 库。简单的理解就是对 Ajax 的封装，且具有易用、简洁、高效等特点。 Axios 的特点 它本身具备以下作用： <ul> <li>可以从浏览器中创建 XMLHttpRequest。</li> <li>能从 Node.js 创建 HTTP 请求。</li> <li>支持 Promise API。</li> <li>能够拦截请求和响应。</li> <li>可以转换请求和响应数据。</li> <li>也可取消请求。</li> <li>可以自动转换 JSON 数据。</li> <li>在客户端支持防止 CSRF/XSRF 攻击。</li> </ul> Axios 的安装方式 Axios 的安装与其他框架或插件类似，也是分为以下两种： <ul> <li>npm 安装</li> </ul> <pre><code class="prism language-powershell">npm install axios </code></pre> <ul> <li>使用 <script> 直接引入</li> </ul> <pre><code class="prism language-html"><script src="axios.min.js"></script> </code></pre> Axios 基本用法 1、新建一个 html 文件，并引入 axios.js。 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title>  <script src="axios.min.js"></script> </head> <body></body> </html> </code></pre> 2、创建一个名为 test.json 的文件，作为接下来使用 Axios 请求的数据文件，并写入以下数据： <pre><code class="prism language-javascript">{ "msg": "Hello Axios!" } </code></pre> 3、最后，在 html 文件中使用 Axios 发送一个简单的 Ajax 请求，用于获取 test.json 中的数据，并输出在控制台： <pre><code class="prism language-html"><script type="text/javascript"> axios.get("./test.json").then((res) => { console.log(res); }); </script> </code></pre> 通过 Axios 获取到的数据实际上就是一个 Ajax 对象，真正需要我们请求的数据是该 Ajax 对象的 data 属性值。上面这个例子只是 Axios 众多使用方式中的一种，它主要是用于执行 get 请求。 常用的使用方式 1、执行 get 数据请求。 <pre><code class="prism language-javascript">axios.get('url',{ params:{ id:'接口配置参数（相当于url?id=xxxx）'， }, }).then(function(res){ console.log(res); // 处理成功的函数相当于 success }).catch(function(error){ console.log(error) // 错误处理相当于 error }) </code></pre> 2、执行 post 数据请求并发送数据给后端。 <pre><code class="prism language-javascript">axios .post( "url", { data: {} }, { headers: "xxxx", // 头部配置 } ) .then(function (res) { console.log(res); // 处理成功的函数相当于 success }) .catch(function (error) { console.log(error); // 错误处理相当于 error }); </code></pre> 3、通用方式（适用于任何请求方式）。 <pre><code class="prism language-javascript">//-------------------get-----------------------// axios({ method: "get", url: "xxx", cache: false, params: { id: 123, }, headers: "xxx", }); //-------------------post-----------------------// axios({ method: "post", url: "xxx", data: { firstName: "Tom", lastName: "Sun", }, }); </code></pre> 其中需要注意的是，get 和 post 请求中向后端传递参数的配置项名字不同：get 请求的需要使用 params，post 请求用于发送数据的为 data。 <h3>2、Axios 与 Vue 的钩子函数的结合使用</h3> 1、首先，创建 dataList.json 文件，将 demo.html 中 dataList 的初始值存入其中： <pre><code class="prism language-javascript">["HTML", "CSS", "JavaScript", "Vue.js", "Axios"] </code></pre> 2、从 created 开始，我们就可以更新 data 中的数据了；beforeUpdate 和 update 中又不能执行对 data 的更新操作（因为会死循环）；beforeUnmount 和 unmounted 也不太合适（因为组件实例都要销毁了）；这么看来，合适的也只有 created、beforeMount 和 mounted 了。 事实证明这三个函数都可以，不过我们一般会在 created 和 mounted 中做数据更新的操作，因为这两个函数分别是“实例初始化完成”和“组件挂载完成”的最佳时机。 用 created ，因为这个时候组件还未挂载到 DOM 树上，并不会因为 data 中数据的更新而触发组件重新渲染一遍。 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>syl-vue-test</title> <script src="vue.min.js"></script> <script src="axios.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="item in dataList">{{item}}</li> </ul> </div> <script> var app = new Vue({ el: "#app", data: { dataList: [], }, }); created(){ this.getData(); }, methods:{ getData(){ axios.get('dataList.json') .then(res=>{ this.dataList = res.data; }) } } </script> </body> </html> </code></pre> <h1>十、Vue-Router 路由管理器</h1> <h3>1、前端路由的概念及作用</h3> 前端路由实现原理与日常生活中的路由器基本相同。它代表一个 URL 与相应处理程序的映射关系。 用户在输入要访问的 URL 之后，路由会解析 URL 中的路径，之后根据映射表中的映射关系查找相应的预设函数，并将结果返回给用户，以此完成一次操作。 其工作流程如下图所示： <a href="http://img.e-com-net.com/image/info8/a6106f0208e04b329b1a0cecf20f2e3b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a6106f0208e04b329b1a0cecf20f2e3b.jpg" alt="Web学习笔记——Vue（下）_第2张图片" width="650" height="344" style="border:1px solid black;"></a> 以上图为例，当一个用户使用 https://www.lanqiao.cn/a 来访问网页时，Web 服务会接收到这个请求，然后解析 URL 中的路径 /a，在 Web 服务程序中该路径对应着响应的处理逻辑，程序会把请求交给路径所对应的处理逻辑，这样就完成了一次“路由分发”，这个分发就是通过“路由”来完成的。 简单地说，路由所做的工作就是：根据不同的 URL 地址展示不同的内容或页面。 前端路由不同于传统路由，它不需要服务器来进行解析，而是通过一个 hash 函数或者 H5 提供的 history API 来实现。一般使用前端路由的应用为不涉及到页面间跳转的单页面应用。 前端路由的优缺点 前端路由的优点如下： <ol> <li>页面刷新速度快：由于不需要向服务器发送请求，所以这个过程不会受到网络延迟的影响，实际上只是完成部分组件间的切换，因此页面的刷新速度会比较快，用户体验也更好些。</li> <li>复用性强：由于使用前端路由的应用为单页面应用，所以代码中很多 CSS、JS 都可以共用，避免了过多的重复加载，大大提升了性能。</li> <li>页面状态可记录：如果不使用前端路由，仅通过 Ajax 在页面进行局部切换的应用，由于页面 URL 始终保持不变，因此页面的状态是无法记录的，而前端路由很好的解决了这个问题。例如，使用了前端路由的应用中访问 https://www.lanqiao.cn/a 这个链接，再打开后会直接触发 /a 匹配的路由页面中的事件。</li> </ol> 当然，前端路由也有一些缺点，比如使用浏览器的前进、后退键的时候，会重新发送请求，没有合理地利用缓存。 <h3>2、Vue-Router 的安装</h3> Vue-Router 是 Vue 的官方路由，专门为 Vue 的单页面应用量身打造。 其功能包括： <ul> <li>嵌套路由映射</li> <li>动态路由选择</li> <li>模块化、基于组件的路由配置</li> <li>路由参数、查询、通配符</li> <li>展示由 Vue 的过渡系统提供的过渡效果</li> <li>细致的导航控制</li> <li>自动激活 CSS 类的链接</li> <li>HTML5 history 模式或 hash 模式</li> <li>可定制的滚动行为</li> <li>URL 的正确编码</li> </ul> 与当前大部分流行的框架或插件的使用方式相同，Vue-Router 的安装也有 CDN 和 NPM 两种主流方式。如下所示： CDN 引入 Unpkg.com 提供了基于 npm 的 CDN 链接。 <pre><code class="prism language-javascript">https://unpkg.com/vue-router@2.0.0/dist/vue-router.js </code></pre> NPM 安装 我们可以在项目文件夹下直接运行以下命令来安装 Vue-Router。 <pre><code class="prism language-powershell">npm install vue-router@4 </code></pre> 安装完成后，我们还需通过简单配置将 Vue-Router 与 Vue 实例联系在一起。 <h3>3、Vue-Router 的基本使用</h3> 以一个单页面应用来看看 Vue-Router 的使用，其基本步骤如下所示： <ul> <li>使用 router-link 组件来导航，其通过 to 属性来指定跳转链接（这相当于 HTML 中的 a 标签）。</li> <li>使用 router-view 组件定义路由出口，路由匹配到的组件将会渲染到此处。</li> <li>使用 const routes = [{ path, component }] 来定义路由（路径和组件名）。</li> <li>使用 const router = new VueRouter({}) 来创建路由实例，在其中传入上一步定义的路由配置 routes。</li> <li>创建和挂载根实例，在 new Vue 中挂载上一步创建的路由实例 router。</li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="vue.min.js"></script> <script src="vue-router.js"></script> </head> <body> <div id="app"> <h1>路由的使用</h1> <p>  <router-link to="/home">首页</router-link> <router-link to="/hot">热门</router-link> <router-link to="/class">分类</router-link> </p>   <router-view></router-view> </div> <script> const Home = { template: "<div>首页</div>" }; const Hot = { template: "<div>热门</div>" }; const Class = { template: "<div>分类</div>" }; // 定义路由 const routes = [ { path: "/home", component: Home }, { path: "/hot", component: Hot }, { path: "/class", component: Class }, ]; // 创建 router 实例，然后传 routes 配置 const router = new VueRouter({ routes, }); // 创建和挂载根实例 const app = new Vue({ router, }).$mount("#app"); </script> </body> </html> </code></pre> <h1>十一、Vuex 状态管理器</h1> Vue 借鉴了 redux 和 flux 两种常用的数据流解决方案，开发了一个与 Vue 高度融合的数据流管理插件 Vuex。 <h3>1、Vuex 的简介</h3> Vuex 是一个专门为 Vue 应用程序开发的状态管理模式。通过它可以将 Vue 应用中所有组件的共享状态储存管理起来，并以一定的规则保证这些状态以一种可预测的方式发生变化。 Vuex 应用场景及工作原理 组件之间的通讯有父子和兄弟这两层关系。其中兄弟组件之间的通信较为复杂，我们借助于它们共有的父组件来负责信息的传递。其过程如图所示： <a href="http://img.e-com-net.com/image/info8/fa6e54041bf64094a6891b95c6f03ad8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fa6e54041bf64094a6891b95c6f03ad8.jpg" alt="Web学习笔记——Vue（下）_第3张图片" width="650" height="327" style="border:1px solid black;"></a> 随着业务逻辑的不断增多，难免会遇到相互之间没有任何联系的组件间共用响应式数据的情况。 将商品数据添加到购物车这一应用场景中，如果详情页、首页的商品列表以及搜索列表页中，都需要通过点击按钮添加商品到购物车，并且在底部导航中可以看出动态的更新效果。由于层级较多，组件间关系复杂等因素，借助于传统的组件通信方式来实现就会非常繁琐，代码维护起来也及其费力。组件之间传递数据的过程可能是下面这种场景： <a href="http://img.e-com-net.com/image/info8/6a3f3f90d9ab4cb99bbdbfc06b60a671.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6a3f3f90d9ab4cb99bbdbfc06b60a671.jpg" alt="Web学习笔记——Vue（下）_第4张图片" width="650" height="533" style="border:1px solid black;"></a> 针对这种情况，就可以使用状态管理器来作为组件件沟通的桥梁。它就像所有组件共用的状态（即响应式数据）管理中心，可以将多个组件共用的状态存储起来，供它们访问或修改，所有组件都可以通过它上下平行地通知其它组件该状态发生了变化。如图所示： <a href="http://img.e-com-net.com/image/info8/4defae67ee2f4193b251d395cf851981.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4defae67ee2f4193b251d395cf851981.jpg" alt="Web学习笔记——Vue（下）_第5张图片" width="650" height="275" style="border:1px solid black;"></a> 状态管理器简化了组件之间的关系，以一种一对一的关系去更新它们的共享状态互不干扰。 <h3>2、Vuex 的安装与配置</h3> Vuex 的安装 与当前流行的其它插件和框架的安装方式相同，Vuex 也有直接引入式和安装到项目两种方式。 可以通过 Unpkg.com 提供的 CDN 链接直接在 HTML 中引入最新版和指定版本。语法如下： <pre><code class="prism language-html"> <script src="https://unpkg.com/vuex"></script>  <script src="https://unpkg.com/vuex@2.0.0"></script> </code></pre> 也可以通过 NPM 或 Yarn 将其安装在项目中。 <pre><code class="prism language-powershell"># NPM 安装命令 npm install vuex@3.6.2 --save # Yarn 安装命令 yarn add vuex </code></pre> Vue 2 中只能使用 vuex 3 。 在一个模块化的打包系统中，必须显式地通过 Vue.use() 来安装 Vuex： <pre><code class="prism language-javascript">import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); </code></pre> <h3>3、Vuex 的核心概念</h3> <h5>核心概念之：State</h5> 首先，在 main.js 文件中写入以下代码： <pre><code class="prism language-javascript">import Vue from "vue"; import App from "./App.vue"; import Vuex from "vuex"; // 导入 Vuex Vue.use(Vuex); // 使用 Vuex，让 Vuex 可以访问到 Vue Vue.config.productionTip = false; // 创建 Store 实例 const store = new Vuex.Store({ state: { count: 0, // 计数器的初始值 }, }); new Vue({ store, // 注入 Store render: (h) => h(App), }).$mount("#app"); </code></pre> Vuex 应用的核心就是 store（仓库）。它是一个用于存储组件共享状态（state）的容器，就像一个小型的数据仓库。它所有的功能和操作都是用于处理这个仓库中的状态而存在的，所以在创建 Vuex 配置的时候都是以 store 命名。 接下来，在 App.vue 中将计数器的状态展示出来，在文件中写入以下代码。 <pre><code class="prism language-html"><template> <div id="app">{{count}}</div> </template> <script> export default { name: "App", // 通过计算属性来访问 count computed: { count() { return this.$store.state.count; }, }, }; </script> </code></pre> <h5>核心概念之：Mutations</h5> 在 App.vue 文件中定义一个按钮，新增代码如下： <pre><code class="prism language-html"> <button @click="$store.commit('increment')">++</button> </code></pre> 在 main.js 文件中增加 mutations，代码如下： <pre><code class="prism language-javascript">const store = new Vuex.Store({ // 此处省略 ... mutations: { increment(state) { state.count++; // 执行 count++ 的操作 }, }, }); </code></pre> 从上面的使用我们可以看出 state 就是用来存储和初始化状态。 <h5>核心概念之：Actions</h5> 有时候需要向后台发出一些异步请求，我们不能直接在 mutations 里进行操作，这时就可以在 actions 中定义一些异步操作。 下面来模拟一下异步操作，在页面上新增一个按钮，触发 count-- 的操作。在 App.vue 中新增以下代码： <pre><code class="prism language-html"><button @click="$store.dispatch('decrement')">--</button> </code></pre> 注意哦：Actions 是通过 store.dispatch 方法来触发 actions 更新 state 状态。 在 main.js 文件中新增以下内容： <pre><code class="prism language-javascript">const store = new Vuex.Store({ mutations: { decrement(state) { state.count--; }, }, actions: { decrement({ commit }) { setTimeout(() => { // 通过 commit 交给 mutations 去处理 commit("decrement"); }, 500); }, }, }); </code></pre> actions 与 mutations 的区别 actions 类似于 mutations，不同的是： <ul> <li>actions 中的更新函数最终仍是通过调用 mutations 中的函数来更新状态的，不能通过它直接变更状态。</li> <li>与 mutations 不同，actions 中可以包含任意异步操作。</li> </ul> <h5>心概念之：Getters</h5> getters 可以帮助我们缓存数据。 增加一个每次计数增加两倍的功能，在 main.js 中新增以下代码： <pre><code class="prism language-javascript">getters: { doubleCount(state) { return state.count * 2 } } </code></pre> 然后在页面上获取数据，在 App 文件中新增以下代码： <pre><code class="prism language-html">{{$store.getters.doubleCount}} </code></pre> <h5>Vuex 规则</h5> 在实际开发中 Vuex 并不会限制我们的代码结构。但是，它规定了一些需要遵守的规则： <ul> <li>应用层级的状态应该集中到单个 store 对象中。</li> <li>提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。</li> <li>异步逻辑都应该封装到 action 里面。</li> </ul> 只要遵守以上规则，如何组织代码随意。 <h5>核心概念之：Module</h5> 按照业务逻辑划分为单个的 store，里面包含该模块中的 state、mutations 等。就像下图那样： <a href="http://img.e-com-net.com/image/info8/60decfb543e148219322364fb2a90294.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/60decfb543e148219322364fb2a90294.jpg" alt="Web学习笔记——Vue（下）_第6张图片" width="650" height="238" style="border:1px solid black;"></a> 由于使用单一的状态树，应用的所有状态会集中到一个比较大的对象中。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。 为了解决这个问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割： <a href="http://img.e-com-net.com/image/info8/d2815acd4b7243cb92a4fd23ee8f10f2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d2815acd4b7243cb92a4fd23ee8f10f2.jpg" alt="Web学习笔记——Vue（下）_第7张图片" width="650" height="398" style="border:1px solid black;"></a> 具体语法如下： <pre><code class="prism language-javascript">const moduleA = { state: () => ({ ... }), mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: () => ({ ... }), mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态 </code></pre> 分割后的项目结构如下： <pre><code class="prism language-powershell">└── store ├── index.js # 我们组装模块并导出 store 的地方 ├── state.js # 根级别的 state ├── getters.js # 根级别的 getters ├── actions.js # 根级别的 action ├── mutations.js # 根级别的 mutation └── modules ├── cart.js # 购物车模块 └── products.js # 产品模块 </code></pre> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1642453764457684992"></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">  <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>  <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>  <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.js,前端,学习)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1773613272952537088.htm" title="【Python】一文详细介绍 py格式文件" target="_blank">【Python】一文详细介绍 py格式文件</a> 高斯小哥 <a class="tag" taget="_blank" href="/search/Python%E5%9F%BA%E7%A1%80%E3%80%90%E9%AB%98%E8%B4%A8%E9%87%8F%E5%90%88%E9%9B%86%E3%80%91/1.htm">Python基础【高质量合集】</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%96%B0%E6%89%8B%E5%85%A5%E9%97%A8/1.htm">新手入门</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>【Python】一文详细介绍py格式文件个人主页：高斯小哥高质量专栏：Matplotlib之旅：零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程希望得到您的订阅和支持~创作高质量博文(平均质量分92+)，分享更多关于深度学习、PyTorch、Python领域的优质内容！（希望得到您的关注~）文章目录一、py格式文件简介二、如何创建和编辑py格式文件三、如何运行py</div> </li> <li><a href="/article/1773610656310820864.htm" title="大学播音主持都学什么内容？播音主持专业学什么？" target="_blank">大学播音主持都学什么内容？播音主持专业学什么？</a> 配音新手圈 <div>有些喜欢播音主持并且犹豫要不要报考这个大学专业的小伙伴们就会想要了解大学播音主持都学什么内容吧，毕竟如果不够了解就直接选择这个专业真的等选择完进去学习以后才知道这个专业并不是自己想要学习的东西那就来不及了。下面是小编为大家整理出来的一些播音主持专业学习的内容，请往下看吧。大学播音主持专业主要学习的课程有：播音发声、播音创作基础、广播播音主持、电视播音主持、文艺作品演播学概论、新闻学概论、新闻采编、</div> </li> <li><a href="/article/1773583062202908672.htm" title="新网师的精神肤色（幕布笔记）" target="_blank">新网师的精神肤色（幕布笔记）</a> 悦读书香 <div>王子老师的《极简100小妙招》收到已经几天了，之前大概的浏览了全书，今天起给自己定了一个计划，必须每天学习极简小妙招里面的一个妙招，并加以运用。一、今天要打卡什么内容因有完成每天学习极简小妙招的计划，所以今天晚饭吃的比较简单，草草吃完以后带着小宝到广场溜达一圈，急忙赶回来学习极简小妙招。再重看的时候不知道自己要学点什么，打卡哪一招，感觉哪个都简单，就看这一环节像王子老师说的“一看就会”，但做这一环</div> </li> <li><a href="/article/1773578026081124352.htm" title="学习JavaEE的日子 Day32 线程池" target="_blank">学习JavaEE的日子 Day32 线程池</a> A 北枝 <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0JavaEE/1.htm">学习JavaEE</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/java-ee/1.htm">java-ee</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B%E6%B1%A0/1.htm">线程池</a> <div>Day32线程池1.引入一个线程完成一项任务所需时间为：创建线程时间-Time1线程中执行任务的时间-Time2销毁线程时间-Time32.为什么需要线程池(重要)线程池技术正是关注如何缩短或调整Time1和Time3的时间，从而提高程序的性能。项目中可以把Time1，T3分别安排在项目的启动和结束的时间段或者一些空闲的时间段线程池不仅调整Time1，Time3产生的时间段，而且它还显著减少了创建</div> </li> <li><a href="/article/1773560996888117248.htm" title="没有如释重负" target="_blank">没有如释重负</a> 君远近 <div>虽然只有短短的一个多月的努力复习时间，但今天的整个考试经过，还是发现了效果的，题目做的比较自如，没有慌里慌张，而且提前五分钟完成。至于考试成绩，没有实足的把握，60分都不敢保证。但绝对相信自己，比去年肯定要好！今天早早的赶到考场，见到了刘老师，谈起来学习情况，坦率的说，真的是自己不够重视。总以为会很难，没有信心。其实不是的，只要认真对待，树立足够的信心，绝对可以通过考试的。还向老师询问了，后续再报</div> </li> <li><a href="/article/1773545802220765184.htm" title="C++学习笔记（lambda函数）" target="_blank">C++学习笔记（lambda函数）</a> __TAT__ <a class="tag" taget="_blank" href="/search/C%26amp%3BC%2B%2B/1.htm">C&C++</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>C++learningnote1、lambda函数的语法2、lambda函数的几种用法1、lambda函数的语法lambda函数的一般语法如下：[capture_clause](parameters)->return_type{function_body}capture_clause：需要捕获的变量，但要求该变量必须在这个作用域中。通常的捕获方式有以下几种：[]：不捕获任何变量[&]：按引用捕获变</div> </li> <li><a href="/article/1773530120070430720.htm" title="心赏（2018.10.8）" target="_blank">心赏（2018.10.8）</a> 六一节_3928 <div>1.上班第一天，同事彤休完产假，回来上班，给我带了酸奶和水果。她生小孩时，我给她发了一个小红包贺喜，哪知她就记在心里了。心赏这个有心的90后。2.女儿放学回来，说自己当了小组长。一边说不想当，一边得意的样子。心赏老师给了孩子这个锻炼的机会。3.老妈今天做了"蚂蚁上树"的菜，得到女儿的高度肯定。心赏老妈还在不断学习。</div> </li> <li><a href="/article/1773514238858428416.htm" title="2022-2-13晨间日记" target="_blank">2022-2-13晨间日记</a> 越亮也打烊 <div>今天是什么日子起床：7:00就寝：12:08天气：晴心情：糟糕纪念日：无任务清单昨日完成的任务，最重要的三件事：寒假作业，网课，画画改进：作业时间剪短习惯养成：网课不逃～周目标·完成进度数学卷子100％学习·信息·阅读《傅雷家书》《钢铁是怎样炼成的》健康·饮食·锻炼我终于不喝饮料啦，喝茶～人际·家人·朋友邝姐姐带我吃火锅工作·思考啥时候开学，我还有几天赶完作业最美好的三件事1.卷子写完了2.我有冰</div> </li> <li><a href="/article/1773512348661776384.htm" title="中原焦点团队38期王芳芳坚持分享第236天，20230630总约练134次，来访113次，咨8次，观察员13次" target="_blank">中原焦点团队38期王芳芳坚持分享第236天，20230630总约练134次，来访113次，咨8次，观察员13次</a> 芳芳王 <div>学习焦点的初心是想拯救孩子，孩子由于沉迷游戏，成绩下滑，在学习的过程中发现是自己的教育方式出了状况。经过半年的学习，一些焦点的基本技巧，如接纳、欣赏、倾听、同理心、尊重等都有了一定的了解。但在实际应用时仍然存在很多问题，感觉自己仍然没有放下对孩子成绩的期望，仍然把握不住对孩子管理的度。我该如何去陪伴好孩子？多用心去听课，并加强反思，多约练。去思考如何让自己快乐起来？</div> </li> <li><a href="/article/1773504513622212608.htm" title="大前端-postcss安装使用指南" target="_blank">大前端-postcss安装使用指南</a> 黑夜照亮前行的路 <a class="tag" taget="_blank" href="/search/postcss/1.htm">postcss</a> <div>PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把</div> </li> <li><a href="/article/1773504261557125120.htm" title="谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程" target="_blank">谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程</a> pigerr杨 <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a><a class="tag" taget="_blank" href="/search/drivers/1.htm">drivers</a> <div>ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装</div> </li> <li><a href="/article/1773501994674225152.htm" title="虚拟 DOM 的优缺点有哪些" target="_blank">虚拟 DOM 的优缺点有哪些</a> 咕噜签名分发 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优</div> </li> <li><a href="/article/1773500735770656768.htm" title="大创项目推荐深度学习 opencv python 公式识别(图像识别机器视觉)" target="_blank">大创项目推荐深度学习 opencv python 公式识别(图像识别机器视觉)</a> laafeer <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>文章目录0前言1课题说明2效果展示3具体实现4关键代码实现5算法综合效果6最后0前言优质竞赛项目系列，今天要分享的是基于深度学习的数学公式识别算法实现该项目较为新颖，适合作为竞赛课题方向，学长非常推荐！学长这里给一个题目综合评分(每项满分5分)难度系数：3分工作量：4分创新点：4分更多资料,项目分享：https://gitee.com/dancheng-senior/postgraduate1课题</div> </li> <li><a href="/article/1773499614951964672.htm" title="#D174-读书会作业-《财务自由之路》3" target="_blank">#D174-读书会作业-《财务自由之路》3</a> 白洲笔记 <div>最近沉迷于写作营，一直就没时间去弄读书会的作业，书的第二遍也就看了个开头，趁着日更的时间，赶紧把作业做了，这次是15到21课。【1.印象最深刻的部分】(本周所读内容中印象最深刻的部分)*活在未来，最正确的方法是什么？用正确的方法做正确的事情，判断什么是正确的？逻辑。学会思考。"作对事情"永远比“把事情作对“重要的多。”长远思考，耐心验证，小心总结提炼“证明自己正确并不是学习的任务和目标，时刻成长，</div> </li> <li><a href="/article/1773495574226599936.htm" title="3、JavaWeb-Ajax/Axios-前端工程化-Element" target="_blank">3、JavaWeb-Ajax/Axios-前端工程化-Element</a> 所谓远行Misnearch <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/JavaWeb/1.htm">JavaWeb</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名</div> </li> <li><a href="/article/1773478938652246016.htm" title="账务处理又出错？资深会计来教你，学会效率翻倍！共同学习" target="_blank">账务处理又出错？资深会计来教你，学会效率翻倍！共同学习</a> 小橘子要努力吖 <div>作为一名会计，在实际工作中会遇到各种麻烦的账务处理问题。那么，最常用的会计处理方法都有哪些呢？今天小编为大家带来了从业二十六年的资深老会计分享的十四中会计常用的账务处理问题的解决方案，快来看看吧！一、促销品的账务处理在促销时公司经常会把一些商品按进价赠送给消费者使用二、款已付清但发票未到的账务处理三、购买材料发生不合理损耗的账务处理问题公司在购买材料时，常常会发生一些不合理的损耗，那么这种问题该怎</div> </li> <li><a href="/article/1773477427016695808.htm" title="【真诚子】通晓鬼谷第七篇读书日记。" target="_blank">【真诚子】通晓鬼谷第七篇读书日记。</a> 真诚子l通晓鬼谷 <div>今天把个人品牌，从193读到208页，书的内容质量出奇的高，尤其是这一段。对标学习法，找一个比自己强，或者你期望成为的人进行模仿性学习，对标学习，不是到处，去找人对标兵学习很多人的优点，或是学习自己认为好的方面，而是找准一个对标高手，然后全方位的学习这个人。我在做品牌咨询时就对标，学习了一个在国内很有名的行业顶尖大咖。我先找到他公司的方案，进行完全模仿，连PPT的排版都一样，而且我只参照他一个人的</div> </li> <li><a href="/article/1773475811752476672.htm" title="ES-LTR粗排模块" target="_blank">ES-LTR粗排模块</a> poins <a class="tag" taget="_blank" href="/search/jenkins/1.htm">jenkins</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>ES-LTR粗排模块官方资源：https://github.com/HeiBoWang/elasticsearch-learning-to-rankElasticsearch学习排名插件使用机器学习提高搜索相关性排名。它为维基媒体基金会和Snagajob等地方的搜索提供了动力！这个插件有什么功能此插件：允许您在Elasticsearch中存储特征（Elasticsearch查询模板）记录特征得分（</div> </li> <li><a href="/article/1773475780618158080.htm" title="2018-11-18成长小组学习笔记" target="_blank">2018-11-18成长小组学习笔记</a> 实验中学45 <div>因为嗓子“罢工”，我面对众人只能借“微笑”代言。在开始授课前，绣霞老师先反馈上次作业的情况，提到“接纳”需是真正发自内心的完全接纳，而不是口头上的接纳，内心却是排斥的。提到一个“问题”孩子恰恰对家爱的更加“深沉”，夫妻间的问题不能影响到孩子，对孩子更好的爱不是你为他做的更多，而是给他自由、健康成长的空间。图片发自App一、孩子：家庭的一面镜子夫妻成了彼此的“投射”，婚姻便“吵的不可开交”，婚姻便成</div> </li> <li><a href="/article/1773441502228316160.htm" title="2019-07-16" target="_blank">2019-07-16</a> 振华老凤祥店长崔宁宁 <div>大爱的李老师，智慧的教授，亲爱的跃友们：大家好！我是莱州鑫和金店李总的人～崔宁宁今天是我的日精进行动第56天，我分享一下今天的改变，我们相互勉励，每天进步一点点，离成功便不远。1、比学习：人这一生最主要的就是信念，坚定不移的信念是成功路上的重要基石！2、比改变：我是一切的根源，我变了世界就变了！改变自己的心态！3、比付出：承担才能成长，付出才会杰出！4、比谦卑：学习每位优秀店长身上的优点！5、比感</div> </li> <li><a href="/article/1773439683024453632.htm" title="python清华大学出版社答案_Python机器学习及实践" target="_blank">python清华大学出版社答案_Python机器学习及实践</a> weixin_39805119 <a class="tag" taget="_blank" href="/search/python%E6%B8%85%E5%8D%8E%E5%A4%A7%E5%AD%A6%E5%87%BA%E7%89%88%E7%A4%BE%E7%AD%94%E6%A1%88/1.htm">python清华大学出版社答案</a> <div>第1章机器学习的基础知识1.1何谓机器学习1.1.1传感器和海量数据1.1.2机器学习的重要性1.1.3机器学习的表现1.1.4机器学习的主要任务1.1.5选择合适的算法1.1.6机器学习程序的步骤1.2综合分类1.3推荐系统和深度学习1.3.1推荐系统1.3.2深度学习1.4何为Python1.4.1使用Python软件的由来1.4.2为什么使用Python1.4.3Python设计定位1.4.</div> </li> <li><a href="/article/1773437340203679744.htm" title="2018-12-02" target="_blank">2018-12-02</a> 子分小 <div>姓名：张颖公司：菲尔德国际英语【反省总结第146天，始于20180709今天是20181202】【知～学习】六项精进大纲背诵3遍每天十个单词坚持第181天每天学习一篇英文文章第94天英语流利说课程第71天学习30分钟【行～实践】一、修身：（对自己个人）步行5000步二、齐家：（对家庭和家人）无三、建功：（对工作)完成与Arti活动课和两节Demo准备开班事宜｛积善｝：发愿从2018年7月9日起1年</div> </li> <li><a href="/article/1773433809660870656.htm" title="如何成为思维的高手？" target="_blank">如何成为思维的高手？</a> 明安包装闫慧玲 <div>六项精进训练营Day2复盘20210112湖北荆州学习靠氛围，成长靠圈子1.关于金钱认知金句：1.当今世界，非钱不行2.有钱能使鬼推磨3.金钱是万恶之本4.时间就是金钱5.金钱不是万能的，但是没有钱是万万不能的6.谈钱伤感情，谈感情伤钱道德系统→好人→美德→回流利益系统→好好生活天下熙熙皆为利来，天下攘攘皆为利往出自西汉著名史学家、文学家司马迁《史记》的第一百二十九章“货殖列传”。这句话意思是说天</div> </li> <li><a href="/article/1773433808389996544.htm" title="十分钟自由写作" target="_blank">十分钟自由写作</a> 知意zy <div>主题：我缺乏的东西自从加入2022年弘丹写作学院，感觉每天的生活都忙碌了起来，我要上班，要学习。所以我每天都必须拼尽全力向前奔跑，才追得上小伙伴们的脚步。在写作学院，我学会了反省自己的不足，我的想法多，缺乏的东西也太多。比如：写作的文笔，写作逻辑，底层自信心……看到社群里那么多优秀的小伙伴，我感觉自己越来越自卑，我这么一个平庸的人，会完成今年的写作目标吗？我开始不停怀疑自己是否能坚持下去。而弘丹老</div> </li> <li><a href="/article/1773424105362620416.htm" title="2021-04-11" target="_blank">2021-04-11</a> 英英成长日记 <div>（1）每天写50字以上的催眠语言肯定自己或孩子或爱人今天的公益沙龙第二期，你有充分的准备！所以一切都很顺利！你还可以更灵活，我相信你可以做到！你是一个有爱的人！爱能成就一切！加油！分享也是成长！你说对吗？（2）每天晚上跟潜意识沟通一次。谢谢你潜意识，今天支持我讲完两个小时沙龙！感恩你每天这样支持我成长学习！（3）每天学习三条时间管理方法，共100条。(4)自己想要坚持3件事（确定下来至少一件，坚持</div> </li> <li><a href="/article/1773415532297519104.htm" title="忙忙碌碌才是生活" target="_blank">忙忙碌碌才是生活</a> 北渔说 <div>观海年后上班，因为项目接近尾声甚是消闲。说是消闲，其实身消闲，心不消闲。都说当下社会是焦虑的社会，因为人们普遍焦虑。上班已有半月，想想这好像是上班几年来最空闲的一段时间了。空闲的主要原因是工作处在了瓶颈期，心有余而力不足。因为有一颗力求完美的心，但却没有力求完美的能力，所以徒有焦虑。不知道大家有没有这种感觉，在高压学习或工作一段时间之后，突然闲下来就会茫然无措。有时候读一本长篇，好不容易结束本来应</div> </li> <li><a href="/article/1773411736095883264.htm" title="数据管理知识体系指南（第二版）-第五章——数据建模和设计-学习笔记" target="_blank">数据管理知识体系指南（第二版）-第五章——数据建模和设计-学习笔记</a> 键盘上的五花肉 <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%B2%BB%E7%90%86/1.htm">数据治理</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%BB%93%E5%BA%93/1.htm">数据仓库</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%B2%BB%E7%90%86/1.htm">数据治理</a> <div>目录5.1引言5.1.1业务驱动因素5.1.2目标和原则5.1.3基本概念5.2活动5.2.1规划数据建模5.2.2建立数据模型5.2.3审核数据模型5.2.4维护数据模型5.3工具5.3.1数据建模工具5.3.2数据血缘工具5.3.3数据分析工具5.3.4元数据资料库5.3.5数据模型模式5.3.6行业数据模型5.4方法5.4.1命名约定的最佳实践5.4.2数据库设计中的最佳实践5.5数据建模和</div> </li> <li><a href="/article/1773403804033679360.htm" title="职场人员学习时间管理的重大意义" target="_blank">职场人员学习时间管理的重大意义</a> 时间管理v8 <div>时间管理是指通过事先规划和运用一定的技巧、方法与工具实现对时间的灵活以及有效运用，从而实现个人或组织的既定目标。职场人员能否在自己的事业生涯中取得成功，秘诀就在于搞好时间管理。世界上最重要的东西是"时间"，不能管理时间，便什么也不能管理。时间是世界上最短缺的资源，除非严加管理，否则就会一事无成。职场人员学习时间管理的重大意义职场中时间陷阱为什么职场人员总是觉得时间不够，经常会导致加班加点的工作？主</div> </li> <li><a href="/article/1773388547047358464.htm" title="遗落的光阴" target="_blank">遗落的光阴</a> 古诗风光 <div>第七篇，小明的学生时代。小明和他的同桌的共听一首歌的行为已经实现了。所以每次没事就和他的同桌一起畅听音乐，这也导致了一些场面都发生，一就是她的隔壁同桌时不时的鄙夷的眼光，二是他进一步加聚了他同桌对他的态度，他的同桌除了平时的听音乐交流之外，还增加了与他的交流。其中最关键的就是，因为他的同桌没事就与他的进行生活的交流。其中最关键的就是在一个不上课的周末小明独自一人回到了宿舍进行学习。而这时他的同桌带</div> </li> <li><a href="/article/1773382031552610304.htm" title="java实体中返回前端的double类型四舍五入（格式化）" target="_blank">java实体中返回前端的double类型四舍五入（格式化）</a> 婲落ヽ紅顏誶 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f</div> </li> <li><a href="/article/17.htm" title="分享100个最新免费的高匿HTTP代理IP" target="_blank">分享100个最新免费的高匿HTTP代理IP</a> mcj8089 <a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%90%86IP/1.htm">代理IP</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">代理服务器</a><a class="tag" taget="_blank" href="/search/%E5%8C%BF%E5%90%8D%E4%BB%A3%E7%90%86/1.htm">匿名代理</a><a class="tag" taget="_blank" href="/search/%E5%85%8D%E8%B4%B9%E4%BB%A3%E7%90%86IP/1.htm">免费代理IP</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E6%96%B0%E4%BB%A3%E7%90%86IP/1.htm">最新代理IP</a> <div> 推荐两个代理IP网站： 1. 全网代理IP：http://proxy.goubanjia.com/ 2. 敲代码免费IP：http://ip.qiaodm.com/ 120.198.243.130:80,中国/广东省 58.251.78.71:8088,中国/广东省 183.207.228.22:83,中国/</div> </li> <li><a href="/article/144.htm" title="mysql高级特性之数据分区" target="_blank">mysql高级特性之数据分区</a> annan211 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><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/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%8C%BA/1.htm">分区</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div> mysql高级特性 1 以存储引擎的角度分析，分区表和物理表没有区别。是按照一定的规则将数据分别存储的逻辑设计。器底层是由多个物理字表组成。 2 分区的原理分区表由多个相关的底层表实现，这些底层表也是由句柄对象表示，所以我们可以直接访问各个分区。存储引擎管理分区的各个底层表和管理普通表一样(所有底层表都必须使用相同的存储引擎)，分区表的索引只是</div> </li> <li><a href="/article/271.htm" title="JS采用正则表达式简单获取URL地址栏参数" target="_blank">JS采用正则表达式简单获取URL地址栏参数</a> chiangfai <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E5%9C%B0%E5%9D%80%E6%A0%8F%E5%8F%82%E6%95%B0%E8%8E%B7%E5%8F%96/1.htm">地址栏参数获取</a> <div>GetUrlParam:function GetUrlParam(param){ var reg = new RegExp("(^|&)"+ param +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null</div> </li> <li><a href="/article/398.htm" title="怎样将数据表拷贝到powerdesigner (本地数据库表)" target="_blank">怎样将数据表拷贝到powerdesigner (本地数据库表)</a> Array_06 <a class="tag" taget="_blank" href="/search/powerDesigner/1.htm">powerDesigner</a> <div>================================================== 1、打开PowerDesigner12，在菜单中按照如下方式进行操作 file->Reverse Engineer->DataBase 点击后，弹出 New Physical Data Model 的对话框 2、在General选项卡中 Model name:模板名字，自</div> </li> <li><a href="/article/525.htm" title="logbackのhelloworld" target="_blank">logbackのhelloworld</a> 飞翔的马甲 <a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%BF%97/1.htm">日志</a><a class="tag" taget="_blank" href="/search/logback/1.htm">logback</a> <div>一、概述 1.日志是啥？当我是个逗比的时候我是这么理解的：log.debug()代替了system.out.print(); 当我项目工作时，以为是一堆得.log文件。这两天项目发布新版本，比较轻松，决定好好地研究下日志以及logback。传送门1：日志的作用与方法： http://www.infoq.com/cn/articles/why-and-how-log 上面的作</div> </li> <li><a href="/article/652.htm" title="新浪微博爬虫模拟登陆" target="_blank">新浪微博爬虫模拟登陆</a> 随意而生 <a class="tag" taget="_blank" href="/search/%E6%96%B0%E6%B5%AA%E5%BE%AE%E5%8D%9A/1.htm">新浪微博</a> <div>转载自：http://hi.baidu.com/erliang20088/item/251db4b040b8ce58ba0e1235 近来由于毕设需要，重新修改了新浪微博爬虫废了不少劲，希望下边的总结能够帮助后来的同学们。现行版的模拟登陆与以前相比，最大的改动在于cookie获取时候的模拟url的请求</div> </li> <li><a href="/article/779.htm" title="synchronized" target="_blank">synchronized</a> 香水浓 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a> <div> Java语言的关键字，可用来给对象和方法或者代码块加锁，当它锁定一个方法或者一个代码块的时候，同一时刻最多只有一个线程执行这段代码。当两个并发线程访问同一个对象object中的这个加锁同步代码块时，一个时间内只能有一个线程得到执行。另一个线程必须等待当前线程执行完这个代码块以后才能执行该代码块。然而，当一个线程访问object的一个加锁代码块时，另一个线程仍然</div> </li> <li><a href="/article/906.htm" title="maven 简单实用教程" target="_blank">maven 简单实用教程</a> AdyZhang <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>1. Maven介绍 1.1. 简介 java编写的用于构建系统的自动化工具。目前版本是2.0.9，注意maven2和maven1有很大区别，阅读第三方文档时需要区分版本。 1.2. Maven资源见官方网站；The 5 minute test，官方简易入门文档；Getting Started Tutorial，官方入门文档；Build Coo</div> </li> <li><a href="/article/1033.htm" title="Android 通过 intent传值获得null" target="_blank">Android 通过 intent传值获得null</a> aijuans <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>我在通过intent 获得传递兑现过的时候报错，空指针,我是getMap方法进行传值，代码如下 1 2 3 4 5 6 7 8 9 public void getMap(View view){ Intent i =</div> </li> <li><a href="/article/1160.htm" title="apache 做代理报如下错误：The proxy server received an invalid response from an upstream" target="_blank">apache 做代理报如下错误：The proxy server received an invalid response from an upstream</a> baalwolf <a class="tag" taget="_blank" href="/search/response/1.htm">response</a> <div>网站配置是apache＋tomcat,tomcat没有报错，apache报错是： The proxy server received an invalid response from an upstream server. The proxy server could not handle the request GET /. Reason: Error reading fr</div> </li> <li><a href="/article/1287.htm" title="Tomcat6 内存和线程配置" target="_blank">Tomcat6 内存和线程配置</a> BigBird2012 <a class="tag" taget="_blank" href="/search/tomcat6/1.htm">tomcat6</a> <div>1、修改启动时内存参数、并指定JVM时区（在windows server 2008 下时间少了8个小时）在Tomcat上运行j2ee项目代码时，经常会出现内存溢出的情况，解决办法是在系统参数中增加系统参数： window下，在catalina.bat最前面 set JAVA_OPTS=-XX:PermSize=64M -XX:MaxPermSize=128m -Xms5</div> </li> <li><a href="/article/1414.htm" title="Karam与TDD" target="_blank">Karam与TDD</a> bijian1013 <a class="tag" taget="_blank" href="/search/Karam/1.htm">Karam</a><a class="tag" taget="_blank" href="/search/TDD/1.htm">TDD</a> <div>一.TDD 测试驱动开发（Test-Driven Development,TDD）是一种敏捷（AGILE）开发方法论，它把开发流程倒转了过来，在进行代码实现之前，首先保证编写测试用例，从而用测试来驱动开发（而不是把测试作为一项验证工具来使用）。 TDD的原则很简单： a.只有当某个</div> </li> <li><a href="/article/1541.htm" title="[Zookeeper学习笔记之七]Zookeeper源代码分析之Zookeeper.States" target="_blank">[Zookeeper学习笔记之七]Zookeeper源代码分析之Zookeeper.States</a> bit1129 <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a> <div> public enum States { CONNECTING, //Zookeeper服务器不可用，客户端处于尝试链接状态 ASSOCIATING, //？？？ CONNECTED, //链接建立，可以与Zookeeper服务器正常通信 CONNECTEDREADONLY, //处于只读状态的链接状态，只读模式可以在</div> </li> <li><a href="/article/1668.htm" title="【Scala十四】Scala核心八：闭包" target="_blank">【Scala十四】Scala核心八：闭包</a> bit1129 <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a> <div>Free variable A free variable of an expression is a variable that’s used inside the expression but not defined inside the expression. For instance, in the function literal expression (x: Int) => (x</div> </li> <li><a href="/article/1795.htm" title="android发送json并解析返回json" target="_blank">android发送json并解析返回json</a> ronin47 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>package com.http.test; import org.apache.http.HttpResponse; import org.apache.http.HttpStatus; import org.apache.http.client.HttpClient; import org.apache.http.client.methods.HttpGet; import </div> </li> <li><a href="/article/1922.htm" title="一份IT实习生的总结" target="_blank">一份IT实习生的总结</a> brotherlamp <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/php%E8%B5%84%E6%96%99/1.htm">php资料</a><a class="tag" taget="_blank" href="/search/php%E6%95%99%E7%A8%8B/1.htm">php教程</a><a class="tag" taget="_blank" href="/search/php%E5%9F%B9%E8%AE%AD/1.htm">php培训</a><a class="tag" taget="_blank" href="/search/php%E8%A7%86%E9%A2%91/1.htm">php视频</a> <div>今天突然发现在不知不觉中自己已经实习了 3 个月了，现在可能不算是真正意义上的实习吧，因为现在自己才大三，在这边撸代码的同时还要考虑到学校的功课跟期末考试。让我震惊的是，我完全想不到在这 3 个月里我到底学到了什么，这是一件多么悲催的事情啊。同时我对我应该 get 到什么新技能也很迷茫。所以今晚还是总结下把，让自己在接下来的实习生活有更加明确的方向。最后感谢工作室给我们几个人这个机会让我们提前出来</div> </li> <li><a href="/article/2049.htm" title="据说是2012年10月人人网校招的一道笔试题-给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。将重物放到天平左侧，问在两边如何添加砝码" target="_blank">据说是2012年10月人人网校招的一道笔试题-给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。将重物放到天平左侧，问在两边如何添加砝码</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class ScalesBalance { /** * 题目： * 给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。（假设N无限大，但一种重量的砝码只有一个） * 将重物放到天平左侧，问在两边如何添加砝码使两边平衡 * * 分析： * 三进制 * 我们约定括号表示里面的数是三进制，例如 47=(1202</div> </li> <li><a href="/article/2176.htm" title="dom4j最常用最简单的方法" target="_blank">dom4j最常用最简单的方法</a> chiangfai <a class="tag" taget="_blank" href="/search/dom4j/1.htm">dom4j</a> <div>要使用dom4j读写XML文档,需要先下载dom4j包,dom4j官方网站在 http://www.dom4j.org/目前最新dom4j包下载地址:http://nchc.dl.sourceforge.net/sourceforge/dom4j/dom4j-1.6.1.zip 解开后有两个包,仅操作XML文档的话把dom4j-1.6.1.jar加入工程就可以了,如果需要使用XPath的话还需要</div> </li> <li><a href="/article/2303.htm" title="简单HBase笔记" target="_blank">简单HBase笔记</a> chenchao051 <a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a> <div> 一、Client-side write buffer 客户端缓存请求描述：可以缓存客户端的请求，以此来减少RPC的次数，但是缓存只是被存在一个ArrayList中，所以多线程访问时不安全的。可以使用getWriteBuffer()方法来取得客户端缓存中的数据。默认关闭。二、Scan的Caching 描述： next( )方法请求一行就要使用一次RPC,即使</div> </li> <li><a href="/article/2430.htm" title="mysqldump导出时出现when doing LOCK TABLES" target="_blank">mysqldump导出时出现when doing LOCK TABLES</a> daizj <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/mysqdump/1.htm">mysqdump</a><a class="tag" taget="_blank" href="/search/%E5%AF%BC%E6%95%B0%E6%8D%AE/1.htm">导数据</a> <div>　　执行　mysqldump -uxxx -pxxx -hxxx -Pxxxx database tablename > tablename.sql　导出表时，会报 mysqldump: Got error: 1044: Access denied for user 'xxx'@'xxx' to database 'xxx' when doing LOCK TABLES 解决</div> </li> <li><a href="/article/2557.htm" title="CSS渲染原理" target="_blank">CSS渲染原理</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a> <div> 从事Web前端开发的人都与CSS打交道很多，有的人也许不知道css是怎么去工作的，写出来的css浏览器是怎么样去解析的呢？当这个成为我们提高css水平的一个瓶颈时，是否应该多了解一下呢？一、浏览器的发展与CSS </div> </li> <li><a href="/article/2684.htm" title="《阿甘正传》台词" target="_blank">《阿甘正传》台词</a> dcj3sjt126com <div>Part Ⅰ: 《阿甘正传》Forrest Gump经典中英文对白 Forrest: Hello! My names Forrest. Forrest Gump. You wanna Chocolate? I could eat about a million and a half othese. My momma always said life was like a box ochocol</div> </li> <li><a href="/article/2811.htm" title="Java处理JSON" target="_blank">Java处理JSON</a> dyy_gusi <a class="tag" taget="_blank" href="/search/json/1.htm">json</a> <div>Json在数据传输中很好用，原因是JSON 比 XML 更小、更快，更易解析。在Java程序中，如何使用处理JSON，现在有很多工具可以处理，比较流行常用的是google的gson和alibaba的fastjson，具体使用如下： 1、读取json然后处理 class ReadJSON { public static void main(String[] args) </div> </li> <li><a href="/article/2938.htm" title="win7下nginx和php的配置" target="_blank">win7下nginx和php的配置</a> geeksun <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div>1. 安装包准备 nginx : 从nginx.org下载nginx-1.8.0.zip php：从php.net下载php-5.6.10-Win32-VC11-x64.zip， php是免安装文件。 RunHiddenConsole: 用于隐藏命令行窗口 2. 配置 # java用8080端口做应用服务器，nginx反向代理到这个端口即可 p</div> </li> <li><a href="/article/3065.htm" title="基于2.8版本redis配置文件中文解释" target="_blank">基于2.8版本redis配置文件中文解释</a> hongtoushizi <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>转载自： http://wangwei007.blog.51cto.com/68019/1548167 在Redis中直接启动redis-server服务时, 采用的是默认的配置文件。采用redis-server xxx.conf 这样的方式可以按照指定的配置文件来运行Redis服务。下面是Redis2.8.9的配置文</div> </li> <li><a href="/article/3192.htm" title="第五章常用Lua开发库3-模板渲染" target="_blank">第五章常用Lua开发库3-模板渲染</a> jinnianshilongnian <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>动态web网页开发是Web开发中一个常见的场景，比如像京东商品详情页，其页面逻辑是非常复杂的，需要使用模板技术来实现。而Lua中也有许多模板引擎，如目前我在使用的lua-resty-template，可以渲染很复杂的页面，借助LuaJIT其性能也是可以接受的。如果学习过JavaEE中的servlet和JSP的话，应该知道JSP模板最终会被翻译成Servlet来执行；而lua-r</div> </li> <li><a href="/article/3319.htm" title="JZSearch大数据搜索引擎" target="_blank">JZSearch大数据搜索引擎</a> 颠覆者 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>系统简介：大数据的特点有四个层面：第一，数据体量巨大。从TB级别，跃升到PB级别；第二，数据类型繁多。网络日志、视频、图片、地理位置信息等等。第三，价值密度低。以视频为例，连续不间断监控过程中，可能有用的数据仅仅有一两秒。第四，处理速度快。最后这一点也是和传统的数据挖掘技术有着本质的不同。业界将其归纳为4个“V”——Volume，Variety，Value，Velocity。大数据搜索引</div> </li> <li><a href="/article/3446.htm" title="10招让你成为杰出的Java程序员" target="_blank">10招让你成为杰出的Java程序员</a> pda158 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a> <div>如果你是一个热衷于技术的 Java 程序员，那么下面的 10 个要点可以让你在众多 Java 开发人员中脱颖而出。　　 1. 拥有扎实的基础和深刻理解 OO 原则　　对于 Java 程序员，深刻理解 Object Oriented Programming（面向对象编程）这一概念是必须的。没有 OOPS 的坚实基础，就领会不了像 Java 这些面向对象编程语言</div> </li> <li><a href="/article/3573.htm" title="tomcat之oracle连接池配置" target="_blank">tomcat之oracle连接池配置</a> 小网客 <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>tomcat版本7.0 配置oracle连接池方式：修改tomcat的server.xml配置文件： <GlobalNamingResources> <Resource name="utermdatasource" auth="Container" type="javax.sql.DataSou</div> </li> <li><a href="/article/3700.htm" title="Oracle 分页算法汇总" target="_blank">Oracle 分页算法汇总</a> vipbooks <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a> <div> 这是我找到的一些关于Oracle分页的算法，大家那里还有没有其他好的算法没？我们大家一起分享一下！ -- Oracle 分页算法一 select * from ( select page.*,rownum rn from (select * from help) page -- 20 = (currentPag</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <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.  </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>