基于bootstrap，vue，jquery的前端列表、表格＜tr＞＜td＞展示

原创已于 2022-08-25 19:08:17 修改 · 1.0k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #bootstrap

于 2022-08-25 00:30:53 首次发布

本文介绍了如何结合bootstrap、vue.js和jquery来实现一个前端列表和表格的展示。通过引入vue和jquery支持，实现了数据驱动的列表刷新，并利用bootstrap实现了多终端自适应布局。内容包括html、css和js代码示例，以及不同设备的界面展示。

目录：html部分：

css部分：

js部分：

前几天帮朋友开发一个基于javaweb的图书管理系统，由于没有很好用的列表、表格<tr><td>，因此自己动手写了一个满足自己使用，基于bootstrap，vue，jquery的前端列表展示，bootstrap可以多终端自适应，vue是基于数据端刷新js，jquery在主要运用Ajax，jquery在此功能中未使用。

html代码:

1.效果图：如下展示：调试界面展示。

PC端界面展示。

手机端展示。

2.代码：

2.1 html头文件引入：

1>.添加vue支持： <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>；

2>.添加JQuery支持： <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>；

3>.添加Bootstrap 支持： <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">；

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script><meta http-equiv="keywords" content="keyword1,keyword2,keyword3">；

<head>
    <title>booksDetail.html</title>
    <!--添加Vue支持-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!--添加JQuery支持-->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script><meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/booksDetail.css" />
</head>

2.2 html中body代码：

<!--center-->
<div class="center" id="center" >
    <table bgcolor="black" cellspacing="1" width=""  class="table table-bordered  table-hover" >
        <caption class="h2">
            <h2 >图书在库数据</h2>
        </caption>

        <tr bgcolor="#a9a9a9">
            <th>选择</th>
            <th>序号</th>
            <th>书名</th>
            <th>SN码</th>
            <th>简略图</th>
            <th>在库数量</th>
            <th>在阅数量</th>
            <th>详细连接</th>
        </tr>
        <tr bgcolor="white" align="center" class="tr"   v-for="n of centers_page">
            <td><input type="checkbox"></td>
            <td>{{n.n }}</td>
            <td>{{n.book_name }}</td>
            <td align="left">{{ n.book_sn }}</td>
            <td align="left"><img :src="n.book_picture"></td>
            <td>{{n.house_number }}</td>
            <td>{{n.read_number }}</td>
            <td><a :href = "n.alink" >相关连接</a>
            </td>
        </tr>
    </table>
</div>

3 css代码：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pro,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin: 0;padding: 0;}
a{text-decoration: none;}
body{
    font-size: 1rem;
    font-family: Arial,"Lucida Grande",Verdana,"Microsoft YaHei",sans-serif;
    color: #666;
    background-color: #f5f5f5;
}
.center{
    padding-bottom: 0em;
    padding-top: 5em;
}
.center .h2{
    background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210F2130512J47-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658503726&t=ccabccbed26ba192710e8cfa39bc5e60");
    padding-left: 1em;
}
.center img{
    width: 3em;
}

4 js代码：

var center = new Vue({
    el:'#center',
    data:{
        centers:[
        centers_page:[
            {n:"1",book_name:"A",book_sn:"B",book_picture:"10",house_number:"10",read_number:"10",alink:"http://baidu.com"},
            {n:"1",book_name:"A",book_sn:"B",book_picture:"10",house_number:"10",read_number:"10",alink:"http://baidu.com"},
            {n:"1",book_name:"A",book_sn:"B",book_picture:"10",house_number:"10",read_number:"10",alink:"http://baidu.com"},
        ]
    }
});

5 最后别忘引入css文件和js文件，并确保css放在body之前，js放在body之后。有问题的朋友可以随时交流！！！加关注，不迷路。博主会持续更新javaweb前端、后端相关知识。注意：需要链接互联网，因为引入的VUE，JQuery，Bootstrap需要联网获取。

6 完整代码：可直接运行。

<!DOCTYPE html>
<html>
<head>
    <title>booksDetail.html</title>
    <!--添加Vue支持-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!--添加JQuery支持-->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script><meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
	.center{
	    padding-bottom: 0em;
	    padding-top: 5em;
	}
	.center .h2{
	    background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210F2130512J47-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658503726&t=ccabccbed26ba192710e8cfa39bc5e60");
	    padding-left: 1em;
	}
	.center img{
	    width: 3em;
	}
</style>
<!--center-->
<div class="center" id="center" >
    <table bgcolor="black" cellspacing="1" width=""  class="table table-bordered  table-hover" >
        <caption class="h2">
            <h2 >图书在库数据</h2>
        </caption>

        <tr bgcolor="#a9a9a9">
            <th>选择</th>
            <th>序号</th>
            <th>书名</th>
            <th>SN码</th>
            <th>简略图</th>
            <th>在库数量</th>
            <th>在阅数量</th>
            <th>详细连接</th>
        </tr>
        <tr bgcolor="white" align="center" class="tr"   v-for="n of centers_page">
            <td><input type="checkbox"></td>
            <td>{{n.n }}</td>
            <td>{{n.book_name }}</td>
            <td align="left">{{ n.book_sn }}</td>
            <td align="left"><img :src="n.book_picture"></td>
            <td>{{n.house_number }}</td>
            <td>{{n.read_number }}</td>
            <td><a :href = "n.alink" >相关连接</a>
            </td>
        </tr>
    </table>
</div>
<script>
	var center = new Vue({
	    el:'#center',
	    data:{
	        centers_page:[
	            {n:"1",book_name:"A",book_sn:"B",book_picture:"10",house_number:"10",read_number:"10",alink:"http://baidu.com"},
	            {n:"1",book_name:"A",book_sn:"B",book_picture:"10",house_number:"10",read_number:"10",alink:"http://baidu.com"},
	            {n:"1",book_name:"A",book_sn:"B",book_picture:"10",house_number:"10",read_number:"10",alink:"http://baidu.com"},
	        ]
	    }
	});
</script>
</body>
</html>