邙星魂
邙星魂

Vue学习

文章目录

  • Vue组件的简单使用和传值操作
  • Vue模板表达式-侦听器-计算属性
  • Style&Class绑定
  • Vue注意事项
    • 解析 DOM 模板时的注意事项
    • 在子组件中使用data
    • 通过Vue获取DOM节点和子组件实例
    • 父子组件之间的数据传递
    • prop 参数验证
    • 在组件上使用原生事件
    • 非父子组件之间的传值
    • 在Vue中使用插槽
    • 动态组件
    • 超链接
    • 文件路径别名
    • 请求代理
    • vue中的ajax --> axios
    • Vuex 数据共享

Vue组件的简单使用和传值操作


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Worldtitle>
    <script src="js/vue.js">script>
head>
<body>
    <div id="app">
        <input type="text" v-model="inputValue" />
        <button @click="handlerBtnClick">添加button>
        <ul>
            
			
			
            <todo-item :key="item" :item="item" :index="index" v-for="(item,index) of list" @delete="handlerDeleteItem">todo-item>
        ul>
    div>

    <script>
        //局部组件，子组件名称，驼峰命名在使用的时候需要变成小写且下划线分割
        let TodoItem = {
			//接受父组件绑定的属性值，名称一致即可
            props:['item','index'], 
            template : '
  • {{item}}
    • '    ,
			methods:{
				handlerItemClick:function(){
					//对上一层触发指定的事件(delete),并传递一个参数,让父组件去监听该事件执行相应的操作
					this.$emit('delete',this.index);
				}
			}
        };
        let vm = new Vue({
            el:"#app",
            //注册局部组件
            components:{TodoItem:TodoItem},
            data:{
               inputValue:'',
               list:[]
            },
            methods:{
                handlerBtnClick : function(){
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                },
				handlerDeleteItem:function(index){
					 this.list.splice(index,1);
				}
            }
        });
        script>
body>
html>

    Vue模板表达式-侦听器-计算属性

    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性title>
    <script src="js/vue.js">script>
head>
<body>
    <div id="app">
		
		<div v-text="info">div> 
		<div v-html="info">div> 
		<div :title="info"> 
			{{info}} 
		div>
		
		<hr />
        {{fullName}}
		<br/>
		{{myFullName()}}
		<br/>
		{{age}}
    div>

    <script>
        let vm = new Vue({
			el:"#app",
			data:{
				info:"
    AAAAA
    "    ,
				firstName : 'Hello',
				lastName : 'World',
				age:18
			},
			//侦听器,监听对应的属性,如果发生改变则出发,如果没有改变则依然使用缓存数据,不会触发
			watch:{
				//监听firstName变量
				firstName : function(){
					console.log(this.firstName);
				}
			},
			//方法计算:没有缓存效果,页面对应数据发生改变,则会再次触发,效率没有计算属性高
			methods:{
				myFullName:function(){
					console.log("myFullName");
					return this.firstName +" "+ this.lastName;
				}
			},
			//计算属性: 有缓存效果,如果计算的值没有改变,则不会重复计算
			computed:{
				fullName : function(){
					console.log("fullName");
					return this.firstName +" "+this.lastName;
				}
			}
		});
        script>
body>
html>

    Style&Class绑定

    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Class与Styletitle>
    <script src="js/vue.js">script>
	<style>
		.active{
			background: green;
			width: 50px;
			height: 50px;
		}
		.isBool{
			background: skyblue;
		}
	style>
head>
<body>
    <div id="app">
		
		
		<div class="active" :class="{ other : isBool }">div>
		<div :class="{ active : isActive , other : isBool }">div>
		<div :class="clsObj">div>
		
		<div :class="[active,other]">div>
		<div :class="[isActive?active:'',other]">div>
		<div :class="[{active:isActive},other]">div>
		<hr />
		
		
		<div :class="{active:isActive}" :style="{color:activeColor,fontSize:fontSize+'px','background-color':activeColor}">AAAdiv>
		<div class="active" :style="styleObj">div>
    div>

    <script>
        let vm = new Vue({
			el:"#app",
			data:{
				isActive:true,
				isBool:true,
				clsObj:{
					active:true,
					other:true
				},
				active:'active',
				other:'other',
				activeColor:'gray',
				fontSize:12,
				styleObj:{
					color:'gray',
					fontSize:'12px',
					'background-color':'green'
				}
			}
		});
    script>
