SSM前后端分离/不分离对比Demo

Posted liruilong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SSM前后端分离/不分离对比Demo相关的知识,希望对你有一定的参考价值。

之前某些原因,整理了一个小的Demo,用于演示。个人认为在SSM前后端不分离的基础上在前端处理上比较麻烦一点之后就是注解的使用。总结一些对比,仅是自己掌握的,不够严谨,不足之处请大佬批评指正.

路由控制:前后端分离的情况后端在任何都会返回一个json数据,不涉及路由处理,即页面跳转全是由前端自己完成.不分离的情况,路由跳转一般由后端完成,而且携带数据,通过重定向或请求转发实现,依赖Servlet中的内置对象.

返回数据:前后端分离的情况后端返回的整体划分上只有执行逻辑响应的消息实体类和对应的需要展示的数据分页类对应的JSON.不分离后端返回的是经过视图解析器处理前的字符串.

分离:

package com.liruilong.model;

/**
 * @Description :返回消息的实体类
 * @Author: Liruilong
 * @Date: 2019/12/19 17:34
 */
public class RespBean {
    private Integer status;
    private String msg;
    private Object obj;

    public static RespBean ok(String msg){
        return new RespBean(200, msg, null);
    }
    public static RespBean ok(String msg, Object obj){
        return new RespBean(200, msg, obj);
    }
    public static RespBean error(String msg){
        return new RespBean(500, msg, null);
    }
    public static RespBean error(String msg, Object obj){
        return new RespBean(200, msg, obj);
    }
    private RespBean() {
    }
    private RespBean(Integer status, String msg, Object obj) {
        this.status = status;
        this.msg = msg;
        this.obj = obj;
    }

    public static RespBean build() {
        return new RespBean();
    }

  //getter.setter方法省略
package com.liruilong.model;

import java.util.List;

/**
 * @Description : 分页
 * @Author: Liruilong
 * @Date: 2019/12/31 11:20
 */
public class RespPageBean {
    /*总记录树*/
    private Long total;
    /*分页数据*/
    private List<?> data;
public RespPageBean() { } public RespPageBean(Long total, List<?> data) { this.total = total; this.data = data; }

//getter.setter方法省略
}
  @GetMapping("/")
    public RespPageBean getEmploteeByPge(@RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "10") Integer size,Employee employee, Date[] beginDateScope) {
        return employeeService.getEmploteeByPge(page, size, employee, beginDateScope);

    }

    @DeleteMapping("/{id}")
    public RespBean deleteEmpByEid(@PathVariable Integer id) {
        if (employeeService.deleteEmpByEid(id) == 1) {
            return RespBean.ok("删除成功!");
        }
        return RespBean.error("删除失败!");
    }

