您的位置:首页 > Web前端 > Vue.js

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代码中存在未引入包的现象,自行引入即可。

  • 点赞
  • 收藏
  • 分享
  • 文章举报
mark_bin 发布了5 篇原创文章 · 获赞 0 · 访问量 294 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: