使用IDEA和WebStorm 做一个小作业（一）
菜鸟教程
1、HTML
2、CSS
https://www.runoob.com/cssref/css-reference.html
3、JavaScript
JavaScript 教程 | 菜鸟教程 (runoob.com)
4、Python
Python3 教程 | 菜鸟教程 (runoob.com)
IDEA 后端
一、下载
1、IDEA
IntelliJ IDEA – 领先的 Java 和 Kotlin IDE (jetbrains.com)
注意：不要直接下载最新版本
2、补丁
-
http://idea.lanyus.com/ 需要扫码关注获取
注意：如果不能下载，电脑上需要下载网盘
3、jdk1.8版本
-
配置jdk 环境
上网查
4、在idea自带Maven里配置国内仓库
D:\MyFiles\ideaIU\IntelliJ IDEA 2022.3.2\plugins\maven\lib\maven3\conf
找到IDEA文件 —— plugins —— maven —— lib —— maven3 —— conf
打开 settings.xml 文件，找到mirror元素，添加阿里云仓库镜像代码
<mirror>
<id>aliyunmaven</id>
<mirrorOf>*</mirrorOf>
<name>阿里云公共仓库</name>
<url>https://maven.aliyun.com/repository/public</url>
</mirror>
再把 settings.xml 文件复制到 C:\Users\Administrator\.m2
5、在idea里配置jdk、maven
-
配置jdk
File/齿轮 —— Project Structure —— + —— JDK —— 选择jdk路径
-
配置idea自带maven
File/齿轮 —— Settings —— Build, Execution, Deployment —— Build Tools —— Maven
Maven home path：Bundled (Maven 3)
二、创建maven项目
1、方法一
New Project
Name
Location
Language：Java
Build system：Maven
JDK
Add sample code：√
2、方法二
Maven Archetype
Name
Location
JDK
Catalog：Internal
Archetype：org.apache.maven.archetypes:maven-archetype-quickstart
3、在pom.xml 添加依赖
<dependencies>
添加依赖
</dependencies>
有网：在 www.mvnrepository.com 搜索jar包
离线：配置环境变量
右键电脑 —— 属性 —— 高级系统设置 ——环境变量——系统变量——新建
变量名：MAVEN_HOME
变量值：maven地址
双击Path —— 新建
D:\MyFiles\ideaIU\IntelliJ IDEA 2022.3.2\plugins\maven\lib\maven3\bin
找到IDEA文件 —— plugins —— maven —— lib —— maven3 —— conf
打开 settings.xml 文件，找到本地仓库 localRepository
<localRepository>/path/to/local/repo</localRepository>移出注销
修改 改斜杠：防止当成转义符号看<localRepository>C:/Users/Administrator/.m2/repository</localRepository>
修改完再把 settings.xml 文件复制到 C:\Users\Administrator\.m2
不启动idea 打开终端 win+r 输入cmd
mvn -version 检查maven是否能用
mvn clean 清除 target目录一起被清掉
mvn package 重新打包
cd.. 退到上一个目录
在idea上打开Terminal （快捷键：alt +F12）
必添加的依赖
springboot
<!-- https://mvnrepository.com/artifact/org.kie.kogito/kogito-springboot-starter -->
<dependency>
<groupId>org.kie.kogito</groupId>
<artifactId>kogito-springboot-starter</artifactId>
<version>1.22.1.Final</version>
</dependency>
4、代码（写代码前先检查环境是否正确）
1、Test
package org.nf;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
/**
* Hello world!
*
*/
访问是否正确 http://127.0.0.1:8080
如果出现404错误，创建配置文件
mian右键 —— New —— Directory —— 新建resources目录 —— resources右键 —— New —— File —— application.yml
server
server：服务器 port：服务绑定的端口，不写默认是8080 context-path：服务的路径，不写默认为空
再次访问是否正确 http://127.0.0.1:8888 ，一切正常可以开始写代码
2、案例（一）
1、创建一个实体类 entity
package org.nf.entity;
/**
* @author lxm
* @create 2023/3/14
*/
public class Car {
private Integer id;
private String name;
//alt + insert （添加get、set快捷键）
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
2、创建一个servlet类
如果返回的都是json格式的数据的话，可以不写@ResponseBody，都但是@Controller 要改成 @RestController
package org.nf.action;
import org.nf.entity.Car;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
/**
* @author lxm
* @create 2023/3/14
*/
package org.nf.action;
import org.nf.entity.Car;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
import java.util.List;
/**
* @author lxm
* @create 2023/3/14
*/
访问地址检查
http://127.0.0.1:888/getCar
http://127.0.0.1:888/getCar2
3、案例（二）
1、创建一个实体类 entity
package org.nf.entity;
/**
* @author lxm
* @create 2023/3/14
*/
public class Student {
private Integer id;
private String name;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
2、创建一个servlet类
如果返回的都是json格式的数据的话，可以不写@ResponseBody，都但是@Controller 要改成 @RestController
前端传参 ，SpringBoot接收
package org.nf.action;
import org.nf.entity.Student;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
/**
* @author lxm
* @create 2023/3/14
*/
package org.nf.action;
import org.nf.entity.Student;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
/**
* @author lxm
* @create 2023/3/14
*/
package org.nf.action;
import org.nf.entity.Student;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
/**
* @author lxm
* @create 2023/3/14
*/
package org.nf.action;
import org.nf.entity.Student;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
/**
* @author lxm
* @create 2023/3/14
*/
WebStorm 前端
HTML（超文本标记语言） | MDN (mozilla.org)
1、下载WebStorm
https://www.jetbrains.com/zh-cn/webstorm/
2、axios
axios中文网|axios API 中文文档 | axios (axios-js.com)
进入点击文档，下滑到安装，复制
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
到HTML的头部文件，就可以访问到了。运行成功，右击网页页面，点击检查，找到网络（Network），刷新，把 axios.min.js 另存为到电脑文件目录，用笔记本打开检查是否有代码
3、vue
Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)
进入点击文档，找到vue 2文档，选择 Vue 2.7，找到安装，在# CDN复制
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
到HTML的头部文件，就可以访问到了。运行，右击网页页面，点击检查，找到网络（Network），刷新，把 vue.js 另存为到电脑文件目录，用笔记本打开检查是否有代码
4、mathjax
https://www.osgeo.cn/mathjax/web/start.html
找到
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
放到HTML的头部文件，就可以访问到了。运行，右击网页页面，点击检查，找到网络（Network），刷新，把tex-mml-chtml.js另存为到电脑文件目录，用笔记本打开检查是否有代码
MathJax基础教程和快速参考
https://blog.csdn.net/icurious/article/details/81697410
5、创建项目
1、创建一个js文件
把 axios.min.js 复制到 WebStorm 的 js文件
2、代码
1、案例一
HTML
让客户端响应变慢，在后端加Thread.sleep();
package org.nf.action;
import org.nf.entity.Car;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
import java.util.List;
/**
* @author lxm
* @create 2023/3/14
*/
解决跨域（不同服务器）的错误：
1、前端 （回调、代理等技术）
2、后端 添加 跨域的标记符@CrossOrigin
IDEA
package org.nf.action;
import org.nf.entity.Car;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
/**
* @author lxm
* @create 2023/3/14
*/
MySQL
1、重新安装mysql 【管理员】
1.卸载
a.检查mysql是否已经停掉，如果没有停net stop mysql b.卸除服务mysqld --remove 【D:\mysql-8.0.29-winx64\bin】 c.直接删除整个目录D:\mysql-8.0.29-winx64
2.安装【服务端】
下载官方文档如下：https://www.mysql.com
a.解压
用终端操作
b.在mysql-8.0.32-winx64\bin目录安装data 命令：mysqld --initialize-insecure --user=mysql c.安装服务mysqld --install --mysql-8.0.32-winx64\bin目录 d.启动服务端：net start mysql 鼠标在服务，右键选启动 e.把服务启动类型改为：手动 （防止每次开机都运行）
右键此电脑——属性——高级系统设置——环境变量——系统变量——找到Path点编辑新建
D:\MyFiles\MySQL\mysql-8.0.32-winx64\bin
再把它上移最顶
3.使用客户端
mysql -uroot -p
4.修改登录密码
set password for 'root'@'localhost'='123456'; exit 重新登录 mysql -uroot -p mysql -uroot -p123456
5.检查编码(不是必须)
show databases; 显示当前的数据库
use 切换到数据库;
show tables; 查看所有表
show variables; 查看环境变量 show variables like '%char%';
6.修改数据库编码
a.进入 mysql-8.0.28-winx64文件夹中，新建一个名为 my，后缀为 .ini 的文件。 b.以 记事本 的形式打开 my.ini 文件，将下面的代码段复制进去。编辑并且添加内容
[client]
default-character-set=utf8
[mysqld]
character-set-server=utf8
c. 退出 exit
停止服务 net stop mysql
再重启服务（新版不重启也行）net start mysql
登录 mysql -uroot -p
7.创建数据库
create database cardb;
use cardb;
create table carInfo(
id int primary key auto_increment,
name varchar(50)
);
insert into carInfo(name) values('小小');
insert into carInfo(name) values('丽丽');
select * from carInfo;
use shcooldb;
create table book(
id int primary key auto_increment,
book_name varchar(50)
);
insert into book(book_name) values('小王子');
insert into book(book_name) values('红楼梦');
insert into book(book_name) values('西游记');
select * from book;
2、代码
案例一
解决这个Dao对象null的问题，2个解决方法 1、手写实现类，新建（new）出对象即可
1、创建实体类
package org.nf.entity;
/**
* @author lxm
* @create 2023/3/14
*/
public class Car {
private Integer id;
private String name;
//alt +ｉｎｓｅｒｔ
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
2、创建Dao
package org.nf.dao;
import org.nf.entity.Car;
import java.util.List;
/**
* @author lxm
* @create 2023/3/16
*/
public interface CarDao {
/**
* 数量一
*
* @return
*/
public List<Car> getBookById();
/**
* 多数
* @return
*/
public List<Car> getAllBook();
}
3、创建DaoImpl
package org.nf.dao.impl;
import org.nf.dao.CarDao;
import org.nf.entity.Car;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
/**
* @author lxm
* @create 2023/3/16
*/
public class CarDaoImpl implements CarDao {
/**
* 连接数据库
* @return
*/
private static final String USER_NAME = "root";
private static final String PASSWORD = "123456";
private static final String JDBC_URL = "jdbc:mysql://localhost:3306/cardb?serverTimezone=UTC&characterEncoding=utf8&useUnicode=true&useSSL=false";
private static final String JDBC_DRIVER = "com.mysql.cj.jdbc.Driver";