幻梦丶情书

Vue框架

Vue

1、vue概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如：vue-router：跳转，vue -resource：通信，vuex：管理)或既有项目整合

官网

1.1、前端三板斧

HTML (结构) ：超文本标记语言(Hyper Text Markup Language)，决定网页的结构和内容
CSS (表现) ：层叠样式表(Cascading Style Sheets)，设定网页的表坝样式
JavaScript (行为) ：是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行，用于控制网页的行为

1.2、JavaScript框架

jQuery：众所周知的JavaScript框架，优点是简化了DOM操作，缺点是频繁操作DOM，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6、7、8
Angular：Google收购的前端框架，由一群Java程序员开发，基特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发；对后台程序员友好，对前端程序员不太友好，缺点版本迭代不合理
React：Facebook 出品，一款高性能的JS前端框架；特点是提出了新概念**【虚拟DOM】于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率;缺点是使用复杂，需要额外学习一门【JSX】** 语言
Vue：一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点
Axios：前端通信框架，因为Vue的边界很明确，就是为了处理DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery提供的Ajax通信功能

1.3、UI框架

Ant-Design：阿里巴巴出品，基于React的UI框架
ElementUI： iview、ice，饿了么出品，基于Vue的UI框架
Bootstrap： Twitter 推出的一个用于前端开发的开源工具包
AmazeUI：又叫"妹子UI"，一款HTML5跨屏前端框架

1.4、JavaScript构建工具

Babel: JS 编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
WebPack：模块打包器，主要作用是打包、压缩、合并及按序加载

1.5、MVVM模式和第一个Vue程序

MVVM (Model-View-ViewModel) 是一种软件架构设计模式，由微软WPF (用于替代WinForm，以前就是用这个技术开发桌面应用程序的)和Silverlight (类似于Java Applet，简单点说就是在浏览器上运行的WPF)的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman (同样也是WPF和Silverlight的架构师)于2005年在他的博客上发表

MVVM源自于经典的MVC (Model-View-Controller) 模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用

该层向上与视图层进行双向数据绑定
向下与Model层通过接口请求进行数据交互

MVVM已经较为成熟，当下流行的MVVM框架有vue.js，Angular.js

1.5.1、View

View是视图层，也就是看到的用户界面。前端主要由HTML和CSS来构建，为了更方便地展现ViewModel或者Model 层的数据，已经产生了各种各样的前后端模板语言，比如FreeMarker、Thymeleaf等等，各大MVVM框架如Vue.js， AngularJS， EJS 等也都有自己用来构建用户界面的内置模板语言

1.5.2、Model

Model是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则

1.5.3、ViewModel

ViewModel是由前端开发人员组织生成和维护的视图数据层。在这-层，前端开发者对从后端获取的Model数据进行转换处理，做二次封装，以生成符合View层使用预期的视图数据模型。MVVM框架已经把最繁琐的一块做好了，我们开发者只需要处理和维护ViewModel，更新数据视图就会自动得到相应更新，真正实现事件驱动编程

View层展现的不是Model层的数据，而是ViewModel的数据，由ViewModel 负责与Model层交互，这就完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环

1.6、为什么要使用vue.js

轻量级、体积小：压缩后只有33k
更高的运行效率：基于虚拟DOM，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这种DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM
双向数据绑定：让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上
生态丰富、学习成本低：市场上拥有大量成熟、稳定的基于vue.js的ui框架及组件，拿来即用实现快速开发；对初学者友好、入门容易、学习资料多

1.7、MVVM的实现者

Model：模型层，在这里表示JavaScript对象
View：视图层，在这里表示DOM (HTML 操作的元素)
ViewModel：连接视图和数据的中间件，Vue.js 就是MVVM中的ViewModel层的实现者

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者

ViewModel能够观察到数据的变化。并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据发生改变

Vue.js就是一个MVVM的实现者。他的核心就是实现了DOM监听与数据双向绑定

2、数据双向绑定

Vue.js是一个MVVM枢架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也是Vue.js较为特殊的功能

需要注意的是，我们所说的数据双向绑定，一定是对于 UI控件来说的，非UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理I具的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突

2.1、为什么要实现数据的双向绑定？

在Vue.js中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是对于UI控件来说，对于我们处理表单，Vue.js的双向数据绑定使用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。

2.2、在表单中使用双向数据绑定

