使用vue.js+d3生成树以及遇到的坑

最新推荐文章于 2024-04-11 09:44:58 发布
最新推荐文章于 2024-04-11 09:44:58 发布
阅读量3.3k 收藏 8
点赞数 1
分类专栏： 前端 文章标签： vue.js d3 前端 svg文本溢出处理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37842366/article/details/96856939
版权

vue项目中使用d3实现树结构

1. vue.js

安装vue.js

最新稳定版本
$ npm install vue
最新稳定 CSP 兼容版本
$ npm install vue@csp

2. d3

安装d3

$ npm i d3 --save

vue中引入

import * as d3 from 'd3'

3. 代码部分

（1）生成树实现

参考：https://www.jianshu.com/p/4e517d4c3885
参考文章里实现了点击节点会收起子节点功能，由于我的需求里没有用到就删除了那部分，如果有需要的去原文章里看哦~
（在实现中根据需求我将树的圆形结点改为了矩形结点，需要圆形结点可将）

nodeEnter.append("rect")

改为

nodeEnter.append("circle")

生成树部分代码

<script>
const dataset = {
    name:"标题1",
    children:[
    			{
    				name:"标题2标题2标题2标",
    				children:[
    					{
    						name:"标题3",
    						children:[
    							{name:"标题4",value:100},
    						]
    					},
    					{name:"标题3",value:100},
            			{name:"标题3",value:100},
    				]
    			},
    			{
    				name:"标题2标题2标",
    				children:[
    					{name:"标题3" ,value:100},
    					{name:"标题3",value:100},
            			{name:"标题3",value:100},
    				]
    			}
    		]
}
import * as d3 from 'd3'
export default {
	name: 'Scale',
	data() {
			return {
				id: '',
				zoom: null,
				index: 0,
				duration: 750,
				root: null,
				nodes: [],
				links: [],
				dTreeData: null,
				transform: null,
				margin: { top: 0, right: 90, bottom: 30, left: 180 }
				
			}
	},
	methods: {
		uuid () {
            function s4 () {
                return Math.floor((1 + Math.random()) * 0x10000)
                    .toString(16)
                    .substring(1)
            }
            return (
                s4() + s4() + '-' + s4() + '-' + s4() +  '-' + s4() + '-' + s4() + s4() + s4()
            )
        },
        /**
         * @description 获取构造根节点
         */
        getRoot () {
            let root = d3.hierarchy(dataset, d => { 
                return d.children
            })
            root.x0 = this.height / 2
            root.y0 = 0
            return root
        },
        clicktext (d) {
            this.$alert(d.data.name, '标题名称', {
            confirmButtonText: '确定',
          });
        },
        diagonal (s, d) {
            return `M ${s.y} ${s.x}
                    C ${(s.y + d.y) / 2} ${s.x},
                    ${(s.y + d.y) / 2} ${d.x},
                    ${d.y} ${d.x}`
        },

        /**
         * @description 获取构造的node数据和link数据
         */
        getNodesAndLinks () {
            // 树状图根据根节点生成新的x、y坐标， 
            // 所以不能使用vue的计算螺旋桨
            this.dTreeData = this.treemap(this.root)
            this.nodes = this.dTreeData.descendants()
            this.links = this.dTreeData.descendants().slice(1)
		},
		/** 
         * @description 数据与Dom进行绑定
         */
        update (source) {
            this.getNodesAndLinks()
            this.nodes.forEach(d => { 
                d.y = d.depth * 140
            })
            // *************************** Nodes section *************************** //
            // 更新节点
            const svg = d3.select(this.$el).select('svg.d3-tree')
            const container = svg.select('g.container')
            let node = container.selectAll('g.node')
                .data(this.nodes, d => {
                    return d.id || (d.id = ++this.index)
                }) 
            // 在父级之前的位置输入任何新源
            let nodeEnter = node.enter().append('g')
                .attr('class', 'node')
                //.on('click', this.clickNode)
                .attr('transform', d => {
                    return 'translate(' + source.y0 + ',' + source.x0 + ')'
                })  
            nodeEnter.append("rect")
                .attr("width", 85)
                .attr("height",30)
                .attr("x",function(d){
                    return d.children?-50:-1;
                  })
                .attr("y",-16)
                .attr("dy",10)
                .attr("rx",5)
                .attr("ry",5)
                .attr("fill","#0076B3")
                .attr("stroke","#0076B3")
                .attr("stroke-width",1)
 
            nodeEnter.append("foreignObject")
                .attr("x",function(d){
                      return d.children?-30:20;
                    })
                .attr("y",-10)
                .attr("dy",10)
                .attr("width","50")
                .attr("height","20")
                .on("click", this.clicktext)
                .text(function(d){
                    return d.data.name;
                })
                .style("font-size","14px");

            let nodeUpdate = nodeEnter.merge(node)
                .transition()
                .duration(this.duration)
                .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
 
 
            // *************************** Links section *************************** //
            // 更新链接
            let link = container.selectAll('path.link')
                .data(this.links, d => { return d.id })
            
            // 在父级之前的位置输入任何新链接
            let linkEnter = link.enter().insert("path", "g")
                .attr("class", "link")
                .attr("d", d => {
                    let o = {x: source.x0, y: source.y0};
                    return this.diagonal(o, o)
                })
                .attr("fill", 'none')
                .attr("stroke-width", 1)
                .attr('stroke', '#ccc')
            // 过渡链接到他们的新位置
            let linkUpdate = linkEnter.merge(link)
            linkUpdate.transition()
                .duration(this.duration)
                .attr('d', d => { return this.diagonal(d, d.parent) })
 
        },
        /** 
         * @description 控制画布放大或缩小
         */
        zoomed () {
            d3.select(this.$el).select('g.container').attr('transform', d3.event.transform)
        }
	},
	created() {
        this.id = this.uuid()
    },
    mounted () {
        //创建svg画布
        this.width = document.getElementById(this.id).clientWidth
        this.height = document.getElementById(this.id).clientHeight
        const svg = d3.select(this.$el).select('svg.d3-tree')
            .attr('width', this.width)
            .attr('height', this.height)
        const transform = d3.zoomIdentity.translate(this.margin.left, this.margin.top).scale(1)    
        const container = svg.select('g.container')
        // 初始化缩放行为，它既是对象又是函数
        this.zoom = d3.zoom()
            .scaleExtent([1 / 2, 8])
            .on('zoom', this.zoomed)
        container.transition().duration(750).call(this.zoom.transform, transform)
        //svg.call(this.zoom) 可随意移动树的位置
        this.root = this.getRoot()
        this.update(this.root)
    },
    computed: {
        treemap () {
            return d3.tree().size([this.height, this.width])
        }
    }

}

