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

姜小白程序

已于 2024-04-13 16:48:40 修改

阅读量1k

点赞数 16

文章标签： java

于 2024-04-03 16:41:38 首次发布

本文链接：https://blog.csdn.net/m0_59281987/article/details/137347163

版权

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

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

前端：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包；

Vue项目开发工具

项目代码开发工具

1、VScode （全称Visual Studio Code）

2、WebStorm；（也是idea公司出品的）

3、Idea (新版本的idea自带了vue插件)

4、Hbuilder；

检查idea工具

部署原来的项目

把老代码压缩包解压；
把解压后得到的前后端两个项目，用idea打开；
idea修改以下文件编码为utf-8，设置一下maven；
启动后端项目，启动前修改一下mysql、redis的连接信息；
启动前端项目；（配置好idea里面的nodejs）

账号:admin

密码;iii111

交互

登录模块开发

先写前端，再写后端；

1. 创建Vue项目工程

采用vite脚手架工具创建Vue项目工程；

npm create vite@latest

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的配置文件；

启动Vue项目工程

原来老的vue前端项目占用了8080，启动前修改一下启动端口：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],

  server:{
    host:'0.0.0.0' ,//ip地址
    port: 8081, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
  }
})