你可以用 v-model 指令在表单、</code> 及 <code><select></code> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 <code>v-model</code> 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 需要注意的是：<code>v-model</code> 会忽略所有表单元素的 <code>value</code>、<code>checked</code>、<code>selected</code> attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 <code>data</code> 选项中声明初始值 <h4>2.2.1、单行文本框</h4> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据双向绑定</title>  <script src="../../js/vue.min.js"></script> </head> <body>  <div id="app">  <p> <label>用户名：</label> <input type="text" v-model="value"/> <span style="color: coral">值为：{ {value}}</span> </p> </div> <script> let vm = new Vue({ el: "#app", data: { value: "hello vue", }, }); </script> </body> </html> </code></pre> <h4>2.2.2、多行文本</h4> <pre><code class="prism language-html"> <div id="app">  <p> <label>个人简介：</label> <textarea cols="20" rows="10" v-model="value"></textarea> <span style="color: coral">值为：{ {value}}</span> </p> </div> <script> let vm = new Vue({ el: "#app", data: { value: "hello vue", }, }); </script> </code></pre> <h4>2.2.3、单选框</h4> <pre><code class="prism language-html"> <div id="app">  <p> <label>性别：</label> <input type="radio" name="gender" value="男" v-model="checked"/> 男 <input type="radio" name="gender" value="女" v-model="checked"/> 女 <span style="color: coral">选中了：{ {checked}}</span> </p> </div> <script> let vm = new Vue({ el: "#app", data: { checked: "男", }, }); </script> </code></pre> <h4>2.2.4、复选框</h4> <pre><code class="prism language-html"> <div id="app">  <p> <label>爱好：</label> <input type="checkbox" value="swim" v-model="checkValue"/> 游泳 <input type="checkbox" value="football" v-model="checkValue"/> 篮球 <input type="checkbox" value="playGame" v-model="checkValue"/> 游戏 <span style="color: coral">选中了：{ {checkValue}}</span> </p> </div> <script> let vm = new Vue({ el: "#app", data: { checkValue: [], }, }); </script> </code></pre> <h4>2.2.5、下拉列表</h4> <pre><code class="prism language-html"> <div id="app"> 城市： <select name="city" v-model="selected"> <option value="" disabled>---请选择---</option> <option name="henan">河南</option> <option name="luoyang">洛阳</option> <option name="yichuan">伊川</option> </select> <p>选中了：{ {selected}}</p> </div> <script> let vm = new Vue({ el: "#app", // Model：数据 data: { selected: '', }, }); </script> </code></pre> 注：如果 <code>v-model</code> 表达式的初始值未能匹配任何选项，<code><select></code> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。 <h2>3、Vue组件</h2> <hr> <h3>3.1、什么是组件？</h3> 组件是可复用的<code>Vue</code>实例，它是一组可以重复使用的模板，通常一个应用会以一棵嵌套的组件树的形式来组织： <a href="http://img.e-com-net.com/image/info8/c4a19da5915b4e69b52bdc1911a8be66.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/c4a19da5915b4e69b52bdc1911a8be66.png" alt="Vue框架_第2张图片" width="1406" height="544" style="border:1px solid black;"></a> 例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。 <h3>3.2、注册Vue组件</h3> 使用Vue.component()方法注册组件，格式如下： <pre><code class="prism language-html"> <div id="app">  <my-component v-for="subject in items" v-bind:source="subject"></my-component> </div> <script type="text/javascript"> //注册组件 Vue.component Vue.component("myComponent", { props: ['source'], //可以接收的参数 template: '<li>{ {source}}</li>', //模板 }); //实例化Vue let vm = new Vue({ el: "#app", data: { items: ["Java", "linux", "HTML", "CSS", "JavaScript"], }, }); </script> </code></pre> <h2>4、Axios异步通信</h2> <hr> <h3>4.1、什么是Axios？</h3> Axios是一个开源的可以用在浏览器端和<code>NodeJS</code>的异步通信框架，她的主要作用就是实现AJAX异步通信,其功能特点如下： <ul> <li>从浏览器中创建<code>XMLHttpRequests</code></li> <li>从 node.js 创建http请求</li> <li>支持Promise API（JS中的链式编程）</li> <li>拦截请求和响应</li> <li>转换请求数据和响应数据</li> <li>取消请求</li> <li>自动转换 JSON 数据</li> <li>客户端支持防御XSRF（跨站请求伪造）</li> </ul> 中文文档 <h3>4.2、为什么要使用Axios？</h3> 由于<code>Vue.js</code>是一个视图层框架，并且作者(尤雨溪)严格准守SoC <code>(关注度分离原则)</code>，所以<code>Vue.js</code>并不包含Ajax的通信功能，为了解决通信问题，作者单独开发了一个名为<code>vue-resource</code>的插件，不过在进入2.0版本以后停止了对该插件的维护并推荐了<code>Axios</code>框架，少用jQuery，因为它操作Dom太频繁！ <h3>4.3、第一个Axios程序</h3> 由于我们开发的接口大部分都是采用JSON格式，可以先在项目里模拟一段JSON数据，数据内容如下：创建名为data.json的文件并填入上面的内容，放在项目的根目录下 <pre><code class="prism language-json">{ "name": "小张", "age": 18, "isGrow": true, "url": "https://www.tmall.com/", "address": { "country": "中国", "city": "洛阳", "street": "龙门大道" } } </code></pre> 测试代码 <pre><code class="prism language-html"><div id="app" v-cloak> <div>{ {info.name}}</div> <div>{ {info.address.country}}</div> <div>{ {info.address.city}}</div> <div>{ {info.address.street}}</div> <a v-bind:href="info.url">click Me</a> </div> <script type="text/javascript"> let vm = new Vue({ el: "#app", data: { }, //data属性 vm对象的 //下方data是一个方法，用来接收数据 data() { return { //请求的返回参数格式必须和json字符串一样 info: { name: null, url: null, address: { country: null, city: null, street: null, } } } }, mounted() { //钩子函数链式编程 ES6新特性 axios.get('../../data.json').then(response => (this.info = response.data)); } }); </script> </code></pre> <ul> <li>在这里使用了v-bind将a:href 的属性值与Vue实例中的数据进行绑定</li> <li>使用axios框架的get方法请求Ajax并自动将数据封装进了Vue实例的数据对象中</li> <li>我们在data中的数据结构必须要和<code>Ajax</code>响应回来的数据格式匹配!</li> </ul> <h2>5、计算属性和内容分发及自定义事件</h2> <hr> <h3>5.1、什么是计算属性？</h3> 计算属性的重点突出在<code>属性</code>两个字上（属性是名词），首先它是个<code>属性</code>其次这个属性有<code>计算</code>的能力（计算是动词），这里的计算就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已，可以想象为缓存！ <pre><code class="prism language-html"> <div id="app">  <p>currentTime方法：{ {currentTime1()}}</p>  <p>currentTime属性：{ {currentTime2}}</p> </div> <script type="text/javascript"> let vm = new Vue({ el: "#app", //绑定的元素 data: { //data数据 msg: "hello vue", }, methods: { currentTime1: function () { return Date.now(); //返回当前时间戳 } }, computed: { //计算属性：methods和computed中的方法名不能重名！ currentTime2: function () { this.msg; //当数据发生改动时，会重新计算 return Date.now(); //返回当前时间戳 } } }); </script> </code></pre> 调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销； <h3>5.2、内容分发</h3> 在<code>Vue.js</code> 中我们使用<code><slot></code>元素作为承载分发内容的出口，作者称其为<code>插槽</code>，可以应用在组合组件的场景中； <ol> <li> 创建一个课程信息的组件 <pre><code class="prism language-html"><div id="app"> <course> </course> </div> <script type="text/javascript"> //创建一个课程信息的模板 Vue.component('course', { template: '<div>\ 课程信息\ <ul>\ <li>Java</li>\ </ul>\ </div>' }); </script> </code></pre> </li> <li> 需要让课程信息的标题和值动态绑定，需要留出一个插槽，将上面的代码留出一个插槽，即slot <pre><code class="prism language-html"><script type="text/javascript"> //创建一个课程信息的模板 Vue.component('course', { template: '<div>\ <slot name="course-title"></slot>\ <ul>\ <slot name="course-content"></slot>\ </ul>\ </div>' }); </script> </code></pre> </li> <li> 定义一个名为course-title的课程标题组件和course-content的课程内容组件 <pre><code class="prism language-html"><script> //课程标题组件 Vue.component('course-title', { props: ['title'], template: '{ {title}}' }) //课程内容组件 Vue.component('course-content', { //这里的index，是数组的下标，使用for循环遍历出来 props: ['item', 'index'], template: '<li>{ {index+1}}---{ {item}}</li>' }) </script> </code></pre> </li> <li> 实例化Vue并初始化数据 <pre><code class="prism language-html"><script> let vm = new Vue({ el: "#app", data: { title: "课程信息", list: ['Java', 'C++', 'C#'], } }); </script> </code></pre> </li> <li> 将这些值，通过插槽插入 <pre><code class="prism language-html"><div id="app"> <course> <course-title slot="course-title" :title="title"></course-title> <course-content slot="course-content" v-for="(item,index) in list" :item="item" :index="index"></course-content> </course> </div> </code></pre> </li> </ol> <h3>5.3、自定义事件</h3> 通过以上代码不难发现，数据项在Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了，Vue 为我们提供了自定义事件的功能很好的帮助我们解决了这个问题：使用<code>this.$emit(自定义事件名'，参数)</code>，操作过程如下: <ol> <li> 在vue的实例中,增加了methods对象并定义了一个名为removeCourseItems的方法 <pre><code class="prism language-html"><script> let vm = new Vue({ el: "#app", data: { title: "课程信息", list: ['Java', 'C++', 'C#'], }, methods: { //该方法可以被模板中自定义事件触发 removeCourseItems: function (index) { console.log("删除了" + this.list[index] + "成功!"); //splice()方法向数组中添加/删除项目，然后返回被删除的项目，其中index为要删除的下标 this.list.splice(index, 1); }, } }); </script> </code></pre> </li> <li> 修改course-content课程内容组件的代码，添加一个删除按钮，并且绑定事件 <pre><code class="prism language-html"><script> //课程内容组件 Vue.component('course-content', { //这里的index，是数组的下标，使用for循环遍历出来 props: ['item', 'index'], //只能绑定当前组件的方法 template: '<li>{ {index+1}}---{ {item}} <button @click="remove">删除</button></li>', methods: { remove: function (index) { //this.$emit 自定义事件分发 this.$emit("remove", index); } } }); </script> </code></pre> </li> <li> 修改course-content课程内容组件的HTML代码，增加一个自定义事件，比如叫remove，可以和组件的方法绑定，然后绑定到vue的方法中! <pre><code class="prism language-html"> <course-content slot="course-content" v-for="(item,index) in list" :item="item" :index="index" v-on:remove="removeCourseItems(index)"></course-content> </code></pre> </li> </ol> <h3>5.4、Vue入门小结</h3> 核心：<code>数据驱动</code>，<code>组件化</code> 优点：借鉴了AngulaJS 的模块化开发和React的虚拟Dom ，虚拟Dom就是把Dom操作放到内存中去执行！（集大成者） 常用属性： <ul> <li>v-if</li> <li>v-else-if</li> <li>v-else</li> <li>v-for</li> <li>v-on 绑定事件，<code>简写@</code></li> <li>v-model 数据双向绑定</li> <li>v-bind 给组件绑定参数 <code>简写:</code></li> </ul> 组件化： <ul> <li>组合组件 slot 插槽</li> <li>组件内部绑定事件需要使用到<code>this.$emit("事件名",参数);</code></li> <li>计算属性的特色，缓存计算数据</li> </ul> 遵循SoC关注度分离原则，Vue是纯粹的视图框架，并不包含；比如Ajax之类的通信功能，为了解决通信问题，我们需要使用<code>Axios</code>框架做异步通信； Vue的开发都是要基于ModeJS，实际开发采用<code>vue-cli脚手架</code>开发，vue-router路由；vuex做状态管理； Vue UI界面我们一般使用ElementUl(饿了么出品)，或者**IC E(阿里巴巴出品)**来快速搭建前端项目 官网： elementUl ice <h2>6、Vue-cli</h2> <hr> <h3>6.1、什么是Vue-cli？</h3> vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板； 预先定义好的目录结构及基础代码，就像咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，让我们的开发更加的快速； 主要功能： <ul> <li>统一的目录结构</li> <li>本地调试</li> <li>热部署</li> <li>单元测试</li> <li>集成打包上线</li> </ul> 需要环境： Node.js 确认nodejs安装成功： <ul> <li>cmd输入<code>node -v</code>测试是否安装成功，显示版本号</li> <li>cmd输入<code>npm-v</code>测试是否安装成功，显示版本号</li> </ul> 安装nodejs淘宝镜像加速器（cnpm） <blockquote> -g 全局安装 npm install cnpm -g </blockquote> 安装位置：<code>C:\Users\86186\AppData\Roaming\npm</code> <a href="http://img.e-com-net.com/image/info8/e4590fd6a9c0435dbd098034e6598333.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e4590fd6a9c0435dbd098034e6598333.jpg" alt="Vue框架_第3张图片" width="650" height="225" style="border:1px solid black;"></a> 安装vue-cli <blockquote> cnpm install vue-cli -g 测试是否安装成功，查看可以基于那些模板创建vue应用程序，通常选择webpack <code>vue list</code> </blockquote> <h3>6.2、第一个vue-cli程序</h3> <ol> <li> 创建一个Vue项目，随便建立一个空的文件夹在电脑上，这里在E盘下 <code>E:\Program Files (x86)\IntelliJ IDEA Project\vue\myvue</code> </li> <li> 创建一个基于webpack模板的vue应用程序 <blockquote> 这里的 myvue 是项目名称，可以根据自己需求改变 vue init webpack myvue </blockquote> </li> </ol> 一路选择no即可；在指定文件夹生成项目目录 <a href="http://img.e-com-net.com/image/info8/ae639956230444b9849015159cd2d895.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ae639956230444b9849015159cd2d895.jpg" alt="Vue框架_第4张图片" width="650" height="375" style="border:1px solid black;"></a> 初始化并运行 <blockquote> cd myvue 进入到myvue目录下 npm install 下载依赖 npm run dev 运行 </blockquote> 执行完成后，目录多了很多依赖 <a href="http://img.e-com-net.com/image/info8/91edad0fc26247b2a7404297fb5ddfda.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/91edad0fc26247b2a7404297fb5ddfda.jpg" alt="Vue框架_第5张图片" width="650" height="441" style="border:1px solid black;"></a> <h2>7、webpack</h2> <hr> <h3>7.1、什么是webpack？</h3> <ul> <li>webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle</li> <li>Webpack是当下最热门的前端资源模块化管理和打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换，任何形式的资源都可以当做模块，比如CommonsJS、AMD、ES6、 CSS、JSON、 CoffeeScript、LESS 等</li> <li>伴随着移动互联网的大潮，当今越来越多的网站已经从网页模式进化到了<code>WebApp</code>模式。它们完成浏览器的基本需求；WebApp通常是一个<code>SPA (单页面应用)</code>，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载大量的JS代码，这给前端的开发流程和资源组织带来了巨大挑战</li> <li>前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要-一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题</li> </ul> <h3>7.2、安装webpack</h3> WebPack是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。 安装： <blockquote> npm install webpack -g npm install webpack webpack-cli -g </blockquote> 测试是否安装成功： <blockquote> <code>webpack -v</code> <code>webpack-cli -v</code> </blockquote> 使用webpack <ol> <li> 创建项目（新建一个空文件夹，用idea打开） </li> <li> 创建名为modules的目录，用于放置JS模块等资源文件 </li> <li> 在modules下创建模块文件，如index.js，用于编写JS模块相关代码 <pre><code class="prism language-html">//暴露一个方法 sayHi exports.sayHi = function () { document.write('<h2>hello ES6</h2>'); }; </code></pre> </li> <li> 在modules下创建一个名称为main.js的入口文件，用于打包时设置entry属性 <pre><code class="prism language-html">//require 导入一个模板，就可以调用该模板中的方法了 var index = require("./index"); index.sayHi(); </code></pre> </li> <li> 在项目目录下创建<code>webpack.config.js</code>配置文件，使用webpack命令打包 <pre><code class="prism language-html">module.exports = { entry: './modules/main.js', //指定webpack用哪个文件作为项目的入口 output: { filename: './js/bundle.js', //WebPack把处理完成的文件放置到指定路径 }, }; </code></pre> 直接使用<code>webpack</code>命令打包，注：需要idea使用管理员身份运行 </li> </ol> <h2>8、Vue-router路由</h2> <hr> Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌 安装： <code>vue-router</code>是一个插件包，还是需要用npm/cnpm来进行安装，打开命令行工具。进入你的项目目录，输入以下命令 <blockquote> npm install vue-router --save-dev </blockquote> 如果在一个模块化工程使用它，必须要通过<code>Vue.use()</code>明确的安装路由功能 <pre><code class="prism language-html">import Vue from "vue"; import VueRouter from "vue-router"; //安装路由 Vue.use(VueRouter); </code></pre> 测试 <ol> <li> 先删除项目中没有用的东西 </li> <li> ```components`目录下存放自己编写的组件 </li> <li> 定义一个<code>Content.vue</code>的组件 <pre><code class="prism language-html"><template> <h1>内容页</h1> </template> <script> export default { name: "Content" } </script> <style scoped> </style> </code></pre> </li> <li> 安装路由，在src目录下，新建一个文件夹：<code>router</code>，专门存放路由（新建一个index.js文件） <pre><code class="prism language-javascript">import Vue from "vue"; //导入路由插件 import VueRouter from "vue-router"; //导入定义的组件 import Content from "../components/Content"; import Index from "../components/Index" //安装路由 Vue.use(VueRouter); //配置导出路由 export default new VueRouter({ routes: [ { //路由路径 path: "/content", //路由名称 name: "content", //跳转的组件 component: Content, }, { //路由路径 path: "/index", //路由名称 name: "index", //跳转的组件 component: Index, }, ], }); </code></pre> </li> <li> 在<code>mian.js</code>中配置路由 <pre><code class="prism language-javascript">import Vue from 'vue' import App from './App' //导入上面创建的路由配置目录 import router from "./router" //关闭生产模式下给出的提示 Vue.config.productionTip = false new Vue({ el: '#app', //配置路由 router, components: { App}, template: '<App/>' }) </code></pre> </li> <li> 在<code>App.vue</code>中使用路由 <pre><code class="prism language-html"><template> <div id="app"> <h1>Vue-Router</h1>  <router-link to="/index">首页</router-link> <router-link to="/content">内容页</router-link> <router-view/> </div> </template> <script> export default { name: 'App', } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> </code></pre> </li> </ol> <h2>9、快速上手</h2> <hr> <h3>9.1、创建工程</h3> 注：命令行要使用管理员模式运行 <ol> <li> 创建一个名称为hello_vue的工程：<code>vue init webpack hello_vue</code> </li> <li> 安装依赖，需要安装<code>vue-router</code>、<code>element-UI</code>、<code>sass-loader</code>、<code>node-sass</code>四个插件 <blockquote> # 进入到工程目录 cd hello_vue # 安装vue-router npm install vue-router --save-dev # 安装element-ui npm i element-ui -S # 安装依赖 cnpm install # 安装SASS加载器 cnpm install sass-loader node-sass --save-dev # 启动测试 npm run dev </blockquote> </li> </ol> 创建登录页面 在源码目录中创建如下结构： <ul> <li>assets：用于存放资源文件</li> <li>components：用于存放Vue功能组件</li> <li>views：用于存放Vue视图组件</li> <li>router：用于存放Vue-router配置</li> </ul> <a href="http://img.e-com-net.com/image/info8/cb80156b91924ec7abad44511856695e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/cb80156b91924ec7abad44511856695e.jpg" alt="Vue框架_第6张图片" width="460" height="631" style="border:1px solid black;"></a> 创建首页视图，在views目录下创建一个名为Main.vue的组件 <pre><code class="prism language-html"><template> <h1>首页</h1> </template> <script> export default { name: "Main" } </script> <style scoped> </style> </code></pre> 创建登录视图，在views目录下创建一个名为Login.vue的组件 <pre><code class="prism language-html"><template> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input> </el-form-item> <el-form-item label="确认密码" prop="checkPass"> <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="ruleForm.age"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> </template> <script> export default { name: "Login", } </script> <style scoped> </style> </code></pre> 在router文件夹下创建<code>index.js</code>，用于注册路由 <pre><code class="prism language-javascript">import Vue from "vue"; import VueRouter from "vue-router" //导入自己编写的组件 import Index from "../views/Main" import Login from "../views/Login" //使用路由 Vue.use(VueRouter); export default new VueRouter({ routes: [ { path: "/index", component: Index }, { path: "/login", component: Login }, ], }); </code></pre> 在<code>mian.js</code>中配置路由 <pre><code class="prism language-javascript">import Vue from 'vue' import App from './App' //导入VueRouter import router from "./router" //导入ElementUI相关资源 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(router); Vue.use(ElementUI); Vue.config.productionTip = false new Vue({ el: '#app', router, //使用路由 render: h => h(App), //使用ElementUI }) </code></pre> rm’)">重置 <pre><code> 在router文件夹下创建``index.js``，用于注册路由 ```javascript import Vue from "vue"; import VueRouter from "vue-router" //导入自己编写的组件 import Index from "../views/Main" import Login from "../views/Login" //使用路由 Vue.use(VueRouter); export default new VueRouter({ routes: [ { path: "/index", component: Index }, { path: "/login", component: Login }, ], }); </code></pre> 在<code>mian.js</code>中配置路由 <pre><code class="prism language-javascript">import Vue from 'vue' import App from './App' //导入VueRouter import router from "./router" //导入ElementUI相关资源 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(router); Vue.use(ElementUI); Vue.config.productionTip = false new Vue({ el: '#app', router, //使用路由 render: h => h(App), //使用ElementUI }) </code></pre> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1452881111054106624"></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">你可能感兴趣的:(Web前端,vue.js,javascript)</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> 软件技术NINI <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/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> igotyback <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> STU学生网页设计 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> 小猿L <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/1835448239864770560.htm" title="JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）" target="_blank">JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）</a> 跳房子的前端 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> 2401_85194651 <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/1835428948339683328.htm" title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</a> 跳房子的前端 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/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/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>在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键</div> </li> <li><a href="/article/1835419870070665216.htm" title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a> hai40587 <a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库</div> </li> <li><a href="/article/1835383919906746368.htm" title="高性能javascript--算法和流程控制" target="_blank">高性能javascript--算法和流程控制</a> 海淀萌狗 <div>-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> 马小蜗 <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835360244646113280.htm" title="JavaScript中秋快乐！" target="_blank">JavaScript中秋快乐！</a> Q_w7742 <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh</div> </li> <li><a href="/article/1835359727924637696.htm" title="Nginx从入门到实践(三)" target="_blank">Nginx从入门到实践(三)</a> 听你讲故事啊 <div>动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin</div> </li> <li><a href="/article/1835354700392787968.htm" title="Nginx的使用场景：构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景：构建高效、可扩展的Web架构</a> 张某布响丸辣 <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin</div> </li> <li><a href="/article/1835354447627251712.htm" title="前端知识点" target="_blank">前端知识点</a> ZhangTao_zata <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div> </li> <li><a href="/article/1835331376895848448.htm" title="【JS】前端文件读取FileReader操作总结" target="_blank">【JS】前端文件读取FileReader操作总结</a> 程序员-张师傅 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi</div> </li> <li><a href="/article/1835331375377510400.htm" title="【前端】vue 报错:The template root requires exactly one element" target="_blank">【前端】vue 报错:The template root requires exactly one element</a> 程序员-张师傅 <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/1835298981362626560.htm" title="webstorm报错TypeError: this.cliEngine is not a constructor" target="_blank">webstorm报错TypeError: this.cliEngine is not a constructor</a> Blue_Color <div>点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:</div> </li> <li><a href="/article/1835296397365178368.htm" title="创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几" target="_blank">创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几</a> uthRaman <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=</div> </li> <li><a href="/article/1835293121953492992.htm" title="了解 UNPKG：前端开发者的包管理利器" target="_blank">了解 UNPKG：前端开发者的包管理利器</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/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n</div> </li> <li><a href="/article/1835249513875468288.htm" title="说说在 Vue.js 中如何实现组件间通信" target="_blank">说说在 Vue.js 中如何实现组件间通信</a> deniro <div>1用法假设父组件的模板包含子组件，我们可以通过props来正向地把数据从父组件传递给子组件。props可以是字符串数组，也可以是对象。html：js：Vue.component('deniro-component',{props:['message'],template:'{{message}}'});varapp=newVue({el:'#app',data:{}});渲染结果：＂嫦娥四号＂成功</div> </li> <li><a href="/article/1835247344719851520.htm" title="2019-05-29 vue-router的两种模式的区别" target="_blank">2019-05-29 vue-router的两种模式的区别</a> Kason晨 <div>1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash</div> </li> <li><a href="/article/1835216109297561600.htm" title="electron多标签页模式更像客户端" target="_blank">electron多标签页模式更像客户端</a> diygwcom <a class="tag" taget="_blank" href="/search/electron/1.htm">electron</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>Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser</div> </li> <li><a href="/article/1835194426499100672.htm" title="外卖霸王餐返利外卖会员卡小程序开发" target="_blank">外卖霸王餐返利外卖会员卡小程序开发</a> 闹小艾 <a class="tag" taget="_blank" href="/search/good506070/1.htm">good506070</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账</div> </li> <li><a href="/article/1835192531881652224.htm" title="Axure设计之全屏与退出全屏交互实现" target="_blank">Axure设计之全屏与退出全屏交互实现</a> 招风的黑耳 <a class="tag" taget="_blank" href="/search/Axure/1.htm">Axure</a><a class="tag" taget="_blank" href="/search/axure/1.htm">axure</a><a class="tag" taget="_blank" href="/search/%E4%BA%A4%E4%BA%92/1.htm">交互</a> <div>在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure</div> </li> <li><a href="/article/1835162742533746688.htm" title="全面指南：用户行为从前端数据采集到实时处理的最佳实践" target="_blank">全面指南：用户行为从前端数据采集到实时处理的最佳实践</a> 数字沉思 <a class="tag" taget="_blank" href="/search/%E8%90%A5%E9%94%80/1.htm">营销</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E9%87%8F%E8%BF%90%E8%90%A5/1.htm">流量运营</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/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/%E5%86%85%E5%AE%B9%E8%BF%90%E8%90%A5/1.htm">内容运营</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信</div> </li> <li><a href="/article/1835154546289111040.htm" title="EcmaScript和JavaScript的区别" target="_blank">EcmaScript和JavaScript的区别</a> 每天吃八顿 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>ECMAScript和JavaScript是经常被混淆的两个术语，但实际上它们之间存在一些区别：ECMAScript：ECMAScript（通常缩写为ES，并且有版本号如ES5,ES6和ES7等）是由ECMA国际（EuropeanComputerManufacturersAssociation）制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范，</div> </li> <li><a href="/article/1835137656992919552.htm" title="javascript添加p元素，html添加文字，appendChild" target="_blank">javascript添加p元素，html添加文字，appendChild</a> 游勇一 <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html%E6%B7%BB%E5%8A%A0p/1.htm">html添加p</a><a class="tag" taget="_blank" href="/search/appendChild/1.htm">appendChild</a> <div>javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}</div> </li> <li><a href="/article/1835136018660028416.htm" title="CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载裁剪区域绘制" target="_blank">CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载裁剪区域绘制</a> SteveJi666 <a class="tag" taget="_blank" href="/search/WebGL/1.htm">WebGL</a><a class="tag" taget="_blank" href="/search/cesium/1.htm">cesium</a><a class="tag" taget="_blank" href="/search/EarthSDK/1.htm">EarthSDK</a><a class="tag" taget="_blank" href="/search/SuperMap/1.htm">SuperMap</a><a class="tag" taget="_blank" href="/search/3d/1.htm">3d</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><a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a> <div>版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap</div> </li> <li><a href="/article/60.htm" title="Dom" target="_blank">Dom</a> 周华华 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q</div> </li> <li><a href="/article/187.htm" title="【Spark九十六】RDD API之combineByKey" target="_blank">【Spark九十六】RDD API之combineByKey</a> bit1129 <a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a> <div>1. combineByKey函数的运行机制 RDD提供了很多针对元素类型为(K,V)的API，这些API封装在PairRDDFunctions类中，通过Scala隐式转换使用。这些API实现上是借助于combineByKey实现的。combineByKey函数本身也是RDD开放给Spark开发人员使用的API之一首先看一下combineByKey的方法说明：</div> </li> <li><a href="/article/314.htm" title="msyql设置密码报错：ERROR 1372 (HY000): 解决方法详解" target="_blank">msyql设置密码报错：ERROR 1372 (HY000): 解决方法详解</a> daizj <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E7%BD%AE%E5%AF%86%E7%A0%81/1.htm">设置密码</a> <div>MySql给用户设置权限同时指定访问密码时，会提示如下错误： ERROR 1372 (HY000): Password hash should be a 41-digit hexadecimal number；问题原因：你输入的密码是明文。不允许这么输入。解决办法：用select password('你想输入的密码');查询出你的密码对应的字符串，然后</div> </li> <li><a href="/article/441.htm" title="路漫漫其修远兮吾将上下而求索" target="_blank">路漫漫其修远兮吾将上下而求索</a> 周凡杨 <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0+%E6%80%9D%E7%B4%A2/1.htm">学习思索</a> <div>王国维在他的《人间词话》中曾经概括了为学的三种境界古今之成大事业、大学问者，罔不经过三种之境界。“昨夜西风凋碧树。独上高楼，望尽天涯路。”此第一境界也。“衣带渐宽终不悔，为伊消得人憔悴。”此第二境界也。“众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”此第三境界也。学习技术，这也是你必须经历的三种境界。第一层境界是说，学习的路是漫漫的，你必须做好充分的思想准备，如果半途而废还不如不要开始。这里，注</div> </li> <li><a href="/article/568.htm" title="Hadoop(二)对话单的操作" target="_blank">Hadoop(二)对话单的操作</a> 朱辉辉33 <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div>Debug： 1、 A = LOAD '/user/hue/task.txt' USING PigStorage(' ') AS (col1,col2,col3); DUMP A; //输出结果前几行示例： (>ggsnPDPRecord(21),,) (-->recordType(0),,) (-->networkInitiation(1),,) </div> </li> <li><a href="/article/695.htm" title="web报表工具FineReport常用函数的用法总结（日期和时间函数）" target="_blank">web报表工具FineReport常用函数的用法总结（日期和时间函数）</a> 老A不折腾 <a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/%E6%8A%A5%E8%A1%A8%E5%B7%A5%E5%85%B7/1.htm">报表工具</a><a class="tag" taget="_blank" href="/search/web%E5%BC%80%E5%8F%91/1.htm">web开发</a> <div>web报表工具FineReport常用函数的用法总结（日期和时间函数）说明：凡函数中以日期作为参数因子的，其中日期的形式都必须是yy/mm/dd。而且必须用英文环境下双引号(" ")引用。 DATE DATE(year,month,day):返回一个表示某一特定日期的系列数。 Year:代表年，可为一到四位数。 Month:代表月份。</div> </li> <li><a href="/article/822.htm" title="c++ 宏定义中的##操作符" target="_blank">c++ 宏定义中的##操作符</a> 墙头上一根草 <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a> <div>#与##在宏定义中的--宏展开 #include <stdio.h> #define f(a,b) a##b #define g(a) #a #define h(a) g(a) int main() { &nbs</div> </li> <li><a href="/article/949.htm" title="分析Spring源代码之，DI的实现" target="_blank">分析Spring源代码之，DI的实现</a> aijuans <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/DI/1.htm">DI</a><a class="tag" taget="_blank" href="/search/%E7%8E%B0/1.htm">现</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E4%BB%A3%E7%A0%81/1.htm">源代码</a> <div>(转) 分析Spring源代码之，DI的实现 2012/1/3 by tony 接着上次的讲，以下这个sample [java] view plain copy print </div> </li> <li><a href="/article/1076.htm" title="for循环的进化" target="_blank">for循环的进化</a> alxw4616 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>// for循环的进化 // 菜鸟 for (var i = 0; i < Things.length ; i++) { // Things[i] } // 老鸟 for (var i = 0, len = Things.length; i < len; i++) { // Things[i] } // 大师 for (var i = Things.le</div> </li> <li><a href="/article/1203.htm" title="网络编程Socket和ServerSocket简单的使用" target="_blank">网络编程Socket和ServerSocket简单的使用</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E7%BC%96%E7%A8%8B%E5%9F%BA%E7%A1%80/1.htm">网络编程基础</a><a class="tag" taget="_blank" href="/search/IP%E5%9C%B0%E5%9D%80%E7%AB%AF%E5%8F%A3/1.htm">IP地址端口</a> <div> 网络编程;TCP/IP协议网络:实现计算机之间的信息共享,数据资源的交换协议:数据交换需要遵守的一种协议,按照约定的数据格式等写出去端口:用于计算机之间的通信每运行一个程序，系统会分配一个编号给该程序，作为和外界交换数据的唯一标识 0~65535 查看被使用的</div> </li> <li><a href="/article/1330.htm" title="JDK1.5 生产消费者" target="_blank">JDK1.5 生产消费者</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E4%BA%A7%E6%B6%88%E8%B4%B9%E8%80%85/1.htm">生产消费者</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a> <div>ArrayBlockingQueue：一个由数组支持的有界阻塞队列。此队列按 FIFO（先进先出）原则对元素进行排序。队列的头部是在队列中存在时间最长的元素。队列的尾部是在队列中存在时间最短的元素。新元素插入到队列的尾部，队列检索操作则是从队列头部开始获得元素。 ArrayBlockingQueue的常用方法： </div> </li> <li><a href="/article/1457.htm" title="JAVA版身份证获取性别、出生日期及年龄" target="_blank">JAVA版身份证获取性别、出生日期及年龄</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E5%88%AB/1.htm">性别</a><a class="tag" taget="_blank" href="/search/%E5%87%BA%E7%94%9F%E6%97%A5%E6%9C%9F/1.htm">出生日期</a><a class="tag" taget="_blank" href="/search/%E5%B9%B4%E9%BE%84/1.htm">年龄</a> <div> 工作中需要根据身份证获取性别、出生日期及年龄，且要还要支持15位长度的身份证号码，网上搜索了一下，经过测试好像多少存在点问题，干脆自已写一个。 CertificateNo.java package com.bijian.study; import java.util.Calendar; import </div> </li> <li><a href="/article/1584.htm" title="【Java范型六】范型与枚举" target="_blank">【Java范型六】范型与枚举</a> bit1129 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>首先，枚举类型的定义不能带有类型参数，所以，不能把枚举类型定义为范型枚举类，例如下面的枚举类定义是有编译错的 public enum EnumGenerics<T> { //编译错，提示枚举不能带有范型参数 OK, ERROR; public <T> T get(T type) { return null; </div> </li> <li><a href="/article/1711.htm" title="【Nginx五】Nginx常用日志格式含义" target="_blank">【Nginx五】Nginx常用日志格式含义</a> bit1129 <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div>1. log_format 1.1 log_format指令用于指定日志的格式，格式： log_format name(格式名称) type(格式样式) 1.2 如下是一个常用的Nginx日志格式： log_format main '[$time_local]|$request_time|$status|$body_bytes</div> </li> <li><a href="/article/1838.htm" title="Lua 语言 15 分钟快速入门" target="_blank">Lua 语言 15 分钟快速入门</a> ronin47 <a class="tag" taget="_blank" href="/search/lua+%E5%9F%BA%E7%A1%80/1.htm">lua 基础</a> <div>- - 单行注释 - - [[ [多行注释] - - ]] - - - - - - - - - - - 1. 变量 & 控制流 - - - - - - - - - - num = 23 - - 数字都是双精度 str = 'aspythonstring' </div> </li> <li><a href="/article/1965.htm" title="java-35.求一个矩阵中最大的二维矩阵 ( 元素和最大 )" target="_blank">java-35.求一个矩阵中最大的二维矩阵 ( 元素和最大 )</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>the idea is from: http://blog.csdn.net/zhanxinhang/article/details/6731134 public class MaxSubMatrix { /**see http://blog.csdn.net/zhanxinhang/article/details/6731134 * Q35 求一个矩阵中最大的二维</div> </li> <li><a href="/article/2092.htm" title="mongoDB文档型数据库特点" target="_blank">mongoDB文档型数据库特点</a> 开窍的石头 <a class="tag" taget="_blank" href="/search/mongoDB%E6%96%87%E6%A1%A3%E5%9E%8B%E6%95%B0%E6%8D%AE%E5%BA%93%E7%89%B9%E7%82%B9/1.htm">mongoDB文档型数据库特点</a> <div>MongoDD: 文档型数据库存储的是Bson文档-->json的二进制特点：内部是执行引擎是js解释器，把文档转成Bson结构，在查询时转换成js对象。 mongoDB传统型数据库对比传统类型数据库：结构化数据，定好了表结构后每一个内容符合表结构的。也就是说每一行每一列的数据都是一样的文档型数据库：不用定好数据结构，</div> </li> <li><a href="/article/2219.htm" title="[毕业季节]欢迎广大毕业生加入JAVA程序员的行列" target="_blank">[毕业季节]欢迎广大毕业生加入JAVA程序员的行列</a> comsci <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> 一年一度的毕业季来临了。。。。。。。。正在投简历的学弟学妹们。。。如果觉得学校推荐的单位和公司不适合自己的兴趣和专业，可以考虑来我们软件行业，做一名职业程序员。。。软件行业的开发工具中，对初学者最友好的就是JAVA语言了，网络上不仅仅有大量的</div> </li> <li><a href="/article/2346.htm" title="PHP操作Excel – PHPExcel 基本用法详解" target="_blank">PHP操作Excel – PHPExcel 基本用法详解</a> cuiyadll <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/Excel/1.htm">Excel</a> <div>导出excel属性设置//Include classrequire_once('Classes/PHPExcel.php');require_once('Classes/PHPExcel/Writer/Excel2007.php');$objPHPExcel = new PHPExcel();//Set properties 设置文件属性$objPHPExcel->getProperties</div> </li> <li><a href="/article/2473.htm" title="IBM Webshpere MQ Client User Issue (MCAUSER)" target="_blank">IBM Webshpere MQ Client User Issue (MCAUSER)</a> darrenzhu <a class="tag" taget="_blank" href="/search/IBM/1.htm">IBM</a><a class="tag" taget="_blank" href="/search/jms/1.htm">jms</a><a class="tag" taget="_blank" href="/search/user/1.htm">user</a><a class="tag" taget="_blank" href="/search/MQ/1.htm">MQ</a><a class="tag" taget="_blank" href="/search/MCAUSER/1.htm">MCAUSER</a> <div>IBM MQ JMS Client去连接远端MQ Server的时候，需要提供User和Password吗？答案是根据情况而定，取决于所定义的Channel里面的属性Message channel agent user identifier (MCAUSER)的设置。 http://stackoverflow.com/questions/20209429/how-mca-user-i</div> </li> <li><a href="/article/2600.htm" title="网线的接法" target="_blank">网线的接法</a> dcj3sjt126com <div>一、PC连HUB (直连线)A端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 B端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。二、PC连PC （交叉线）A端：(568A)：白绿，绿，白橙，蓝，白蓝，橙，白棕，棕； B端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。三、HUB连HUB&nb</div> </li> <li><a href="/article/2727.htm" title="Vimium插件让键盘党像操作Vim一样操作Chrome" target="_blank">Vimium插件让键盘党像操作Vim一样操作Chrome</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>什么是键盘党？键盘党是指尽可能将所有电脑操作用键盘来完成，而不去动鼠标的人。鼠标应该说是新手们的最爱，很直观，指哪点哪，很听话！不过常常使用电脑的人，如果一直使用鼠标的话，手会发酸，因为操作鼠标的时候，手臂不是在一个自然的状态，臂肌会处于绷紧状态。而使用键盘则双手是放松状态，只有手指在动。而且尽量少的从鼠标移动到键盘来回操作，也省不少事。在chrome里安装 vimium 插件 </div> </li> <li><a href="/article/2854.htm" title="MongoDB查询（2）——数组查询[六]" target="_blank">MongoDB查询（2）——数组查询[六]</a> eksliang <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/MongoDB%E6%9F%A5%E8%AF%A2%E6%95%B0%E7%BB%84/1.htm">MongoDB查询数组</a> <div>MongoDB查询数组转载请出自出处：http://eksliang.iteye.com/blog/2177292 一、概述 MongoDB查询数组与查询标量值是一样的，例如，有一个水果列表，如下所示： > db.food.find() { "_id" : "001", "fruits" : [ "苹</div> </li> <li><a href="/article/2981.htm" title="cordova读写文件（1）" target="_blank">cordova读写文件（1）</a> gundumw100 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/Cordova/1.htm">Cordova</a> <div>使用cordova可以很方便的在手机sdcard中读写文件。首先需要安装cordova插件：file 命令为： cordova plugin add org.apache.cordova.file 然后就可以读写文件了，这里我先是写入一个文件，具体的JS代码为： var datas=null;//datas need write var directory=&</div> </li> <li><a href="/article/3108.htm" title="HTML5 FormData 进行文件jquery ajax 上传到又拍云" target="_blank">HTML5 FormData 进行文件jquery ajax 上传到又拍云</a> ileson <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/FormData/1.htm">FormData</a> <div>html5 新东西：FormData 可以提交二进制数据。页面test.html <!DOCTYPE> <html> <head> <title> formdata file jquery ajax upload</title> </head> <body> <</div> </li> <li><a href="/article/3235.htm" title="swift appearanceWhenContainedIn:(version1.2 xcode6.4)" target="_blank">swift appearanceWhenContainedIn:(version1.2 xcode6.4)</a> 啸笑天 <a class="tag" taget="_blank" href="/search/version/1.htm">version</a> <div> swift1.2中没有oc中对应的方法： + (instancetype)appearanceWhenContainedIn:(Class <UIAppearanceContainer>)ContainerClass, ... NS_REQUIRES_NIL_TERMINATION; 解决方法：在swift项目中新建oc类如下： #import &</div> </li> <li><a href="/article/3362.htm" title="java实现SMTP邮件服务器" target="_blank">java实现SMTP邮件服务器</a> macroli <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> <div>电子邮件传递可以由多种协议来实现。目前，在Internet 网上最流行的三种电子邮件协议是SMTP、POP3 和 IMAP，下面分别简单介绍。　　◆ SMTP 协议　　简单邮件传输协议(Simple Mail Transfer Protocol,SMTP)是一个运行在TCP/IP之上的协议，用它发送和接收电子邮件。SMTP 服务器在默认端口25上监听。SMTP客户使用一组简单的、基于文本的</div> </li> <li><a href="/article/3489.htm" title="mongodb group by having where 查询sql" target="_blank">mongodb group by having where 查询sql</a> qiaolevip <a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/mongo/1.htm">mongo</a><a class="tag" taget="_blank" href="/search/%E7%BA%B5%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">纵观千象</a> <div>SELECT cust_id, SUM(price) as total FROM orders WHERE status = 'A' GROUP BY cust_id HAVING total > 250 db.orders.aggregate( [ { $match: { status: 'A' } }, { $group: { </div> </li> <li><a href="/article/3616.htm" title="Struts2 Pojo（六）" target="_blank">Struts2 Pojo（六）</a> Luob. <a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a><a class="tag" taget="_blank" href="/search/strust2/1.htm">strust2</a> <div>注意：附件中有完整案例 1.采用POJO对象的方法进行赋值和传值 2.web配置 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee&q</div> </li> <li><a href="/article/3743.htm" title="struts2步骤" target="_blank">struts2步骤</a> wuai <a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a> <div>1、添加jar包 2、在web.xml中配置过滤器 <filter> <filter-name>struts2</filter-name> <filter-class>org.apache.st</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>