文章目录
- 一、Vue前端
- 1. 去官网下载Nodejs,如果希望稳定的开发环境则下LTS
- 2. 安装好后win+r输入node -v查询是否安装成功
- 3. 高版本的nodejs自带npm,则不必再下载,查询命令npm -v
- 4. 由于在国内使用npm是非常慢的,所以在这里我们推荐使用淘宝npm镜像,使用
- 5. 测试
- 6. 安装vue/cli:`cnpm install -g @vue/cli`
- 7. 基于vue模板创建名为“demo_fe”的项目、使用vite工具构建:
- 8. 测试热加载:
- 二、Springboot后端
- 1. 安装JDK
- 2. 安装MAVEN
- 3. 环境变量
- 4. 验证:新开CMD,运行命令
- 5. Maven配置国内镜像
- 6. springboot创建项目
- 三、 MySQL数据库
- 1. 新建连接connection
- wrong:
- ①手动启动服务
- ==②cmd运行mysql==
- ③cmd 启动服务
- 2. 新建table
- 3. 插入数据
- 4.select测试
一、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
找到并删除<p>Edit……to test HMR.</p>
代码,保存后浏览器中页面该行应立即消灭,确认热加载功能正常。
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
②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