body>
html>

    Vue注意事项

    解析 DOM 模板时的注意事项

    有些 HTML 元素，诸如

      、
        、和和，只能出现在其它某些特定的元素内部。
        这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

        HTML代码

        <div id="app">
    <table>
        <tbody>
            <tr-row>tr-row>
            <tr-row>tr-row>
            <tr-row>tr-row>
        tbody>
    table>
div>

        js代码

        let trRow = {
    template:'
        ' } let vm = new Vue({ el:"#app", components:{trRow}, data:{ } });

        结果这个自定义组件会被作为无效的内容提升到外部，并导致最终渲染结果出错。不过Vue给我们提供了一个is特性的变通办法：
        依然使用HTML5的规范，tbody中就写tr,而我们的模板绑定就在tr上添加一个is属性去替换tr标签信息即可。

        <div id="app">
    <table>
        <tbody>
            <tr is="tr-row">tr>
            <tr is="trRow">tr>
            <tr is="trRow">tr>
        tbody>
    table>
div>

        在子组件中使用data

        当我们定义一个子组件时，data不能直接提供一个对象，而是通过函数的形式，返回一个对象，因此每个实例可以维护一份被返回对象的独立的拷贝，如果 Vue 没有这条规则，就可能会影响到其它所有实例：

        let trRow = {
    data:function(){
        return {
            content:'This is row!'
        }
    },
    template:'
        ' }

        通过Vue获取DOM节点和子组件实例

        vm.$refs 一个对象，持有注册过ref特性的所有DOM元素和组件实例。
        vm.$emit( eventName, […args] ) 触发当前实例上的事件。附加参数都会传给监听器回调。即子组件向父组件传值,可以放在args中,父组件监听这个方法的时候可以通过参数获取.

        <div id="app">
    
    <counter ref="counter" @divChange="hanlderClick">counter>
div>

        let counter = {
    data:function(){
        return {
            number:0
        }
    },
    //div上绑定一个点击事件
    template:'
        {{number}}
        '        ,
    methods:{
        //点击div的时候当前div数据的值++,并对外触发一个divChange事件
        change:function(){
            this.number++;
            this.$emit('divChange'); //名字可以自定义
        }
    }
}

let vm = new Vue({
    el:"#app",
    components:{counter},
    methods:{
        //处理counter组件上的事件,并获取该组件上data中的number信息
        hanlderClick:function(){
            console.log(this.$refs.counter.number);
        }
    }
});

        父子组件之间的数据传递

        • 通过 prop 向子组件传递数据

        HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名.

        prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性,一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在子组件中，你会发现我们能够在组件实例中访问这个值，就像访问data中的值一样。

        • 通过实例方法参数vm.$emit( eventName, […args] ) 向父组件传值,可以放在args中,父组件监听这个方法的时候可以通过参数
        
<counter :data-num="num" @div-change="hanlderClick">counter>
<div>{{num}}div>

        let counter = {
    // 在 JavaScript 中传值属性是 camelCase 的
    props:['dataNum'], //父组件传递过来的参数值,通过prop进行获取
    data:function(){
        return {
            number:this.dataNum,
            step:2
        }
    },
    template:'
        {{number}}
        '        ,
    methods:{
        change:function(){
            this.number += this.step;
            //HTML属性不区分大小写，并且在使用组件模板时不能使用v-on来侦听camelCase事件,需要用中划线连接
            this.$emit('div-change',this.step); //名字可以自定义
        }
    }
}

let vm = new Vue({
    el:"#app",
    components:{counter},
    data:{
        num:2
    },
    methods:{
        hanlderClick:function(step){
            this.num += step;
        }
    }
});

        prop 参数验证

        父组件在向子组件传递数据的是,我们可以对这些数据进行一些验证,如果不满足需求，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。
        定制 prop 的验证方式，你可以为props中的值提供一个带有验证需求的** 对象** ，而不是一个字符串数组。

        Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    },
     propG: {
      validator: function (value) {
        // 这个值字符串长度需要大于5
        return value.length>5
      }
    }
  }
})

        类型检查: type可以是下列原生构造函数中的一个: String、Number、Boolean、Date、Function、Symbol
        需要注意，如果父组件给子组件传递值的时候,如果子组件没有还是用props来接收,则对应传递的值会绑定在子组件根元素上的属性上

        在组件上使用原生事件

        在父组件上,如果子组件没有进行$.emit进行对外暴露的话,父组件是没有办法进行事件绑定的,因为在父组件上定义的事件都是自定义事件,即都是子组件的监听事件,那么想要绑定js的原生组件怎么办呢?很简单,只需要在添加一个 .native就可以了,如下所示:

        <div id="app">
    <counter @click.native="handlerCiick">counter>
