用Vue编写项目中的前端页面

前言Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。使用Vue，同样也可以达到此种效果。这里介绍的，就是用Vue来编写前端页面的例子。原例子项目来自此博客：https://blog.csdn.net/qq_41151659/article/details/98115573实现效果原来是用动态Jsp编写查看所有书籍（allBook.jsp）的页面，这里换用vue实现...

赈川

11891人浏览 · 2019-08-07 16:51:10

赈川 · 2019-08-07 16:51:10 发布

文章目录

前言
实现

前言

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。使用Vue，同样也可以达到此种效果。这里介绍的，就是用Vue来编写前端页面的例子。
原例子项目来自此博客：https://blog.csdn.net/qq_41151659/article/details/98115573

实现

效果

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

准备

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

实现

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

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--使用JSTL标签--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>全部书籍</title>

    <%--引用BootStarp--%>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>


<div class="container">

    <%--标题--%>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>书籍列表--显示所有书籍</small>
                </h1>
            </div>
        </div>
    </div>

    <%--增加--%>
    <div class="row">
        <div class="col-md-4 column">
            <a class="btn btn-primary" href="${pageContext.request.contextPath}/book/toAddBook">新增</a>
        </div>
    </div>

    <%--展示页面：表格，修改，删除--%>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-hover table-striped">

                <%--表头--%>
                <thead>
                 <tr>
                     <th>书籍编号</th>
                     <th>书籍名称</th>
                     <th>书籍数量</th>
                     <th>书籍描述</th>
                     <%--操作：修改，删除--%>
                     <th>操作</th>
                 </tr>
                </thead>
                <%--表的内容--%>
                <tbody>
                    <c:forEach var="book" items="${list}">
                        <tr>
                            <td>${book.getBookID()}</td>
                            <td>${book.getBookName()}</td>
                            <td>${book.getBookCounts()}</td>
                            <td>${book.getDetail()}</td>
                            <td>
                                <a href="${pageContext.request.contextPath}/book/toUpdateBook?id=${book.getBookID()}">更改</a> |
                                <a href="${pageContext.request.contextPath}/book/del/${book.getBookID()}">删除</a>
                            </td>
                        </tr>
                    </c:forEach>

                </tbody>

            </table>
        </div>
    </div>





</div>


</body>
</html>

在控制器的末端添加两个方法：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<Books> 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<Books> list = bookService.queryAllBook();
        return new ObjectMapper().writeValueAsString(list);
    }



}

编写Vue.jsp，代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--使用JSTL标签--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>全部书籍</title>

    <%--引用BootStarp--%>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>


<div class="container" id="kuang">

    <%--标题--%>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>书籍列表--显示所有书籍</small>
                </h1>
            </div>
        </div>
    </div>

    <%--增加--%>
    <div class="row">
        <div class="col-md-4 column">
            <a class="btn btn-primary" href="${pageContext.request.contextPath}/book/toAddBook">新增</a>
            &nbsp;&nbsp; | &nbsp;&nbsp;
            <button @click="m_post()"><span class="glyphicon glyphicon-repeat"></span></button>
        </div>
    </div>

    <%--展示页面：表格，修改，删除--%>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-hover table-striped">

                <thead>
                <tr>
                    <th>书籍编号</th>
                    <th>书籍名称</th>
                    <th>书籍数量</th>
                    <th>书籍描述</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                    <tr v-for="book in books">
                        <td>{{book.bookID}}</td>
                        <td>{{book.bookName}}</td>
                        <td>{{book.bookCounts}}</td>
                        <td>{{book.detail}}</td>
                        <td>
                            <a href="${pageContext.request.contextPath}/book/toUpdateBook?id=${book.getBookID()}">更改</a> |
                            <a href="${pageContext.request.contextPath}/book/del/${book.getBookID()}">删除</a>
                        </td>
                    </tr>
                </tbody>

            </table>
        </div>
    </div>
</div>


<script src="${pageContext.request.contextPath}/statics/vue/vue.js"></script>
<script src="${pageContext.request.contextPath}/statics/vue/vue-resource.js"></script>

<script>
    var vm =  new Vue({
        el:"#kuang",
        data:{
            url:"${pageContext.request.contextPath}/book/vueAllBook",
            books:""
        },
        methods:{
            m_post(){
                var _this = this;
                Vue.http.post(_this.url).then(function (success) {
                    console.log(success.body);
                    _this.books = success.body;
                })
            }
        }
    })
</script>


</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^