VUE基础操作

哎前端框架也是要会一点，不然没法做项目

axios传参与地址，与后端方法呼应

axios.get与控制层的GetMapping(value=地址）映射

key为后端方法的参数

axios.post与控制层PostMapping映射，同上，格式稍有出入

springboot的RESTFUL与前端有一一对应的写法，详情见以下代码

control层

package com.itheima.controller;

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.itheima.controller.utils.R;
import com.itheima.domain.Book;
import com.itheima.service.IBookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

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

@RestController
@RequestMapping("/books")
public class BookController {

    @Autowired
    private IBookService bookService;

    @GetMapping
    public R getAll(){
        return new R(true, bookService.list());
    }

    @PostMapping
    //@RequestBody接收JSON数据，接收前端传过来的数据
    public R save(@RequestBody Book book) throws IOException {
//        R r = new R();
//        boolean flag = bookService.save(book);
//        r.setFlag(flag);
        System.out.println("运行成功");
        //throw new IOException()的目的是发生文件读写异常也能进行下面的程序
        if (book.getName().equals("123") ) throw new IOException();
        //用于判断是否成功
        boolean flag = bookService.save(book);
        System.out.println("运行成功");
        return new R(flag, flag ? "添加成功^_^" : "添加失败-_-!");
    }

    @PutMapping
    public R update(@RequestBody Book book) throws IOException {
        if (book.getName().equals("123") ) throw new IOException();
        boolean flag = bookService.modify(book);
        return new R(flag, flag ? "修改成功^_^" : "修改失败-_-!");
    }

    @DeleteMapping("{id}")
    //接收路径变量
    public R delete(@PathVariable Integer id){
        return new R(bookService.delete(id));
    }

    @GetMapping("{id}")
    public R getById(@PathVariable Integer id){
        return new R(true, bookService.getById(id));
    }

//    @GetMapping("{currentPage}/{pageSize}")
//    public R getPage(@PathVariable int currentPage,@PathVariable int pageSize){
//        IPage page = bookService.getPage(currentPage, pageSize);
//        //如果当前页码值大于了总页码值，那么重新执行查询操作，使用最大页码值作为当前页码值
//        if( currentPage > page.getPages()){
//            page = bookService.getPage((int)page.getPages(), pageSize);
//        }
//        return new R(true, page);
//    }

    @GetMapping("{currentPage}/{pageSize}")
    public R getPage(@PathVariable int currentPage,@PathVariable int pageSize,Book book){
//        System.out.println("参数==>"+book);

        IPage page = bookService.getPage(currentPage, pageSize,book);
        //如果当前页码值大于了总页码值，那么重新执行查询操作，使用最大页码值作为当前页码值
        if( currentPage > page.getPages()){
            page = bookService.getPage((int)page.getPages(), pageSize,book);
        }
        return new R(true, page);
    }

}

前端 books.html

    

    

    

    

    

    

    

    

    







    

        图书管理

    

    

        

            
                
                
                
                查询
                新建
            

            

                

                

                

                

                

                    

                

            

            
            

                

                

            

            

            

                

                    

                        

                            

                                

                                    

                                

                            

                            

                                

                                    

                                

                            

                        


                        

                            

                                

                                    

                                

                            

                        

                    

                    

                        取消

                        确定

                    

                

            

            

            

                

                    

                        

                            

                                

                                    

                                

                            

                            

                                

                                    

                                

                            

                        

                        

                            

                                

                                    

                                

                            

                        

                    

                    

                        取消

                        确定

                    

                

            

        

    

 前端VUE的其他操作

v-if v-model v-for等，以及数据交互，动态生成表格等如下

    
    




    {{message}}


   




    取消


    
        
        {{count}}
        
    

    
 

    
    


    


    
    
        
        
    



    
        

            

               {{item}}
            
        
    
    
    
        

            

                {{index}}    {{it}}
            
        
    
    
    
        

            

                {{it.name}}
            
        
    


    
    
    

 动态增加行，并保存输入的值

    
    




    

        小黑记事本
    
    

        

            {{index+1}}