Axios 实现前后端交互

文章目录

Axios 实现前后端交互
一、数据库
二、前端
三、后端
- 1.StudentServiceImpl.java
- 2.StudentController.java
四、测试

提示：本篇基于【小项目】SSM 实现单表 CRUD

一、数据库

准备数据

二、前端

文件名：Axios.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Axios</title><script src="../js/axios.js"></script>
</head><body><button onclick="restFul()">测试 RESTful</button><button onclick="object()">测试对象传参</button><button onclick="postObj()">测试 POST 对象传参</button><button onclick="putObj()">测试 PUT 对象传参</button></body>
</html><script>function restFul(){let name = '张伟'let age = 33let url = `http://localhost:8080/student/${name}/${age}`  //此处为反引号，即 Tab 上面的那个按键axios.get(url).then(promise => {console.log(promise.data)})}function object(){let student = {id : 1001,name : '张伟',age : 33}let url = "http://localhost:8080/student/getStu"axios.get(url,{params : student}).then(promise => {console.log(promise.data)})}function postObj(){let student = {id : 1005,name : "王五",email : 'wangwu@qq.com',age : 35}let url = "http://localhost:8080/student/saveStu"axios.post(url,student).then(promise => {console.log(promise.data)})}function putObj(){let id = 1005let student = {id : 1005,name : "赵四",email : 'zs2021@qq.com',age : 42}let url = `http://localhost:8080/student/updateStuById/${id}`axios.put(url,student).then(promise => {console.log(promise.data)})}</script>

三、后端

1.StudentServiceImpl.java

 //更新public void updateStu(Student student, Integer whereId){UpdateWrapper<Student> updateWrapper = new UpdateWrapper<>();updateWrapper.eq("id", whereId);studentMapper.update(student, updateWrapper);   //第一个参数为 SET 内容，第二个参数为 WHERE 内容}//新增public void saveStu(Student student){studentMapper.insert(student);}//接收对象参数public List<Student> getStu(Student student){QueryWrapper queryWrapper = new QueryWrapper(student);return studentMapper.selectList(queryWrapper);}//按照名字年龄查询 RESTful 结构public List<Student> getStuByNA(Student student){QueryWrapper<Student> queryWrapper = new QueryWrapper<>();queryWrapper.eq("name",student.getName()).eq("age", student.getAge());return studentMapper.selectList(queryWrapper);}

2.StudentController.java

 //修改, RESTful 的名称不要与属性重名，否则会覆盖@PutMapping("updateStuById/{whereId}")public String updateStu(@RequestBody Student student, @PathVariable Integer whereId){studentService.updateStu(student, whereId);return "修改成功";}//新增@PostMapping("saveStu")public String saveStu(@RequestBody Student student){studentService.saveStu(student);return "新增成功";}//接收对象参数@GetMapping("getStu")public List<Student> getStu(Student student){return studentService.getStu(student);}//按照名字年龄查询 RESTful 结构@GetMapping("{name}/{age}")public List<Student> getStuByNA(Student student){return studentService.getStuByNA(student);}

四、测试

【小项目】Axios 实现前后端交互相关推荐

springboot+mybatis+thymeleaf项目搭建及前后端交互
前言 spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护. 使用spring boot可以快速的开发出restful风格微服务架构. 本文将 ...
小程序服务器搭建前后端交互,微信小程序：request前后端交互路由跳转存储数据到本地和获取小程序登入授权...
一 request前后端交互基本样式 wx.request({ url:'test.php', //仅为示例,并非真实的接口地址 data: { x:'', y:''}, header: {'con ...
新手摸爬滚打：vue+springboot前后端分离项目演示（三）——axios实现前后端交互
导语:路漫漫其修远兮,吾将上下而求索前篇: 新手摸爬滚打:vue+springboot前后端分离项目演示(一)--vue cli创建vue2项目新手摸爬滚打:vue+springboot前后端分离 ...
小程序服务器搭建前后端交互,手把手带你搭一个简单的微信小程序（包括前后端）...
开发小程序除了大家能看到的客户端,前端小程序是如何与后端服务器进行数据交互的呢? 本文将通俗易懂的讲一下.这里以nodejs为例来进行讲解 1.首先要在服务器上安装nodejs服务器: wget ...
创建Java Web项目并实现前后端交互
目录一:使用工具二:创建Java Web项目三:编写代码一:使用工具 Eclipse 版本如下: 注:不同版本的eclipse创建的项目基础目录可能会有所不同. 二:创建Java Web项目 ...
前后端交互ajax和axios入门讲解，以及http与服务器基础
ajax和http小白入门,客户端与服务器基础讲解,前后端交互(从入门到实践详细解析) 文章目录 ajax和http小白入门,客户端与服务器基础讲解,前后端交互(从入门到实践详细解析) 前言一.Aj ...
微信小程序【网易云音乐实战】（第二篇轮廓图、阿里巴巴的矢量图标、滚动条、前后端交互、列表渲染）
下面通过webStrom来写代码,通过微信开发者工具来调试! 本篇最终效果图: 这里写目录标题一.轮播图二. 五个小图标 1. 将阿里巴巴矢量图标转换为本地的 2. 项目使用图标三.滚动条 sc ...
【系】微信小程序云开发实战坚果商城-前后端交互之订单实现
第 4-7 课:前后端交互之订单实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 ...
【系】微信小程序云开发实战坚果商城-前后端交互之主题实现
第 4-4 课:前后端交互之主题实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 ...

【小项目】Axios 实现前后端交互

Axios 实现前后端交互

文章目录

一、数据库

二、前端

三、后端

1.StudentServiceImpl.java

2.StudentController.java

四、测试

【小项目】Axios 实现前后端交互相关推荐

最新文章

热门文章