Vue+MySQL+Springboot

一、Vue前端

1. 去官网下载Nodejs，如果希望稳定的开发环境则下LTS

https://nodejs.org/en/download/

2. 安装好后win+r输入node -v查询是否安装成功

3. 高版本的nodejs自带npm，则不必再下载，查询命令npm -v

4. 由于在国内使用npm是非常慢的，所以在这里我们推荐使用淘宝npm镜像，使用

• 淘宝的cnpm命令管理工具可以代替默认的npm管理工具：

npm install -g cnpm --registry=https://registry.npm.taobao.org；

npm install在哪个目录下执行就安装在这个目录的node_modules文件夹下。 local本地安装:npm install
xxx 安装到命令行所在目录的node_module目录。 global全局安装:npm install xxx -g 安装到
\AppData\Roaming\npm\node_modules目录。 From
https://blog.csdn.net/qq_46800734/article/details/117985001

5. 测试

node -v
npm -v
cnpm -v

6. 安装vue/cli：cnpm install -g @vue/cli

• 验证：vue -V结果不低于"@vue/cli 4.5.14"

7. 基于vue模板创建名为“demo_fe”的项目、使用vite工具构建：

搭建第一个 Vite 项目 Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node
版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
https://cn.vitejs.dev/guide/#trying-vite-online

使用 NPM:$ npm create vite@latest
使用 Yarn:$ yarn create vite
使用 PNPM:$ pnpm create vite From

npm init vite@latest demo_fe -- --template vue
cd demo_fe
cnpm install
cnpm install axios --save
cnpm install element-plus --save
cnpm install vue-router@4 --save
cnpm install vuex@next --save
cnpm run dev

8. 测试热加载：

按照页面提示编辑demo_fe/src/components/HelloWorld.vue
找到并删除

Edit……to test HMR.

代码，保存后浏览器中页面该行应立即消灭，确认热加载功能正常。

Hot Module Replacement（以下简称 HMR）是 webpack 发展至今引入的最令人兴奋的特性之一 ，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。
https://juejin.cn/post/7041150408458240014

二、Springboot后端

1. 安装JDK

• https://jdk.java.net/17/

2. 安装MAVEN

• https://maven.apache.org/download.cgi

3. 环境变量

• 创建JAVA_HOME变量，…\jdk-17.0.1
• 创建MAVEN_HOME变量，…\apache-maven-3.8.3
• 修改PATH变量，添加两项：%JAVA_HOME%\bin;%MAVEN_HOME%\bin。

4. 验证：新开CMD，运行命令

	○ java -version类似openjdk version "17.0.1" 2021-10-19……
	○ javac -version类似javac 17.0.1
	○ mvn -v类似Apache Maven 3.8.3……

5. Maven配置国内镜像

• https://blog.csdn.net/eeeemon/article/details/109692826

6. springboot创建项目

• https://start.spring.io/

  • 选择开发语言，版本号，填写项目名，打包方式，指定 Java 版本等，点击 GENERATE，网站自动生成并下载 SpringBoot 项目;
  • 解压下载的文件，用开发工具打开即可。

• 经常使用的依赖：
  ①Spring Web：Build web, including RESTful, applications using Spring MVC. Uses Apache Tomcat as the default embedded container.
  ②Spring Data JPA：Persist data in SQL stores with Java Persistence API using Spring Data and Hibernate.
  ③Spring Data Redis：Advanced and thread-safe Java Redis client for synchronous, asynchronous, and reactive usage. Supports Cluster, Sentinel, Pipelining, Auto-Reconnect, Codecs and much more.
  ④Spring Boot Actuator：Supports built in (or custom) endpoints that let you monitor and manage your application - such as application health, metrics, sessions, etc.
  ⑤MySQL Driver：MySQL JDBC and R2DBC driver.
  ⑥Java Mail Sender：Send email using Java Mail and Spring Framework’s JavaMailSender.
  ⑦Thymeleaf：A modern server-side Java template engine for both web and standalone environments. Allows HTML to be correctly displayed in browsers and as static prototypes.
  ⑧Lombok：Java annotation library which helps to reduce boilerplate code.

三、 MySQL数据库

1. 新建连接connection

(以MySQL Workbench为例）

• https://dev.mysql.com/downloads/
• 搜索mysql数据库安装指南教程很详细。
• 直接下载，安装过程中，默认就会安装mysql
• 注意保存安装过程中的用户和口令。
  

wrong:

Failed to connect to MySQL at localhost:3306 with user root

• 口令错误……
• mysql未启动：

  ①手动启动服务

②cmd运行mysql

mysql -hlocalhost -uroot -p

Enter后，输入口令，服务启动

③cmd 启动服务

net start mysql

如果错误：服务名无效。代表mysql有个别名。

这时候仅仅输入net start,会列出所有的服务。寻找最像的一个，输入尝试。

所以，我的应该是net start mysql80。

2. 新建table

create table user(
  uid         int,
  uname       varchar(30),
  sid    varchar(30),
  phone     varchar(11),
  create_time     datetime,
  pass_hash   text,
  constraint user_pk primary key(user_id)
);

电话号不要用数值型
password 要用函数加密

3. 插入数据

insert into user(uid, uname, sid, phone, create_time,pass_hash) values (1, '张三','SC007', '13896543210', '2022-09-30', '123456');

4.select测试

select * from user