【可视化大屏开发】1.基础开发环境准备

pblh123

已于 2023-07-02 14:29:00 修改

阅读量6.8k

点赞数 22

CC 4.0 BY-SA版权

分类专栏：可视化大屏文章标签： npm javascript 大屏端扩展屏应用开发 mysql

于 2023-06-09 17:32:55 首次发布

本文链接：https://blog.csdn.net/pblh123/article/details/131131439

可视化大屏专栏收录该内容

18 篇文章

订阅专栏

该文指导如何在IDEA中配置开发环境，包括安装node.js，设置NPM全局路径，使用cnpm，升级npm，配置LESS文件保存后自动生成CSS。接着，通过SpringInitializr创建SpringBoot项目，安装px2rem和FileWatchers插件，配置数据库连接，并提供了相关博客链接作为大屏开发的参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发环境准备——在idea中将less自动转化为css

一、安装node.js

在网盘中找到 node-v18.12.1-x64.msi 文件，点击安装

网盘地址：

链接：https://pan.baidu.com/s/12yfzZbfiUXdd9dAqxHSttg?pwd=u57r

提取码：u57r

在cmd中检测代码是否安装成功

node -v

npm -v

![[Pasted image 20230212114259.png]]

二、配置NPM

npm config set prefix "D:\JavaProjects\nodejs\node_globals" //配置全局模块存放路径

npm config set cache "D:\JavaProjects\nodejs\node_cache"   //cache路径

npm config get prefix //查看全局模块路径

npm config get cache  //查看cache路径

![[Pasted image 20230212114610.png]]

在cmd窗口安装cnpm
npm install -g cnpm -registry=https://registry.npm.taobao.org

在这里插入图片描述

升级npm到目前最新的9.4.2

npm install -g npm@9.4.2 -registry=https://registry.npm.taobao.org

![[Pasted image 20230212115016.png]]

三、实现less文件保存后自动生成css文件

新开cmd进入node全局路径后执行一下命令

cnpm i less -g

在这里插入图片描述

注意需要使用cmd命令行操作，使用powershell无法正常运行

四、 IDEA创建新建项目

通过idea新建项目
在这里插入图片描述

或者新打开idea开始新建一个项目
在这里插入图片描述

完成第一个bigdata2023项目创建
在这里插入图片描述

新建view模块
在这里插入图片描述

选择Spring Initializr

在这里插入图片描述

修改相应module配置
https://start.aliyun.com
在这里插入图片描述

Module的SpringBoot版本和依赖选择

在这里插入图片描述

确定最终需要添加的依赖
在这里插入图片描述
module创建后

配置maven

五、安装插件

一、需求

安装px2rem插件
File Wathchers插件

二、实现步骤

安装px2rem
安装File Watchers插件
重启idea
配置less文件自动生成css文件

修改为

将less的作用域改为全局

在这里插入图片描述

在application.properties 文件中【view模块中resources中】，加入数据库连接，备用

spring.datasource.driver-class-name= com.mysql.cj.jdbc.Driver

spring.datasource.url= jdbc:mysql://"你的MySQL所在服务器IP":3306/bigdata_db?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8

spring.datasource.username = 用户名
spring.datasource.password = 密码

在这里插入图片描述