学习java后端连接mysql数据库定义前端数据通信接口—前端学习者

说明
近段时间，服务器快过期了，想自己构建网站，前端使用axios访问数据，但是没有后端和数据库打交道，导致很多事情不方便，这两周就使用探索使用java写后端连接mysql数据库定义数据通信接口来实现自己前端登录和数据管理等功能。
背景
1. c#语言基础，理解面对对象编程
2. 前端语言基础，html，css，js，jquery，vue，promise，axios；

服务器/本地mysql安装和测试

本地服务器安装
直接下载和安装mysql即可，自定义安装，记住账号密码。
服务器配置mysql连接
1. 下载和安装mysql对应的版本（采用宝塔面板安装和配置）
2. 开放mysql默认的3306端口
  在宝塔安全组中开放和在服务器实例安全组中开放
3. 宝塔中设置数据库访问权限，指定ip或者完全开放
4. 管理员登录phpMyadmin设置数据库权限中登录信息的主机名为任意主机
  使用phpMyadmin进行登录的时候，使用数据库实例的账号密码登录没有权限，需要使用mysql的管理员账号和密码登录，默认root账号，密码在宝塔面板查看。
  5.使用idea的DataBase测试连接，Host为不带http//开头的服务器ip地址，本地为localhost，连接字符串：jdbc:mysql://localhost:3306

java后端springBoot框架连接数据库

初始化插件
初始化时，使用spring web，mysql drive，lombok，mybatis插件。其中spring web表示web应用，mysql drive连接数据库的驱动，简单介绍lombok和mybatis

连接数据库配置参数

新建springBoot项目并初始化插件，在src/mian/resource中的application.properties配置文件中，填写如下代码连接mysql数据库

server.port=9090
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/dblocal?setUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=admin

账号密码为对于mysql管理员的账号密码，端口默认8080，为了和前端区分自定义设置为9090。
在进行配置的时候，如果mysql数据库版本是5，配置类为com.mysql.jdbc.Driver

常见注解

@RestController: 是@controller和@ResponseBody 的结合
@Controller 将当前修饰的类注入SpringBoot IOC容器，使得从该类所在的项目跑起来的过程中，这个类就被实例化。
@ResponseBody 它的作用简短截说就是指该类中所有的API接口返回的数据，甭管你对应的方法返回Map或是其他Object，它会以Json字符串的形式返回给客户端
@Resource：
java的注解，属性较多，type无法分辨时可以用name分辨
@Autowired：
spring的注解，一个属性，type无法分辨时需要借助@Qualifier注解才能使用,使用@Autowired方式最好使用构造函数的方式注入。
@Configuration:声明一个类为配置类，用于取代bean.xml配置文件注册bean对象。被声明的配置类本身也是一个组件。注解常常一起搭配使用的注解有@Bean、@Scope、@Lazy三个比较常见。
@Bean：等价于Spring中的bean标签用于注册bean对象的，内部有一些初始化、销毁的属性…
@Scope：用于声明该bean的作用域，作用域有singleton、prototype、request、session。
@Lazy：标记该bean是否开启懒加载。
Spring
Spring的注解形式：@Repository、@Service、@Controller，它们分别对应存储层Bean，业务层Bean，和展示层Bean。
@component是spring中的一个注解，它的作用就是实现bean的注入。在Java的web开发中，提供3个@Component注解衍生注解（功能与@component一样）分别是：
1、@Controller: 控制器（注入服务）用于标注控制层，相当于struts中的action层。
2、@Service: 服务（注入dao）用于标注服务层，主要用来进行业务的逻辑处理
3、@Repository:（实现dao访问）用于标注数据访问层，也可以说用于标注数据访问组件，即DAO组件

@Repository、@Service、@Controller 和 @Component 将类标识为Bean

lombok与myBatis plus学习与注解

