zoukankan      html  css  js  c++  java
  • 小小白的前后端分离之路——vue + springboot + mybatis 入门/教程/示例(三)

    上一篇是前端的东西,这一篇就是后端的事儿啦,后端主要有两个事情,一个是响应前端,一个是访问数据库。废话不多说,咱话接上回...

    三、mybatis

    mybatis是一个第三方库/工具,用来跟数据库打交道的,用它可以方便地连接各种类型的数据库,当更换数据库类型的时候不用过多地修改代码,而且使我们的代码更加规范,管理也更加方便。

    (1)引用

    早在第一篇就说过啦,是用vscode下面的maven插件建立的springboot工程(或者说springInitializer插件创建的maven工程?这个不重要 T_T),我们也说过了利用maven可以方便地管理我们的依赖,如何实现的呢?

    在工程的根目录下,有一个叫做 pom.xml 的文件,maven就是通过这个文件来知道我们需要哪些依赖的,文件中有 <dependencies> 标签,工程中所有的依赖库都在这里面引入了。要引用 mybatis,只需要在这个标签里面添加一个 dependency(详见官网

    然后在 pom.xml 上右键,选择 Update Project(不过好像不更新也可以?? >_<),然后点左下角那个 MAVEN 选项,展开后点 Dependencies,就可以看到我们刚刚添加的依赖啦(啥?你说什么 MAVEN?在哪里?出门左转第一篇谢谢!)

    mybatis是干什么的,对啦,对接数据库,所以你得有个数据库吧,两种方式,第一种springboot工程中某个地方添加创建数据库的代码,第二种自己先手动创建数据库,我采用的是第二种(常规操作简单可行)。我最终用的是 mysql,因为 sqlserver 狠狠伤害了我,费半天劲装上,最后用不了,老是报错(好像是JDK版本太新sqlserver版本太旧??)。用 mysql就很顺滑了,相关的安装和配置网上可以找到一大堆,安装好之后创建一个数据库,里面添加表。比如我创建了一个名为 javaTest 的库,里面添加了一个名为 Table_1 的表,表有4个字段,其中id是自增主键,插入数据的时候只需要插入 name sex age 三个数据,数据库就会自己添加 id 属性,id 从 1 开始递增

    然后再插入几组数据以供测试。

    提一下,在电脑重启后,如果没有设置服务自动启动的话,要先手动启动mysql服务,然后程序才能访问数据库,启动方法可以自己搜一下,我是在命令行运行指令 net start mysql 启动

    好,数据库已创建好,要访问数据库还要在项目中进行配置,让项目知道我们要访问的数据库,首先在 pom.xml 中添加依赖

    (要不要 Update Project 你看着办把 T_T)

    (2)配置

    添加了依赖之后,还要进行一些配置,比如数据库的访问地址,用户名,密码等。在 vscode 创建的 MAVEN 项目中,在 resources 文件夹下有一个 application.properties 文件,不错,看名字就知道它是用来配置项目的!我的配置如下(很精简!没错,是咱小小白该看的!!)

    其中, port 是用来设置端口号的,我们的 springboot 程序运行的时候不是需要跟前端互动咩,所以一定要注意这个端口号不能跟 vue 项目的端口号一样(两个程序同一个端口会打架!),一般vue默认端口8080(可以在vue.config.js中进行配置),所以我这里设成了 8081;

    driver-class-name 是设置数据库驱动,我们用的 mysql 所以就是后面这一长串,如果较早的 mysql-connector-java(就是前面添加的那个mysql依赖)版本的话就是 com.mysql.jdbc.Driver,具体用哪个呢,你就随便用一个,错了的话程序会提醒,在调试控制台中会打印如下信息:

    看到没,人家会告诉你用新的

    url 是设置数据库的地址,我的是本地数据库,所以就是 localhost,端口我配置的是3306,然后要用的数据库名为 javaTest;

    usernamepassword 是用户名 密码

    mybatis.mapper-locations 是用来mybatis的配置文件的路径,这个 classpath: (可以自己查一下)这里代表的是 java文件夹,在我的 java/com/example2/demo2/mapper 下有一个文件叫 mapper.xml,这个mapper文件夹也是我自己创建的(为了让项目看起来更加有条理,仅此而已)

    (3)对象

    有对象的看好你的对象,没对象的不要担心,创建一个就好了

    前面创建了一个4个字段的表,之前有过数据库相关开发经验的都知道,我们需要创建一个对象/类(即所谓的 DO?),这里创建一个对象 Man

    可以看到,里面有四个变量,名称跟数据库表 Table_1 的字段名是一一对应的,数据类型的话好像都设置成 String 也可以。。。不过为了严谨,还是设置成对应的数据类型。因为java语言的特性,所以这个用来放Man的文件名必须为Man.java,至于位置嘛,随便放,调用的时候 import 相应的位置就行了,我是建了一个 model 文件夹(让项目看起来更加有条理仅此而已。。)

    注意,一定要设置get和set方法,不然mybatis是用不了的,原因可以自己查一下(网上大家都把它叫做 getter、setter),至于名字,为啥叫 getName,换个不行嘛(emmm,你可以试试,我觉得蛮无聊的就不试了),至于为啥不是 getname(毕竟变量名就是 name 嘛),这个跟 java 语言特性有关,getname 和 getName 是一样的

    (4)mapper.xml

    终于又回到mapper.xml了,mapper.xml是干啥的呢,还记得前面配置的时候指定了一个 mapper.xml 嘛。我们创建了一个与数据库表字段一一对应的对象,那么怎么将这个对象和数据库对应起来呢,mapper.xml就是干这个的。

    在 mapper.xml 中定义了具体的sql操作,语法遵循 mybatis 的语法,比如

    这是一个查询语句,查询表 Table_1 的所有数据,这里用到了前面创建的对象 Man,resultType 指定了表对应的对象,然后sql语句执行的结果会利用这个对象进行解析,所以Man的变量名和表字段名是一模一样的,这样才会 id 赋值给 id,name 赋值给 name。

    id 指定了这个操作的名字,叫做 getAllMan,调用的时候要用到

    插入操作是 insert

    这句是向 Table_1 中插入数据, #{name}、#{sex}、#{age} 是传入的参数,名字分别为name、sex、age(想怎么起怎么起,为了便于理解尽量还是跟段名相关)

    删除是 delete

    这句是从 Table_1 中删除 id 为指定值的数据,指定值通过一个列表传入,这样可以一次性删除多个数据,比如要删除100条数据,直接传入100个id值列表就可以了,如果一次删除一个就要循环一百次。

    为了实现解读传入的列表,用到了 foreach 语句,这个语句可以遍历列表的值并按指定的方式拼接起来返回一个字符串,所以最终 delete 标签内部是一个sql字符串语句,foreach的结果与前面的 “delete from Table_1 where id in ”拼接起来。

    其中,collection指定了列表的名称,item 值是遍历列表时的临时对象名称(类似于一般编程中for循环中的i一样),后面的 #{id} 代表 “id” 指定的整个对象,这里因为我传入的就是简单类型列表,所以就比较简单,如果传入的是复杂类型,那就要根据需求看用什么了,比如 #{id.name} 代表 “id” 指向对象下的 name 属性。

    open 指定语句以什么字符串开始, close 指定语句以什么字符串结束, separator 指定分隔符是什么。foreach 结果就是返回一个字符串,这个字符串的开头、结尾、每一项的分隔符都指定好了。

    假如传入的列表是 ['1','2','3'],那么结果就是 (1,2,3),所以最终拼起来就是 “delete from Table_1 where id in (1,2,3)”,这是一个完整的sql语句。

     好了,sql操作都定义完了,那怎么调用呢,指定了操作方法之后还不够,还要指定命名空间,这里的命名空间跟一般编程的命名空间不一样,emmmm,你就知道不一样就行了这个不重要T_T

    所有的sql操作都是包含在 <mapper> 标签中的,设置命名空间也是在 mapper 标签开头设置:

    <mapper namespace="名称">

    最终整个mapper.xml 文件如下

    (5)mapper

    mapper 就是将前面 mapper.xml 中定义的sql操作与 java 编程对应起来,本质是一个接口。为啥要多这么一层呢?我不知道 T_T,别问那么多为什么知道这么用就行了

    为了让项目更加有条理,我又建了个 dao 文件夹(名字不重要),然后下面添加了一个 UserMapper.java 文件(名字不重要),如下

    可以看到,前面 mapper.xml 中 mapper 标签指定的命名空间实际上就是这个 UserMapper 文件,然后在 UserMapper 中,接口前面有一个 "@Mapper" 注解,另外 UserMapper 接口中的函数名称也与 mapper.xml 中 mapper 标签下的sql操作的 id 一模一样。如此一来,mybatis 会自动将 UserMapper 接口和 mapper.xml 中的sql操作对应起来。

    截图中可以看到那个delMan函数传入的是一个字符串列表,诶?数据库中id字段不是数字类型嘛,这里怎么用 String?最最前面也说过了这个数据类型用String也是可以的,我这里没有用 int[] 纯粹是为了省事,因为从前端传过来的数据是表单格式,本身就是一个字符串。

    好了,mybatis 该有的都有了,下面就该调用了~~~

    四、controller

    controller是啥,它在哪?刚刚创建的空项目没有这个文件。。。但是如果你看了第一篇,根据里面推荐的链接,应该是知道怎么添加的

    后端不是要响应前端咩,所以它要有个 url 地址,以供前端调用,url 的设置,参数的接收,数据的处理和返回都是在 controller 中完成的,它是后端的核心。

    为了方便管理,创建一个 controller 文件夹,下面添加一个 HelloController.java 文件(你懂的,名字不重要,随便起),贴一下部分代码

    可以看到,对象中创建了一个 UserMapper 变量,就是前面创建的那个对象,然后就可以在需要的地方直接调用相关函数了,比如第25行,调用getAllMan函数后,经过层层映射,最终会触发 mapper.xml 中的 select * from Table_1 语句,返回的数据赋给临时变量 persons,然后函数再返回 persons 给前端。

    注意,UserMapper 接口前面一定要加注解 "@Autowired",这样才能触发 mybatis 解析映射。

    (1)RestController

    在最前面有个 @RestController 注解,有人也用 @Controller ,这两个的区别不太懂,,T_T,这个不重要能用就行了

    (2)mapping

    这个很重要,设置不好的话,前端访问不了,它就是用来设置 url 地址的。前面配置的时候不是端口配了 8081 嘛,所以如果 mapper 配置 “/hello” 的话,那么url地址就是 localhost:8081/hello。

    mapping 的注解有三种: RequestMappingGetMappingPostMapping

    RequestMapping 既可以支持 get请求也可以支持post请求,所以在用的时候要指定哪种方式才行,具体可以自己查;

    GetMapping 就是专门用来响应get请求的;

    PostMapping 就是专门用来响应post请求的。

    我用的是后两种,自认为比较简单

    (3)参数

    无论是get请求还是post请求,两者都可以携带参数。

    比如我现在要用axios发送请求,携带 name、sex、age 三个参数。那么get请求可以这样

    get请求默认格式是表单格式,所以不用qs转换。需要注意的是,响应函数中的形参名称要与前端相同

    我这个功能是先查询所有结果,然后再进行筛选,最后返回指定name、sex、age的数据。

    如果post请求可以这样

    axios的post格式默认是json,要用qs转换成表单格式。

    (4)跨域

    我们的vue项目和springboot的端口不是不一样咩,这就导致了一个问题,后台成功运行后,前端访问不了,报什么无法访问的错误,网上查了很多,最后确定是跨域的问题(跨域?同一个电脑上还跨域?。。不太懂,好像是跟tomcat有关),还好解决办法也不难,就是要添加个文件就好了,内容如下:

    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.cors.CorsConfiguration;
    import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    import org.springframework.web.filter.CorsFilter;
    
    @Configuration
    public class CorsConfig {
        private CorsConfiguration buildConfig(){
            CorsConfiguration corsConfiguration = new CorsConfiguration();
            corsConfiguration.addAllowedOrigin("*");
            corsConfiguration.addAllowedHeader("*");
            corsConfiguration.addAllowedMethod("*");
            return corsConfiguration;
        }
    
        @Bean
        public CorsFilter corsFilter(){
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            source.registerCorsConfiguration("/**", buildConfig());
            return new CorsFilter(source);
        }
    }

    为了让项目看起来更加有条理,我就新建了个config文件夹,下面添加了一个CorsConfig.java 文件,文件内容就是上面这个。

    至此,后端也算是搞完啦 ( ^_^ )

    为了方便大家学习,我把代码上传到了gitee,有需要的自行下载哦~~~

  • 相关阅读:
    前端登录,这一篇就够了
    JS 之跨域问题汇总
    一篇搞定(Js异步、事件循环与消息队列、微任务与宏任务)
    在vue-cli@3.X中配置代理解决开发环境的跨域问题的同时解决cookie问题--Cookies 解决方案
    多包管理工具lerna
    js中的事件监听(冒泡和捕获)
    js事件监听/鼠标滚轮/行为/冒泡/键盘的兼容性写法
    详解clientHeight、offsetHeight、scrollHeight
    Css背景渐变
    CSS生成内容
  • 原文地址:https://www.cnblogs.com/hxzkh/p/15180133.html
Copyright © 2011-2022 走看看