</script>

（2）如果想要树的连接线是直线

diagonal (s, d) {
            return `M ${s.y} ${s.x}
                      L ${(s.y + d.y) / 2} ${s.x},
                      L ${(s.y + d.y) / 2} ${d.x},
                      ${d.y} ${d.x}`
},

（3）处理文字溢出，溢出部分显示…

a. 坑1

需求是文字溢出要显示…，当光标移上去时显示所有文字
一看到这个我想这好办吖，overflow ellipsis 吧啦吧啦不就得了。
可是不管我怎么写都不行的时候我发现我错了，原来使用svg里面的text是没有width属性的，按传统css方法overflow不起作用，快把百度翻遍了也找不到一个合适的方法，突然看到一个回答说使用foreignObject，赶紧试了一下，样式终于起作用了！

.d3-tree 
	.node foreignObject 
		font: 14px sans-serif;
		color #fff;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		&:hover
			overflow: visible;

（4）鼠标点击提示框显示完整标题

其实完全可以直接使用alert，但这里使用了element ui组件的提示框，我jiao的比较好看~
（使用要安装element-ui哦）

$ npm install element-ui -S

main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Vue.use(ElementUI)

clicktext (d) {
            this.$alert(d.data.name, '标题名称', {
            confirmButtonText: '确定',
          });
}

在这里插入图片描述

（5）全部样式

<style lang='stylus'>
	.down{
		border: 1px solid rgb(196, 196, 196);
		width: 822px;
		height: 387px;
		margin-top: 24px;
		background-color:rgb(255, 255, 255);
		
	}
	.p_title
		width:48px;
		height:20px;
		font-size:14px;
		font-family:PingFangSC-Regular;
		font-weight:400;
		color:rgba(45,100,119,1);
		line-height:20px;
		margin: 30px 640px 0px 134px;

	.tree-container 
		width: 100%;
		height: 320px;

	.d3-tree 
		.node foreignObject 
			font: 14px sans-serif;
			color #fff;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			&:hover
				overflow: visible;
