sJohnny
sJohnny

vue学习（四） vue-loader vue-router vue-cli

vue-router

SPA: SinglePageApplication
     单页面应用程序
vue在实现单页面应用程序，要借助他的路由，即vue-router

下载vue-router，在页面中引入相关的模块

具体使用代码过程：

  • 首先引入vue和vue-router
  • 在html里写相关的链接，这里链接还是通过a标签来定义，但是通过 v-link来绑定链接的地址
  • 再通过router-view ，把相关的内容呈现在router-view里
  • js部分，一共分为五步，定义根组件、准备路由对应的组件、准备路由、关联、开启

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    
    <script src="bower_components/vue/dist/vue.js">script>
    <script src="bower_components/vue-router/dist/vue-router.js">script>
    <style>
    style>
head>
<body>
    <div id="box">
        <ul>
            <li>
                <a v-link="{path:'/home'}">主页a>
            li>
            <li>
                <a v-link="{path:'/news'}">新闻a>
            li>
        ul>
        <div>
            <router-view>router-view>
        div>  
    div>

    <script>
        //1. 准备一个根组件
        var App=Vue.extend();

        //2. Home News组件都准备
        var Home=Vue.extend({
            template:'
我是主页
'
        });

        var News=Vue.extend({
            template:'
我是新闻
'
        });

        //3. 准备路由
        var router=new VueRouter();

        //4. 关联
        router.map({
            'home':{
                component:Home
            },
            'news':{
                component:News
            }
        });

        //5. 启动路由
        router.start(App,'#box');

        //6.跳转:（这一步是配置路由）
        router.redirect({
            ‘/’:'/home' // 默认是在home
        });
    script>
body>
html>

路由嵌套：通过subRoutes，在路由里面嵌套，进而实现。
PS: 有三个路由相关的参数 （开发中，可以根据这是三个数来做相关操作）
$route.params (当前的参数)
$route.path(当前的路径)
$route.query (数据信息)

vue学习（四） vue-loader vue-router vue-cli_第1张图片

    <div id="box">
        <ul>
            <li>
                <a v-link="{path:'/home'}">主页a>
            li>
            <li>
                <a v-link="{path:'/news'}">新闻a>
            li>
        ul>
        <div>
            <router-view>router-view>
        div>  
    div>

    <template id="home">
        <h3>我是主页h3>
        <div>
            <a v-link="{path:'/home/login/zns'}">登录a>
            <a v-link="{path:'/home/reg/strive'}">注册a>
        div>
        <div>
            <router-view>router-view>
        div>
    template>
    <template id="news">
        <h3>我是新闻h3>
        <div>
            <a v-link="{path:'/news/detail/001?a=1&b=2'}">新闻001a>
            <a v-link="{path:'/news/detail/002'}">新闻002a>
        div>
        <router-view>router-view>
    template>
    <template id="detail">
        {{$route.params | json}}
        <br>
        {{$route.path}}
        <br>
        {{$route.query | json}}
    template>
    <script>
        //1. 准备一个根组件
        var App=Vue.extend();

        //2. Home News组件都准备
        var Home=Vue.extend({
            template:'#home'
        });

        var News=Vue.extend({
            template:'#news'
        });

        var Detail=Vue.extend({
            template:'#detail'
        });

        //3. 准备路由
        var router=new VueRouter();

        //4. 关联
        router.map({
            'home':{
                component:Home,
                subRoutes:{
                    'login/:name':{
                        component:{
                            template:'我是登录信息 {{$route.params | json}}</strong>'
                        }
                    },
                    'reg':{
                        component:{
                            template:'我是注册信息strong>'
                        }
                    }
                }
            },
            'news':{
                component:News,
                subRoutes:{
                    '/detail/:id':{
                        component:Detail
                    }
                }
            }
        });

        //5. 启动路由
        router.start(App,'#box');

        //6. 跳转
        router.redirect({
            '/':'home'
        });
    script>

vue-loader

PS：编译 .vue文件，需要的就是vue-loader

.vue文件的组成

        <template>
            html
        template>

        <style>
            css
        style>

        <script>
            js  （平时代码、ES6）  babel-loader
        script>

类似与 css-loader style-loader html-loader ……

