动力云客-B站（第一天）

news2024/10/7 2:46:18

一项目技术选型及开发工具

前后端分离的项目（前端项目 + 后端项目）

前端：Html、CSS、JavaScript、Vue、Axios、Element Plus
后端：Spring Boot、Spring Security、MyBatis、MySQL、Redis

相关组件：HiKariCP（Spring Boot默认数据库连接池）、Spring-Data-Redis（Spring

整合Redis）、Lombok（代码生成工具）、jwt（Json web token）、EasyExcel（Excel处理类库）、ECharts（前端图表库）
服务器：MySQL、Redis、Linux
项目依赖管理：Maven
项目开发工具：IDEA、Apifox

二项目数据库

在Linux MySQL数据库中创建一个名叫dlyk的数据库；

dlyk.sql （导入这个sql脚本）

三前端项目

前后端分离项目（两个项目，一个前端，一个后端）

前端项目（Vue） --->ajax请求(http请求) ---> 后端项目（Spring Boot）

用户通过访问veu项目然后vue项目在通过axios发送请求后端的springboot项目的coll coll 在去mysql里面查数据

前端环境工具准备

node.js、 npm、 Vite （三个工具）

1、node.js是一个开源、跨平台的 JavaScript 运行时环境，可以理解成java当中需要安装的jdk；

官网：Node.js — Run JavaScript Everywhere

Node.js — Run JavaScript Everywhere (nodejs.org)

中文版

Node.js 中文网 (nodejs.com.cn)

下载解压版本

2、npm是JavaScript依赖包管理工具，全世界都可以用它来共享javascript包，负责前端项目的打包，插件下载等，可以理解成java中的maven；

官网：https://www.npmjs.com/

3、Vite是快速构建前端Vue项目的脚手架，可以理解为开发Spring Boot的Spring Initializr快速构建工具；

官网：Vite | 下一代的前端工具链

node.js	jdk
npm	maven
Vite	Spring Initializr

安装Node.js

下载：Node.js — Download Node.js®

安装：解压即完成安装；node-v20.10.0-win-x64.zip版本；

Nodejs环境变量配置

在 "D:\Java software installation location\node\node-v20.10.0\node-v20.10.0-win-x64下创建2个文件夹：

node_global （依赖库）

node_cache （缓存）

然后在当前目录下cmd进入dos窗口，执行：

npm config set prefix "D:\Java software installation location\node\node-v20.10.0\node-v20.10.0-win-x64\node_global"
npm config set cache "D:\Java software installation location\node\node-v20.10.0\node-v20.10.0-win-x64\node_cache"

然后你可以查一下，看看有没有设置成功：

npm config get prefix

npm config get cache

在windows环境变量配置Path，在path变量中添加如下路径：

D:\Java software installation location\node\node-v20.10.0\node-v20.10.0-win-x64

D:\Java software installation location\node\node-v20.10.0\node-v20.10.0-win-x64\node_global

在任意目录打开dos窗口测试下：

node -v

npm -v

配置npm仓库

node.js	jdk
npm	maven
vite	Spring Initializr

新版的Node.js已经自带npm，安装Node.js时就已经安装npm，所以不需要再安装npm，只需要配置一下npm仓库源即可；

查看目前的npm仓库源（位置）：

npm config get registry

在使用npm命令时，如果直接从国外的仓库https://www.npmjs.com/ 下载依赖，下载速度很慢，甚至会下载失败，我们可以更换npm的仓库源，提高下载速度，淘宝给我们提供了一个npm源；

//设置淘宝源

npm config set registry https://registry.npmmirror.com/

原来的老的淘宝npm地址（http://registry.npm.taobao.org/）即将停止解析，所以建议使用新地址，参考https://npmmirror.com/的页面说明；

安装一个模块（js依赖库）测试一下看看：

npm install axios -g #其中-g是全局安装的意思；

npm i axios -g #其中-g是全局安装的意思；

全局安装就会把axios模块安装到；

D:\Java software installation location\node\node-v20.10.0\node-v20.10.0-win-x64\node_global目录下，如果不加-g就会安装到了当前执行命令所在的目录下：C:\Users\Administrator

Vite安装

vite是vue.js的脚手架，用于自动生成vue.js的项目模板（项目基础骨架）；

官网：Vite | 下一代的前端工具链 ( 之前使用Vue-Cli )

npm create vite@latest

npm是Node Package Manager的缩写，是Node.js的一个包管理工具。create是一个npm的命令，用于创建新的npm包。vite是一个基于Vue.js的静态网站生成器，@latest表示使用最新版本的vite，即npm create vite@latest为创建一个使用最新版本vite的npm包；