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

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

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

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

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

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

相关文章

【C++进阶】带你手撕红黑树(红与黑的爱恨厮杀)

🪐🪐🪐欢迎来到程序员餐厅💫💫💫 主厨:邪王真眼 主厨的主页:Chef‘s blog 所属专栏:c大冒险 总有光环在陨落,总有新星在闪烁 引言: 之前我们…

K8S- Deployment 的滚动更新 Rolling Update

滚动更新 这里的更新指的不是更新deployment 本身的属性(label/ replicas)等, 而是更新POD 的container 的版本 更新方法通常有两种 是直接update deployment配置, 注意只有update了template中的内容(与container相关) 才会触发更新用kubectl set ima…

【蓝桥杯】GCD与LCM

一.概述 最大公约数(GCD)和最小公倍数(Least Common Multiple,LCM) 在C中,可以使用 std::__gcd(a, b)来计算最大公约数 1.欧几里德算法/辗转相除法 int gcd(int a,int b){return b?gcd(b, a%b):a; } 2…

CATIA软件 焊点坐标(BiW Welding SpotPoint)导出txt文本的操作方法

通常我们客户给的工件是带焊点球的形式,且可导出焊点坐标。如下图所示的焊点位置标识及坐标,即是CATIA中Automotive BiW Fastening模块下的BiW Welding SpotPoint焊点定义。 遇到这样的形式,要导出焊点坐标txt文本,可按如下图片找…

ssm023实验室耗材管理系统设计与实现+jsp

实验室耗材管理系统的设计与实现 摘 要 互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很好地为人们提供服务。针对实验室耗材信息管理混乱&#xff…

深入浅出 -- 系统架构之单体架构和微服务架构的区别

在软件开发中,架构设计是非常重要的一环。架构设计不仅决定了软件系统的性能、可维护性和扩展性,还直接关系到开发成本和项目进度。目前,主流的架构设计模式有两种,一种是单体架构,另一种是微服务架构。本文将详细介绍…

【C语言】从零开始:用C语言实现顺序表

欢迎来CILMY23的博客 本篇主题为 从零开始:用C语言实现顺序表 个人主页:CILMY23-CSDN博客 C语言专栏: http://t.csdnimg.cn/hQ5a9 Python系列专栏:http://t.csdnimg.cn/HqYo8 上一篇C语言博客: http://t.csdnimg.…

pwn学习笔记(7)--堆相关源码

相关源码: 1. chunk 相关源码: ​ 对于用户来说,只需要确保malloc()函数返回的内存不会发生溢出,并且在不用的时候使用free() 函数将其释放,以后也不再做任何操作即可。而对于glibc来说’它要在用户第一次调用malloc…

C语言数据结构初阶-顺序表

什么是数据结构 数据结构是由数据和结构两个词结合而来, 那么数据由是什么 就比如我们日常生活中的1,2,3,4,5,a,b,c,d,e文字信息图片等,这些就是数据 那么结构又是什么? 想像一下如…

Collection与数据结构 Stack与Queue(一): 栈与Stack

1. 栈 1.1 概念 栈:一种特殊的线性表,其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶,另一端称为栈底。栈中的数据元素遵守后进先出LIFO(Last In First Out)的原则。 压栈&…

【029】基于ssm+小程序实现的理发店预约系统

作者主页:Java码库 主营内容:SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】:Java 【框架】:ssm 【…

Hadoop: word count,并将reduce结果写入ES

一、依赖&#xff0c;其中ES版本为7.6.2 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http…

[StartingPoint][Tier0]Mongod

Task 1 How many TCP ports are open on the machine? (机器上打开了多少个 TCP 端口&#xff1f;) Example: $ sudo nmap -sS -T4 10.129.222.112 -p 27017,22 2 Task 2 Which service is running on port 27017 of the remote host? (哪个服务正在远程主机的端口 270…

Hippo4j线程池实现技术

文章目录 &#x1f50a;博主介绍&#x1f964;本文内容部署运行模式集成线程池监控配置参数默认配置 &#x1f4e2;文章总结&#x1f4e5;博主目标 &#x1f50a;博主介绍 &#x1f31f;我是廖志伟&#xff0c;一名Java开发工程师、Java领域优质创作者、CSDN博客专家、51CTO专家…

基于Java课程选课系统设计与实现(源码+部署文档)

博主介绍&#xff1a; ✌至今服务客户已经1000、专注于Java技术领域、项目定制、技术答疑、开发工具、毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精彩专栏 推荐订阅 &#x1f447;&#x1f3fb; 不然下次找不到 Java项目精品实…

KIl5:Stm32L071下载出现flash download faild “cortex-m0+“的解决方法

首先看看有没有芯片&#xff0c;没有芯片下载一下 下载并在device选择对应的芯片 选择调试器 选择flash

gpt4.0中文版

我愿把这个网站成为全球最强AI网站&#xff01;弄100多个AI伺候你&#xff1f;&#xff1f; 家人们&#xff0c;你们猜我发现了什么牛逼的AI网站&#xff1f;&#xff1f; 直接上图&#xff1a; 编辑 这个网站&#xff0c;聚合了国内外100多个顶尖的AI&#xff0c;包括了Op…

入门用Hive构建数据仓库

在当今数据爆炸的时代&#xff0c;构建高效的数据仓库是企业实现数据驱动决策的关键。Apache Hive 是一个基于 Hadoop 的数据仓库工具&#xff0c;可以轻松地进行数据存储、查询和分析。本文将介绍什么是 Hive、为什么选择 Hive 构建数据仓库、如何搭建 Hive 环境以及如何在 Hi…

我认识的Git-史上最强的版本控制系统

大家好&#xff01; 欢迎大家来一起交流Git使用心得&#xff0c;相信很多同事对Git都很熟悉了&#xff0c;如果下面说的有错误的“知识点”&#xff0c;欢迎批评指正。 初识Git 我认识Git已经很多年了&#xff08;我在有道云笔记里面“Git”文件夹的创建时间是&#xff1a; …

sky06笔记下

1.边沿检测 检测输入信号din的上升沿&#xff0c;并输出pulse module edge_check ( clk, rstn, din, pulse ); input wire clk,rstn; input wire din; output reg pulse;wire din_dly;always (posedge clk or negedge rstn)beginif(!rstn)din_dly < 1b0;elsedin_dly < d…