div>

        let counter = {
    template:'
        Child
        '        
}

let vm = new Vue({
    el:"#app",
    components:{counter},
    methods:{
        handlerCiick:function(){
            alert('click');
        } 
    }

});

        非父子组件之间的传值

        使用Vue.prototype.bus=new Vue();,在借助$.emit()对外触发事件,并传递值,通过事件钩子mounted在Vue实例加载完毕后,去监听传递数值组件对外触发的事件,就可以获取到传递的值了.

        在Vue中使用插槽

        插槽就是定义一套组件模板,使用相应的任易内容去填充对应的模板中标注插槽的位置数据.如下是一个简单的案例,定义了简单的按钮组件,使用插槽去动态填充对应按钮显示的文字信息,当然在插槽内部可以写相应的信息来作为默认值,如果父组件没有传递值,则显示默认值.

        <div id="app">
    <submit-btn>保存submit-btn>
div>

        let submitBtn = {
    template:""
}
let vm = new Vue({
    el:"#app",
    components:{submitBtn}
});

        具名插槽:就是可以给插槽取一个名字,不同的数据填充到不同的插槽中,插槽取名用slot中的属性 name 给定具体的值即可.而父级元素填充值的时候,我们可以在一个 元素上使用 v-slot: 指令，提供其名称,简写是#号
        注意 v-slot 只能添加在一个 ,默认插槽除外,可以多次使用

        <div id="app">
    <base-layout>
        <template v-slot:header>
            <h1>Here's Headerh1>
        template>
        This is context
        <template #footer>
           <h1>Here's Footerh1>
        template>
    base-layout>
div>

        特别注意: 使用模板一定要有一个根元素

        let baseLayout={
    template:`
        
        
            
        
                
            
        
            
        
                
            
         
            
        
               
            
        
        
        
    `        
}

let vm = new Vue({
    el:"#app",
    components:{baseLayout}
});

        作用域插槽 : 子组件通过插槽给特定的父组件传递对应的值,并使用该值进行填充数据
        插槽中通过属性进行绑定,父组件中通过定义一个prop对象来接收,这里可以使用解构的形式来进行动态赋值,简化步骤

        <div id="app">
    <base-layout>
        
        <template #header="listProp">
            {{listProp.list[0]}}
            <h1>Here's Headerh1>
        template>
        This is context
        
        <template #footer="{item}">
            <li>{{item}}li>
        template>
    base-layout>
