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

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 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=" + price +
                ", num=" + num +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public Double getPrice() {
        return price;
    }

    public void setPrice(Double price) {
        this.price = price;
    }

    public Integer getNum() {
        return num;
    }

    public void setNum(Integer num) {
        this.num = num;
    }
}

1.4.1.3ProductMapper.java(商品Sql操作页面)

package cn.tedu.boot03.mapper;

import cn.tedu.boot03.entity.Product;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface ProductMapper {

    @Insert("insert into product values(null,#{title},#{price},#{num})")
    public void insert(Product product);

    @Select("select * from product")
    List select();

    @Delete("delete from product where id = #{id}")
    void delete(int id);

    @Select("select * from product where id = #{id}")
    Product selectById(int id);

    @Update("update product set title = #{title},price = #{price} ,num = #{num} where id = #{id}")
    void update(Product product);
}

1.4.1.4index.html(首页)




    
    Title


商品管理系统
添加商品
商品展示

1.4.1.5insert.html(商品添加页面)




    
    Title



  添加商品

1.4.1.6select.html(商品展示页面




    
    Title



  
    商品信息
    
      编号
      标题
      价格
      库存
      操作
    
    
      {{p.id}}
      {{p.title}}
      {{p.price}}
      {{p.num}}
      
        修改
        删除

商品信息
编号	标题	价格	库存	操作
{{p.id}}	{{p.title}}	{{p.price}}	{{p.num}}	修改删除

1.4.1.7update.html(商品修改页面)




    
    Title



    修改商品信息

1.5扩展练习:命令行中创建一个员工表myemp 包含:id,name,salary,job字段创建boot4-1工程实现员工管理系统(员工的增删改查) 1.5.1代码展示

1.5.1.1sql代码展示

create database empdb;
use empdb;
create table myemp(
    id int primary key auto_increment,
    name varchar(40),
    salary int,
    job varchar(40)
);

1.5.1.2empController

package cn.tedu.boot41.controller;

import cn.tedu.boot41.entity.Emp;
import cn.tedu.boot41.mapping.EmpMapping;
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 empController {
    @Autowired
    EmpMapping mapping;

    @RequestMapping("/insert")
    public void insert(@RequestBody Emp emp){
        mapping.insert(emp);
    }

    @RequestMapping("/select")
    public List select(){
        return mapping.select();
    }

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

    @RequestMapping("/selectById")
    public Emp selectById(int id){
        return mapping.selectById(id);
    }

    @RequestMapping("/update")
    public void update(@RequestBody Emp emp){
        mapping.update(emp);
    }

}

1.5.1.3Emp

package cn.tedu.boot41.entity;

public class Emp {
    private Integer id;
    private String name;
    private Integer salary;
    private String job;

    @Override
    public String toString() {
        return "Emp{" +
                "id=" + id +
                ", name='" + name + ''' +
                ", salary=" + salary +
                ", job='" + job + ''' +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getSalary() {
        return salary;
    }

    public void setSalary(Integer salary) {
        this.salary = salary;
    }

    public String getJob() {
        return job;
    }

    public void setJob(String job) {
        this.job = job;
    }
}

1.5.1.4EmpMapping.java

package cn.tedu.boot41.mapping;

import cn.tedu.boot41.entity.Emp;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface EmpMapping {
    @Insert("insert into myemp values(null,#{name},#{salary},#{job})")
    void insert(Emp emp);

    @Select("select * from myemp")
    List select();

    @Delete("delete from myemp where id = #{id}")
    void delete(int id);

    @Select("select * from myemp where id = #{id}")
    Emp selectById(int id);

    @Update("update myemp set name = #{name},salary = #{salary},job = #{job} where id = #{id}")
    void update(Emp emp);
}

1.5.1.5index.html




    
    Title


  员工管理系统
  添加员工  
  查看员工信息

1.5.1.6insert.html




    
    Title


    
        添加员工

1.5.1.7select.html




    
    Title



  
    员工信息
    
      编号
      姓名
      工资
      部门
      操作
    
    
      {{e.id}}
      {{e.name}}
      {{e.salary}}
      {{e.job}}
      
        修改
        删除

员工信息
编号	姓名	工资	部门	操作
{{e.id}}	{{e.name}}	{{e.salary}}	{{e.job}}	修改删除

1.5.1.8update.html




    
    Title



  修改员工数据

2.文件上传 2.1项目目录

2.2代码展示

2.2.1ProductController

package cn.tedu.boot05.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

@RestController
public class ProductController {
    @RequestMapping("/upload")
    public void upload(MultipartFile picFile) throws IOException {
        //得到原始文件名
        String fileName = picFile.getOriginalFilename();
        System.out.println(fileName);
        //得到文件后缀  a.jpg  .jpg  从.的位置开始截取  截取到最后
        String suffix = fileName.substring(fileName.lastIndexOf("."));
        //得到唯一的文件名 UUID.randomUUID()得到一个唯一标识符
        fileName = UUID.randomUUID()+suffix;
        System.out.println(fileName);
        String dirPath = "E:/files";
        File dirFile = new File(dirPath);
        if (!dirFile.exists()){
            dirFile.mkdirs();
        }
        //E:/files/xxxxx.jpg
        String filePath = dirPath+"/"+fileName;
        //吧文件保存到指定的路径  异常抛出
        picFile.transferTo(new File(filePath));
    }
}

2.2.2index.html




    
    Title


文件上传练习首页
上传文件

2.2.3upload.html

暑期编程PK赛得CSDN机械键盘等精美礼品！

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

Java相关栏目本月热门文章