前后端分离项目环境搭建

1. 使用到的技术和工具

  • springboot + vue项目的搭建

  • 工具

    • idea,maven
    • nodejs

2. 后端框架搭建

利用maven创建springboot项目

3. 前端项目搭建

1. 安装相关工具
  1. nodejs:
    • 一个开源、跨平台的 JavaScript 运行时环境,可以理解成java当中需要安装的jdk;
    • 官网:https://nodejs.org/en
  2. npm
    • JavaScript依赖包管理工具,全世界都可以用它来共享javascript包,负责前端项目的打包,插件下载等,可以理解成java中的maven
    • 官网:https://www.npmjs.com/
  3. vite
    • 快速构建前端Vue项目的脚手架,可以理解为开发Spring Boot的Spring Initializr快速构建工具
    • 官网:https://cn.vitejs.dev/
1. 安装node.js
  1. 下载:https://nodejs.org/en/download

  2. 安装:解压即完成安装(.zip版本)

  3. 在安装目录下(node.exe所在的目录)创建以下俩个文件夹

    • node_global (依赖库)
    • node_cache (缓存)
  4. 在安装目录下cmd进入dos窗口,执行

    • npm config set prefix “E:\worktool\node\node_global” 【这里的路径要改为自己的文件路径】

    • npm config set cache “E:\worktool\node\node_cache” 【这里的路径要改为自己的文件路径】

  5. 可以查一下,看看有没有设置成功:

    • npm config get prefix
    • npm config get cache
  6. 配置环境变量

    • 在path中添加 nodejs的安装路径 和 node_global文件夹所在的路径。如:
      • E:\worktool\node
      • E:\worktool\node\node_global
    • 在任意目录打开dos窗口进行测试:
      • node -v
      • npm -v
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 文件夹查询配置到了其他盘下面,导致无权限访问
    • 解决方案:在本地将这个文件夹赋予权限即可
      • image-20240312194705807
2. 搭建前端项目
  1. 右击刚才创建好的后端项目,点击open in选项,点击explorer来到该项目在磁盘中的真实路径

  2. 在此处输入cmd,通过命令 npm create vite@latest 创建前端工程

    1. 输入前端项目的名称

      image-20240312152047485
    2. 选择该项目使用的框架(这里我使用的是vue)

      image-20240312152150772
    3. 选择该项目使用的编程语言(js)

      image-20240312152243507

    至此,前端项目搭建完成

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的安装路径

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/743644.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

fly-gesture-unlock 手势解锁库

最近要实现前端九宫格手势解锁功能,到 github 和 gitee 上没有找到质量比较好的库,自己对这个功能也是蛮感兴趣的,所以做了这个开源库,用于实现手势解锁功能,可以帮助大家快速完成业务逻辑,提供了完整的 DE…

Prompt提示工程上手指南:基础原理及实践(二)-Prompt主流策略

前言 上篇文章将Prompt提示工程大体概念和具体工作流程阐述清楚了,我们知道Prompt工程是指人们向生成性人工智能(AI)服务输入提示以生成文本或图像的过程中,对这些提示进行精炼的过程。生成人工智能是一个根据人类和机器产生的数…

python基于flask考研学习交流系统30vy7附源码django

考研在线学习与交流平台根据实际情况分为前后台两部分,前台部分主要是让用户使用的,包括用户的注册登录,首页,课程信息,在线讨论,系统公告,后台管理,个人中心等功能;后台…

Mysql锁与MVCC

文章目录 Mysql锁的类型锁使用MVCC快照读和当前读读视图【Read View】串行化的解决 exlpain字段解析ACID的原理日志引擎整合SpringBoot博客记录 Mysql锁的类型 MySQL中有哪些锁: 乐观锁(Optimistic Locking):假设并发操作时不会发…

Database Connectivity using Python使用 Python 进行数据库连接

Introduction • The Python programming language has powerful features for database programming • Python supports various databases like MySQL, Oracle, Sybase, PostgreSQL, etc • Python also supports Data Definition Language (DDL), Data Manipulation Langua…

ARMV8-aarch64的虚拟内存(mmutlbcache)介绍-概念扫盲

🔥博客主页: 小羊失眠啦. 🎥系列专栏:《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞👍收藏⭐评论✍️ 思考: 1、cache的entry里都是有什么? 2、TLB的entry里都是有什么? 3、MMU操作…

unity3d Animal Controller的Animal组件中Speeds,States和modes基础部分理解

Speeds 速度集是修改你可以做的原始动画,增加或减少运动,旋转,或动画速度。它们与 州 所以,当动物在运动状态下,在飞行或游泳时,你可以有不同的速度 如果你的性格动画是 (已到位), 你一定要调整速度 位置 和 旋转 每一种的价值观 速度装置 …否则,它们不会移动或旋转。 每个速…