不分离:

  //初始化添加商品
    @RequestMapping("toAddGoods")
    public String toAddGoods(Model model) throws Exception {
        adminGoodsServiceimpl.toAddGoods(model);
        adminTypeServiceimpl.listGoodsType(model);
        return "admin/addGoods";
    }
    //处理添加商品
    @RequestMapping("addGoods")
    public String addGoods(@ModelAttribute("goods") Goods goods, Model model, HttpServletRequest request) throws Exception {
        adminGoodsServiceimpl.addGoods(goods, model, request);
        if (request.getParameter("updateAct").equals("update")) {
            return "forward:/adminGoods/selectGoods.do?act=updateSelect";
        } else {
            return "forward:/adminGoods/selectGoods.do?act=main";
        }

请求方式:前后端分离的情况我只知道以Rest风格的方式处理,当执行增删改查对应http请求方法POST,DELEE,PUT,GET,一般以异步请求为主,不分离情况一般同步异步结合。请求上以GET和POST为主。

分离:

    //传递json的post请求
export const postRequest = (url, params) => {
        return axios({
            method: ‘POST‘,
            url: `${base}${url}`,
            data: params,
        })
    }
    // put请求封装
export const putRequest = (url, params) => {
        return axios({
            method: ‘put‘,
            url: `${base}${url}`,
            data: params,
        })
    }
    // get请求封装
export const getRequest = (url, params) => {
        return axios({
            method: ‘get‘,
            url: `${base}${url}`,
            data: params,
        })
    }
    // delete请求封装
export const deleteRequest = (url, params) => {
    return axios({
        method: ‘delete‘,
        url: `${base}${url}`,
        data: params,
    })

不分离:

<script type="text/javascript">
        function submitorder(total) {
            if (window.confirm("是否真的提交订单,提交后不可再修改订单信息!")) {
                window.location.href = "${pageContext.request.contextPath}/order/orderSubmit.do?amount=" + total;
                return true;
            }
            return false;
        }
    </script>
  <form action="order/pay.do" method="post" name="payForm">
                <input type="hidden" name="ordersn" value="${ordersn}"/>
                <input type="image" src="images/before/Chinapay_logo.jpg" onclick="gogo()"/>
            </form>
$.ajax({
                                    type: "POST",// 请求方式
                                    url: "http://localhost:8083/addDemo_war_exploded/system/log/",// 发送请求地址
                                    dataType: "json",
                                    async: true,
                                    contentType: "application/json;charsetset=UTF-8",//必须
                                    data: JSON.stringify({
                                        "operate": operate.val(),
                                        "hrname": hrname.val()
                                    }),
                                    success: function (mainQueryList) {
                                        init();
                                    }
                                }
                            )

 

注解使用前后端分离,接收的数据是Json时需要@RequestBody作用在方法参数上.用于将POST请求数据转化为实体类.返回数据时使用@ResponseBody,作用在方法上,当然对于全局的也可以使用@RespController注解.前后端不分离一般使用@RequestMapping,请求方式不用管。

分离:

package com.liruilong.hros.controller.emp;

import com.liruilong.hros.model.*;
import com.liruilong.hros.service.*;
import com.liruilong.hros.service.utils.POIUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.util.Date;
import java.util.List;

/**
 * @Description :
 * @Author: Liruilong
 * @Date: 2019/12/31 11:19
 */

@RestController
@RequestMapping("/employee/basic")
public class EmpBasicController {

    @Autowired
    EmployeeService employeeService;
    @Autowired
    NationService nationService;
    @Autowired
    PoliticsstatusService politicsstatusService;
    @Autowired
    JobLevelService jobLevelService;
    @Autowired
    PositionService positionService;
    @Autowired
    DepartmentService departmentService;
    @Autowired
    EmployeeecService employeeecService;

    @GetMapping("/")
    public RespPageBean getEmploteeByPge(@RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "10") Integer size,Employee employee, Date[] beginDateScope) {
        return employeeService.getEmploteeByPge(page, size, employee, beginDateScope);

    }


    @DeleteMapping("/{id}")
    public RespBean deleteEmpByEid(@PathVariable Integer id) {
        if (employeeService.deleteEmpByEid(id) == 1) {
            return RespBean.ok("删除成功!");
        }
        return RespBean.error("删除失败!");
    }

    @DeleteMapping("/many/")
    public RespBean deleteEmpByEids(Integer[] ids) {
        if (employeeService.deleteEmpByEids(ids) == ids.length) {
            return RespBean.ok("删除成功!");
        }
        return RespBean.error("删除失败!");
    }


    @PostMapping("/")
    public RespBean addEmp(@RequestBody Employee employee) {
        if (employeeService.addEmp(employee) == 1) {
            return RespBean.ok("添加成功!");
        }
        return RespBean.error("添加失败!");
    }

    @PutMapping("/")
    public RespBean updateEmp(@RequestBody Employee employee) {
        if (employeeService.updateEmp(employee) == 1) {
            return RespBean.ok("更新成功!");
        }
        return RespBean.error("更新失败!");
    }

    @GetMapping("/nations")
    public List<Nation> getAllNations() {
        return nationService.getAllNations();
    }

    @GetMapping("/politicsstatus")
    public List<Politicsstatus> getAllPoliticsstatus() {
        return politicsstatusService.getAllPoliticsstatus();
    }

    @GetMapping("/joblevels")
    public List<JobLevel> getAllJobLevels() {
        return jobLevelService.getAllJobLevels();
    }

    @GetMapping("/positions")
    public List<Position> getAllPositions() {
        return positionService.getAllPositions();
    }

    @GetMapping("/deps")
    public List<Department> getAllDepartments() {
        return departmentService.getAllDepartments();
    }

    @GetMapping("/maxWorkID")
    public RespBean maxWorkID() {
        RespBean respBean = RespBean.build().setStatus(200)
                .setObj(String.format("%08d", employeeService.maxWorkID() + 1));
        return respBean;
    }

/**
 * @Author Liruilong
 * @Description  文件下载
 * @Date 19:04 2020/1/1
 * @Param []
 * @return org.springframework.http.ResponseEntity<byte[]>
 **/

    @GetMapping("/export")
    public ResponseEntity<byte[]> exportData() {
        List<Employee> list = (List<Employee>) employeeService.getEmploteeByPge(null, null, null,null).getData();
        return POIUtils.employee2Excel(list);
    }


    /**
     * @Author Liruilong
     * @Description 文件导出
     * @Date 19:48 2020/1/1
     * @Param [file]
     * @return com.liruilong.hros.model.RespBean
     **/

    @PostMapping("/import")
    public RespBean importData(MultipartFile file) throws IOException {
        List<Employee> list = POIUtils.excel2Employee(file, nationService.getAllNations(), politicsstatusService.getAllPoliticsstatus()
                , departmentService.getAllDepartmentsWithOutChildren(), positionService.getAllPositions(), jobLevelService.getAllJobLevels());
        if (employeeService.addEmps(list) == list.size()) {
            return RespBean.ok("上传成功");
        }
        return RespBean.error("上传失败");
    }
}

不分离:

package com.qst.controller.admin;

import com.qst.pojo.Auser;
import com.qst.service.admin.AdminServiceimpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpSession;

@Controller
@RequestMapping("admin")
public class AdminController {

    @Autowired
    private AdminServiceimpl adminService;
    /*
    初始化登录页面
     */
    @RequestMapping("login")
    public String login(@ModelAttribute("auser") Auser auser) {
        return "admin/login";
    }
    /*
    处理登录页面
     */
    @RequestMapping("tologin")
    public String tologin(@ModelAttribute Auser auser, Model model, HttpSession session) throws Exception {

        return adminService.login(auser, model, session) ? "admin/main" : "admin/login";
       
    }
    /*
    退出系统
     */
    @RequestMapping("exit")
    public String exit(@ModelAttribute Auser auser, HttpSession session) {
        session.invalidate();
        return "admin/login";
    }
}

 

以上是关于SSM前后端分离/不分离对比Demo的主要内容,如果未能解决你的问题,请参考以下文章

前后端分离ssm配置swagger接口文档

前后端分离ssm配置跨域

JWT前后端分离demo

JWT前后端分离demo

开源商城项目 MallService-SSM (SpringSpringMVCMybatisMySQLVueNuxt) 前后端分离

基于SSM实现前后端分离在线考试管理系统