数据可视化——JavaScript实现与MySql连接

已于 2023-06-08 13:52:05 修改
阅读量5k 收藏 50
点赞数 5
文章标签： 数据可视化 jdbc javascript
于 2021-05-26 11:27:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46744761/article/details/117282600
版权

JavaScript连接MySql数据库中的六级单词数据并进行可视化


注意：要事先安装tomcat以及相应版本的mysql-connector-java的jar包，将jar移动到lib文件中

数据库数据如下

在这里插入图片描述
可视化代码：

<!DOCTYPE html>
<body>
<div id="wc"></div>
<%@ page contentType="text/html; charset=UTF-8" %> 
<%@ page language="java" %> 
<%@ page import="com.mysql.jdbc.Driver" %> 
<%@ page import="java.sql.*" %> 
<% 
                        out.print("<center><h1><font color=blue>Matrix Word Cloud English Learning</h1></center>"); 
						
						String driverName="com.mysql.jdbc.Driver"; 
						
						String userName="root"; 
						
						String userPasswd="123456"; 
						
						String dbName="flask"; 
						
						String tableName="map_enword"; 

						int count[]=new int[26];
						
						Class.forName("com.mysql.jdbc.Driver").newInstance(); 
						Connection connection=DriverManager.getConnection("jdbc:mysql://localhost:3306/"+dbName+"?serverTimezone=GMT%2B8","root","你的密码"); 
						Statement statement = connection.createStatement(); 

						for(int i=0;i<26;i++){
							int aa=Integer.valueOf('a')+i;
							char cha = (char) aa;
							
							String sql="SELECT * FROM "+tableName+" where english like '"+cha+"%' "+"order by english"; 
							ResultSet rs = statement.executeQuery(sql);  
							
							String str;
							int j=0;
							while(rs.next()) { 
								str=(rs.getString(2)).substring(0,1);
								//out.print(str+" "); 
								j++;
							}
							count[i]=j;							
							//out.print(" "+count[i]+" <br>"); 
							rs.close();
						}
						statement.close(); 
						connection.close(); 