vue-loader是基于webpack。我在搭建webpack的环境中，遇到了各种坑，这里就不和大家分享具体的搭建过程了，不去误导大家了。
当然vue提供了vue-cli来工大家搭建vue的开发环境。主要分享下用vue-cli搭建的过程了。

vue-cli 使用

  • 全局安装vue命令环境
    npm install vue-cli -g
    检查安装成功？ vue –version
  • 生成项目模板
    vue init <用哪个模板> 本地文件名（即自己要建立的文件夹）
  • 进入到生成的项目里
    cd xxx
    npm install （下载所需要的模块儿）
  • npm run dev
    跑起来

关于vue-cli集成的项目模板，这里说三个

  • simple
    通过 vue init simple vue-simple-demo
    init之后的文件夹中，只有一个index.html

  • webpack
    通过 vue init webpack vue-webpack-demo
    init之后的文件夹目录
    vue学习（四） vue-loader vue-router vue-cli_第2张图片
    后续通过 npm install 来下载所需要的模块

  • webpack-simple
    vue init webpack-simple vue-webpack-demo
    init之后的文件夹目录
    vue学习（四） vue-loader vue-router vue-cli_第3张图片
    后续通过 npm install 来下载所需要的模块

    webpack 和 webpack-simple的区别；只有两点区别，webpack比webpack-simple要多两点功能。

    1. Eslint 检查代码规范 （对细节要求的很细，必须按照他所要求的规范来开发。）
    2. 单元测试

ps：在vue init 的过程中，可以选择vue的版本号，eg vue init webpack#1.0 webpack-demo，则选择的就是1.0版本的vue

小结

在整理vue-loader 和 vue-router 的过程中，会遇到很多坑，有时候都快进行不下去了，试了好多次的代码，就是no-useing。大家在做的过程中要有点耐心。这篇博客整理的不算是太精细，希望看过后能有所指导。

