JSD-2204-文件上传-Ajax-Day14

最新推荐文章于 2023-02-04 20:50:49 发布

程序猿 Monkey

最新推荐文章于 2023-02-04 20:50:49 发布

阅读量410

点赞数

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/TheNewSystrm/article/details/125790550

版权

1.Ajax

1.1前后端分离

如果前后端不分离, 指的是在后端Controller代码中需要处理页面相关的代码, 这样的话手机端发请求时需要单独再创建一个Controller提供数据, 这样加大了后端程序员的工作量,需要准备两套处理相同业务的Controller

前后端分离后, 将页面相关代码从Controller中去掉, Controller只负责提供数据,这样不管前端是浏览器还是手机端都用相同的处理方式, 浏览器的请求流程变成先请求页面,页面显示后再发请求获取数据,得到数据后把数据显示到原页面中,这个过程属于页面局部刷新,所以只能使用异步请求来实现

由于以后工作中都是前后端分离的架构,所以以后发请求都是使用异步请求.

1.2服务器给客户端传递复杂数据过程

1.3JSON

轻量级的数据交换格式(数据封装格式)
当客户端和服务器之间进行数据传输时, 如果数据相对复杂,则需要按照一定的格式保存到字符串中,再进行传输, JSON就是一个通用的格式.

[{"id":1,"title":"小米手机","price":5000.0,"num":100},{"id":7,"title":"猫屎咖啡","price":100.0,"num":30},{"id":8,"title":"雀巢咖啡","price":20.0,"num":500},{"id":9,"title":"洗衣机","price":2000.0,"num":50},{"id":10,"title":"键盘","price":50.0,"num":1000}]

1.4商品管理系统

准备工作: 创建boot4工程打3个√
在application.properties里面添加连接数据库的信息
创建index.html页面里面添加两个超链接: 添加商品和商品列表,请求的地址分别为 /insert.html和 /select.html
添加商品步骤:
创建insert.html页面 , 通过vue管理页面, 三个文本框进行双向绑定, 给按钮添加点击事件, 点击后向/insert发出异步请求,请求成功后返回到首页
创建controller.ProductController,添加insert方法处理/insert请求, 创建Product实体类, 并且声明在参数列表处接收参数, 控制台输出接收到的参数测试是否有数据,
创建ProductMapper在里面添加insert方法
在Controller里面把ProductMapper装配进来, 在insert方法中调用mapper的insert方法把product传递进去.
商品列表步骤:
创建select.html页面, 在页面中添加一个table表格和data里面arr数组中的数据进行绑定,在vue里面添加created方法在方法中向/select发出异步请求把请求回来得到的数据给到data里面的arr数组, 页面会自动发生改变
在Controller里面添加select方法处理/select请求,在里面调用mapper的select方法返回值为List集合里面装着Product对象, 把得到的list集合直接return出去
实现mapper里面的select方法
删除商品步骤:
在select.html页面中的表格里面添加操作一列 ,里面添加删除超链接, 废掉超链接的跳转功能, 然后给超链接添加点击事件, 点击时把商品的id传递到方法里面, 在方法里面向/delete?id=xxx发出删除的异步请求
在ProductController里面添加delete方法处理/delete请求接收传递过来的id, 先测试id是否接收到了, 在方法中调用mapper的deleteById方法
实现mapper里面的deleteById方法
修改商品步骤:
在select.html页面中的表格里面操作一列里面 ,里面添加修改超链接,请求地址为/update.html?id=xxx
创建update.html页面,页面中四个文本框和vue里面的对象进行双向绑定, 添加created方法,在里面向/selectById?id=xxx发出请求, 把得到的数据赋值给vue里面的对象,页面会自动发生改变
在Controller里面添加selectById方法处理/selectById方法,接收传递过来的id,测试id是否接收到, 在方法中调用mapper的selectById方法返回值为Product对象, 把对象return出去
实现mapper里面的selectById方法
给update.html页面中的修改按钮添加点击事件, 点击时向/update发出异步请求,把vue里面的对象传递过去
在Controller里面添加update方法处理/update请求,方法中声明Product对象接收传递过来的商品信息, 调用mapper里面的update方法把接收到的product对象传递过去
实现mapper中的update方法.

1.4.1代码展示

1.4.1.1ProductController.java(商品接收响应页面)

package cn.tedu.boot03.collection;

import cn.tedu.boot03.entity.Product;
import cn.tedu.boot03.mapper.ProductMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
public class ProductController{

    @Autowired
    ProductMapper mapper;

    @RequestMapping("/insert")
    public void insert(@RequestBody Product product){
        mapper.insert(product);
    }

    @RequestMapping("/select")
    public List<Product> select(){
        return mapper.select();
    }

    @RequestMapping("/delete")
    public void delete(int id){
        mapper.delete(id);
    }

    @RequestMapping("/selectById")
    public Product selectById(int id){
        return mapper.selectById(id);
    }

    @RequestMapping("/update")
    public void update(@RequestBody Product product){
        mapper.update(product);
    }
}

1.4.1.2Product.java(商品实体类)

package cn.tedu.boot03.entity;

public class Product {
    private Integer id;
    private String title;
    private Double price;
    private Integer num;

    @Override
    public String toString() {
        return "Product{" +
                "id=" + id +
                ", title='" + title + '\'' +
                ", price=" &