新手入门前端与后端交互案例(HTML+Java+Axios) |
您所在的位置：网站首页 › java写app前端 › 新手入门前端与后端交互案例(HTML+Java+Axios) |
新手入门前端与后端交互案例(HTML+Java+Axios)
|
需求分析
前端网页向后端发起相应请求,后端响应前端的请求,做出相关操作.如前端发出获取数据库用户表的请求,后端则将用户表的内容返回给前端.简而言之,前端发出对数据库访问的请求,后端需响应结果. 项目结构 后端项目结构
使用了mybatisplus,可以不用写简单的增删改查SQL语句 mapper(dao)层 package com.jt.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.jt.pojo.User; import org.apache.ibatis.annotations.Param; import java.util.List; //继承接口时必须添加泛型对象，否则映射表报错 public interface UserMapper extends BaseMapper { } service业务层创建接口: package com.jt.service; import com.jt.pojo.User; import java.util.List; public interface UserService { //查 List getAll(); //删 int delById(Integer id); //增 int insertUser(User user); //改 int updateUser(User user); }创建接口实现类: package com.jt.service; import com.jt.mapper.UserMapper; import com.jt.pojo.User; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; @Service public class UserServiceImpl implements UserService{ @Autowired private UserMapper userMapper; @Override public List getAll() { return userMapper.selectList(null); } @Override public int delById(Integer id){ return userMapper.deleteById(id); } @Override public int insertUser(User user){ return userMapper.insert(user); } @Override public int updateUser(User user){ return userMapper.updateById(user); } } controller控制层 package com.jt.controller; import com.jt.pojo.User; import com.jt.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import java.util.ArrayList; import java.util.List; @RestController @CrossOrigin @RequestMapping("/vue") public class VueController { @Autowired private UserService userService; @GetMapping("/getUserList") private List getUserList(){ return userService.getAll(); } @PostMapping("insertUser") private int insertUser(@RequestBody User user){ return userService.insertUser(user); } @DeleteMapping("deleteById") private int deleteById(Integer id){ return userService.delById(id); } @PutMapping("updateUser") private int updateUser(@RequestBody User user){ return userService.updateUser(user); } } 前端代码 用户数据 .hand{ cursor: pointer; background-color: aquamarine; } .bgc :hover{background-color: #FF3366;cursor: pointer;} .add{cursor: pointer;background-color: red;border: 0rem;border-radius: 3px;width: 40%;} .del{background-color: deepskyblue;} 用户信息表 编号 姓名 年龄 性别 操作 修改 删除 添加用户 名称: 年龄: 性别: 确认 修改用户 名称: 年龄: 性别: 提交 axios.defaults.baseURL = "http://localhost:8090" const App = new Vue({ el: "#app", data: { a: null, flag1: false, flag2: false, userList: [], addUser: { name: ' ', age: null, sex: ' ' }, upUser: { id: null, name:' ', age: null, sex: ' ' } }, methods: { async getUserList(){ let {data: result} = await axios.get("/vue/getUserList") // console.log(result) //ajax请求结果赋值给属性 this.userList = result }, async insertUser(){ let {data: result} = await axios.post("/vue/insertUser", this.addUser) console.log(result) //将列表页面重新刷新 this.getUserList() }, async delById(n){ if(confirm("确定删除吗")){ let {data: result} = await axios.delete("/vue/deleteById",{params: {id: n}}) this.getUserList() } }, updateUserBtn(user){ this.upUser=user }, async updateUser(){ await axios.put("/vue/updateUser",this.upUser) alert("更新成功") this.upUser={} }, chgFlag1(){ this.flag1 = !this.flag1 }, chgFlag2(){ this.flag2 = !this.flag2 } }, mounted(){ this.getUserList() }, }) 结果显示 网页首页
添加用户 点击添加用户按钮,显示结果如下,输入名字、年龄、性别之后点击确认即可添加成功
每条数据信息之后都有相应的修改和删除操作，点击更新按钮，即可在网页下方回显当前需要更新的数据,然后更改相应的姓名、年龄、性别，提交之后即可更新成功
删除用户 点击删除按钮，页面会提示是否确认删除，确认之后即可删除用户，取消则不会进行删除操作
|
【本文地址】
今日新闻 |
推荐新闻 |