一 项目技术选型及开发工具
前后端分离的项目(前端项目 + 后端项目)
- 前端: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)
登录模块开发
先写前端,再写后端;
-
- 创建Vue项目工程
采用vite脚手架工具创建Vue项目工程;
npm create vite@latest