springboot+vue简单上⼿案例⼀、项⽬结构预览
⼆、l⽂件
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.0.RELEASE</version>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
<dependency>
<groupId&batis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.2</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
</dependencies>
三、application.properties⽂件
spring.datasource.url=jdbc:mysql:///springboot_vue
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.sql.jdbc.Driver
四、UsersController
package com.ller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController;
import com.springboot.vue.pojo.Users;
import com.springboot.vue.service.UserService;
@RestController
@RequestMapping("/users")
public class UsersController {
@Autowired
private UserService userService;
@RequestMapping("/findUsers")
public List<Users> findUsers() {
List<Users> findUser = null;
try {
findUser = userService.findUser();
} catch (Exception e) {
e.printStackTrace();
}
return findUser;
}
@RequestMapping("/findUserByUid")
public Users findUserByUid(int uid) {
Users user = null;
try {
user = userService.findUserByUid(uid);
} catch (Exception e) {
e.printStackTrace();
}
return user;
}
@RequestMapping("/updateUser")
public boolean updateUser(@RequestBody Users users) {
try {
if(userService.updateUser(users) == 1) {
return true;
}
} catch (Exception e) {
e.printStackTrace();
}
return false;
}
@RequestMapping("/deleteUser")
public boolean deleteUser(int uid) {
try {
if(userService.deleteUser(uid) == 1) {
return true;
}
} catch (Exception e) {
e.printStackTrace();
}
return false;
}
@RequestMapping("/insertUser")
public Users insertUser(@RequestBody Users users) {
try {
userService.insertUser(users);
return users;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
五、UsersMapper
package com.springboot.vue.mapper;
import java.util.List;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Options;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;
import org.springframework.stereotype.Repository;
import com.springboot.vue.pojo.Users;
@Repository
public interface UsersMapper {
@Select("select * from users where uid = #{uid}")
Users findUserByUid(int uid);
@Select("select * from users")
List<Users> findUser();
@Update("update users set username = #{username}, gender = #{gender}, age = #{age} where uid = #{uid}") int updateUser(Users users);
@Delete("delete from users where uid =#{uid}")
int deleteUser(int uid);
@Insert("insert into users(username,gender,age) value(#{username}, #{gender}, #{age})")
@Options(useGeneratedKeys=true, keyProperty="uid", keyColumn="uid")
void insertUser(Users users);
}
六、users.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Users HTML</title>
<link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css">
</head>
<body>
<div id="showUsers">
<div>
<button data-toggle="modal" data-target="#myInsertModal" class="btn btn-default">添加</button>
</div>
<table class="table table-hover">
<caption>⽤户信息管理</caption>
<tr>
<th>uid</th>
<th>username</th>
<th>gender</th>
<th>age</th>
<th>操作</th>
</tr>
<tr v-for="users in usersList">
<td>{{users.uid}}</td>
<td>{{users.username}}</td>
<td>{{der == 'M'?'男':'⼥'}}</td>
<td>{{users.age}}</td>
<td>
<button v-on:click="bfUpdateUsers(users,$index);"
data-toggle="modal" data-target="#myModal" class="btn btn-primary">修改</button>  
<button v-on:click="bfDeleteUsers(users,$index);"
data-toggle="modal" data-target="#myDeleteModal" class="btn btn-danger">删除</button>
</td>
</tr>
</table>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myInsertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">      <div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">添加⽤户信息</h4>
</div>
<div class="modal-body">
<form class="bs-example bs-example-form" role="form">
<div class="input-group">
<span class="input-group-addon">姓名</span>
<input type="text" class="form-control"
name="username" placeholder="姓名" value="{{user.username}}" v-model="user.username">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">性别</span>
<select class="form-control" name="gender">
<option v-for="genderOption in genderOptions"
value="{{genderOption.value}}">{{}}</option>
</select>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">年龄</span>
<input type="text" name="age"
class="form-control" placeholder="年龄" value="{{user.age}}" v-model="user.age">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="insertUsers();">添加⽤户</button>              </div>
</div><!-- /.modal-content -->
springboot结构</div><!-- /.modal -->
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">修改⽤户信息</h4>
</div>
<div class="modal-body">
<form class="bs-example bs-example-form" role="form">
<div class="input-group">
<span class="input-group-addon">姓名</span>
<input type="text" class="form-control"
name="username" placeholder="姓名" value="{{user.username}}" v-model="user.username">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">性别</span>
<select class="form-control" name="gender" v-model="der">
<option v-for="genderOption in genderOptions"
value="{{genderOption.value}}">{{}}</option>
</select>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">年龄</span>
<input type="text" name="age"
class="form-control" placeholder="年龄" value="{{user.age}}" v-model="user.age">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="updateUsers();">提交更改</button>              </div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myDeleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">      <div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">删除⽤户信息</h4>
</div>
<div class="modal-body">确认删除 {{user.username}} 吗?</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button"  class="btn btn-primary" data-dismiss="modal" v-on:click="deleteUsers();">确认删除</button>              </div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</div>
<script type="text/javascript" src="/js/vue.js"></script>
<script type="text/javascript" src="/js/vue-resource.min.js"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。