本文共 4752 字，大约阅读时间需要 15 分钟。

前言

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。使用Vue，同样也可以达到此种效果。这里介绍的，就是用Vue来编写前端页面的例子。

实现

效果

原来是用动态Jsp编写查看所有书籍（allBook.jsp）的页面，这里换用vue实现（Vue.jsp）。

准备

在webapp目录下新建一个statics包，并在该包下新建vue文件夹，导入vue.js和vue-resources.js文件（去Vue官网下载），如图所示：

实现

1. 原先的查看所有书籍页面（allBook.jsp），代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%--使用JSTL标签--%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>        <%--引用BootStarp--%>    
   
   
        <%--标题--%>    
    
        
     
            
      
                
       
                    书籍列表--显示所有书籍                
            
      
        
     
    
    
    <%--增加--%>    
    
        
     
            
      新增        
     
    
    
    <%--展示页面：表格，修改，删除--%>    
    
        
     
            
                              
      
      
                       <%--表头--%>                
 <%--操作：修改，删除--%> 
                <%--表的内容--%>                
       
                         
          
书籍编号
          
书籍名称
          
书籍数量
          
书籍描述
         
操作
         
                       
       
                            
          
${book.getBookID()}
          
${book.getBookName()}
          
${book.getBookCounts()}
          
${book.getDetail()}
          
 更改 | 删除 
         
                                           
                  
        
     
    
    
   

2. 在控制器的末端添加两个方法：toVue（）、vueAllBook（），toVue方法用于跳转到用Vue显示全部书籍的页面，vueAllBook方法用于执行查找所有书籍的service层方法，并且将获取到的集合以JSON格式返回到jsp页面中，代码如下：

import com.fasterxml.jackson.core.JsonProcessingException;import com.fasterxml.jackson.databind.ObjectMapper;import com.kuang.pojo.Books;import com.kuang.service.BookService;import com.sun.xml.internal.messaging.saaj.packaging.mime.util.LineInputStream;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.beans.factory.annotation.Qualifier;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import java.util.List;@Controller@RequestMapping("/book")public class BookController {
       @Autowired    @Qualifier("bookServiceImpl")    private BookService bookService;    //展示全部的书籍    @RequestMapping("/allBook")    public String list(Model model){
           List
   
     list = bookService.queryAllBook();        model.addAttribute("list",list);        return "allBook";    }    //跳转到新增书籍页面    @RequestMapping("/toAddBook")    public String toAddBook(){
           return "addBook";    }    //增加书籍页面    @RequestMapping("/addBook")    public String addBook(Books books){
           System.out.println("调试信息addBook===="+books);        bookService.addBook(books);        return "redirect:/book/allBook"; //重定向到首页    }    //跳转到修改页面    @RequestMapping("/toUpdateBook")    public String toUpdateBook(int id,Model model){
           Books books = bookService.queryBookByID(id);        System.out.println("调试信息toUpdateBook===="+books);        model.addAttribute("book",books);        return "updateBook";    }    //修改书籍    @RequestMapping("/updateBook")    public String updateBook(Books books,Model model){
           System.out.println("调试信息updateBook===="+books);        bookService.updateBook(books);        //更新最新的书籍        Books books1 = bookService.queryBookByID(books.getBookID());        model.addAttribute("books",books1);        System.out.println("修改后的书籍===="+books1);        return "redirect:/book/allBook"; //重定向到首页    }    //删除书籍,请使用restful风格    @RequestMapping("/del/{bookID}")    public String deleteBook(@PathVariable("bookID") int id){
           bookService.deleteBookByID(id);        return "redirect:/book/allBook"; //重定向到首页    }    //跳转到Vue渲染书籍页面    @RequestMapping("/toVue")    public String toVue(){
           return "Vue";    }    @RequestMapping("/vueAllBook")    @ResponseBody    public String vueAllBook() throws JsonProcessingException {
           List
    
      list = bookService.queryAllBook();        return new ObjectMapper().writeValueAsString(list);    }}
    
   

3. 编写Vue.jsp，代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%--使用JSTL标签--%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>        <%--引用BootStarp--%>    
   
   
        <%--标题--%>    
    
        
     
            
      
                
       
                    书籍列表--显示所有书籍                
            
      
        
     
    
    
    <%--增加--%>    
    
        
     
            
      新增               |               
              
     
    
    
    <%--展示页面：表格，修改，删除--%>    
    
        
     
            
      
                       
                        
          
书籍编号
          
书籍名称
          
书籍数量
          
书籍描述
          
操作
         
                       
                       
                            
          
{ {book.bookID}}
          
{ {book.bookName}}
          
{ {book.bookCounts}}
          
{ {book.detail}}
          
 更改 | 删除 
         
                       
                  
        
     
    
    
   

转载地址：http://cpcen.baihongyu.com/