springboot+vue简单上手案例
c一、项目结构预览
二、pom.xml文件
org.springframework.boot
spring-boot-starter-parent
2.0.0.RELEASE
org.springframework.boot
spring-boot-starter-web
org.springframework.boot
spring-boot-starter-thymeleaf
org.springframework.boot
spring-boot-devtools
org.mybatis.spring.boot
mybatis-spring-boot-starter
1.3.2
mysql
mysql-connector-java
三、application.properties文件
spring.datasource.url=jdbc:mysql:///springboot_vue
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.jdbc.Driver四、UsersController
package com.springboot.vue.controller;
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 findUsers() {
List 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 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
Users HTML
用户信息管理
uid
username
gender
age
操作
{{users.uid}}
{{users.username}}
{{users.gender == 'M'?'男':'女'}}
{{users.age}}
七、users.js
var users = new Vue({
el:"#showUsers",
data:{
usersList:[],
user:{},
genderOptions:[
{text:'男',value:'M'},
{text:'女',value:'F'}
],
nowIndex:-100,
},
methods:{
findUsers : function(){
this.$http.get("/users/findUsers").then(function(res){
console.log(res.data);
users.usersList = res.data;
},function(){
console.log("请求失败");
});
},
bfUpdateUsers:function(us,index){
users.user = us;
users.nowIndex=index;
},
updateUsers:function(){
this.$http.post("/users/updateUser",this.user).then(function(res){
if(res.data){
console.log("修改成功");
this.user.gender == 'M'?this.user.gender='男':this.user.gender='女';
Vue.set(this.usersList,this.nowIndex,this.user);
this.user={};
}else{
console.log("修改失败");
}
}),function(){
console.log("/修改异常");
}
},
bfDeleteUsers:function(us,index){
users.user = us;
users.nowIndex=index;
},
deleteUsers:function(){
this.$http.get("/users/deleteUser",{uid:this.user.uid}).then(function(res){
if(res.data){
console.log("/删除成功");
this.usersList.splice(this.nowIndex,1);
this.user={};
}else{
console.log("/删除失败");
}
},function(){
console.log("/修改异常");
});
},
insertUsers:function(){
this.$http.post("/users/insertUser",this.user).then(function(res){
if(res.data != null){
console.log("添加成功");
this.user.gender == 'M'?this.user.gender='男':this.user.gender='女';
this.usersList.push(res.data);
this.user={};
}else{
console.log("添加失败");
}
}),function(){
console.log("/添加异常");
}
}
}
});
users.findUsers();
pojo、service略
八、效果图
另附源码地址(原bug已修复)
gitHub:https://github.com/houfanGitHub/springboot-vue
csdn:https://download.csdn.net/download/qq_38553950/10891223
https://download.csdn.net/download/qq_38553950/11247717（更新后代码）