vue_前后端项目分离操作-查询操作

news/2024/10/17 16:31:05/

前后端项目分离操作

使用搭建好的vue项目和ssm项目

功能需求分析

后端

查询

持久层

发送两条sql查询总条数和结果集(limit容易写死)

使用分页插件pageHelper解决分页的功能

在pom.xml中添加依赖

 <!--pagehelper--><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>5.0.3</version></dependency>

业务层

后端接口的实现

pageHelper中提供了一个类似PageResult的类PageInfo

在spring的pom.xml配置文件中添加配置

    <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId></dependency>

service分页查询使用pageHelper进行分页
在这里插入图片描述

表现层

将查询到的数据转换成json字符串并返回(需要和前端沟通具体的数据)

返回的结果使用自定义的JsonResout,里面封装自己的方法,使用@ResponseBody返回json数据给前端

查询出来的数据使用Map集合进行封装

@ResponseBody
public JsonResult list(UserQueryObject qo) {PageInfo<User> info = service.query(qo);data.put("currentPage", info.getPageNum());data.put("pageSize", info.getPageSize());data.put("total", info.getTotal());data.put("data", info.getList());return JsonResult.success(200, "操作成功", data);
}

注意事项

前端接收后端数据的时候出现:No converter found for return value of,类型转换异常

**解决方法:**在pom.xml文件中引入jackson依赖

前端

新建一个vue页面,配置好响应的路由

json数据的获取及跨域访问的问题

在页面加载的时候发送请求( 使用)

1.安装axios: npm install axios

2.在项目中引用axios,两种:

const axios=require(“axios”)

import axios from ‘axios’

3.在函数中使用axios的 get方法发送请求,成功之后直接使用then方法

注意事项
this的指向:如果回调函数使用的是匿名函数,this就没有指向,undefined

this指向,如果回调函数使用的是箭头函数,this指向vue

**跨域访问时:**先访问自己前端的端口号,再添加一个’api’,使用api进行代理,代理对象再vue.cnfig.js文件中填写

发送数据的时候使用params携带参数

在这里插入图片描述

vue.cnfig.js文件填写跨域访问的代理端口,里面的端口号是后端的端口号

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({/*解决跨域访问的问题*/transpileDependencies: true,devServer:{proxy:{'/api':{target:"http://localhost:8080",changeOrigin:true,pathRewrite: {'^/api': ''}}}}
})

在element官网找各个组件

添加组件之后,控制台会报错,

原因:标签里面有些绑定的自定义事件和数据都没有定义

解决方法:在methods中添加该事件的函数,在data中添加获取的数据

在这里插入图片描述

在初始化完成之后,发送请求访问后端的接口,接收响应的JSON数据

前端需要得到的数据分析:

{
code:200  //状态码,msg:""操作信息,data:{	list:[],	currentPage:1,	pageSize:3	}	
}

回调函数中响应的data数据层次分析

在这里插入图片描述

里面的data是按照层级进行寻找对应的数据一个对象
在这里插入图片描述

设置日期细节注意

若java中实体类中没有设置日期的格式,会有400错误

日期格式Json转java

在这里插入图片描述

在vue中设置日期

使用"value-format=“yyyy-MM-dd”"设置

1688308699039)]

设置日期细节注意

若java中实体类中没有设置日期的格式,会有400错误

日期格式Json转java

在这里插入图片描述

在vue中设置日期

使用"value-format=“yyyy-MM-dd”"设置
在这里插入图片描述