SpringBoot结合Vue.js+axios框架实现增删改查功能+网页端实时显示数据库数据(包括删除多条数据)

本文适用对象:已有基础的同学,知道基础的SpringBoot配置和Vue操作。

在此基础上本文实现基于SpringBoot和Vue.js基础上的增删改查和数据回显、刷新等。

SpringBoot结合Vue.js+axios框架实现增删改查功能+网页端实时显示数据库数据(包括删除多条数据)_第1张图片

一、实时显示数据库数据

实现步骤:

第1步:编写动态请求响应类:在启动类同父目录下创建controller包,在包下创建DataController类,添加@RestController、@RequestMapping("")等注解。在类中实例化dao层的BookDa要加上@Autowired注解;然后编写方法注意返回的结果和调用dao层中的方法,记得加上@GetMapping等注解:

@RestController
@RequestMapping("/api/")
public class DataController {
    @Autowired
    private BookDao bookDao;
    @GetMapping("select")
    public List getData(){
        System.out.println(bookDao.select());
        return bookDao.select();
    }
}

— — — — — — 知识加油站 — — — — — —

@RestController注解:是将一个类标记为处理HTTP请求的控制器,并且自动将方法返回的对象转换为JSON或XML格式的响应体,发送给客户端。

— — — — — — —  — — — — — — — — —

第2步:编写ajax请求,在new Vue下写入如下代码:

mounted(){
    axios.get("/api/data").then(response=>{
         this.tableData = response.data;
    })
},

第3步:修改启动类,写入如下代码:

@CrossOrigin(origins = "http://localhost:8081")
@SpringBootApplication(scanBasePackages = "com.itheima.controller")
@MapperScan("com.itheima.dao")
public class AdsSdemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(AdsSdemoApplication.class, args);
    }
}

实现思路:ajax发送请求到controller层,controller层负责查询数据库并返回结果给ajax,ajax将结果赋值给显示变量,Vue根据变量中的值对结果进行显示,最终我们能看到网页上的数据。

重点技术原理:

1. 数据显示问题:

在vue的表格中有一个 :data="xxx"的字样,其中xxx就是数据源,这个数据源会在data()的return中被定义(例如在这里数据源都是tableData,在tableData中不需要定义具体的字段,因为这些字段在tostring函数中都会带有):

 SpringBoot结合Vue.js+axios框架实现增删改查功能+网页端实时显示数据库数据(包括删除多条数据)_第2张图片  SpringBoot结合Vue.js+axios框架实现增删改查功能+网页端实时显示数据库数据(包括删除多条数据)_第3张图片

数据源一般是JSON格式,JSON数据有一个特点,最外层用 [ ] 符号进行包裹,在内层每一个数据都用 { } 符号进行包裹,vue表格会自动提取数据库字段的key,然后去匹配每个单元格的prop="xxx",如果key和xxx匹配上,就将这个key对应的value显示到prop所在单元格的位置。

SpringBoot结合Vue.js+axios框架实现增删改查功能+网页端实时显示数据库数据(包括删除多条数据)_第4张图片

2.请求发送:

mounted简单理解就是:在挂载完成,即Vue初始化成功,HTML页面渲染成功之后执行的钩子函数。

mounted详细解释如下:mounted是Vue实例生命周期钩子函数之一。mounted函数会在Vue实例被创建并且挂载到DOM元素(DOM元素指的是文档对象模型)上之后立即调用。函数的作用是在Vue实例挂载(指的是将Vue实例与一个实际的DOM元素关联起来,使其能够在该DOM元素内部进行渲染)完成后执行一些初始化操作或请求数据。

下面代码的含义是:在Vue初始化完成,HTML页面渲染成功后,发送get请求到/api/data路径请求动态资源,返回一个response,然后取出data域中的数据赋值给tableData。

SpringBoot结合Vue.js+axios框架实现增删改查功能+网页端实时显示数据库数据(包括删除多条数据)_第5张图片

3.请求应答:

请求会根据@RequestMapping中的路径找到controller包下具体的类或方法,可以根据请求方式不同调用不同的方法(在该例中使用get请求方式对应@GetMapping方法,调用getData方法,getData通过调用dao层下的bookDao中的select方法与数据库进行连接,查询后返回List结果集),结果被返回到请求的发送方。

SpringBoot结合Vue.js+axios框架实现增删改查功能+网页端实时显示数据库数据(包括删除多条数据)_第6张图片

 二、注意事项 

说明6点注意事项:

1、右上角的小图标,只能用于测试修改静态页面的样式,实际和数据库的关联不能通过这种方式进行。

2、如果想测试动态页面的效果,与数据库关联,必须通过启动类启动(启动类是带有main方法的),要注意选择Current File进行启动,否则可能启动方式可能受前面测试影响。

SpringBoot结合Vue.js+axios框架实现增删改查功能+网页端实时显示数据库数据(包括删除多条数据)_第7张图片

3、注意启动类必须同controller、dao等一系列的包在同一个目录下,启动类的上面不能有其它包,如果不在同一目录下可能导致扫描不到controller中的资源路径:

SpringBoot结合Vue.js+axios框架实现增删改查功能+网页端实时显示数据库数据(包括删除多条数据)_第8张图片

也可以通过注解将controller包扫描的方式解决:

@SpringBootApplication(scanBasePackages = "com.itheima.controller")

4、如果想访问前端界面,只需要将webapp视为根目录,相当于localhost这一级,然后想要访问具体的静态资源,只需要输入webapp后面的路径即可:

比如ADSS.html在wewbapp目录下,于是只需要在localhost:8081后面输入/ADSS.html即可访问该静态资源:

SpringBoot结合Vue.js+axios框架实现增删改查功能+网页端实时显示数据库数据(包括删除多条数据)_第9张图片 SpringBoot结合Vue.js+axios框架实现增删改查功能+网页端实时显示数据库数据(包括删除多条数据)_第10张图片

5、动态资源比如跳转路径访问路径,一般存放在controller目录下,注意controller包需要与启动类在同一个层次目录下:

访问数据只需要输入@RequestMapping里的地址即可直接访问:

SpringBoot结合Vue.js+axios框架实现增删改查功能+网页端实时显示数据库数据(包括删除多条数据)_第11张图片SpringBoot结合Vue.js+axios框架实现增删改查功能+网页端实时显示数据库数据(包括删除多条数据)_第12张图片

6、实际网站部署还要注意跨域问题,一般在启动类上添加CrossOrigin注解:@CrossOrigin(origins = "http://localhost:请求端口号")

三、删除(单条,多条)

3.1. 删除单条数据

第1步:dao层下的BookDao接口中定义delete方法,实现从数据库中删除单条数据:

@Delete("delete from tb_brand where id = #{id}")
public void delete(int id);

第2步:在controller层下定义请求路径,传入参数,执行dao层删除方法:

@DeleteMapping("delete/{id}")
public void deleteData(@PathVariable("id") int id){
    bookDao.delete(id);
}

— — — — — — 知识加油站 — — — — — —

1. @PathVariable注解:是Spring MVC框架中的一个注解,用于从URL路径中获取变量的值并将其绑定到方法的参数上。比如:请求地址:@GetMapping("/users/{ID}") 方法:public User getUserById(@PathVariable Long id) 。那么注解会将{ID}最终被替换的值赋值给参数id。

2. slot - scope="scope":slot-scope是一个特殊的属性,用于在父组件中向子组件传递数据。slot-scope="scope"定义了一个名为scope的变量,用于接收父组件传递的数据。

3. row是表示一个数据表格中的某一行的数据对象。scope可以理解为整张数据表格中的全体数据对象。

4.