div>

        let baseLayout={
    data:function(){
        return {
            list:['apple','banana','other']
        }
    },
    template:`
        
        
            
        
                
            
        
            
        
                
            
         
            
        
                
          
                    
                
        
            
        
        
        
    `        
}
let vm = new Vue({
    el:"#app",
    components:{baseLayout}
});

        动态组件

        我们之前曾经在一个多标签的界面中使用is特性来切换不同的组件：

        <component v-bind:is="currentTabComponent">component>

        当在这些组件之间切换的时候他其实是在不停的创建和销毁，不光性能浪费，且有的时候你想在来回切换的时候保留之前选中的一些信息以及组件状态，这个时候你要实现相对来说就比较麻烦，这个时候我们就可以使用keep-alive来弥补以上缺陷，很简单只需要使用keep-alive进行包裹即可。
        注意这个要求被切换到的组件都有自己的名字，不论是通过组件的name选项还是局部/全局注册。

        
<keep-alive>
  <component v-bind:is="currentTabComponent">component>
keep-alive>

        超链接

        不再是使用a标签，vue中有自己的一套标签，使用方式如下：

        <router-link to="/info">
    点击我跳转
router-link>

        文件路径别名

        在build/webpack.base.conf.js中可以配置文件的别名，如果文件路径太深，那么使用这种方式无疑是一个比较好的选择：

        resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'style':resolve('src/assets/style/')
    }
  }

        请求代理

        想要隐藏项目的真实路径，这个时候可以使用webpack提供的代理模式完成，在conf/index.js中进行配置即可,如下，项目的真实路径是static/json ,配置代理路径为/api ,这样所有api开头的路径都会去找static/json下对应的文件

        proxyTable: { //代理转发
'/api':{
    target:'http://localhost:8080',
    pathRewrite:{
        '^/api':'/static/json'
    }
}

        vue中的ajax --> axios

        在vue中官方推荐使用axios来完成ajax的操作，使用比较简单，先使用npm命令安装该模块，主要需要在项目的根目录下运行：

        npm install axios --save //--save表示安装并配置到当前项目的package.json中

        在项目中使用，通过import进行模块引入，然后就可以使用了，代码如下：

        <script>
import axios from "axios"

export default {
name : 'Home',
    methods:{
        getAjaxInfo(){
            axios.get('/api/info.json').then(function(data){
                console.log(data.data);
            });
        }
    },
    mounted() {
        this.getAjaxInfo()
    }
}
</script>

        Vuex 数据共享

        你可能感兴趣的:(前端)

        • Long类型前后端数据不一致 igotyback 前端
          响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
        • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
          ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
        • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
          加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
        • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
          ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
        • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
          Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
        • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
          这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
        • 博客网站制作教程 2401_85194651 javamaven
          首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
        • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
          最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
        • 补充元象二面 Redstone Monstrosity 前端面试
          1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
        • 微信小程序开发注意事项 jun778895 微信小程序小程序
          微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
        • 字节二面 Redstone Monstrosity 前端面试
          1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
        • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
          点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
        • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
          第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
        • 360前端星计划-动画可以这么玩 马小蜗
          动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
        • Vue + Express实现一个表单提交 九旬大爷的梦
          最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
        • 前端知识点 ZhangTao_zata 前端javascriptcss
          下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
        • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
          1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
        • 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript
          1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
        • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
          数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
        • 分布式锁和spring事务管理 暴躁的鱼 锁及事务分布式springjava
          最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
        • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
          边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
        • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
          前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
        • 【前端】vue 报错:The template root requires exactly one element 程序员-张师傅 前端前端vue.jsjavascript
          【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
        • 从单体到微服务：FastAPI ‘挂载’子应用程序的转变 黑金IT fastapi微服务fastapi架构
          在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方
        • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
          前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
        • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
          在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
        • 前端three.js的Sprite模拟下雪动画效果 qq_35430208 three.js前端javascript三维场景中下雪效果threejs实现下雪效果
          一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add
        • 系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机 rabbit_it qiankun学习前端框架前端阿里云
          一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性
        • ODOO不同版本与平台选择 chouchengyin2080 c#操作系统运维
          1.10.0vs11.0vs8.0截至2017年底，最新的ODOO发布版为ODOO11.0，但功能上有一定精简（去除财务模块，去除工作流支持），技术上变动较大（代码逐步迁移至Python3，前端框架改写得抽象）。所以如果是从生产使用的角度来讲，ODOO10.0是当前最好选择，因为其更稳定，第三方模块也更多更全面。而如果是ODOO技术爱好从业者，则逐步迁移至ODOO11.0也有必要，因为其底层技术架
        • Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数 qcidyu 好用的工具集合代码效率前端技巧Vue开发组合式函数模块管理自动导入NuxtKit
          title:NuxtKit自动导入功能：高效管理你的模块和组合式函数date:2024/9/14updated:2024/9/14author:cmdragonexcerpt:通过使用NuxtKit的自动导入功能，您可以更高效地管理和使用公共函数、组合式函数和VueAPI。无论是单个导入、目录导入还是从第三方模块导入，您都可以通过简单的API调用轻松实现。categories:前端开发tags:N
        • mondb入手 木zi_鸣 mongodb
          windows 启动mongodb  编写bat文件， mongod --dbpath D:\software\MongoDBDATA mongod --help  查询各种配置 配置在mongob 打开批处理，即可启动，27017原生端口，shell操作监控端口  扩展28017，web端操作端口 启动配置文件配置， 数据更灵活 
        • 大型高并发高负载网站的系统架构 bijian1013 高并发负载均衡
                  扩展Web应用程序 一.概念         简单的来说，如果一个系统可扩展，那么你可以通过扩展来提供系统的性能。这代表着系统能够容纳更高的负载、更大的数据集，并且系统是可维护的。扩展和语言、某项具体的技术都是无关的。扩展可以分为两种：         1.
        • DISPLAY变量和xhost(原创) czmmiao display
          DISPLAY 在Linux/Unix类操作系统上, DISPLAY用来设置将图形显示到何处. 直接登陆图形界面或者登陆命令行界面后使用startx启动图形, DISPLAY环境变量将自动设置为:0:0, 此时可以打开终端, 输出图形程序的名称(比如xclock)来启动程序, 图形将显示在本地窗口上, 在终端上输入printenv查看当前环境变量, 输出结果中有如下内容:DISPLAY=:0.0
        • 获取B/S客户端IP 周凡杨 java编程jspWeb浏览器
             最近想写个B/S架构的聊天系统，因为以前做过C/S架构的QQ聊天系统，所以对于Socket通信编程只是一个巩固。对于C/S架构的聊天系统，由于存在客户端Java应用，所以直接在代码中获取客户端的IP，应用的方法为：    String ip = InetAddress.getLocalHost().getHostAddress(); 然而对于WEB
        • 浅谈类和对象 朱辉辉33 编程
              类是对一类事物的总称，对象是描述一个物体的特征，类是对象的抽象。简单来说，类是抽象的，不占用内存，对象是具体的， 占用存储空间。     类是由属性和方法构成的，基本格式是public  class 类名{ //定义属性 private/public 数据类型 属性名； //定义方法 publ
        • android activity与viewpager+fragment的生命周期问题 肆无忌惮_ viewpager
          有一个Activity里面是ViewPager，ViewPager里面放了两个Fragment。 第一次进入这个Activity。开启了服务，并在onResume方法中绑定服务后，对Service进行了一定的初始化，其中调用了Fragment中的一个属性。 super.onResume(); bindService(intent, conn, BIND_AUTO_CREATE);
        • base64Encode对图片进行编码 843977358 base64图片encoder
          /** * 对图片进行base64encoder编码 * * @author mrZhang * @param path * @return */ public static String encodeImage(String path) { BASE64Encoder encoder = null; byte[] b = null; I
        • Request Header简介 aigo servlet
          当一个客户端(通常是浏览器)向Web服务器发送一个请求是，它要发送一个请求的命令行，一般是GET或POST命令，当发送POST命令时，它还必须向服务器发送一个叫“Content-Length”的请求头(Request   Header)   用以指明请求数据的长度，除了Content-Length之外，它还可以向服务器发送其它一些Headers，如：    
        • HttpClient4.3 创建SSL协议的HttpClient对象 alleni123 httpclient爬虫ssl
          public class HttpClientUtils { public static CloseableHttpClient createSSLClientDefault(CookieStore cookies){ SSLContext sslContext=null; try { sslContext=new SSLContextBuilder().l
        • java取反 -右移-左移-无符号右移的探讨 百合不是茶 位运算符 位移
          取反： 在二进制中第一位，1表示符数，0表示正数 byte a = -1; 原码：10000001 反码：11111110 补码：11111111 //异或: 00000000 byte b = -2; 原码：10000010 反码：11111101 补码：11111110 //异或: 00000001
        • java多线程join的作用与用法 bijian1013 java多线程
                  对于JAVA的join，JDK 是这样说的：join public final void join （long millis ）throws InterruptedException Waits at most millis milliseconds for this thread to die. A timeout of 0 means t
        • Java发送http请求(get 与post方法请求) bijian1013 javaspring
          PostRequest.java package com.bijian.study; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; import java.io.InputStreamReader; import java.net.HttpURL
        • 【Struts2二】struts.xml中package下的action配置项默认值 bit1129 struts.xml
          在第一部份，定义了struts.xml文件，如下所示：   <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts
        • 【Kafka十三】Kafka Simple Consumer bit1129 simple
          代码中关于Host和Port是割裂开的，这会导致单机环境下的伪分布式Kafka集群环境下，这个例子没法运行。 实际情况是需要将host和port绑定到一起，   package kafka.examples.lowlevel; import kafka.api.FetchRequest; import kafka.api.FetchRequestBuilder; impo
        • nodejs学习api ronin47 nodejs api
          NodeJS基础 什么是NodeJS JS是脚本语言，脚本语言都需要一个解析器才能运行。对于写在HTML页面里的JS，浏览器充当了解析器的角色。而对于需要独立运行的JS，NodeJS就是一个解析器。 每一种解析器都是一个运行环境，不但允许JS定义各种数据结构，进行各种计算，还允许JS使用运行环境提供的内置对象和方法做一些事情。例如运行在浏览器中的JS的用途是操作DOM，浏览器就提供了docum
        • java-64.寻找第N个丑数 bylijinnan java
          public class UglyNumber { /** * 64.查找第N个丑数 具体思路可参考 [url] http://zhedahht.blog.163.com/blog/static/2541117420094245366965/[/url] * 题目：我们把只包含因子 2、3和5的数称作丑数（Ugly Number）。例如6、8都是丑数，但14
        • 二维数组（矩阵）对角线输出 bylijinnan 二维数组
          /** 二维数组 对角线输出 两个方向 例如对于数组： { 1, 2, 3, 4 }, { 5, 6, 7, 8 }, { 9, 10, 11, 12 }, { 13, 14, 15, 16 }, slash方向输出： 1 5 2 9 6 3 13 10 7 4 14 11 8 15 12 16 backslash输出： 4 3
        • [JWFD开源工作流设计]工作流跳跃模式开发关键点(今日更新) comsci 工作流
             既然是做开源软件的,我们的宗旨就是给大家分享设计和代码,那么现在我就用很简单扼要的语言来透露这个跳跃模式的设计原理    大家如果用过JWFD的ARC-自动运行控制器,或者看过代码,应该知道在ARC算法模块中有一个函数叫做SAN(),这个函数就是ARC的核心控制器,要实现跳跃模式,在SAN函数中一定要对LN链表数据结构进行操作,首先写一段代码,把
        • redis常见使用 cuityang redis常见使用
          redis 通常被认为是一个数据结构服务器，主要是因为其有着丰富的数据结构 strings、map、 list、sets、 sorted sets 引入jar包 jedis-2.1.0.jar  (本文下方提供下载) package redistest; import redis.clients.jedis.Jedis; public class Listtest
        • 配置多个redis dalan_123 redis
          配置多个redis客户端 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"       xmlns:xsi=&quo
        • attrib命令 dcj3sjt126com attr
            attrib指令用于修改文件的属性.文件的常见属性有:只读.存档.隐藏和系统.    只读属性是指文件只可以做读的操作.不能对文件进行写的操作.就是文件的写保护.    存档属性是用来标记文件改动的.即在上一次备份后文件有所改动.一些备份软件在备份的时候会只去备份带有存档属性的文件. 
        • Yii使用公共函数 dcj3sjt126com yii
          在网站项目中，没必要把公用的函数写成一个工具类，有时候面向过程其实更方便。 在入口文件index.php里添加 require_once('protected/function.php'); 即可对其引用，成为公用的函数集合。 function.php如下：   <?php /**   * This is the shortcut to D
        • linux 系统资源的查看（free、uname、uptime、netstat） eksliang netstatlinux unamelinux uptimelinux free
          linux 系统资源的查看 转载请出自出处：http://eksliang.iteye.com/blog/2167081   http://eksliang.iteye.com 一、free查看内存的使用情况 语法如下：   free [-b][-k][-m][-g] [-t] 参数含义 -b:直接输入free时，显示的单位是kb我们可以使用b(bytes),m
        • JAVA的位操作符 greemranqq 位运算JAVA位移<<>>>
          最近几种进制，加上各种位操作符，发现都比较模糊，不能完全掌握，这里就再熟悉熟悉。   1.按位操作符 ：    按位操作符是用来操作基本数据类型中的单个bit,即二进制位，会对两个参数执行布尔代数运算，获得结果。    与（&）运算：    1&1 = 1, 1&0 = 0, 0&0 &
        • Web前段学习网站 ihuning Web
            Web前段学习网站 菜鸟学习：http://www.w3cschool.cc/   JQuery中文网：http://www.jquerycn.cn/   内存溢出：http://outofmemory.cn/#csdn.blog   http://www.icoolxue.com/   http://www.jikexue
        • 强强联合：FluxBB 作者加盟 Flarum justjavac r
          原文：FluxBB Joins Forces With Flarum作者：Toby Zerner译文：强强联合：FluxBB 作者加盟 Flarum译者：justjavac FluxBB 是一个快速、轻量级论坛软件，它的开发者是一名德国的 PHP 天才 Franz Liedke。FluxBB 的下一个版本(2.0)将被完全重写，并已经开发了一段时间。FluxBB 看起来非常有前途的，
        • java统计在线人数（session存储信息的） macroli javaWeb
          这篇日志是我写的第三次了 前两次都发布失败！郁闷极了！   由于在web开发中常常用到这一部分所以在此记录一下，呵呵，就到备忘录了！ 我对于登录信息时使用session存储的，所以我这里是通过实现HttpSessionAttributeListener这个接口完成的。 1、实现接口类，在web.xml文件中配置监听类，从而可以使该类完成其工作。 public class Ses
        • bootstrp carousel初体验 快速构建图片播放 qiaolevip 每天进步一点点学习永无止境bootstrap纵观千象
          img{ border: 1px solid white; box-shadow: 2px 2px 12px #333; _width: expression(this.width > 600 ? "600px" : this.width + "px"); _height: expression(this.width &
        • SparkSQL读取HBase数据，通过自定义外部数据源 superlxw1234 sparksparksqlsparksql读取hbasesparksql外部数据源
          关键字：SparkSQL读取HBase、SparkSQL自定义外部数据源     前面文章介绍了SparSQL通过Hive操作HBase表。   SparkSQL从1.2开始支持自定义外部数据源(External DataSource)，这样就可以通过API接口来实现自己的外部数据源。这里基于Spark1.4.0，简单介绍SparkSQL自定义外部数据源，访
        • Spring Boot 1.3.0.M1发布 wiselyman spring boot
              Spring Boot 1.3.0.M1于6.12日发布，现在可以从Spring milestone repository下载。这个版本是基于Spring Framework 4.2.0.RC1,并在Spring Boot 1.2之上提供了大量的新特性improvements and new features。主要包含以下：   1.提供一个新的sprin
        This is row !
        {{content}}