之前某些原因,整理了一个小的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="data: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的更多相关文章

  1. Web前后端:如何分离,如何解耦?

    摘要:在本文中我们一起来探讨一下为什么要在软件开发中进行前后端的分离,如何做到前后端分离,如何解耦. 简单地说,就是要把复杂的问题简单化,把一个从0到N的问题转化为N个0到1的问题.另一个相近的说法就 ...

  2. SSM 前后端分离 这里controll层的返回值和之前那个不一样

    1.先创建实体类: 2.创建mapper层 package cn.kgc.mapper; import cn.kgc.Account;import org.apache.ibatis.annotati ...

  3. SSM前后端分离 ssm+html+js(ajax) 这种controll层的返回值是结合或者网址

    提示: 1.单表查询多条数据用 list<实体类名字> mapper层 1.1单表查询单条数据用  对象 2.两表关联查多条 list<map<String,Object> ...

  4. spring boot+vue前后端项目的分离(我的第一个前后端分离项目)

    文章目录 1.前端vue的搭建 2.后端项目的构建 pom文件中引入的jar包 yml文件用来配置连接数据库和端口的设置 application.property进行一些整合 controller层( ...

  5. 使用nodewebx进行前后端开发环境分离

    下载nodewebx(windows环境) npm install nodewebx npm install inherits 为什么要下载inherits,因为nodewebx依赖它... 构建目录 ...

  6. SSM框架中的前后端分离

    认识前后端分离 在传统的web应用开发中,大多数的程序员会将浏览器作为前后端的分界线.将浏览器中为用户进行页面展示的部分称之为前端,而将运行在服务器,为前端提供业务逻辑和数据准备的所有代码统称为后端. ...

  7. 前后端分离及React的一些研究

    前言 在对英才网企业线前端不断的完善过程中,我们尝试进行了前后端分离,引入Node环境.以及在使用React的过程中,自行开发DOM渲染框架,解决React兼容低版本IE的问题,在这个过程中,我们有了 ...

  8. DevOps 视角的前后端分离与实战

    本文作者:CODING - 廖红坤 前言 随着微前端.微服务等技术理念和架构的蓬勃发展,我们已经没必要去讨论为什么要前后端分离这种话题,前后端分离已成为互联网项目开发的标准模式.前后端在各自的领域发展 ...

  9. 架构设计:前后端分离之Web前端架构设计

    在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分离的一种具体实现方案,该方案和我原来设想有 ...

随机推荐

  1. Eclipse GlassFish Server 配置

    一.下载GlassFish Server    通过如下地址下载合适版本:    http://glassfish.java.net/public/downloadsindex.html    htt ...

  2. FineReport报表和水晶报表的比较

    FineReport报表和水晶报表的比较 FineReport报表软件针对复杂格式的报表数据及Web报表的展现,通过多源分片.不规则分组.双向扩展来轻松拖拽做复杂格式的报表,制作报表从此摆脱了复杂的S ...

  3. appium工作流程解析

    为什么选择appium ​ app自带测试框架,为什么要选择appium这个测试框架呢? Ios9.3以前使用的是UIAutomation,Ios9.3以后使用XCUITest.如果只使用Apple的 ...

  4. The Annual Summary Of 2019

    Time is flying, it arrives at the end of year again. This is my first year working in PinDuoDuo inc ...

  5. Frangi形态学滤波详解

    利用Hessian矩阵的滤波函数Frangi,网上的文章只是把论文中的公式贴出来了. 我感觉分析下滤波函数是怎么起作用,还是挺有意思的一件事情. Frangi滤波方法的论文是: Frangi A F, ...

  6. Node.js 模块系统入门

    在编程领域中,模块是自包含的功能单元,可以跨项目共享和重用.它们使开发人员的生活更加轻松,因为我们可以使用它来增加应用程序的功能,而不必亲自编写这些功能.它还让我们可以组织和解耦代码,从而使应用程序更 ...

  7. AQS原理及应用

    To use this class as the basis of a synchronizer, redefine the * following methods, as applicable, b ...

  8. Spring Boot从零入门2_核心模块详述和开发环境搭建

    目录 1 前言 2 名词术语 3 Spring Boot核心模块 3.1 spring-boot(主模块) 3.2 spring-boot-starters(起步依赖) 3.3 spring-boot ...

  9. 如何在ArcGIS中恢复注记文字

    文字标注是地图上一种特殊的视觉元素,可通过文字表达图形符号难以说明的地图内容,它与图形符号结合在一起存在于地图上,是关乎地图构图美的关键因素之一. MapGIS软件下子图对象和注释对象统统保存在点文件 ...

  10. PHP-FPM 远程代码执行漏洞(CVE-2019-11043)的简单复现学习

    1.概述 漏洞主要由于 PHP-FPM 中 sapi/ fpm/ fpm/ fpm_main.c 文件内的 env_path_info 下溢导致,攻击者可以使用换行符 %0a 破坏 Nginx 中 f ...