前后端分离项目环境搭建

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

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

Redis 中的全局命令

查看所有键 keys * keys命令会遍历所有键, 所以它的时间复杂度是O(n) 查看键总数 dbsize dbsize命令在计算键总数时不会遍历所有键, 而是直接获取Redis内置的键总数变量, 所以dbsize命令的时间复杂度是O&#xff…

Mysql锁与MVCC

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

CODE001

GPIO通用输入输出端口 1.可以配置八种输入输出模式 2.引脚电平0~3.3v 部分可以容忍5V 3.输出模式下可控制端口输出高低电平,用来驱动LED,蜂鸣器,模拟通信协议输出时序 4.输入模式下可读取端口的高低电平或电压,用于读取按键输入&a…

3.Python从入门到精通—Python 基础语法详细讲解-中

【30天】Python从入门到精通详解版—第二天—Python 基础语法详细讲解-中 控制流程语句条件语句循环语句 函数和模块函数模块 控制流程语句 在Python中,控制流程语句用于控制程序的执行流程,包括条件语句和循环语句。 条件语句 Python中的条件语句包括…

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操作…

代码简洁之道

《代码简洁之道》(Clean Code)是由Robert C. Martin所著的一本经典书籍,主要介绍了如何编写清晰、可读性高、易于维护的代码。以下是该书中的一些重要观点: 1. 命名清晰明了:变量、函数、类等命名应当清晰明了&#x…

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

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

Java策略模式源码剖析及使用场景

策略模式 一、介绍二、不同的支付方式采用不同的策略三、 电商定价策略四、日志记录策略五、 压缩算法六、Java 中的 Arrays.sort() 方法,不同的排序策略进行排序七、Spring 中的 ResourceLoader 类,不同的资源位置采用不同的加载策略 一、介绍 策略模式是一种行为型设计模式,…

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

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

【Java】获取手机文件名称补充

本地的 ADB 工具路径指的是你电脑上安装的 Android Debug Bridge(ADB)工具的路径。ADB 是 Android SDK 中的一个工具,用于与连接到计算机上的 Android 设备进行通信。你需要确保 ADB 已正确安装,并知道其在你计算机上的位置。 通…

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…

odoo中使用domain基础操作

Odoo中的domain是一个用于筛选记录的条件列表,它通常用于搜索、过滤和定义视图中可见记录的规则。Domain由一系列的元组组成,每个元组定义了一个筛选条件。这些条件可以是简单的字段比较,也可以是更复杂的逻辑组合。 基本语法 Domain的基础…

模拟无人驾驶汽

下面是一个简单的Python代码示例,用于模拟无人驾驶汽车的自动驾驶功能。 import timeclass Car:def __init__(self):self.speed 0self.heading 0def drive(self):while True:self.update_sensors()self.process_sensors()self.control_car()self.update_car()tim…

CentOS搭建NAS服务器并使用

CentOS搭建NAS服务器并使用 文章目录 前言一、配置NAS服务器安装 NFS 服务:启动 NFS 服务:使 NFS 服务在系统启动时自动启动: 二、挂载服务器三、常见错误以及解决方案1、mount.nfs: No route to host2、mount.nfs: access denied by server …

vue3之组合式函数

抽取成一个组合式函数: // fetch.js //接收响应式状态 import { ref, watchEffect, toValue } from vue //一个封装的异步请求 import { fetch } from ../XX export function useFetch(url) {const data ref(null)const error ref(null)const fetchData () >…

OpenCV的常用数据类型

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