前后端分离项目环境搭建

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

企业微信 API 接口调用教程:深入解析企业微信 API 的用法

本文通过 access_token 凭证的方式来讲解怎么调用 企业微信 API,并一步步介绍如何获取企业微信 API 的 corpsecret、corpid、access_token 凭证以及怎么向企业微信的应用发送消息。 企业微信 API 在线地址为:qiyeweixin.apifox.cn/ ,这个在线…

LInux 进程替换(理解系统调用)

目录 一、替换原理 二、替换函数 1、exec函数 2、命名理解 3、返回值 4、使用execl/lp、execv/vp 5、执行自定义命令 Makefile编译多个文件 命令行程序mycmd.c 传入自己的可执行文件 7、子进程都继承父进程环境变量 8、execle/ve修改子进程环境变量 9、exece函数为…

Hack The Box-Jab

目录 信息收集 nmap enum4linux 服务信息收集 Pidgin kerbrute hashcat 反弹shell & get user 提权 系统信息收集 端口转发 漏洞利用 get root 信息收集 nmap 端口探测┌──(root㉿ru)-[~/kali/hackthebox] └─# nmap -p- 10.10.11.4 --min-rate 10000 -oA…

Docker----Dockerfile构建微服务镜像

目录 一、关键步骤 二、具体步骤 1、准备后端jar包(这里以java后端演示) 2、编写Dockerfile 3、构建镜像 4、运行镜像容器 5、测试是否成功 一、关键步骤 1、准备后端jar包(这里以java后端演示) 2、编写Dockerfile 3、构建镜像 4、运行镜像容器 5、测试是否成功 二…

Openfeign使用教程(带你快速体验Openfeign的便捷)

文章摘要 本文中将教会您如何快速使用Openfeign,包括Opengfeign的基础配置、接口调用、接口重试、拦截器实现、记录接口日志信息到数据库 文章目录 文章摘要一、Openfeign初步定义二、Openfeign快速入门1.引入maven坐标2.启动类增加EnableFeignClients注解3.定义fei…

从金蝶云星空到钉钉通过接口配置打通数据

从金蝶云星空到钉钉通过接口配置打通数据 对接系统金蝶云星空 金蝶K/3Cloud(金蝶云星空)是移动互联网时代的新型ERP,是基于WEB2.0与云技术的新时代企业管理服务平台。金蝶K/3Cloud围绕着“生态、人人、体验”,旨在帮助企业打造面…

IDEA连接Mysql失败:下载驱动失败,Failed todownload Cannot download Read timed out

解决: 1. 手动加入jar包 2.选择自己maven仓库中存在mysql-connector 3. 选择完毕后,确定使用: 4. 进行测试连接

【代码随想录】【回溯算法】补day24:组合问题以及组合的优化

回溯算法:递归函数里面嵌套着for循环 给定两个整数 n 和 k,返回 1 … n 中所有可能的 k 个数的组合。 示例: 输入: n 4, k 2 输出: [ [2,4], [3,4], [2,3], [1,2], [1,3], [1,4], ] 包含组合问题和组合问题的剪枝优化 class solution:def combine(se…

免费接口调用 招标信息自动抽取|招标信息|招标数据解析接口

一、开源项目介绍 一款多模态AI能力引擎,专注于提供自然语言处理(NLP)、情感分析、实体识别、图像识别与分类、OCR识别和语音识别等接口服务。该平台功能强大,支持本地化部署,并鼓励用户体验和开发者共同完善&#xf…

git:码云仓库提交以及Spring项目创建

git:码云仓库提交 1 前言 码云访问稳定性优于github,首先准备好码云的账户: 官网下载GIT,打开git bash: 查看当前用户的所有GIT仓库,需要查看全局的配置信息,使用如下命令: git …

旅游管理系统 |基于springboot框架+ Mysql+Java+Tomcat的旅游管理系统设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 目录 前台功能效果图 管理员功能登录前台功能效果图 系统功能设计 数据库E-R图设计 lunwen参考 摘要 研究…

羊大师分析羊奶入菜,美味新体验

羊大师分析羊奶入菜,美味新体验 羊奶,这一古老而珍贵的食材,近年来在料理界掀起了一股新风潮。其醇厚的口感和丰富的营养价值,让越来越多的人开始尝试将羊奶融入日常烹饪中,为味蕾带来前所未有的新体验。 在传统的烹饪…

由浅到深认识C语言(5):函数

该文章Github地址:https://github.com/AntonyCheng/c-notes 在此介绍一下作者开源的SpringBoot项目初始化模板(Github仓库地址:https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址:https://blog.csdn…

湖南麒麟SSH服务漏洞

针对湖南麒麟操作系统进行漏洞检测时,会报SSH漏洞风险提醒,具体如下: 针对这些漏洞,可以关闭SSH服务(前提是应用已经部署完毕不再需要通过SSH远程访问传输文件的情况下,此时可以通过VNC远程登录方法&#x…

Arduino IDE配置ESP8266开发环境

一、配置步骤 在Arduino IDE中配置ESP8266开发环境的详细步骤如下: 1.打开Arduino IDE,依次点击“文件”->“首选项”,在“附加开发板管理器网址”一栏添加ESP8266开发板的网址。常用的网址是: http://arduino.esp8266.com/s…

软件测试——接口常见问题汇总

前言 今天我们来聊聊接口设计用例设计,说到这个接口,相信绝大多数的测试员都有遇到过某些棘手的问题,那么今天我们就来总结一下在接口方面会遇到的难题。 一、接口用例设计 接口测试用例可以从功能、性能、安全三方面进行入手,…

【好书推荐-第十二期】《并行计算与高性能计算》

😎 作者介绍:我是程序员洲洲,一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主、前后端开发、人工智能研究生。公众号:洲与AI。 🎈 本文专栏:本文收录…

[java基础揉碎]多态参数

多态参数 方法定义的形参类型为父类类型,实参类型允许为子类类型 例子: 定义一个员工类, 有名字和工资两个属性, 有年工资的方法 定义一个普通员工继承了员工类 , 重写了年工资的方法 定义一个经理类, 也继承了员工类, 同时经理多以了一个奖金的属性, 重写的年…

GPD<论文精简版>

问题陈述 给定点云数据、机械手的几何参数,抓取位姿检测问题( grasp pose detection problem)表示为,在抓手闭合情况下,识别抓手的配置的问题。 :机器人工作空间 :三维点云中的一组点&#x…

宠物疾病 与 光线疗法

人类与动物以及大自然是相辅相成的。人离开动物将无法生存,对于动物我们尽力去保护,与大自然和谐稳定生存发展。 生息在地球上的所有动物、在自然太阳光奇妙的作用下、生长发育。太阳光的能量使它们不断进化、繁衍种族。现在、生物能够生存、全仰仗于太…