动力云客-B站(第一天)

发布于:2024-04-05 ⋅ 阅读:(127) ⋅ 点赞:(0)

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

前后端分离的项目(前端项目 + 后端项目)

  • 前端: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工具

 

部署原来的项目

  1. 把老代码压缩包解压;
  2. 把解压后得到的前后端两个项目,用idea打开;
  3. idea修改以下文件编码为utf-8,设置一下maven;
  4. 启动后端项目,启动前修改一下mysql、redis的连接信息;
  5. 启动前端项目;(配置好idea里面的nodejs)

登录模块开发

先写前端,再写后端;

    1. 创建Vue项目工程

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

npm create vite@latest