基于RestfulAPI的前后端分离SSM框架的整合

作者: YoonaDa | 来源:发表于2019-01-02 13:55 被阅读498次

基于RestfulAPI的前后端分离SSM框架的整合
SSM框架整合
<锋迷商城>项目搭建(01)
分布式商城项目总结二之SSM整合
ssm框架整合
SSM框架中的前后端分离
SSM框架整合
基础 | spring_springmvc_mybatis框架搭
SSM Maven框架基础整合（一）
【SSM】Eclipse使用Maven创建Web项目+整合SSM

时间过得真快，大二第一学期快到期末了😂，今天花点时间来记录下现阶段自己对前后端分离的理解。最近写了一个demo。

好了，不多废话，先简单介绍下本文，本文介绍自己花一个星期的课余时间整合的一个基于RestFulAPI的前后端分离SSM框架。

该项目与传统的SSM框架不同，采用了前后端分离技术。前端采用html取代传统的jsp, 采用axios来发请求，bootstrap框架来美化页面。后端整合了JWT做登录认证，将生成的Token 转换为cookie来实现免登录。

后端部分（MVC思想）

1.Entity(Student)

package com.ssm.entity;
import com.fasterxml.jackson.databind.annotation.JsonSerialize;
import lombok.Data;
import java.io.Serializable;
/**
 * @Email: m15602498163@163.com
 * @Author: yoonada
 * @Date: 2018/12/1
 * @Time: 4:36 PM
 */
// 引入Lombok省略写get和set
@Data
@JsonSerialize(include=JsonSerialize.Inclusion.NON_NULL)
public class Student implements Serializable {
    private long id;
    private String studentId;
    private String name;
    private String sex;
    private String major;
}

2.XML(StudentDao.xml)

<?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.ssm.dao.StudentDao">
    <!--根据具体id查询-->
    <select id="selectStudentById" resultType="Student" parameterType="String">
        SELECT * FROM student WHERE student_id = #{studentId}
    </select>
    <!--查询出所有数据-->
    <select id="findStudentList" resultType="Student">
        SELECT * FROM student
    </select>
    <!--统计-->
    <select id="findStudentListCount" resultType="Integer">
        SELECT count(*) FROM student
    </select>
    <!-- 如果是id是自增长的，不用id -->
    <insert id="insertStudent" parameterType="Student">
        insert into student (
            student_id,
            name,
            sex,
            major
        )values (
            #{studentId},
            #{name},
            #{sex},
            #{major}
        )
    </insert>
    <update id="updateStudent" parameterType="Student">
        update student set
            name = #{name},
            sex = #{sex},
            major = #{major}
        where
            student_id= #{studentId}
    </update>
    <delete id="deleteStudent" parameterType="String">
        delete from student where student_id = #{studentId}
    </delete>
</mapper>

3.Dao(StudentDao)

package com.ssm.dao;
import com.ssm.entity.Student;
import org.apache.ibatis.annotations.Param;
import java.util.List;
/**
 * @Email: m15602498163@163.com
 * @Author: yoonada
 * @Date: 2018/12/1
 * @Time: 4:38 PM
 */
public interface StudentDao {
    /**
     * 查询出所有数据
     */
    List<Student> findStudentList(@Param("page") Integer pages, @Param("size") Integer size);
    /**
     * 统计
     */
    Integer findStudentListCount();
    /**
     * 通过studentId查询学生
     * @param
     * @return
     */
    Student selectStudentById(String studentId);
    /**
     * 添加学生
     * @param student
     * @return
     */
    Integer insertStudent(Student student);
    /**
     * 更新学生信息
     * @param student
     * @return
     */
    Integer updateStudent(Student student);
    /**
     * 
     * 根据studentId删除学生
     * @param studentId
     * @return
     */
    Integer deleteStudent(String studentId);
}

4.Service(StudentService)

package com.ssm.service;

import com.ssm.entity.Student;
import org.apache.ibatis.annotations.Param;

import java.util.List;

/**
 * @Email: m15602498163@163.com
 * @Author: yoonada
 * @Date: 2018/12/1
 * @Time: 4:37 PM
 */
public interface StudentService {
    /**
     * 查询出所有数据
     */
    List<Student> findStudentList(@Param("page") Integer pages, @Param("size") Integer size);
    /**
     * 统计
     */
    Integer findStudentListCount();
    /**
     * 根据studentId查询出该学号学生
     * @param studentId
     * @return
     */
    Student selectStudentById(String studentId);
    /**
     * 添加学生
     * @param student
     * @return
     */
    Integer insertStudent(Student student);
    /**
     * 更新学生信息
     * @param student
     * @return
     */
    Integer updateStudent(Student student);
    /**
     * 根据studentId删除学生信息
     * @param studentId
     * @return
     */
    Integer deleteStudent(String studentId);
}