你可能感兴趣的:(vue学习)

  • Javaweb学习之Vue模板语法（三） 不要数手指啦 vue.js学习前端
    目录学习资料前情回顾本期介绍（vue模板语法）文本插值Vue的Attribute绑定使用JavaScript表达式综合实例代码：学习资料Vue.js-渐进式JavaScript框架|Vue.js(vuejs.org)前情回顾项目的创建大家可以看这篇文章Vue学习之项目的创建-CSDN博客本期介绍（vue模板语法）首先，找到我们编写代码的地方找到自己项目的src文件夹，打开之后点击component
  • 如何学习前端炙手可热的Vue？Vue学习路线图详解！ 真·skysys 大前端和跨平台技术vue
    总结vue文档从0.11、0.12、1.0、2.x到3.0beta本文章长期更新，持续维护限于博主水平，如有错漏还望各位不吝赐教文章内容可能有争议，欢迎大家理性交流与探讨What’svue：Vue.js是什么？定位设计目标（初心）：通过尽可能简单的API提供响应数据绑定和可组合视图组件灵感来源（创意）：AngularJS，KnockoutJS，Ractive.js和Rivets.js。在简单性和功
  • Vue学习之路04----响应式基础 利刃之灵 #Vue基础vue.js前端
    响应式基础ref()（基本类型的响应式数据）在组合式API中，推荐使用ref()函数来声明响应式状态，ref能定义基本类型的，也能定义对象类型的：import{ref}from'vue'letcount=ref(0)ref()接收参数，并将其包裹在一个带有.value属性的ref对象中返回，在模版中则不需要：{{count}}按钮1按钮2import{ref}from"vue";exportdef
  • vue学习笔记-自用 陌上烟雨寒 vuevuevue.jsjavascriptcsshtml
    /*eslint-disableno-new*/newVue({el:'#app',router,components:{App},template:''})el:'#app',绑定根视图components:{App},加载组件template:''使用组件模板语法插值1.文本数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值：Message:{{msg}}2.纯HTML
  • VUE学习之------Vue.nextTick 夜跑者 VUE学习
    在项目中最近遇到一种情况：在一个页面中点击快捷键会调出另一个页面，这个页面一个元素是输入框，一个元素是button。刚调出这个页面的时候焦点要在输入框中，这样用户就可以直接进行输入了。从这个需求来看，点击快捷键的时候用v-show=true来进行显示，然后把焦点focus到输入框上，但一直给输入框加不上焦点。之前从网上搜索了一下用Vue.nextTick来进行上焦点，但没有成功。另外同事最后也是用
  • Vue学习之---nextTick 鸡吃丸子 vue.js学习前端
    前言：目前来说，nextTick我们遇到的比较少，至少对我来说是这样的，但是有一些聪明的小朋友早早就注意到这个知识点了。nextTick是前端开发（尤其是Vue生态）中的核心知识点，原理上跟Vue的异步更新有密切关系，对于面试者考察很有区分度，如果能回答的很好，对面试也是很有帮助的，所以我们有必要花费时间来学习一下。一、nextTick是什么我们来看看官方的定义：在下次DOM更新循环结束之后执行延
  • day02 vue学习日记 叫我小神龙� vue学习cssjavascriptvue.js前端html
    day02Vue常用特性表单基本操作获取单选框中的值通过v-model男女newVue({data:{//默认会让当前的value值为2的单选框选中gender:2,},})获取复选框中的值通过v-model和获取单选框中的值一样复选框checkbox这种的组合时data中的hobby我们要定义成数组否则无法实现多选爱好：篮球唱歌写代码newVue({data:{//默认会让当前的value值为2
  • vue组件中插入图片 风兮w 前端vue
    最近在Vue学习交流群里面发现很多小伙伴在想要在vue中显示图片，但是把图片写在data里面作为变量传到模板中的时候却发现图片出不了，以为是图片路径的问题，查了半天还是出不来。解决方法方案1：使用require将图片进入，写法如下logo:require('../asset/admin/logo.png')1然后再模板中：1就可以了。方案2：把图片放在static文件夹中，如下然后再data里面直
  • Vue学习笔记 - 插件 WDeLiang Vuevue.js学习笔记
    介绍插件(Plugins)是一种能为Vue添加全局功能的工具代码import{createApp}from'vue'constapp=createApp({})app.use(myPlugin,{/*可选的选项*/})一个插件可以是一个拥有install()方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给app.use()的额外选项作为参数：对象的写法constm
  • vue学习笔记整理 带上耳机世界与我无关 计算机基础个人笔记vue.js学习前端
    文章目录一、前端核心分析1.1、概述1.2、前端三要素1.3、结构层（HTML）1.4、表现层（CSS）1.5、行为层（JavaScript）二、前端发展史2.1、UI框架2.2、JavaScript构建工具2.3、三端同一2.4、后端技术2.5、主流前端框架三、了解前后分离的演变史3.1、后端为主的MVC时代3.2、基于AJAX带来的SPA时代3.3、前端为主的MV*时代3.4、NodeJS带来
  • vue学习笔记 苜小夕 vue.js学习笔记
    应用创建每个Vue应用都是通过createApp函数创建一个新的应用实例：import{createApp}from'vue'//从一个单文件组件中导入根组件importAppfrom'./App.vue'constapp=createApp(App)但应用实例必须在调用了.mount()方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的DOM元素或是一个CSS选择器字符串：app.
  • Vue学习笔记集--父子通讯 Three～stone vue.js学习笔记
    父子通讯在Vue3中，父子组件通信的核心方式与Vue2类似，但CompositionAPI和语法带来了一些新的特性。以下是Vue3父子通信的完整指南：Props向下传递数据（父→子）1.父组件传递数据import{ref}from'vue';importChildfrom'./Child.vue';constparentTitle=ref('父组件标题');constcount=ref(0);2.
  • Vue学习笔记集--生命周期 Three～stone vue.js学习笔记
    生命周期钩子什么是生命周期？生命周期：指的是一个Vue组件从创建→挂载→更新→销毁的完整过程。类比人的一生：出生（组件创建）→上学（挂载到页面）→工作变化（数据更新）→退休（组件销毁）。每个阶段都有特定的任务需要处理（如初始化数据、操作DOM、清理资源等），这就是生命周期的意义。什么是钩子函数？钩子函数（LifecycleHooks）是Vue在生命周期不同阶段自动调用的函数。开发者可以在这些函数中
  • Vue学习笔记集--pnpm包管理器 Three～stone vue.js学习笔记
    pnpm包管理器官网：https://www.pnpm.cn/pnpm简介pnpm全称是performantnpm，意思为“高性能的npm”，它通过硬链接和符号链接共享依赖，提升安装速度并减少存储占用。功能特点节省磁盘空间：依赖包被存放在一个统一的位置，多个项目共享同一份依赖副本，节省大量磁盘空间。安装速度快：安装速度比npm快了近2倍。支持Monorepo：可以使用pnpm-workspace.
  • Vue学习记录之二十 postcss自定义插件及Unocss的使用 LvManBa vue.js学习postcss
    一、实例1使用postCss自定义px转vw插件编写css插件:一、在项目根目录下建立一个plugins文件夹，然后建立一个postcss-px-to-viewport.ts文件。//vite内置了postCss无需安装import{Plugin}from'postcss'//定义一个变量constOptions={viewportWidth:375,//UI设计稿上的宽度，这里我们默认的视口宽度
  • vue学习笔记 export ‘default‘ (imported as ‘Vue‘) was not found in ‘vue‘ xiaoweiwei99 前端htmlvue.js学习javascript
    版本：vue3vue/cli5.0.0做写store时报错importVuefrom"vue";importVuexfrom"vuex";importgettersfrom"./getters";importuserfrom"./modules/user";Vue.use(Vuex);conststore=newVuex.Store({modules:{user,},getters,});expo
  • Vue学习教程-16html标签元素绑定事件 番茄番茄君 vue.js学习前端
    文章目录前言一、表单数据绑定事件二、多媒体元素绑定1.图片img和视频元素video三、容器元素绑定事件前言在Vue中，你可以通过v-on指令（或在Vue2.x中简写为@）来绑定事件。这种方式允许你监听DOM事件，并在触发时执行一些JavaScript代码。常见的元素主要是表单数据元素、多媒体元素和容器元素。一、表单数据绑定事件常见的表单数据元素1.文本输入框元素3.多选框元素4.下拉框元素5.按
  • Vue学习：22.Vue组件库-Vant 星仔如雨 Vue2vue.js学习前端vant
    Vue组件库是一系列预先构建好的、可复用的UI组件集合，它们设计用于加速Vue.js应用程序的开发过程。这些组件通常遵循一定的设计规范，提供统一的外观和交互体验，让开发者能够快速搭建用户界面。组件库举例Vant:专注于移动端的轻量级UI库，提供丰富的基础组件和业务组件，适用于快速构建高性能的移动端页面。ElementUI:针对桌面端Web应用的Vue组件库，包含丰富的表单元素、布局组件、导航组件等
  • Vue学习教程-14内置指令 番茄番茄君 vue.js学习前端
    文章目录前言一、v-text指令二、v-html指令三、v-cloak指令四、v-once指令五、v-pre指令六、其他指令前言Vue.js提供了许多内置指令（Directives），这些指令用于在模板中添加特殊功能。内置指令以v-前缀开始。v-text:更新元素的textContent更新元素的textContent。例如：v-html:更新元素的innerHTML更新元素的innerHTML。
  • Vue学习教程-11数组变化监测 番茄番茄君 vue.js学习javascript
    文章目录前言一、vue侦听响应数组变更方法二、使用Vue.set或者this.$set三、替换数组总结前言在Vue中，数组变化监测是其响应式系统的一个重要特性。Vue2.x版本中，当使用Vue.set或者this.$set，或者在初始化时就声明好数组的每个元素或者调用数组方法，可以确保数组的变更能够被Vue检测到并触发视图的更新。然而，在某些情况下，直接通过索引修改数组元素，例如array[ind
  • Vue学习教程-04数据代理 番茄番茄君 vue.js学习javascript
    文章目录一、什么是数据代理二、数据代理过程三、vue数据代理应用1.数据代理代码2.代理底层逻辑总结一、什么是数据代理数据代理是一种技术，通过代理、拦截对象属性及方法的访问请求，实现与该对象的交互。在Vue中，数据代理是指在Vue实例化一个组件时，Vue会将组件中的data属性中的数据转化为getter/setter，并将这些getter/setter注册到Vue的响应式系统中，在Vue实例中访问
  • Vue学习笔记3 Jyywww121 vue.js学习笔记
    Vue学习笔记一、单页应用程序&路由介绍1、介绍单页应用程序：所有的功能都在一个页面上实现优点：按需更新性能高，开发效率高，用户体验好缺点：学习成本高，首屏加载慢，不利于SEO应用场景：系统类网站、内部网站、文档类网站、移动端站点路由介绍生活中的路由：设备和ip的映射关系Vue中的路由：路径和组件的映射关系2、路由的基本应用VueRouter的介绍：作用：修改地址栏路径时，切换显示匹配的组件路由的
  • Vue学习笔记--＞＞基础篇 丑小鸭变黑天鹅 笔记vue
    Vue学习笔记一、Vue核心1、Vue的基本认识1、官网2、介绍3、特点4、与其它前端JS框架的关联5、vue扩展插件2、Vue的基本使用3、理解Vue的MVVM4、模板语法5、计算属性基本使用6、强制绑定class和style7、条件渲染8、列表渲染维护状态数组更新检测9、列表的搜索与排序10、事件处理11、表单数据的自动收集12、Vue生命周期13、过渡和动画1、css过渡2、css动画3、自
  • Vue学习笔记-条件渲染和列表渲染 printf_________ vue.js学习前端
    条件渲染：v-if，可以搭配v-else-if,v-else但是必须放在一起//可以移除元素v-show//可以隐藏元素v-if可以搭配template使用，用template将多个元素包裹起来列表渲染：
  • Vue学习第31天——编程式路由导航5种方法详解及案例练习（与声明式路由导航对比） 离奇6厘米 vue学习javascriptvue
    目录一、编程式路由导航1、概念2、理解3、用法二、编程式路由导航的5种方法1、push2、replace3、forward4、back5、go三、案例练习四、编程式路由导航与声明式路由导航对比一、编程式路由导航1、概念除了使用创建a标签来定义导航链接，我们还可以借助router的实例方法，通过编写代码来实现。2、理解不借助实现路由跳转3、用法在vue组件中，可以通过$router访问路由实例，因此
  • Vue学习笔记 二 涔溪 vuevue.js学习笔记
    4、Vue基础扩展4.1插槽组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力在Vue中插槽是很重要的存在，通过插槽，我们可以把父组件中指定的DOM作用到子组件的任意位置，后面我们坐项目用到的组件库比如element-ui,vant-ui都频繁用到的插槽，Vue的插槽主要有匿名插槽，具名插槽，作用域插槽三种，下面我们分别来认识一下他们。4.1.1匿名插槽★★★★故名思义就是没有名字的插
  • 基于vue.js+element-ui组件开发的博客blog详细步骤 perfect-code-hzy 前端工程师学习笔记vue.jsjavascript
    vue学习笔记一、前端项目初始化步骤1、通过vuecli3创建项目2、配置vue路由3、配置element-ui组件库4、配置axios库5、初始化git远程仓库6、将本地项目托管到GitHub或码云上二、接口API1、调试工具三、登录和退出功能完成登录组件提交到git--合并分支一、前端项目初始化步骤1、通过vuecli3创建项目通过vueui命令进行可视化创建项目选择创建的路径->自定义配置项
  • vue学习总结
    一、transition和transition-group的区别：transition：针对的是一个元素，比如v-if,v-showtransition-group：针对是多个元素，比如使用v-for二、transition动画过渡的时候什么时候生效？1.v-if2.v-show3.动态组件4.组建根节点三、vue创建项目有两种方法：1.vueinitwebpack项目名称2.vuecreate项
  • vue学习笔记——关于对Vue3 ref(), toRef(), toRefs(), unref(), isRef(), reactive()方法的理解。 chen_sir_sh vue学习笔记javascript前端vue
    VUE3出现了很多新的API，下面是自己的一些理解进行的总结。欢迎大家一起交流补充。ref()使用ref创建一个数据类型，ref有value这个属性constname1={age:"14",name:"bob1"};constname2=ref({name:"bob2"});//使用ref创建一个数据类型相对于reactive，ref有value属性name2.value="bob3"consol
  • 第五天Vue学习 余心不忍 vue.js学习elementui
    v-for的相关使用1.v-for的基本使用循环遍历，值，索引值，key都可以一般需要使用索引值。{{index+":"+item}}index表示索引，item表示当前遍历的元素。{{item}}{{key+'----'+i}}varapp=newVue({el:'#app',data:{books:['化学','物理','英语','数学','语文'],person:{name:'张三',age
  • 遍历dom 并且存储（将每一层的DOM元素存在数组中） 换个号韩国红果果 JavaScripthtml
    数组从0开始！！ var a=[],i=0; for(var j=0;j<30;j++){ a[j]=[];//数组里套数组，且第i层存储在第a[i]中 } function walkDOM(n){ do{ if(n.nodeType!==3)//筛选去除#text类型 a[i].push(n); //con
  • Android+Jquery Mobile学习系列(9)-总结和代码分享 白糖_ JQuery Mobile
    目录导航   经过一个多月的边学习边练手，学会了Android基于Web开发的毛皮，其实开发过程中用Android原生API不是很多，更多的是HTML/Javascript/Css。   个人觉得基于WebView的Jquery Mobile开发有以下优点： 1、对于刚从Java Web转型过来的同学非常适合，只要懂得HTML开发就可以上手做事。 2、jquerym
  • impala参考资料 dayutianfei impala
    记录一些有用的Impala资料   1. 入门资料 >>官网翻译：     http://my.oschina.net/weiqingbin/blog?catalog=423691   2. 实用进阶 >>代码&架构分析：     Impala/Hive现状分析与前景展望：http
  • JAVA 静态变量与非静态变量初始化顺序之新解 周凡杨 java静态非静态顺序
    今天和同事争论一问题，关于静态变量与非静态变量的初始化顺序，谁先谁后，最终想整理出来！测试代码： import java.util.Map; public class T { public static T t = new T(); private Map map = new HashMap(); public T(){ System.out.println(&quo
  • 跳出iframe返回外层页面 g21121 iframe
    在web开发过程中难免要用到iframe，但当连接超时或跳转到公共页面时就会出现超时页面显示在iframe中，这时我们就需要跳出这个iframe到达一个公共页面去。 首先跳转到一个中间页，这个页面用于判断是否在iframe中，在页面加载的过程中调用如下代码： <script type="text/javascript"> //<!-- function
  • JAVA多线程监听JMS、MQ队列 510888780 java多线程
    背景：消息队列中有非常多的消息需要处理，并且监听器onMessage（）方法中的业务逻辑也相对比较复杂，为了加快队列消息的读取、处理速度。可以通过加快读取速度和加快处理速度来考虑。因此从这两个方面都使用多线程来处理。对于消息处理的业务处理逻辑用线程池来做。对于加快消息监听读取速度可以使用1.使用多个监听器监听一个队列；2.使用一个监听器开启多线程监听。 对于上面提到的方法2使用一个监听器开启多线
  • 第一个SpringMvc例子 布衣凌宇 spring mvc
    第一步：导入需要的包； 第二步：配置web.xml文件 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi=
  • 我的spring学习笔记15-容器扩展点之PropertyOverrideConfigurer aijuans Spring3
    PropertyOverrideConfigurer类似于PropertyPlaceholderConfigurer，但是与后者相比，前者对于bean属性可以有缺省值或者根本没有值。也就是说如果properties文件中没有某个bean属性的内容，那么将使用上下文（配置的xml文件）中相应定义的值。如果properties文件中有bean属性的内容，那么就用properties文件中的值来代替上下
  • 通过XSD验证XML antlove xmlschemaxsdvalidationSchemaFactory
    1. XmlValidation.java package xml.validation; import java.io.InputStream; import javax.xml.XMLConstants; import javax.xml.transform.stream.StreamSource; import javax.xml.validation.Schem
  • 文本流与字符集 百合不是茶 PrintWrite()的使用字符集名字 别名获取
    文本数据的输入输出;           输入;数据流,缓冲流         输出;介绍向文本打印格式化的输出PrintWrite();   package 文本流; import java.io.FileNotFound
  • ibatis模糊查询sqlmap-mapping-**.xml配置 bijian1013 ibatis
            正常我们写ibatis的sqlmap-mapping-*.xml文件时，传入的参数都用##标识，如下所示： <resultMap id="personInfo" class="com.bijian.study.dto.PersonDTO"> <res
  • java jvm常用命令工具——jdb命令(The Java Debugger) bijian1013 javajvmjdb
            用来对core文件和正在运行的Java进程进行实时地调试，里面包含了丰富的命令帮助您进行调试，它的功能和Sun studio里面所带的dbx非常相似，但 jdb是专门用来针对Java应用程序的。         现在应该说日常的开发中很少用到JDB了，因为现在的IDE已经帮我们封装好了，如使用ECLI
  • 【Spring框架二】Spring常用注解之Component、Repository、Service和Controller注解 bit1129 controller
    在Spring常用注解第一步部分【Spring框架一】Spring常用注解之Autowired和Resource注解（http://bit1129.iteye.com/blog/2114084）中介绍了Autowired和Resource两个注解的功能，它们用于将依赖根据名称或者类型进行自动的注入，这简化了在XML中，依赖注入部分的XML的编写，但是UserDao和UserService两个bea
  • cxf wsdl2java生成代码super出错,构造函数不匹配 bitray super
        由于过去对于soap协议的cxf接触的不是很多,所以遇到了也是迷糊了一会.后来经过查找资料才得以解决. 初始原因一般是由于jaxws2.2规范和jdk6及以上不兼容导致的.所以要强制降为jaxws2.1进行编译生成.我们需要少量的修改: 我们原来的代码 wsdl2java com.test.xxx -client http://..... 修改后的代
  • 动态页面正文部分中文乱码排障一例 ronin47
    公司网站一部分动态页面，早先使用apache+resin的架构运行，考虑到高并发访问下的响应性能问题，在前不久逐步开始用nginx替换掉了apache。 不过随后发现了一个问题，随意进入某一有分页的网页，第一页是正常的（因为静态化过了）；点“下一页”，出来的页面两边正常，中间部分的标题、关键字等也正常，唯独每个标题下的正文无法正常显示。 因为有做过系统调整，所以第一反应就是新上
  • java-54- 调整数组顺序使奇数位于偶数前面 bylijinnan java
    import java.util.Arrays; import java.util.Random; import ljn.help.Helper; public class OddBeforeEven { /** * Q 54 调整数组顺序使奇数位于偶数前面 * 输入一个整数数组，调整数组中数字的顺序，使得所有奇数位于数组的前半部分，所有偶数位于数组的后半
  • 从100PV到1亿级PV网站架构演变 cfyme 网站架构
    一个网站就像一个人，存在一个从小到大的过程。养一个网站和养一个人一样，不同时期需要不同的方法，不同的方法下有共同的原则。本文结合我自已14年网站人的经历记录一些架构演变中的体会。 1：积累是必不可少的 架构师不是一天练成的。 1999年，我作了一个个人主页，在学校内的虚拟空间，参加了一次主页大赛，几个DREAMWEAVER的页面，几个TABLE作布局，一个DB连接，几行PHP的代码嵌入在HTM
  • [宇宙时代]宇宙时代的GIS是什么？ comsci Gis
           我们都知道一个事实，在行星内部的时候，因为地理信息的坐标都是相对固定的，所以我们获取一组GIS数据之后，就可以存储到硬盘中，长久使用。。。但是，请注意，这种经验在宇宙时代是不能够被继续使用的          宇宙是一个高维时空
  • 详解create database命令 czmmiao database
    完整命令 CREATE DATABASE mynewdb   USER SYS IDENTIFIED BY sys_password   USER SYSTEM IDENTIFIED BY system_password   LOGFILE GROUP 1 ('/u01/logs/my/redo01a.log','/u02/logs/m
  • 几句不中听却不得不认可的话 datageek
    1、人丑就该多读书。 2、你不快乐是因为：你可以像猪一样懒，却无法像只猪一样懒得心安理得。 3、如果你太在意别人的看法，那么你的生活将变成一件裤衩，别人放什么屁，你都得接着。 4、你的问题主要在于：读书不多而买书太多，读书太少又特爱思考，还他妈话痨。 5、与禽兽搏斗的三种结局：(1)、赢了，比禽兽还禽兽。(2)、输了，禽兽不如。(3)、平了，跟禽兽没两样。结论：选择正确的对手很重要。 6
  • 1 14:00 PHP中的“syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM”错误 dcj3sjt126com PHP
    原文地址：http://www.kafka0102.com/2010/08/281.html   因为需要，今天晚些在本机使用PHP做些测试，PHP脚本依赖了一堆我也不清楚做什么用的库。结果一跑起来，就报出类似下面的错误：“Parse error: syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM in /home/kafka/test/
  • xcode6 Auto layout and size classes dcj3sjt126com ios
    官方GUI   https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html   iOS中使用自动布局（一）   http://www.cocoachina.com/ind
  • 通过PreparedStatement批量执行sql语句【sql语句相同，值不同】 梦见x光 sql事务批量执行
    比如说：我有一个List需要添加到数据库中，那么我该如何通过PreparedStatement来操作呢？ public void addCustomerByCommit(Connection conn , List<Customer> customerList) {    String sql = "inseret into customer(id
  • 程序员必知必会----linux常用命令之十【系统相关】 hanqunfeng Linux常用命令
    一.linux快捷键 Ctrl+C : 终止当前命令 Ctrl+S : 暂停屏幕输出 Ctrl+Q : 恢复屏幕输出 Ctrl+U : 删除当前行光标前的所有字符 Ctrl+Z : 挂起当前正在执行的进程 Ctrl+L : 清除终端屏幕，相当于clear   二.终端命令 clear : 清除终端屏幕 reset : 重置视窗，当屏幕编码混乱时使用 time com
  • NGINX IXHONG nginx
    pcre 编译安装 nginx conf/vhost/test.conf   upstream admin { server 127.0.0.1:8080; }   server {                 listen       80; &
  • 设计模式--工厂模式 kerryg 设计模式
    工厂方式模式分为三种：   1、普通工厂模式：建立一个工厂类，对实现了同一个接口的一些类进行实例的创建。   2、多个工厂方法的模式：就是对普通工厂方法模式的改进，在普通工厂方法模式中，如果传递的字符串出错，则不能正确创建对象，而多个工厂方法模式就是提供多个工厂方法，分别创建对象。   3、静态工厂方法模式：就是将上面的多个工厂方法模式里的方法置为静态，
  • Spring InitializingBean/init-method和DisposableBean/destroy-method mx_xiehd javaspringbeanxml
    1.initializingBean/init-method 实现org.springframework.beans.factory.InitializingBean接口允许一个bean在它的所有必须属性被BeanFactory设置后，来执行初始化的工作，InitialzingBean仅仅指定了一个方法。 通常InitializingBean接口的使用是能够被避免的，（不鼓励使用，因为没有必要
  • 解决Centos下vim粘贴内容格式混乱问题 qindongliang1922 centosvim
    有时候，我们在向vim打开的一个xml，或者任意文件中，拷贝粘贴的代码时，格式莫名其毛的就混乱了，然后自己一个个再重新，把格式排列好，非常耗时，而且很不爽，那么有没有办法避免呢？ 答案是肯定的，设置下缩进格式就可以了，非常简单： 在用户的根目录下 直接vi  ~/.vimrc文件 然后将set pastetoggle=<F9> 写入这个文件中，保存退出，重新登录，
  • netty大并发请求问题 tianzhihehe netty
    多线程并发使用同一个channel java.nio.BufferOverflowException: null at java.nio.HeapByteBuffer.put(HeapByteBuffer.java:183) ~[na:1.7.0_60-ea] at java.nio.ByteBuffer.put(ByteBuffer.java:832) ~[na:1.7.0_60-ea]
  • Hadoop NameNode单点问题解决方案之一 AvatarNode wyz2009107220 NameNode
    我们遇到的情况 Hadoop NameNode存在单点问题。这个问题会影响分布式平台24*7运行。先说说我们的情况吧。 我们的团队负责管理一个1200节点的集群(总大小12PB)，目前是运行版本为Hadoop 0.20，transaction logs写入一个共享的NFS filer(注：NetApp NFS Filer)。 经常遇到需要中断服务的问题是给hadoop打补丁。 DataNod
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他