SpringBoot day04

后端的MVC设计模式

• 把实现一个业务的代码划分为三部分,分别是: 页面相关(V),业务逻辑相关(C),数据相关(M)

• M:Model 数据模型, 对应的代码是数据库相关的Mapper部分

• V:View 视图, 对应所有页面相关内容

• C:Controller 控制器,对应的是Controller相关代码

• 实现一个业务的顺序: V页面相关代码->C Controller相关代码->M 数据库Mapper相关代码

• 排错时也是从这三部分代码中找问题

• 后端MVC涉及模式中的V页面相关,前端工程师将页面又划分为了MVC三部分

前后端分离

 

如果前后端不分离, 后端服务器需要两套代码来应对 手机客户端和浏览器客户端, 因为不同的客户端的需求内容是不一样的,这样后端的开发效率就会受影响.

 

• 前后端分离:指在Controller中不再处理页面相关内容, 浏览器客户端需要先请求页面,页面加载完之后从页面中再次发出请求获取数据, 得到数据后把数据展示在页面中,这个过程属于页面的局部刷新, 同步请求只能实现页面的整体刷新无法实现局部刷新, 所以以后不再使用同步请求, 全部使用异步请求,因为以后工作基本全是前后端分离思想.

JSON

• JSON是一种轻量级的数据交换格式(数据封装格式)

• 客户端和服务器之间需要互相传递数据,当需要传递复杂数据时需要按照特定的格式将数据进行封装,JSON就是这样一个通用格式.

登录成功

用户名已存在

密码错误

1

2

3

"id=1, title=手机 , price=1000, saleCount=500"

[{"id":1,"title":"阿迪袜子","price":10.0,"saleCount":1000},{"id":3,"title":"裤子","price":50.0,"saleCount":400},{"id":4,"title":"袜子","price":5.0,"saleCount":100}]

服务器和客户端之间如何传递复杂数据

 

商品管理添加商品步骤:

1. 创建工程 3个打钩 修改application.properties配置文件, 启动工程测试是否成功

1. 创建index.html首页 和 insert.html页面

1. 在insert.html页面中添加三个文本框和一个添加按钮, 通过Vue对页面内容进行管理,此时需要把之前工程中的js文件夹复制到新工程, 当点击添加按钮时向/insert地址发出异步post请求把用户输入的商品信息提交

1. 创建controller.ProductController 添加insert方法处理/insert请求 创建Product实体类 在insert方法中声明用来接收传递过来的参数(此参数需要通过@RequestBody注解进行修饰

1. 创建ProductMapper 在里面添加insert方法通过@Insert注解修饰

1. 在Controller中将ProductMapper装配进来, 在insert方法中调用mapper的insert方法把接收到的Product对象传递过去

商品管理商品列表步骤:

1. 在index.html页面中添加商品列表超链接 请求地址为/list.html页面

1. 创建list.html页面, 在页面中添加表格,并且通过Vue进行管理,在Vue的created方法中发出异步的get请求,把请求回来的数据交给一个数组变量, 然后让页面中表格的内容和数据变量进行绑定, 当数组有值时页面会自动显示数据

1. 在ProductController中添加select方法 处理/select请求,方法中调用mapper的select方法 把得到的List集合直接返回给客户端

1. 实现 mapper里面的select方法

商品管理删除商品步骤:

1. 在商品列表页面中添加删除的超链接 ,废掉超链接的跳转功能添加点击事件,调用del方法, 在方法中向/delete发出异步get请求并且把商品的id传递过去

1. 在ProductController中 添加delete方法处理/delete请求在方法中调用mapper的deleteById方法把接收到的id传递进去

1. 实现mapper里面的deleteById方法

商品管理修改商品步骤:

1. 给列表页面添加 修改超链接 往/update.html页面跳转 并且传递过去商品id

1. 创建update.html页面 在Vue的created方法中得到传递过来的id 然后向/selectById 发出异步的get请求 把id传递过去 把服务返回的数据用一个product对象接收, 并且页面内容和此对象进行绑定 这样对象有值页面就能跟着显示

1. 在ProductController里面添加selectById方法 处理/selectById请求, 在方法中调用Mapper的selectById方法

1. 实现mapper里面的selectById方法

1. 给update.html页面中的修改按钮添加点击事件, 点击时向/update地址发出异步的post请求把商品的信息一起提交

1. 在ProductController里面添加update方法处理/update请求,在方法中掉用mapper的update方法

1. 实现mapper里面的update方法 .