</style>

a. 坑2

一开始在样式处加了 scoped，使用css修改树结点样式总是不起作用，发现原来是 scoped在作祟，最终删除 scoped就能正常显示了

//<style lang="stylus" scoped>
 <style lang="stylus">

（6）HTML部分

<template lang='pug'>
	<div class="down">
	<p class="p_title">目录树</p>
		div.tree-container(:id="id")
			svg.d3-tree 
				g.container
	</div>
</template>

a. 坑3

Cannot find module 'pug'

记得要安装pug吖
啥事是pug？
是一个HTML模板引擎，它是HAML在JavaScript上的实现，在这里是使用缩进排列替代成对标签。

4. 结果展示

在这里插入图片描述

5. 完整代码

<template lang='pug'>
	<div class="down">
	<p class="p_title">目录树</p>
		div.tree-container(:id="id")
			svg.d3-tree 
				g.container
	</div>
</template>
<script>
const dataset = {
    name:"标题1",
    children:[
    			{
    				name:"标题2标题2标题2标",
    				children:[
    					{
    						name:"标题3",
    						children:[
    							{name:"标题4",value:100},
    						]
    					},
    					{name:"标题3",value:100},
            			{name:"标题3",value:100},
    				]
    			},
    			{
    				name:"标题2标题2标",
    				children:[
    					{name:"标题3" ,value:100},
    					{name:"标题3",value:100},
            			{name:"标题3",value:100},
    				]
    			}
    		]
}
import * as d3 from 'd3'
export default {
	name: 'Scale',
	data() {
			return {
				id: '',
				zoom: null,
				index: 0,
				duration: 750,
				root: null,
				nodes: [],
				links: [],
				dTreeData: null,
				transform: null,
				margin: { top: 0, right: 90, bottom: 30, left: 180 }
				
			}
	},
	methods: {
		uuid () {
            function s4 () {
                return Math.floor((1 + Math.random()) * 0x10000)
                    .toString(16)
                    .substring(1)
            }
            return (
                s4() + s4() + '-' + s4() + '-' + s4() +  '-' + s4() + '-' + s4() + s4() + s4()
            )
        },
        /**
         * @description 获取构造根节点
         */
        getRoot () {
            let root = d3.hierarchy(dataset, d => { 
                return d.children
            })
            root.x0 = this.height / 2
            root.y0 = 0
            return root
        },
        clicktext (d) {
            this.$alert(d.data.name, '标题名称', {
            confirmButtonText: '确定',
          });
        },
        diagonal (s, d) {
            return `M ${s.y} ${s.x}
                    C ${(s.y + d.y) / 2} ${s.x},
                    ${(s.y + d.y) / 2} ${d.x},
                    ${d.y} ${d.x}`
            // return `M ${s.y} ${s.x}
            //         L ${(s.y + d.y) / 2} ${s.x},
            //         L ${(s.y + d.y) / 2} ${d.x},
            //         ${d.y} ${d.x}`
        },

        /**
         * @description 获取构造的node数据和link数据
         */
        getNodesAndLinks () {
            // 树状图根据根节点生成新的x、y坐标， 
            // 所以不能使用vue的计算螺旋桨
            this.dTreeData = this.treemap(this.root)
            this.nodes = this.dTreeData.descendants()
            this.links = this.dTreeData.descendants().slice(1)
		},
		/** 
         * @description 数据与Dom进行绑定
         */
        update (source) {
            this.getNodesAndLinks()
            this.nodes.forEach(d => { 
                d.y = d.depth * 140
            })
            // *************************** Nodes section *************************** //
            // 更新节点
            const svg = d3.select(this.$el).select('svg.d3-tree')
            const container = svg.select('g.container')
            let node = container.selectAll('g.node')
                .data(this.nodes, d => {
                    return d.id || (d.id = ++this.index)
                }) 
            // 在父级之前的位置输入任何新源
            let nodeEnter = node.enter().append('g')
                .attr('class', 'node')
                .attr('transform', d => {
                    return 'translate(' + source.y0 + ',' + source.x0 + ')'
                })  
            nodeEnter.append("rect")
                .attr("width", 85)
                .attr("height",30)
                .attr("x",function(d){
                    return d.children?-50:-1;
                  })
                .attr("y",-16)
                .attr("dy",10)
                .attr("rx",5)
                .attr("ry",5)
                .attr("fill","#0076B3")
                .attr("stroke","#0076B3")
                .attr("stroke-width",1)
 
            nodeEnter.append("foreignObject")
                .attr("x",function(d){
                      return d.children?-30:20;
                    })
                .attr("y",-10)
                .attr("dy",10)
                .attr("width","50")
                .attr("height","20")
                .on("click", this.clicktext)
                .text(function(d){
                    return d.data.name;
                })
                .style("font-size","14px");

            let nodeUpdate = nodeEnter.merge(node)
                .transition()
                .duration(this.duration)
                .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
 
 
            // *************************** Links section *************************** //
            // 更新链接
            let link = container.selectAll('path.link')
                .data(this.links, d => { return d.id })
            
            // 在父级之前的位置输入任何新链接
            let linkEnter = link.enter().insert("path", "g")
                .attr("class", "link")
                .attr("d", d => {
                    let o = {x: source.x0, y: source.y0};
                    return this.diagonal(o, o)
                })
                .attr("fill", 'none')
                .attr("stroke-width", 1)
                .attr('stroke', '#ccc')
            // 过渡链接到他们的新位置
            let linkUpdate = linkEnter.merge(link)
            linkUpdate.transition()
                .duration(this.duration)
                .attr('d', d => { return this.diagonal(d, d.parent) })
 
        },
        /** 
         * @description 控制画布放大或缩小
         */
        zoomed () {
            d3.select(this.$el).select('g.container').attr('transform', d3.event.transform)
        }
	},
	created() {
        this.id = this.uuid()
    },
    mounted () {
        //创建svg画布
        this.width = document.getElementById(this.id).clientWidth
        this.height = document.getElementById(this.id).clientHeight
        const svg = d3.select(this.$el).select('svg.d3-tree')
            .attr('width', this.width)
            .attr('height', this.height)
        const transform = d3.zoomIdentity.translate(this.margin.left, this.margin.top).scale(1)    
        const container = svg.select('g.container')
        // 初始化缩放行为，它既是对象又是函数
        this.zoom = d3.zoom()
            .scaleExtent([1 / 2, 8])
            .on('zoom', this.zoomed)
        container.transition().duration(750).call(this.zoom.transform, transform)
        //svg.call(this.zoom) 可随意移动树的位置
        this.root = this.getRoot()
        this.update(this.root)
    },
    computed: {
        treemap () {
            return d3.tree().size([this.height, this.width])
        }
    }

}