%>
<script src="d3.v3.min.js"></script>
		<script>
			var w=window.innerWidth
			|| document.documentElement.clientWidth
			|| document.body.clientWidth;

			var h=window.innerHeight
			|| document.documentElement.clientHeight
			|| document.body.clientHeight;
			w=w*0.98;
			h=h*2.3;
			var color=d3.scale.category10();
			
			var dataset=new Array(26);
			var name=new Array(26);
			var name1=new Array(26);
			<% for (int i=0;i<26;i++){ %>
				dataset[<%=i%>]="<%=count[i]%>";
			<% } %>
			
			name1=["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
			var name=name1.join('');
			
			var ww=w/dataset.length;
			var svg=d3.select("body")
					.append("svg")
					.attr("width",w)
					.attr("height",h);
			var rect=svg.selectAll("rect")
						.data(dataset)
						.enter()
						.append("rect")
						.attr("x",function(d,i){return i*w/dataset.length})
						.attr("y",function(d){return h-d*0.6-90})
						.attr("width",ww*0.95)
						.attr("height",function(d){return d*0.6})
						.attr("fill",function(d,i){return color(i)});
			var value=svg.selectAll("text.value")
						.data(dataset)
						.enter()
						.append("text")
						.attr("x",function(d,i){return i*w/dataset.length})
						.attr("y",function(d){return h-d*0.6-90})
						.text(function(d){return d})
						.attr("dx",ww/2)
						.attr("dy","-1em")
						.attr("text-anchor","middle")
						.attr("fill",function(d,i){return color(i)});
			var title=svg.selectAll("text.title")
						.data(name)
						.enter()
						.append("text")
						.attr("x",function(d,i){return i*w/name.length})
						.attr("y",function(d){return h-60})
						.text(function(d){return d})
						.attr("dx",ww/2)
						.attr("dy","-lem")
						.attr("text-anchor","middle")
						.attr("fill",function(d,i){return color(i)});

			//饼图
/*			var pie=d3.layout.pie()
			.value(function(d){return d;});
            var piedata=pie(dataset);
            var arc=d3.svg.arc()
                            .innerRadius(100)
                            .outerRadius(300)
            svg.selectAll("path")
                .data(piedata)
                .enter()
                .append("path")
                .attr("d",function(d){
                    return arc(d)
                })
                .attr("fill",function(d,i){return color(i);})
                .attr("transform","translate("+w/2+","+(h/2-400)+")");				
*/
var dataset2 =new Array();
		for(var i=0;i<26;i++){
			dataset2[i]=new Array(); 
			for(var j=0;j<2;j++){
				dataset2[i][j]=1;
			}
		}

		var datas=["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];

		dataset2[0][0]='a';		dataset2[1][0]='b';		dataset2[2][0]='c';		dataset2[3][0]='d';		dataset2[4][0]='e';		dataset2[5][0]='f';
		dataset2[6][0]='g';		dataset2[7][0]='h';		dataset2[8][0]='i';		dataset2[9][0]='j';		dataset2[10][0]='k';	dataset2[11][0]='l';
		dataset2[12][0]='m';	dataset2[13][0]='n';	dataset2[14][0]='o';	dataset2[15][0]='p';	dataset2[16][0]='q';	dataset2[17][0]='r';
		dataset2[18][0]='s';	dataset2[19][0]='t';	dataset2[20][0]='u';	dataset2[21][0]='v';	dataset2[22][0]='w';	dataset2[23][0]='x';
		dataset2[24][0]='y';	dataset2[25][0]='z';
		<%for(int i=0;i <count.length;i++){%>dataset2[<%=i%>][1]=" <%=count[i]%> ";<%}%>

		var pie = d3.layout.pie()
			.value(function (d) { return d[1]; });

		innerRadius=30
		var arcPath=d3.svg.arc()
			.innerRadius(innerRadius)
			.outerRadius(function (d) {
			var value=d.value;
			return value*0.6+ innerRadius;});		

		var piedata = pie(dataset2);

		var arcs=svg.selectAll("path")
			.data(piedata).enter()
			.append("path")
			.attr("d", function (d) { return arcPath(d); })
			.attr("fill", function(d,i){return color(i);})
			.attr("transform", "translate("+ w / 2 + "," + h / 3 +")");


		arcs.append("path")
			.attr("fill",function(d,i){
			return color(i);})
			.attr("d",arcPath)

		var rect=svg.selectAll("rect")
			.data(dataset2)
			.enter()
			.append("rect")
			.attr("x",function(d,i){return i*w/dataset2.length})
			.attr("y",function(d){return h-d[1]-30})
			.attr("width",ww*0.95)
			.attr("height",function(d){return d[1]})
			.attr("fill",function(d,i){return color(i)});
		
		bar1 = svg.append("g").attr("class", "bar1");

		bar1.selectAll("text")
			.data(piedata)
			.enter()
			.append("text")
			.attr("fill","white")
			.attr("transform",function(d){
		var x=arcPath.centroid(d)[0];
		var y=arcPath.centroid(d)[1];
		return "translate("+(w/2+x)+","+(y+h/3)+")";})
			.attr("text-anchor","middle")
			.attr("font-size",function(d){
			return d.data[1]*0.05+"px";})
			.text(function(d){return d.data[0]});
		</script>
</body>

可视化结果如下：
统计单词库中单词的个数以及比例

JavaScript连接MySql数据库中的疫苗接种情况数据并进行可视化


疫苗接种百分比（前二十）数据
疫苗接种百分比（前二十）数据
每一百人疫苗接种次数数据
每一百人疫苗接种次数
疫苗接种百分比（前二十）和每一百人疫苗接种次数的数据
在这里插入图片描述
可视化代码： 

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
</head>
<body>
<div id="wc"></div>
<%@ page contentType="text/html; charset=UTF-8" %> 
<%@ page language="java" %> 
<%@ page import="com.mysql.jdbc.Driver" %> 
<%@ page import="java.sql.*" %> 
<% 
                        //out.print("<center><h1><font color=black>疫苗接种人数</h1></center>");
						
						String driverName="com.mysql.jdbc.Driver"; 
						
						String userName="root"; 
						
						String userPasswd="54.wfy"; 
						
						String dbName="yimiao"; 
						
						String tableName1="renshu"; 

						String tableName2="baifenbi"; 

						String tableName3="douyou";

                        String country1[]=new String[25];

						double data1[]=new double[25];

						String country2[]=new String[25];

						double data2[]=new double[25];

						String country3[]=new String[25];

						double data31[]=new double[25];

						double data32[]=new double[25];
						
						Class.forName("com.mysql.jdbc.Driver").newInstance(); 
						Connection connection=DriverManager.getConnection("jdbc:mysql://localhost:3306/"+dbName+"?serverTimezone=GMT%2B8","root","54.wfy"); 
						Statement statement = connection.createStatement(); 					
						
						for(int i=1;i < 21;i++){
							String sql="SELECT * FROM "+tableName1+" where id='"+i+"'";
							String str=" ";
							double per=1;

							ResultSet rs = statement.executeQuery(sql); 
							while(rs.next()){
								str=rs.getString(2);
								
								per=rs.getDouble(3);
							}
							country1[i-1]=str;
							data1[i-1]=per;
							//out.print(country[i-1]+" ");
							//out.print(data[i-1]);
							rs.close();
						}

						for(int i=1;i < 21;i++){
							String sql="SELECT * FROM "+tableName2+" where id='"+i+"'";
							String str=" ";
							double per=1;

							ResultSet rs = statement.executeQuery(sql); 
							while(rs.next()){
								str=rs.getString(2);
								
								per=rs.getDouble(3);
							}
							country2[i-1]=str;
							data2[i-1]=per;
							//out.print(country[i-1]+" ");
							//out.print(data[i-1]);
							rs.close();
						}

						for(int i=1;i < 17;i++){
							String sql="SELECT * FROM "+tableName3+" where id='"+i+"'";
							String str=" ";
							double per1=1;
							double per2=1;

							ResultSet rs = statement.executeQuery(sql); 
							while(rs.next()){
								str=rs.getString(2);
								
								per1=rs.getDouble(3);
								per2=rs.getDouble(4);
							}
							country3[i-1]=str;
							data31[i-1]=per1;
							data32[i-1]=per2;
							//out.print(country[i-1]+" ");
							//out.print(data[i-1]);
							rs.close();
						}

						statement.close(); 
						connection.close(); 
%>
<div style="position: absolute; bottom: 2150px; right: 365px;"><font size="8"><strong>COVID-19疫苗接种人数(单位：百万)</strong></font></div>
<div style="position: absolute; bottom: 1400px; right: 340px;"><font size="8"><strong>COVID-19疫苗接种人次(单位：次/百人)</strong></font></div>
<div style="position: absolute; bottom: 680px; right: 340px;"><font size="8"><strong>COVID-19疫苗接种人数与人次对比</strong></font></div>
<div style="position: absolute; bottom: 2100px; right: 365px;"><font size="2"><strong>数据来源：Our World in Data</strong></font></div>
<script src="d3.v3.min.js"></script>
		<script>
			var width=window.innerWidth
			|| document.documentElement.clientWidth
			|| document.body.clientWidth;

			var height=window.innerHeight
			|| document.documentElement.clientHeight
			|| document.body.clientHeight;
			w=width*0.98;
			h=height*3;
			var color=d3.scale.category10();
			
			var dataset1=new Array(20);

			var country1=new Array(20);

			var dataset2=new Array(20);

			var country2=new Array(20);

			var dataset31=new Array(16);

			var dataset32=new Array(16);

			var country3=new Array(16);

			<% for (int i=0;i<20;i++){ %>
				dataset1[<%=i%>]= "<%=data1[i]%>";
				country1[<%=i%>]= "<%=country1[i]%>";
			<% } %>

			<% for (int i=0;i<20;i++){ %>
				dataset2[<%=i%>]= "<%=data2[i]%>";
				country2[<%=i%>]= "<%=country2[i]%>";
			<% } %>

			<% for (int i=0;i<16;i++){ %>
				dataset31[<%=i%>]= "<%=data31[i]%>";
				dataset32[<%=i%>]= "<%=data32[i]%>";
				country3[<%=i%>]= "<%=country3[i]%>";
			<% } %>

			var w1=w/dataset1.length;
			var svg=d3.select("body")
					.append("svg")
					.attr("width",w)
					.attr("height",h);
			var rect=svg.selectAll("rect1")
						.data(dataset1)
						.enter()
						.append("rect")
						.attr("x",function(d,i){return i*w/dataset1.length})
						.attr("y",function(d){return h-2*height-d*3-80})
						.attr("width",w1*0.95)
						.attr("height",function(d){return d*3})
						.attr("fill",function(d,i){return color(i)});

			var value=svg.selectAll("text.value1")
						.data(dataset1)
						.enter()
						.append("text")
						.attr("x",function(d,i){return i*w/dataset1.length})
						.attr("y",function(d){return h-2*height-d*3-80})
						.text(function(d){return d})
						.attr("dx",w1/2)
						.attr("dy","-1em")
						.attr("text-anchor","middle")
						.attr("fill",function(d,i){return color(i)});
			svg.selectAll("text.title1")
                .data(country1)
                .enter()
                .append("text")
                .attr("font-size","13px")
                .attr("x",function(d,i){
                    return (w/dataset1.length)*i;
                })
                .attr("y",h-2*height-70)
                .attr("dx",(w/dataset1.length)/2-35)
                .attr("dy","13px")
                .text(function(d){
                    return d;
                })
				.attr("fill",function(d,i){return color(i)});

			var w2=w/dataset2.length;
			var rect=svg.selectAll("rect2")
						.data(dataset2)
						.enter()
						.append("rect")
						.attr("x",function(d,i){return i*w/dataset2.length})
						.attr("y",function(d){return h-height-d*3-80})
						.attr("width",w2*0.95)
						.attr("height",function(d){return d*3})
						.attr("fill",function(d,i){return color(i)});
			var value=svg.selectAll("text.value2")
						.data(dataset2)
						.enter()
						.append("text")
						.attr("x",function(d,i){return i*w/dataset2.length})
						.attr("y",function(d){return h-height-d*3-80})
						.text(function(d){return d})
						.attr("dx",w2/2)
						.attr("dy","-1em")
						.attr("text-anchor","middle")
						.attr("fill",function(d,i){return color(i)});
			svg.selectAll("text.title2")
                .data(country2)
                .enter()
                .append("text")
                .attr("font-size","13px")
                .attr("x",function(d,i){
                    return (w/dataset2.length)*i;
                })
                .attr("y",h-height-70)
                .attr("dx",(w/dataset2.length)/2-35)
                .attr("dy","13px")
                .text(function(d){
                    return d;
                })
				.attr("fill",function(d,i){return color(i)});


			var w3=w/dataset31.length;
			var rect=svg.selectAll("rect31")
						.data(dataset31)
						.enter()
						.append("rect")
						.attr("x",function(d,i){return i*w/dataset31.length+4;})
						.attr("y",function(d){return h-d*3-80})
						.attr("width",w3*0.4)
						.attr("height",function(d){return d*3})
						.attr("fill",function(d,i){return color(i)});
			var value=svg.selectAll("text.value31")
						.data(dataset31)
						.enter()
						.append("text")
						.attr("x",function(d,i){return i*w/dataset31.length-w3/2+20;})
						.attr("y",function(d){return h-d*3-80})
						.text(function(d){return d})
						.attr("dx",w3/2)
						.attr("dy","-1em")
						.attr("text-anchor","middle")
						.attr("fill",function(d,i){return color(i)});
			var rect=svg.selectAll("rect32")
						.data(dataset32)
						.enter()
						.append("rect")
						.attr("x",function(d,i){return i*w/dataset32.length+w3/2-4;})
						.attr("y",function(d){return h-d*3-80})
						.attr("width",w3*0.4)
						.attr("height",function(d){return d*3})
						.attr("fill",function(d,i){return color(i)});
			var value=svg.selectAll("text.value32")
						.data(dataset32)
						.enter()
						.append("text")
						.attr("x",function(d,i){return i*w/dataset32.length+w3/2-30;})
						.attr("y",function(d){return h-d*3-80})
						.text(function(d){return d})
						.attr("dx",w3/2)
						.attr("dy","-1em")
						.attr("text-anchor","middle")
						.attr("fill",function(d,i){return color(i)});
			
			svg.selectAll("text.title3")
                .data(country3)
                .enter()
                .append("text")
                .attr("font-size","13px")
                .attr("x",function(d,i){
                    return (w/dataset31.length)*i;
                })
                .attr("y",h-70)
                .attr("dx",(w/dataset31.length)/2-25)
                .attr("dy","13px")
                .text(function(d){
                    return d;
                })
				.attr("fill",function(d,i){return color(i)});
		</script>
</body>

可视化结果：
在这里插入图片描述

Dusk-
关注
  • 5
    点赞
  • 踩
  • 50
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JS直接访问数据Mysql
11-26
javascript脚本直接访问MySQL数据库
搭建node服务（二）：操作MySQL
liu_lin_sp的博客
06-03 376
为了进行复杂信息的存储和查询，服务端系统往往需要数据库操作。数据库分为关系型数据库和非关系型数据库，关系型数据库有MySQL、Oracle、SQL Server等，非关系型数据库有Redis（常用来做缓存）、MongoDB等。MySQL是目前很流行的数据库，本文将要介绍如何在node服务中进行MySQL数据库操作。 一、安装依赖 npm install mysql --save 或者 yarn add mysql 二、建立连接 要想进行数据库操作就需要和数据库建立连接，然后通过连接进行数.
MySQL.js - 一个简单、高效、可靠的MySQL客户端库
gitblog_00009的博客
03-10 329
MySQL.js - 一个简单、高效、可靠的MySQL客户端库 MySQL.js 是一个轻量级的 JavaScript 库，用于在 Node.js 中与 MySQL 数据库进行交互。它提供了一种易于使用的 API，使得开发人员可以轻松地执行 SQL 查询并处理结果。 项目简介 MySQL.js 提供了全面的功能集，包括连接管理、查询构建、错误处理等。它的设计目标是为 Node.js 开发者提供一个...
javascript 操作mysql数据库
如果相遇，那么你好哦~
11-09 3268
javascript 操作mysql数据库
marketanalyzer:休闲市场冒险工具
07-13
市场分析仪 休闲市场冒险工具 代码又脏又乱——这会得到解决。 我把它拖进班级，把东西稍微分开。 如果您想一起玩，请将代码签出到您可以使用 Web 浏览器访问的文件夹中。 之后安装 mysql 并导入 .sql 文件。 这包括创建和命名新数据库“abbastoons_stock”。 如果你不喜欢这个名字，你可以很容易地重命名它，只需通过 db connect 函数调整核心类文件中的名称 这应该能让你振作起来。 分析有一些基本功能，可以显示当前天的活动和前 6 天的活动范围。 您可以获得更多天数，包括移动平均线、为数据实施可视化图表、添加其他指标等 目标是为机器人提供一个很好的工具，我们可以使用它来模拟交易。 该机器人将使用“可插入策略”构建，因此我们可以定义多种策略或交易算法，并将它们切入和切出或让它们相互竞争以进行性能评估。 雅虎 csv api 的谷歌代码上有一个不错的 rep
数据可视化实战【mysql+pyecharts+web】
weixin_53144783的博客
05-10 2512
本次文章记录数据可视化第一次实战
js连接mysql的使用方法
m0_67393413的博客
08-18 3265
从指定的索引值位置开始，查询执行的长度的数据；insert into table (字段名,…) values (字段值,…select * from table where 字段名 like ‘%值’;select * from table where 字段名 like ‘_值’;update table set 字段名=新的字段值 where 条件。npm install mysql (在当前项目下安装mysql包)insert into table values (字段值, …...
Javascript连接数据库并查询和插入数据
热门推荐
weixin_46441425的博客
03-03 1万+
JavaScript借助node来连接数据库
如何使用js链接数据库查询内容
weixin_42577735的博客
01-02 815
首先, 你需要在服务器端使用一种语言(例如: PHP, Python, Ruby, Java)来连接数据库, 并执行 SQL 查询. 然后你可以使用 AJAX 技术在前端 JavaScript 中调用这个服务器端脚本, 从而获取数据库查询的结果. 下面是一个简单的例子: 首先, 假设你的服务器上有一个叫做 "query.php" 的脚本, 它可以执行数据库查询并返回结果: <?php $db...
(Node) JavaScript连接MySQL
cuber-lotus的博客
02-21 3284
文章目录MySQL结构建立项目分析代码完整代码创建连接执行SQL关闭连接END MySQL结构 SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0; -- ---------------------------- -- Table structure for person -- ---------------------------- DROP TABLE IF EXISTS `person`; CREATE TABLE `person` ( `id` in
java项目第3期SpringBoot的OA办公系统
12-24
freemarker模板引擎，Bootstrap前端UI框架，JQuery快速的javascript框架，Kindeditor是HTML可视化编辑器，My97DatePicker时间选择器。 3.后端 SpringBoot框架，JPA，MyBatis，fastjson，pageHelper 4.部署流程： ...
JAVA上百实例源码以及开源项目源代码
09-17
　Java实现的FTP连接与数据浏览程序，实现实例化可操作的窗口。 　部分源代码摘录： 　ftpClient = new FtpClient(); //实例化FtpClient对象 　String serverAddr=jtfServer.getText(); //得到服务器地址 　...
asp.net知识库
06-18
asp.net 2.0下嵌套masterpage页的可视化编辑 C# 2.0与泛型 动态调用对象的属性和方法——性能和灵活性兼备的方法 泛型技巧系列：用泛型打造可复用的抽象工厂 泛型技巧系列：如何提供类型参数之间的转换 .NET 2.0 ...
java源码包---java 源码 大量 实例
04-18
　Java实现的FTP连接与数据浏览程序，实现实例化可操作的窗口。 　部分源代码摘录： 　ftpClient = new FtpClient(); //实例化FtpClient对象 　String serverAddr=jtfServer.getText(); //得到服务器地址 　...
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 622
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1060
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 358
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
用Typescript写自动化工作流
最新发布
联蔚盘云的博客
04-29 746
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
js连接数据库实现注册登录
08-12
JS连接数据库实现注册登录的基本步骤如下： 1. 创建数据库和表：首先需要在数据库中创建一个表，用于存储用户的注册信息，例如用户名、密码等。 2. 连接数据库：使用JS的数据库连接插件或API，如MySQL、MongoDB等，通过提供的连接函数连接到数据库。 3. 注册功能实现：在注册页面中，获取用户输入的信息，通过JS将数据传递到后台，后台将数据插入到数据库的用户表中。 4. 登录功能实现：在登录页面中，获取用户输入的用户名和密码，通过JS将数据传递到后台，后台通过查询数据库中的用户表，判断输入的用户名和密码是否匹配，将结果返回给前端。 5. 前端交互：根据后台返回的结果，通过JS对用户进行提示，例如注册成功，登录失败等，并根据需要进行页面的跳转或其他操作。 需要注意的是，连接数据库需要后端的支持，前端的主要任务是与后端进行数据交互和页面渲染。因此，实现注册登录功能需要前端和后端的协作，前端负责数据的收集和展示，后端负责数据的处理和存储。 以上是一个简单的JS连接数据库实现注册登录的基本流程，具体实现过程可能会因为不同的数据库和技术栈而有所差异，但基本思路是一致的。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值