前后端分离项目环境搭建
1. 使用到的技术和工具
-
springboot + vue项目的搭建
-
工具
- idea,maven
- nodejs
2. 后端框架搭建
利用maven创建springboot项目
3. 前端项目搭建
1. 安装相关工具
- nodejs:
- 一个开源、跨平台的 JavaScript 运行时环境,可以理解成java当中需要安装的jdk;
- 官网:https://nodejs.org/en
- npm
- JavaScript依赖包管理工具,全世界都可以用它来共享javascript包,负责前端项目的打包,插件下载等,可以理解成java中的maven
- 官网:https://www.npmjs.com/
- vite
- 快速构建前端Vue项目的脚手架,可以理解为开发Spring Boot的Spring Initializr快速构建工具
- 官网:https://cn.vitejs.dev/
1. 安装node.js
-
下载:https://nodejs.org/en/download
-
安装:解压即完成安装(.zip版本)
-
在安装目录下(node.exe所在的目录)创建以下俩个文件夹
- node_global (依赖库)
- node_cache (缓存)
-
在安装目录下cmd进入dos窗口,执行
-
npm config set prefix “E:\worktool\node\node_global” 【这里的路径要改为自己的文件路径】
-
npm config set cache “E:\worktool\node\node_cache” 【这里的路径要改为自己的文件路径】
-
-
可以查一下,看看有没有设置成功:
- npm config get prefix
- npm config get cache
-
配置环境变量
- 在path中添加 nodejs的安装路径 和 node_global文件夹所在的路径。如:
- E:\worktool\node
- E:\worktool\node\node_global
- 在任意目录打开dos窗口进行测试:
- node -v
- npm -v
- 在path中添加 nodejs的安装路径 和 node_global文件夹所在的路径。如:
2. 安装 npm
-
新版的Node.js已经自带npm,安装Node.js时就已经安装npm,所以不需要再安装npm,只需要配置一下npm仓库源即可
-
dos下查看目前的npm仓库源(位置):
npm config get registry可以更换npm的仓库源,提高下载速度
//设置淘宝源 npm config set registry https://registry.npmmirror.com/ -
安装一个模块(js依赖库)测试一下看看:
npm install axios -g #其中-g是全局安装的意思;全局安装就会把axios模块安装到前面创建的node_global目录下,如果不加-g就会安装到了当前执行命令所在的目录下:C:\Users\Administrator
3. 安装vite
-
vite是vue.js的脚手架,用于自动生成vue.js的项目模板(项目基础骨架)。之前比较流行的是 Vue-cli
-
创建vue工程
npm create vite@latest- npm是Node Package Manager的缩写,是Node.js的一个包管理工具。
- create是一个npm的命令,用于创建新的npm包。
- vite是一个基于Vue.js的静态网站生成器,
- @latest表示使用最新版本的vite,即npm create vite@latest为创建一个使用最新版本vite的npm包;
-
VUE 报错 <npm ERR! EPERM: operation not permitted, open ‘路径‘ >erron -4048
- 原因:我们在安装node.js的时候将 node_cache、node_global 文件夹查询配置到了其他盘下面,导致无权限访问
- 解决方案:在本地将这个文件夹赋予权限即可
2. 搭建前端项目
-
右击刚才创建好的后端项目,点击open in选项,点击explorer来到该项目在磁盘中的真实路径
-
在此处输入cmd,通过命令
npm create vite@latest创建前端工程-
输入前端项目的名称
-
选择该项目使用的框架(这里我使用的是vue)
-
选择该项目使用的编程语言(js)
至此,前端项目搭建完成
-
4. vue项目工程结构
上面我们通过了vite脚手架创建了vue工程,以下是该工程的结构
1、node_modules/ 项目依赖的各种js依赖包;
2、public/ 公共的静态文件,一个网站图标;
3、src/ 源代码,我们前端写的源代码都会在这个文件夹下;
4、gitignore 提交git时忽略哪些文件;
5、index.html 项目的首页,访问入口文件;
6、package.json 整个项目对js依赖库的配置,还包括了启动、构建项目命令等;(类似maven的pom.xml)
7、package-lock.json 锁定各个js依赖包的来源和版本;
8、README.md 项目的使用帮助文档;
9、vite.config.js vite的配置文件;
5. 启动Vue项目工程
在idea中点击package.json里面的绿色箭头运行。
命令等;(类似maven的pom.xml)
7、package-lock.json 锁定各个js依赖包的来源和版本;
8、README.md 项目的使用帮助文档;
9、vite.config.js vite的配置文件;
5. 启动Vue项目工程
在idea中点击package.json里面的绿色箭头运行。
- 需要在idea中进行配置:settings ==》 搜索 ”node.js“ ==> 配置 node interpreter的值为 node.exe的安装路径
相关文章:
前后端分离项目环境搭建
1. 使用到的技术和工具 springboot vue项目的搭建 工具 idea,mavennodejs 2. 后端框架搭建 利用maven创建springboot项目 3. 前端项目搭建 1. 安装相关工具 nodejs: 一个开源、跨平台的 JavaScript 运行时环境,可以理解成java当中需要…...
HTML静态网页成品作业(HTML+CSS)——家乡漳州介绍设计制作(1个页面)
🎉不定期分享源码,关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS,未使用Javacsript代码,共有1个页面。 二、作品演示 三、代…...
世界第二对海信到底有多重要?
作者 | 辰纹 来源 | 洞见新研社 不久前,全球权威市场研究机构Omdia公布了2023年全球电视销量排名,数据显示TCL电视全球销量达到了2526万台,位居全球第二,中国第一。 可是,同样是根据Omdia的数据,海信的官…...
多站合一的音乐搜索下载助手PHP源码l亲测
源码获取方式 回复:031601 搭建教程: 将源码下载上传至宝塔面板,直接运行即可~ 说明: 该源码进行测试,测试成功源码无加密优化相关其他采集问题。...
webserver烂大街?还有必要做么?
目录 什么是 Web Server? 如何提供 HTTP 服务? HTTP协议 简介 工作原理 工作步骤 HTTP请求报文格式 HTTP响应报文格式 HTTP请求方法 HTTP状态码 总结 都说webserver是C选手人手必备的烂大街项目,那么webserver 还有必要做么&…...
3.Redis命令
Redis命令 Redis 根据命令所操作对象的不同, 可以分为三大类: 对 Redis 进行基础性操作的命令,对 Key 的操作命令,对 Value 的操作命令。 1.1 Redis 首先通过 redis-cli 命令进入到 Redis 命令行客户端,然后再运行下…...
xray问题排查,curl: (35) Encountered end of file(已解决)
经过了好几次排查,都没找到问题,先说问题的排查过程,多次确认了user信息,包括用户id和alterid,都没问题,头大的一逼 问题排查过程 确保本地的xray服务是正常的 [rootk8s-master01 xray]# systemctl stat…...
【数据库】Oracle内存结构与参数调优
Oracle内存结构与参数调优 Oracle 内存结构概览oracle参数配置概览重要参数(系统运行前配置):次要参数(可在系统运行后再优化调整): Oracle数据库服务器参数如何调整OLTP内存分配操作系统核心参数配置Disabling ASMM(禁…...
PS学习-抠图-蒙版-冰块酒杯等透明物体
选中图,ctrlA 全选 ctrlC复制 创建一个蒙版图层 选中蒙版Alt 点击进入 ctrlv 复制 ctrli 反转 原图层 ctrldelete填充为白色 添加一个背景,这个方法通用 首选创建一个 拖到最底部 给它填充颜色 这个可能是我图片的原因。视频是这样做的...
绝赞春招拯救计划 -- 操作系统,组成原理,计网
进程和线程 进程 一个在内存中运行的应用程序。每个进程都有自己独立的一块内存空间,一个进程可以有多个线程 线程 进程中的一个执行任务(控制单元),负责当前进程中程序的执行。一个进程至少有一个线程,一个进程可以…...
c语言:于龙加
于龙加 任务描述 于龙同学设计了一个特别的加法规则,加法被重新定义了,我们称为于龙加。 两个非负整数的于龙加的意义是将两个整数按前后顺序连接合并形成一个新整数。 于龙想编程解决于龙加问题,可是对下面的程序他没有思路! …...
AcWing 790:数的三次方根 ← 浮点数二分
【题目来源】https://www.acwing.com/problem/content/792/【题目描述】 给定一个浮点数 n,求它的三次方根。【输入格式】 共一行,包含一个浮点数 n。【输出格式】 共一行,包含一个浮点数,表示问题的解。 注意,结果保留…...
【LLM】LLama2模型(RMSNorm、SwiGLU、RoPE位置编码)
note 预训练语言模型除了自回归(Autoregressive)模型GPT,还有自编码模型(Autoencoding)BERT[1]、编-解码(Encoder-Decoder)模型BART[67],以及融合上述三种方法的自回归填空…...
【力扣白嫖日记】1934.确认率
前言 练习sql语句,所有题目来自于力扣(https://leetcode.cn/problemset/database/)的免费数据库练习题。 今日题目: 1934.确认率 表:Signups 列名类型user_idinttime_stampdatetime User_id是该表的主键。每一行都…...
TinTin Web3 动态精选:以太坊坎昆升级利好 Layer2,比特币减半进入倒计时
TinTin 快讯由 TinTinLand 开发者技术社区打造,旨在为开发者提供最新的 Web3 新闻、市场时讯和技术更新。TinTin 快讯将以周为单位, 汇集当周内的行业热点并以快讯的形式排列成文。掌握一手的技术资讯和市场动态,将有助于 TinTinLand 社区的开…...
PCL 高斯投影反算:高斯投影坐标转大地坐标(C++详细过程版)
目录 一、算法原理二、代码实现三、结果展示四、测试数据PCL 高斯投影反算:高斯投影坐标转大地坐标(C++详细过程版)由CSDN点云侠原创。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、算法原理...
解决:IDEA编译Java程序时报编译失败
1、问题展示: 2、解决方法:...
vue+vite根据版本号清空用户浏览器缓存
项目生产环境发布新版本之后,用户可能会因为一些本地缓存的数据不一样而导致页面报错。这时候可以根据版本号去清空用户缓存。 1、在package.json文件中有一个管理版本号属性:version,在每次打包部署之前修改当前版本号。 2、在main.js文件中…...
AXI CANFD MicroBlaze 测试笔记
文章目录 前言测试用的硬件连接Vivado 配置Vitis MicroBlaze CANFD 代码测试代码测试截图Github Link 前言 官网: CAN with Flexible Data Rate (CAN FD) (xilinx.com) 特征: 支持8Mb/s的CANFD多达 3 个数据位发送器延迟补偿(TDC, transmitter delay compensation)32-deep T…...
操作系统——cpu、内存、缓存介绍
一、内存是什么 内存就是系统资源的代名词,它是其他硬件设备与 CPU 沟通的桥梁, 计算机中的所有程序都在内存中运行。其作用是暂时存放CPU的运算数据,以及与硬盘交换的数据。也是相当于CPU与硬盘沟通的桥梁。只要计算机在运行,CP…...
UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接:3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
黑马Mybatis
Mybatis 表现层:页面展示 业务层:逻辑处理 持久层:持久数据化保存 在这里插入图片描述 Mybatis快速入门 
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况,可以通过以下几种方式模拟或触发: 1. 增加CPU负载 运行大量计算密集型任务,例如: 使用多线程循环执行复杂计算(如数学运算、加密解密等)。运行图…...
NLP学习路线图(二十三):长短期记忆网络(LSTM)
在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作:ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等(ArcGIS出图图例8大技巧),那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA:通过低成本全身远程操作学习双手移动操作 传统模仿学习(Imitation Learning)缺点:聚焦与桌面操作,缺乏通用任务所需的移动性和灵活性 本论文优点:(1)在ALOHA…...
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列,以便知晓哪些列包含有价值的数据,…...
JVM 内存结构 详解
内存结构 运行时数据区: Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器: 线程私有,程序控制流的指示器,分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
IP如何挑?2025年海外专线IP如何购买?
你花了时间和预算买了IP,结果IP质量不佳,项目效率低下不说,还可能带来莫名的网络问题,是不是太闹心了?尤其是在面对海外专线IP时,到底怎么才能买到适合自己的呢?所以,挑IP绝对是个技…...

