Springboot简单增删改查并使用ajax进行前后端数据交流

一.项目环境搭建pom.xml

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-data-jpa</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-devtools</artifactId>

<scope>runtime</scope>

</dependency>

<groupId>mysql</groupId>

<artifactId>mysql-connector-java</artifactId>

<scope>runtime</scope>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-test</artifactId>

</dependency>

<groupId>org.junit.jupiter</groupId>

<artifactId>junit-jupiter-api</artifactId>

</dependency>

<groupId>org.projectlombok</groupId>

<artifactId>lombok</artifactId>

</dependency>

</dependencies>

<build>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-maven-plugin</artifactId>

</plugin>

</plugins>

</build>

</project>

二.配置项目资源，使用.yml格式配置

server:

port: 8080

spring:

datasource:

driver-class-name: com.mysql.jdbc.Driver

username: root

password: 123456

url: jdbc:mysql://localhost:3306/test?characterEncoding=utf-8&userSSL=false

jpa:

show-sql: true

hibernate:

ddl-auto: update

naming:

physical-strategy: org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl

thymeleaf:

encoding: utf-8

cache: false

mode: HTML5

prefix: /static/admin/

mvc:

static-path-pattern: /**

三.Repository层 就一句，继承JpaRepository

@Repository

public interface NoticeDao  extends JpaRepository<Notice,Integer> {

四.service层

public interface NoticeService {
    /**查询所有公告*/
    List<Notice> findAll();
    /**添加公告*/
    Notice save(Notice notice);
    /**删除公告列表*/
    void delete(Notice notice);
    /**根据公告id删除*/
    void deleteById(Integer noticeId);
    /**修改公告信息*/
    Notice updateById(Notice notice);
    Notice findById(Integer noticeid);
}

实现类

@Service
public class NoticeServiceImpl implements NoticeService {

    @Autowired
    private NoticeDao noticeDao;

    @Override
    public List<Notice> findAll() {
        return noticeDao.findAll();
    }
    @Override
    public Notice save(Notice notice) {
        return noticeDao.save(notice);
    }
    @Override
    public void delete(Notice notice) {
            noticeDao.delete(notice);
    }
    @Override
    public void deleteById(Integer noticeId) {
            noticeDao.deleteById(noticeId);
    }
    @Override
    public Notice updateById(Notice notice) {
        noticeDao.save(notice);
        return notice;
    }
    @Override
    public Notice findById(Integer noticeid) {
        return noticeDao.findById(noticeid).get();
    }
}

五.controller层使用restful风格请求路径为http://localhost:8080/notice/+方法的value

@RequestMapping("/notice")
@RestController
public class NoticeController {

    @Autowired
    private NoticeService noticeService;

    @RequestMapping(value="/list",method = RequestMethod.GET)
    @ResponseBody
    public List<Notice> getAll() {
        List<Notice> list = noticeService.findAll();
        return list;
    }

    @RequestMapping(value="/findById",method = RequestMethod.GET)
    @ResponseBody
    public String findById(@PathVariable("noticeid") Integer noticeid,ModelMap map){
        map.addAttribute("findById",noticeService.findById(noticeid));
        return "findById";
    }


    @PostMapping("/add")
    @ResponseBody
    public ModelAndView save(@Valid Notice notice){
        Notice save=  noticeService.save(notice);
        return new ModelAndView("redirect:http://localhost:8080/admin/inform_list.html");

    }

    @DeleteMapping("/delete/{noticeid}")
    public void delete(@PathVariable("noticeid") Integer noticeid){
        noticeService.deleteById(noticeid);
    }

    @PutMapping("/update/{noticeid}")
    @ResponseBody
    public Notice update(@PathVariable("noticeid") Integer noticeid){
        Notice notice = noticeService.findById(noticeid);
        return noticeService.updateById(notice);
    }
}

六.获取列表

Springboot简单增删改查并使用ajax进行前后端数据交流

前段ajax 获得列表数据要插入的行的值。URL为你controller的的地址发送给后台，后台将数据传送过来追加到today上。

//查询公告信息
$(function(){
    var tbody = document.getElementById("tbody");
$.ajax({
    type:"get",
    url:'/notice/list',
    contentType:"application/json;charset=utf-8",
    data:{},
    success:function (data) {
    //清空数据
    $("#tbody").html('');
    //追加数据
    $.each(data, function (i, data) {
        //一个dom就是一个新闻对象
        $("#tbody").append("<tr>"+
        "<td>"+data.notitle+"</td>"+
        "<td>"+data.notime+"</td>"+
        "<td>"+data.noauthor+"</td>"+
        "<td><input type='button' id='updBtn' value='修改' onclick= 'jump("+data.noticeid+")'/>" +"&nbsp&nbsp&nbsp&nbsp"+
        "<input type='button' id='delBtn' value='删除' onclick='del("+data.noticeid+")'/></td>"+
        "</tr>");
    });
    },
    error:function () {
        window.alert("查询失败");
    }
});
});

删除

//删除
function del(noticeid){
    $.ajax({
        type:"delete",
        url : "/notice/delete/"+noticeid,
        dataType:JSON,
        async:false,
        success:function(data){
            alert("删除成功");
        },
        error:function (data) {
            alert("删除失败");
        }
    });
};

//修改
function upd(noticeid) {
      var notitle=$("input[name='notitle']").val();
      var text=$("input[name='text']").val();
    $.ajax({
        url:'/notice/update/'+noticeid,
        type:"put",
        async:false,
        data:{},
        success:function(data){
            $("#notitle").val(notitle);
            $("#text").val(text);
        },
        error:function (data) {
            alert("修改失败");
        }
    });
};

点击打开链接
//添加
function add () {
    var notitle=$("input[name='notitle']").val();
    var text=$("input[name='text']").val();
    $.ajax({
        url:'/notice/add',
        type:"post",
        dataType:JSON,
        data:{"notitle":notitle,"text":text},
        success:function(data){
            window.alert("添加成功");
        },
        error:function () {
            window.alert("添加失败");
        }
    });
};

源码地址https://download.****.net/download/an1278/10511911

秒客网

Springboot简单增删改查并使用ajax进行前后端数据交流

相关文章