5.ServiceImpl(StudentServiceImpl)

package com.ssm.service.impl;
import com.ssm.dao.StudentDao;
import com.ssm.entity.Student;
import com.ssm.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
/**
 * @Email: m15602498163@163.com
 * @Author: yoonada
 * @Date: 2018/12/1
 * @Time: 4:36 PM
 */
@Service("StudentService")
@Transactional(readOnly = true)
public class StudentServiceImpl implements StudentService {
    @Autowired
    private StudentDao studentDao;
    public List<Student> findStudentList(Integer page, Integer size) {
        Integer pages =(page -1)*size;
        return studentDao.findStudentList(pages,size);
    }
    public Integer findStudentListCount() {
        return studentDao.findStudentListCount();
    }
    public Student selectStudentById(String studentId) {
        return studentDao.selectStudentById(studentId);
    }
    @Transactional(readOnly = false)
    public Integer insertStudent(Student student) {
        return studentDao.insertStudent(student);
    }
    @Transactional(readOnly = false)
    public Integer updateStudent(Student student) {
        return studentDao.updateStudent(student);
    }
    @Transactional(readOnly = false)
    public Integer deleteStudent(String studentId) {
        return this.studentDao.deleteStudent(studentId);
    }
}

6.Controller

package com.ssm.controller;
import com.ssm.common.bean.BaseController;
import com.ssm.common.bean.VResponse;
import com.ssm.entity.Student;
import com.ssm.service.StudentService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
/**
 * @Email: m15602498163@163.com
 * @Author: yoonada
 * @Date: 2018/12/1
 * @Time: 4:36 PM
 * 传Json
 */
//解决跨域问题
@CrossOrigin
@Controller
@RequestMapping("/student")
public class StudentController extends BaseController{
    @Resource
    private StudentService studentService;
    /**
     * 使用ResponseBody返回Json格式数据
     * @param studentId
     * @return
     */
    @ResponseBody
    @GetMapping(value = "/findStudentById")
    public Student findStudentById(@RequestParam("studentId") String studentId){
        Student student = this.studentService.selectStudentById(studentId);
        return student;
    }
    /**
     * 查询所有返回为一个List
     * @param page
     * @param size
     * @return
     */
    @ResponseBody
    @GetMapping(value = "/findStudentList")
    public VResponse<List<Student>> findStudentList(@RequestParam(value = "page",defaultValue = "1") Integer page,
                                                @RequestParam(value = "size",defaultValue = "20") Integer size){
        List<Student> list = studentService.findStudentList(page,size);
        Integer amount =studentService.findStudentListCount();
        return VResponse.result(amount,list);
    }
    /**
     * 增加用户
     * @param student
     * @return
     */
    @ResponseBody
    @PostMapping(value = "/insertStudent")
    public VResponse<Object> insertStudent(@RequestBody Student student) {
        this.studentService.insertStudent(student);
        return VResponse.success("添加成功");
    }
    /**
     * 修改用户
     * @param student
     * @return
     */
    @ResponseBody
    @PutMapping(value = "/updateStudent")
    public VResponse<Object> updateStudent(@RequestBody Student student) {
        this.studentService.updateStudent(student);
        return VResponse.success("修改成功");
    }
    /**
     * 删除用户
     * @param studentId
     * @return
     */
    @ResponseBody
    @DeleteMapping(value = "/deleteStudent")
    public VResponse<Object> deleteStudent(@RequestParam("studentId") String studentId) {
        this.studentService.deleteStudent(studentId);
        return VResponse.success("删除成功");
    }
}

7.使用postman测试接口验证是否正确（下面列举一个）

image.png

前端部分(使用axios发请求)

ps:本人更喜欢用axios发请求，不了解axios可以到下面文档看一下，很容易入门的

https://www.kancloud.cn/yunye/axios/234845

1.前端代码