计算机行业在数字经济时代的角色与数字化转型之路

目录 前言1 数字经济时代下的计算机行业角色与定位1.1 数字经济支撑者1.2 创新引领者1.3 产业融合者 2 数字化转型对计算机行业的影响与挑战2.1 技术更新换代的压力2.2 人才培养与流动的问题2.3 数据隐私与安全的挑战 3 数字化转型如何提升行业竞争力3.1 提高生产效率与优化产品…

Prometheus 监控告警配置

文章目录 一、告警通知1.邮件通知2.钉钉通知2.1.获取钉钉机器人webhook2.2.prometheus-webhook-dingtalk2.3.配置信息2.4.自定义模板 3.自定义 二、告警规则1.Prometheus2.Linux3.Docker4.Nginx5.Redis6.PostgreSQL7.MySQL8.RabbitMQ9.JVM10.Elasticsearch 开源中间件 # Prome…

OpenCV的常用数据类型

OpenCV涉及的常用数据类型除包含C的基本数据类型,如:char、uchar,int、unsigned int,short 、long、float、double等数据类型外, 还包含Vec,Point、Scalar、Size、Rect、RotatedRect、Mat等类。C中的基本数据类型不需再做说明下面重点介绍一下…

揭秘WMM:wifi中的QOS

更多内容在 WiFi WMM(无线多媒体)是一种用于无线局域网(WLAN)的QoS(服务质量)标准。WMM旨在提供更好的网络性能,特别是在传输多媒体内容(如音频和视频)时。它通过对不同类…

42.坑王驾到第八期:uniCloud报错

uniCloud 报错 今天调用云函数来调试小程序的时候突然暴了一个奇葩错误,require(…).main is not a function。翻官方文档后发现,原来是这样:**如果你写的是云对象,入口文件应为 index.obj.js,如果你写的是云函数入口…

python学习2:日志记录的用法

一些日志记录的简单记录: 用basicConfig可以进行配置 注意日志的等级: 上述代码得到的日志如下(最基础的日志): 关于记录下来的日志格式可以有很多内容:如等级、发生的时间、发生的位置、发生的进程、…

WinRAR功能之【加密文件名】

很多人知道,WinRAR解压缩软件可以给压缩包设置密码,这样就可以保护压缩包里的文件,不被随意打开。 设置密码后,双击压缩包还是可以打开的,但要打开里面的文件时,就需要输入原本设置的密码才能打开。 虽然…

蓝桥杯-Python组(一)

1. 冒泡排序 算法步骤: 比较相邻元素,如果第一个大于第二个则交换从左往右遍历一遍,重复第一步,可以保证最大的元素在最后面重复上述操作,可以得到第二大、第三大、… n int(input()) a list(map(int, input()…

三、NLP中的句子关系判断

句子关系判断是指判断句子是否相似,是否包含,是否是问答关系等,常应用在文本去重、检索(用户输入和文档的相关性)、推荐(和用户喜好文章是否相似)等场景中。 3.0、文本相似度计算 3.0.0 传统机…

计算机网络-认识设备

一、概述 前面我们其实已经讲了一些关于设备的知识了,从现在开始进入下一阶段的理解。 网络基础设施由交换机、路由器、防火墙等构成,那我们的数据怎样从一个接口转发到另外一个接口最终实现网络访问的呢? 二、设备基础 2.1 网络设备硬件架构 我们分别以…

Axure原型设计项目效果 全国职业院校技能大赛物联网应用开发赛项项目原型设计题目

目录 前言 一、2022年任务书3效果图 二、2022年任务书5效果图 三、2022年国赛正式赛卷 四、2023年国赛第一套样题 五、2023年国赛第二套样题 六、2023年国赛第三套样题 七、2023年国赛第四套样题 八、2023年国赛第七套样题 九、2023年国赛正式赛题(第八套…

SSA-LSTM多输入回归预测 | 樽海鞘优化算法-长短期神经网络 | Matlab

目录 一、程序及算法内容介绍: 基本内容: 亮点与优势: 二、实际运行效果: 三、算法介绍: 四、完整程序下载: 一、程序及算法内容介绍: 基本内容: 本代码基于Matlab平台编译&am…

智慧路灯杆如何提升智慧城市文旅形象

今年以来,全国多地城市凭借本地独特物产、独特旅游环境等亮点火爆出圈,为城市带来显著经济增长和形象提升。文旅经济作为高附加值产业,具有高收益、高潜力等特点,还有助于推动城市经济转型和可持续发展。 推动城市文旅经济发展&am…