spring boot+jpa+vue增删改查 前后端分离
工具ide1,创建项目1.11.21.3 勾选Core里面的1.31 web里面的web1.32 在勾选SQL里面的JPA MySQL JDBC1.4下一步在写你的项目名spring boot项目就创建好了2.建立包2.1 在resources里面使用File建立一个后缀为.yml的文件2.1.1cs 代表数据库 (全部拷走)spring:datasou...
·
工具ide
1,创建项目
1.1
1.2
1.3 勾选Core里面的
1.31 web里面的web
1.32 在勾选SQL里面的JPA MySQL JDBC
1.4下一步在写你的项目名spring boot项目就创建好了
2.建立包
2.1 在resources里面使用File建立一个后缀为.yml的文件
2.1.1cs 代表数据库 (yml文件配置)
spring:
datasource:
password: root #密码
driver-class-name: com.mysql.cj.jdbc.Driver
username: root #用户名
url: jdbc:mysql://localhost:3306/cs?characterEncoding=utf8&useSSL=false&serverTimezone=GMT%2B8
jpa:
database: mysql
hibernate:
ddl-auto: update
naming:
physical-strategy: org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl
implicit-strategy: org.hibernate.boot.model.naming.ImplicitNamingStrategyComponentPathImpl
show-sql: true
2.2在pom文件里面把mysql的dependency删除
2.3然后加入新的依赖到pom
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.13</version>
</dependency>
2.4 entity定义实体类(jpa会自动创建表不需再数据库自建表)
import lombok.Data;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
@Data
@Entity
public class User {
@Id//主键
@GeneratedValue(strategy = GenerationType.IDENTITY)//自增
private Integer id;
private String name;
private String password;
private String sex;
}
2.5定义dao层接口(不用写XML)
package cn.bdqn_vue.application.dao;
import cn.bdqn_vue.application.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;
public interface Userdao extends JpaRepository<User,Integer> {
}
2.6 Service层
import org.springframework.data.domain.Page;
import java.util.List;
public interface UserService {
Page<User> findByPage(Integer page, Integer size);
User save(User user);
User update(User user);
void delete(Integer id);
}
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.stereotype.Service;
@Service
public class UserServiceImpl implements UserService {
@Autowired
private Userdao userdao;
@Override//分页查询
public Page<User> findByPage(Integer page, Integer size) {
PageRequest of=PageRequest.of(page,size);
Page<User> s=userdao.findAll(of);
return s;
}
@Override//新增
public User save(User user) {
return userdao.save(user);
}
@Override
public User update(User user) {
return userdao.save(user);
}
@Override
public void delete(Integer id) {
userdao.deleteById(id);
}
}
2.7最后就是controller层
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@Api(value = "swagger ui 注释 api 级别")
@RequestMapping("/user")
public class UserController {
@Autowired
private UserServiceImpl user;
//分页查询
@RequestMapping("/findByPage")
@ApiOperation(value = "分页查询所有学生",notes = "分页查询所有学生")
public Page<User> findByPage(int page){
if(page==0)
page=1;
return user.findByPage(page-1,2);
}
//新增
@PostMapping("/save")
public User save(@RequestBody User user){
System.out.println(user.getSex());
return this.user.save(user);
}
//修改
@GetMapping("/update")
public User update(User student){
return user.update(student);
}
//删除
@GetMapping("delete")
public int delete(Integer id){
try {
user.delete(id);
return 1;
} catch (Exception e) {
e.printStackTrace();
return 0;
}
}
}
3.1前台创建一个html导入依赖
<!-- 通过CDN引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 通过CDN引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
3.2增删改查
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
user:{
id:'',
name:'',
password:'',
sex:'',
page:1
},
users: []
},
methods:{//分页查询
finAll:function(Da){
var _this=this;
axios.get('http://localhost:8080/user/findByPage',{
params: {
page:Da
}
})
.then(function(response){
_this.users=response.data;
})
.catch(function(error) {
console.log(error);
});
},
Save: function() {
var _this = this;
var user = JSON.stringify(_this.user)
console.log(user)
if (user.id != null && user.id != '') { //修改
axios.get('http://localhost:8080/user/update', user, {
headers: {
"Content-Type": "application/json;charset=utf-8" //头部信息
}
})
.then(function(response) {
//保存完之后查询所有的信息
_this.user.name = null;
_this.user.sex = null;
_this.user.password = null;
_this.finAll();
})
.catch(function(error) {
console.log(error);
});
} else { //新增
console.log("11111111111111111")
axios.post('http://localhost:8080/user/save', user, {
headers: {
"Content-Type": "application/json;charset=utf-8" //头部信息
}
})
.then(function(response) {
//保存完之后查询所有的信息
if (_this.user.id != null) {
_this.user.id = null;
}
_this.user.name = null;
_this.user.sex = null;
_this.user.password = null;
_this.finAll();
})
.catch(function(error) {
console.log(error);
});
}
},
Delete: function(id) {//删除
var _this = this;
console.log(id)
axios.get('http://localhost:8080/user/delete', {
params: {
id: id
}
})
.then(function(response) {
_this.finAll();
})
.catch(function(error) {
console.log(error);
});
},
Edit: function(user) {
this.user = user;
}
},
created: function() { //创建vue对象的时候自动调用查询所有的方法
this.finAll(1);
}
})
</script>
前往低代码交流专区
更多推荐
10
0- 0
已为社区贡献1条内容
所有评论(0)