<script>
// 获取数据
function getData() {
    axios.get('http://127.0.0.1:8085/student/findStudentList')
        .then(function (response) {
            var app = new Vue({
                el: '#app',
                data: {
                    dataInfo: response.data.result
                }
            })
        })
        .catch(function (error) {
            console.log(error);
        });
}
</script>
<script>
    // 添加信息
    function insert() {
        let studentId = document.getElementById("insertStudentId").value;
        let name = document.getElementById("insertName").value;
        let sex = document.getElementById("insertSex").value;
        let major = document.getElementById("insertMajor").value;
        axios.post(`http://127.0.0.1:8085/student/insertStudent`,
            {
                studentId: studentId,
                name: name,
                sex: sex,
                major: major
            }
        )
            .then(res => {
                if (res.data.code === 1) {
                    alert("添加成功");
                    // 强制刷新页面
                    window.location.href = window.location.href;
                } else {
                    alert('添加失败');
                }
            })
            .catch(res => {
            })
    }
</script>
<script>
    // 编辑更新一整条信息
    function updateInfo() {
        let studentId = document.getElementById("updateStudentId").value;
        let name = document.getElementById("updateName").value;
        let sex = document.getElementById("updateSex").value;
        let major = document.getElementById("updateMajor").value;
        axios.put(`http://127.0.0.1:8085/student/updateStudent`,
            {
                studentId: studentId,
                name: name,
                sex: sex,
                major: major
            }
        )
            .then(res => {
                if (res.data.code === 1) {
                    alert("更新成功");
                    // 强制刷新页面
                    window.location.href = window.location.href;
                } else {
                    alert('更新失败');
                }
            })
            .catch(res => {
            })
    }
</script>
<script>
    // 删除数据
    function deleteInfo() {
        let studentId = document.getElementById("deleteStudentId").value;
        var param = {studentId: studentId};
        axios.delete('http://127.0.0.1:8085/student/deleteStudent', {params: param})
            .then(res => {
                if (res.data.code === 1) {
                    alert("删除成功");
                    // 强制刷新页面
                    window.location.href = window.location.href;
                } else {
                    alert('删除失败');
                }
            })
            .catch(res => {
            })
    }
</script>

2.温馨提示：

image.png

端口号一定要对应上你后端的端口号，比如这里的8085（因为我项目是跑在8085的）

image.png

实现效果

主页面

新增弹出框

更新弹出框

删除弹出框

哈哈哈，自我觉得还挺好看的，爱臭美的我 😂。下面附上源码

https://github.com/YoonaDa/BasedOnRESTfulAPI

说一下，这份源码里还有挺多这篇文章我没介绍到的，比如使用JWT做登录，连表查询的小demo呀，还有一些自己尝试学习的代码哟。当然啦，还有挺多没完善的。比如权限呀，拦截器呀等等。源码里有SQL文件，大家如果要跑项目，记得导入哟。

账号：yoona 密码：123456，当然你也可以去注册，我也写了

连表查询小demo

好啦，如果觉得文章对你有帮助的话，给个赞好吗，当成鼓励好吧。如果觉得哪里写得不好，请各位大佬评论群指出哟，让我学习学习，一起进步，毕竟才自学一年，小菜鸟一个。😃😃😃

基于RestfulAPI的前后端分离SSM框架的整合
时间过得真快，大二第一学期快到期末了?，今天花点时间来记录下现阶段自己对前后端分离的理解。最近写了一个demo。 ...
SSM框架整合
SSM框架整合基于Maven+SpringMVC+Spring+MyBatis的组合，快速搭建SSM框架。适合初...
<锋迷商城>项目搭建(01)
基于Maven的聚合工程完成项目搭建，前端采用vue+axios,后端采用springboot整合ssm75162...
分布式商城项目总结二之SSM整合
1.SSM框架的整合 2.2 后台系统所用的技术框架：Spring + SpringMVC + Mybatis前...
ssm框架整合
这里是简单的ssm框架整合，不基于meven 1、项目结构在spring中将将各层进行整合通过spring管理持...
SSM框架中的前后端分离
认识前后端分离在传统的web应用开发中，大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示...
SSM框架整合
SSM框架整合 SSM（Spring+SpringMVC+MyBatis）框架集由Spring、MyBatis两个...
基础 | spring_springmvc_mybatis框架搭
基础版本ssm框架整合,可以作为开源项目框架搭建的一个基础模版(注解式) 整合思路 ssm编程(SpringMVC...
SSM Maven框架基础整合（一）
前言本文主要整理记录一些学习SSM框架整合的笔记和心得，谢谢支持~ 什么是SSM框架？ SSM框架即指Sprin...
【SSM】Eclipse使用Maven创建Web项目+整合SSM
[【SSM】Eclipse使用Maven创建Web项目+整合SSM框架] 自己接触ssm框架有一段时间了，从最早的...