</script>

<style lang='stylus'>
	.down{
		border: 1px solid rgb(196, 196, 196);
		width: 822px;
		height: 387px;
		margin-top: 24px;
		background-color:rgb(255, 255, 255);
		
	}
	.p_title
		width:48px;
		height:20px;
		font-size:14px;
		font-family:PingFangSC-Regular;
		font-weight:400;
		color:rgba(45,100,119,1);
		line-height:20px;
		margin: 30px 640px 0px 134px;

	.tree-container 
		width: 100%;
		height: 320px;

	.d3-tree 
		.node foreignObject 
			font: 14px sans-serif;
			color #fff;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			&:hover
				overflow: visible;
</style>

结语

初接触前端vue.js，有问题还请多多指出。
一点儿心得…遇到问题没关系，只要不放弃，总能解决…

博博博啊
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于vue+node.js+mysql的网站商城
06-01
所用技术：vue全家桶、vueRouter、Element UI、Axios、js、Node.js、Express、Mysql 实现功能：首页轮播图、商品展示、购物车、留言评论、收藏、新闻公告、注册登录、后台管理等
beetle:Vue.js + Node.js + MySQL实现校园二手交易网
03-05
甲虫前端基础架构 ＃工作/甲虫 必读 技术选型 JavaScript框架：Vue（^ 2.6.10） 状态管理工具：Vuex（^ 3.0.1） 路由：Vue路由器（^ 3.1.3） UI库：element-ui（^ 2.15.1） CSS预处理器：SCSS 主要第三方库 工具库：vue-cookies HTTP库：axios CSS重置：reset-css 环境依赖 脚手架：Vue CLI（^ v4.0.5） Node.js：推荐使用10.x以上LTS版本 包管理器：Yarn（^ 1.19.1），使用Yarn锁定包版本，不要随意升级项目依赖的包版本 初步接口 文件夹名字为server 安装依赖npm i 可联系查看 进入目录代码目录，运行节点索引。接口：// localhost：10001 为什么选择yarn而不是npm？ 是npm一直都在改进这些缺陷，但是在实际的开发过程中发
基于Vue.js和D3.js的智能停车可视化系统
欢迎来到“Python算法探索”，我是GT算法工程师，一名热爱计算机算法的博主。在这里，我们将一起深入探索Python世界中的各种算法，从基础到高级，从理论到实践。我参加过很多算法比赛，积累了丰富的经验，希望通过这个播客与你分享。让我们一起用Python探
03-20 998
本文将介绍如何使用Vue.js和D3.js构建一个智能停车可视化系统，帮助用户快速了解停车场的车位情况。
vue-d3-demo:使用Vue.js + D3.js绘制图形的演示
05-17
d3-demo 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run all tests npm test 有关工作原理的详细说明，请查看的和。
vue-min-chat:vue.js + Element UI + node.js + socket.io + mysql 实现在线聊天室
05-06
vue-min-chat vue.js + Element UI + node.js + socket.io + mysql 实现在线聊天系统 附上截图 支持钉钉机器人群聊通知 Github 演示地址 联系方式 :e-mail: 电子邮件： :triangular_flag: 个人博客： :penguin: QQ交流群：
d3-org-tree:使用d3.js v5构建的高度可定制的组织树
03-08
期货 d3-org-tree是使用d3.js v5构建的高度可定制的树，可以在现代浏览器（例如Chrome ， Edge ， Firefox和Safari 。 除d3.js外，它没有任何第三方依赖性。 某些d3-org-tree功能： 自定义节点样式，包括svg和通过template纯HTML dom 自定义节点行为，包括expand子节点， add子节点并delete它 自定义当前节点的highlight样式，并可以手动更改当前节点 预设或动态更改布局orientation ，链接样式以及是否display arrows 预设svg容器的width/height和内容的边距偏移 预设变换动画的duration 在节点click上自定义回调函数， add和remove事件 演示版 正在安装 npm i d3-org-tree 用法 import OrgTree from "d3-
Vue.D3.tree D3.jsVue.D3.tree-基于D3.js的树视图-Vue.js开发
05-27
Vue.D3.tree Vue组件可基于D3.js布局显示图形。 Tree Live演示https://david-desmaisons.github.io/Vue.D3.tree/tree用法 从'vued3tree'导入{tree}导出默认{组件：{树}，data（）{返回{树：{名称：“父亲”，子代：[{名称：“ son1”，子代：[{名称：“孙子“}，{name：” grandson2“}]}，{nam
vue d3 svg tree树状图
czy279470138的博客
03-22 4080
用的是d3.v3 版本 展示没有问题，细节有问题。 采用的是自己的json，调接口的没有总结，太麻烦了。 下面地址是原声的，支持提示框可复制文字，并且节点之间不会重叠，tree.size 改成 tree.nodeSize 即可 https://blog.csdn.net/czy279470138/article/details/88419831 <style> ...
D3.js的V5版本-Vue框架中使用-树状图
hsany330的专栏
06-09 1045
一. api简介 d3.tree()，创建一个树状图生成器 d3.tree().size()，定义树的大小 d3.hierarchy()，层级布局，需要和tree生成器一起使用，来得到绘制树所需要的节点数据和边数据 node.descendants()得到所有的节点，已经经过转换的数据 node.links()，得到所有的边，已经经过转换的数据 二.Vue中使用 *点击节点可展开收缩 <template lang='pug'> div.tree-contain...
基于vue的组织架构树组件_Vue组件基于D3.js布局显示树
cuk5239的博客
07-25 1186
基于vue的组织架构树组件 Vue.D3.tree (Vue.D3.tree) Update documentationVue components to display graphics based on D3.js layout. 更新documentationVue组件以显示基于D3.js布局的图形。 树 (Tree) 用法 (Usage) <tree :data="tre...
vued3treeVUE实现自定义节点的树结构
08-09
vued3treeVUE实现自定义节点的树结构
vue.js + leaflet.js + 商城各楼层平面地图展示
05-30
基于 vue + leaflet 的 商城楼层平面图展示 ，商城内部个区域分割且实现点击，支持自定义GeoJSON 文件 ，适用于有一定前端基础的人员。
探索Vue.D3.tree：构建动态数据可视化的新工具
最新发布
gitblog_00036的博客
04-11 251
探索Vue.D3.tree：构建动态数据可视化的新工具 项目地址:https://gitcode.com/David-Desmaisons/Vue.D3.tree Vue.D3.tree 是一个强大的开源项目，它将流行的前端框架Vue.js与数据可视化库D3.js结合，提供了创建交互式树状图的强大功能。这个项目旨在简化复杂的数据结构展示，让开发者能够更轻松地构建出富有吸引力且易于理解的界面。 项目...
Vue + vue-d3 实现族谱图的简单示例
taotaobaobei的博客
02-09 1093
chatGPT写的代码，不知道对不对，前端大佬验证一下
vue+D3 层次树图绘制
DoKiDoK的博客
05-16 398
【代码】vue+D3 层次树图绘制。
d3 tree 实现双向动画树总结
japlus的博客
03-02 1603
使用d3.js 实现双向tree，并实现节点展开收起动画。使用svg 绘制。
D3最新版本实现组织型tree结构，包含拖拽、缩放、平移、折叠、异步加载节点自定义渲染等功能
qq_44621394的博客
08-04 1508
import { PureComponent } from 'react' import { D3 } from "@weapp/ui" let d3: any = null; //辅助函数: 递归获取tree的节点数量 function getCount(parent: any) { var count = 0; if (Array.isArray(parent.children)) { count += parent.children.length; parent.chil..
【Vue3+D3】基于Vue3+D3的数据可视化
weixin_45939929的博客
05-08 5733
使用Vue+D3绘制直方图、饼图。
d3.js Tree
weixin_51045106的博客
02-23 1503
一、功能： 1.增加节点 2.删除节点 3.上下移动节点 4.保存 5.画布可放大缩小 6.单击节点选中，双击节点折叠 二、知识点： 1.D3.js（官网：D3.js - Data-Driven Documents）（我是小白） echarts和D3的作用相似，那他们有什么不同之处呢？我觉得他们之间最大的不同之处就在于echarts它是使用canvas来绘制图形的，而D3是通过Svg来绘制图形的。这两者的不同之处在于，svg可以操作...
vue.js+element ui+node.js+socket.io+mysql
05-15
Vue.js 是一种现代的JavaScript框架，用于构建向响应式Web应用程序。它的核心思想是将大型应用程序分割成更小的,可重用的组件。 Element UI 是Vue.js的一个组件框架，提供了许多可轻松集成到Vue.js应用程序中，并对HTML和CSS进行了巧妙组合的组件。 Node.js 是JavaScript运行时环境，使得开发人员可以在服务器端使用JavaScript编写代码。它是一种轻量级的技术堆栈和可扩展Web服务器， 由于它非阻塞的特性，具有高并发性能。 Socket.io 是WebSocket库，它使得客户端和服务器之间可以实时交互数据，而不必等待HTTP的请求和响应的时间延迟时间，从而实现了实时的双向通信。 MySQL 是一个关系型数据库管理系统，是全球最流行的开源数据存储，用于存储和管理数据。 这些技术的组合可以用于构建高性能，实时响应，具有良好用户体验的Web应用程序。 例如，可以使用Vue.js和Element UI开发具有漂亮的前端设计的应用程序，使用不阻塞I/O的特性和事件驱动的架构，Node.js可以实现高效的后端服务。而MySQL数据库可以处理数据存储和检索。通过与Socket.io集成，可以实现实时交互和数据推送，增强应用程序的实时性。因此可以看到，Vue.js, Element UI， Node.js, Socket.io和MySQL 这些技术的组合，是构建响应式，高性能，可扩展Web应用程序之所需技术栈。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值