Vue+SpringBoot+Mybatis+Mysql前后端分离案例
2020-03-05 12:57
881 查看
Vue+SpringBoot+Mybatis+Mysql前后端分离案例(一)
该案例是简单用户信息的增删改查。
1、 创建用户表
数据库使用Mysql,创建表语句如下。
DROP TABLE IF EXISTS `userinfo`; CREATE TABLE `userinfo` ( `id` int(12) NOT NULL AUTO_INCREMENT, `name` varchar(20) CHARACTER SET utf8 DEFAULT NULL, `sex` varchar(10) CHARACTER SET utf8 DEFAULT NULL, `address` varchar(50) CHARACTER SET utf8 DEFAULT NULL, `telphone` varchar(11) CHARACTER SET utf8 DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1;
2、用户接口编写
实体类代码:
import lombok.Data; @Data public class User { private int id; private String name; private String sex; private String address; private String telphone; }
返回给前端的实体类,errCode为0则返回成功。
import java.util.List; @Data public class UserList { private String errCode; private List<User> userList; public UserList(String errCode, List<User> userList){ this.errCode=errCode; this.userList=userList; } public UserList(){ } }
dao层
由于使用了注解,需要自行导入相关包。
@Mapper @Repository public interface UserDao { List<User> getAll(); User getUserById(int id); void updateUser(User user); void addUser(User user); void deleteUserById(int id); int insertUser(User user); }
service层
这里直接采用UserService作为服务,省略了子类的继承
@Service public class UserService { @Autowired UserDao userDao; public List<User> getAll(){ return userDao.getAll(); } public User getUserById(int id){ return userDao.getUserById(id); } public void deleteUser(int id){ userDao.deleteUserById(id); } public User insertUser(User user){ userDao.insertUser(user); return user; } public User updateUser(User user){ userDao.updateUser(user); return user; } }
Controller层
@RequestMapping("user") @RestController public class UserController { @Autowired UserService userService; @GetMapping("getAll") public UserList getAll(){ UserList userList=null; List<User> users=userService.getAll(); if(users!=null){ userList=new UserList("0",users); }else { userList=new UserList("1",null); } return userList; } @RequestMapping("getUser") public User getUser(@RequestParam("id")int id){ return userService.getUserById(id); } @PostMapping("insertUser") public User insert(@RequestBody User user){ System.out.println("------------入参"+user); User u=userService.insertUser(user); return u; } @DeleteMapping("deleteUser/{id}") public String deleteUserById(@PathVariable("id")int id){ userService.deleteUser(id); //这里为了简便,返回一个字符串 return "删除成功"; } @PutMapping("updateUser") public User update(@RequestBody User user){ System.out.println("入参为 "+user); userService.updateUser(user); return user; } }
配置类
方便前端跨域,若用于生产环境会存在较大风险。
import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; @Configuration public class CORSConfiguration extends WebMvcConfigurerAdapter { @Override public void addCorsMappings(CorsRegistry registry) { //所有请求都允许跨域 registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("*") .allowedHeaders("*"); } }
SpringBoot启动类
import org.mybatis.spring.annotation.MapperScan; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @MapperScan("com.springdailyservice.dao") @SpringBootApplication public class SpringdailyserviceApplication { public static void main(String[] args) { SpringApplication.run(SpringdailyserviceApplication.class, args); } }
mapper文件
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.springdailyservice.dao.UserDao"> <select id="getAll" resultType="com.springdailyservice.entity.User"> select *from userinfo; </select> <select id="getUserById" resultType="com.springdailyservice.entity.User"> select *from userinfo where 1=1 <if test="id!=null"> id=#{id} </if> </select> <delete id="deleteUserById" parameterType="com.springdailyservice.entity.User" > delete from userinfo where id=#{id} </delete> <insert id="insertUser" parameterType="com.springdailyservice.entity.User" useGeneratedKeys="true" keyProperty="id"> insert into userinfo(name,address,sex,telphone) VALUES(#{name},#{address},#{sex},#{telphone}) </insert> <update id="updateUser" parameterType="com.springdailyservice.entity.User"> update userinfo <trim prefix="set" suffixOverrides=","> <if test="name!=null and name!=''">name=#{name},</if> <if test="sex!=null and sex!=''">sex=#{sex},</if> <if test="address!=null and address!=''">address=#{address},</if> <if test="telphone!=null and telphone!=''">telphone=#{telphone},</if> </trim> WHERE id=#{id} </update> </mapper>
yml文件
mybatis: mapper-locations: classpath:mapper/*.xml configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl spring: datasource: username: root password: 123456 driver-class-name: com.mysql.jdbc.Driver url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf8 druid: filter: log4j2: enabled: true statement-create-after-log-enabled: false statement-close-after-log-enabled: false result-set-open-after-log-enabled: false result-set-close-after-log-enabled: false server: port: 8082 servlet: context-path: /users
至此,数据库和后端代码已开发完毕,上述Java代码中存在未引入包的现象,自行引入即可。
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- Vue+SpringBoot+Mybatis+Mysql前后端分离案例
- 一个实际的案例介绍Spring Boot + Vue 前后端分离
- springboot + mybatis + nodejs + vue + nginx 搭建第一个前后端分离的项目
- SpringBoot+Mybatis+MySQL+Vue+ElementUI,用POI导出和导入Excel文件案例
- 一个实际的案例介绍Spring Boot + Vue 前后端分离
- Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +Element UI 之四 vue 基本知识点概述
- 详解springboot和vue前后端分离开发跨域登陆问题
- SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(六)
- Springboot Mybatis MySQL读写分离及事物配置
- Springboot + Vue + shiro 实现前后端分离、权限控制
- Vue+Springboot前后端分离websocket的使用
- swagger+springboot实现前(vue)后端分离
- SpringBoot+Vue前后端分离实现高并发秒杀——前端知识总结
- 前后端分离,我怎么就选择了 Spring Boot + Vue 技术栈?
- Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +Element UI 之一vue和spring boot整合
- 大型前后端分离在线教育项目实战SpringBoot,SpringCloud,Mybatis等技术架构
- 【笔记】vue+springboot前后端分离实现token登录验证和状态保存的简单实现方案
- 基于SpringCloud+vue(ElementUI)+mySQL前后端分离设计之--前端Fetch请求封装
- 前后端分离之SpringBoot2.x整合mybatis实现数据库的增删改查操作(一)