lombok
主要优化代码和简写代码
1. @Data注解：lombok插件代码缩写，表示@Setter，@Getter，@Builder，@RequiredArgsConstructor，@ToString，@EqualsAndHashCode，实现了对应的方法
myBatis plus
mapper和service的实现，主要简化各种sql查询的代码，包括分页插件等功能，功能强大，脱离后端写sql语句
1.@TableName("users")注解主要是实现实体类型和数据库中users表实现映射数据库，value='users'简写
2. @RequestMapping("/users")定义访问的路径，包含@PostMapping()、@GetMapping()方法，@PostMapping()当同时存在时，需要定义参数或者重新定义@GetMapping()的访问路径
注解类型
路径传参的使用，{}，获取变量值使用@PathVariable注解。还有@RequestBody、@RequestParam等。

1
2
3

public String remove(@PathVariable("courseNo") String courseNo){
    courseService.removeCourseByNo(courseNo);
    return "redirect:/course/list";

工具类

1.hutool
Hutool是一个小而全的Java工具类库，通过静态方法封装，降低相关API的学习成本，提高工作效率，使Java拥有函数式语言般的优雅，让Java语言也可以“甜甜的”。
Hutool中的工具方法来自每个用户的精雕细琢，它涵盖了Java开发底层代码中的方方面面，它既是大型项目开发中解决小问题的利器，也是小型项目中的效率担当；
Hutool是项目中“util”包友好的替代，它节省了开发人员对项目中公用类和公用工具方法的封装时间，使开发专注于业务，同时可以最大限度的避免封装不完善带来的bug。

数据接口实现

实体类与数据库表格映射

新建entity或者poje文件夹，里面新建User类，用于映射数据库中的users表格，使用@TableName("users")和@Data注解，在类中定义与数据库users表格对应的字段名，注意类中的小驼峰写法对应数据库字段名中’_',既类中nickName变量默认对应数据库表单字段的nick_name而不是nickName。
使用Data注解后，直接使用User::getItem格式访问类中的属性。
新建mapper文件夹，里面存放myBatis puls对应的mapper接口实现，继承BaseMapper<T>类，里面可以重新默认的查询方法
新建controller文件夹，里面存放类，实现连接对应的接口
新建common文件夹，里面存放插件的配置信息等
新建service文件夹，当数据交互和逻辑复杂时，用于管理服务接口的中转站
至此，通过编写代码实现对应的接口，与前端数据进行交互

前端vue3中连接端口

需要配置代理，在vue.config.js配置中，需要指定Host,打开后端服务接口，并且配置的时候host后面有空格。
注意：此代理配置适合用于开发环境，打包部署之后依旧会出现跨域问题。打包后配置的proxy不会被打包入dist文件中。

   devServer: {
  host: "localhost",
  // port: 8090, // 端口
  proxy: {
    '/api': {  //   若请求的前缀不是这个'/api'，那请求就不会走代理服务器
      target: 'http://127.0.0.1:9090',  //这里写路径 
      pathRewrite: { '^/api': '' }, //将所有含/api路径的，去掉/api转发给服务器
      ws: true,  //用于支持websocket
      changeOrigin: true   //用于控制请求头中的host值
    },
  }
},

不然运行npm run serve的时候出错。
项目部署跨域问题解决
通过配置nginx代理解决，nginx主要配置如下：

  server {
        #监听80端口
        listen 80;
        #服务名称，用于访问的域名，或者主机名。提供给用户访问
        server_name localhost;
        #反向代理，location越靠前优先级越高，所以此项配置必须放在location /之前，否则会失效
        location /api {
           #被代理路径，只能是域名或ip：port形式，以/结尾表示用/替换掉/api。
            proxy_pass http://127.0.0.1:8088/;  
            #重写url路径，把/api修改为/，其他不变$1表示前边（）中的分组
            rewrite  ^/api/(.*)$    /$1 break;
        }
        location / {
            #vue项目路径
            root   /app/web/dist;
            index  index.php index.html index.htm;
        }
}

注：使用后端/api/xxx传递数据数据，/api为代理路径。真实为ip:8082/user，需要在proxy_pass路径加/，替换/api实现成功代理。