idea四层架构项目搭建-前端项目开发

最新推荐文章于 2024-05-04 21:03:39 发布

周途

最新推荐文章于 2024-05-04 21:03:39 发布

阅读量1.0k

点赞数

分类专栏： idae四层架构项目搭建#JAVA+HTML 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/zhoutao_88/article/details/127908242

版权

idae四层架构项目搭建#JAVA+HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

准备工作:

创建文件夹assets和所需导包,然后创建一个HTML文件

导包下载链接

链接：https://pan.baidu.com/s/1zJ8UbC3Ex2_oW--Ozhc5ow
提取码：6666

数据库文件下载链接(测试用)

链接：https://pan.baidu.com/s/1mH1yydrA2M6a8G6RMKazGA
提取码：6666

开始干活:

一、添加bootstrap和vue的依赖

源代码

<!--导入bootstrap-->
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!--导入vue-->
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>

二、前端全部源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入bootstrap-->
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!--导入vue-->
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>
</head>
<body>
    <div id="app" class="container">
        <table class="table table-striped">
            <caption>用户列表</caption>
            <thead>
                <tr>
                    <th>id</th>
                    <th>用户名</th>
                    <th>创建日期</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="u in users">
                    <td>{{u.id}}</td>
                    <td>{{u.userName}}</td>
                    <td>{{u.createDate}}</td>
                </tr>
            </tbody>
        </table>
        <!--分页器(bootstrap的一款导航)-->
        <ul class="pagination" v-for="p in pageNum">
            <li v-if="p == pageIndex" class="active"><a href="#" @click="doGo(p)">{{p}}</a></li>
            <li v-else="p == pageIndex"><a href="#" @click="doGo(p)">{{p}}</a></li>
        </ul>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                users:null,
                //分页用
                pageIndex:1,//哪一页
                pageSize:10,//每页显示多少条
                pageTotle:0,//总条数
                pageNum:0,//有几页
            },
            methods:{
                //发送请求用户列表
                requestUserList(url){
                    //通过axios发送请求
                    axios.get(url).then(resppnse =>{
                        console.log(resppnse.data)
                        this.users=resppnse.data.data
                        this.pageTotle = resppnse.data.pageTotle
                        this.pageNum = Math.ceil(this.pageTotle/this.pageSize);
                    })
                },
                doGo(p){
                    this.pageIndex=p
                    var url = 'http://127.0.0.1:8080/user/list?pageIndex='+p+'&pageSize='+this.pageSize;
                    this.requestUserList(url);//调用请求用户列表的函数
                }
            },
            created:function () {//页面加载完成后执行
                var url = 'http://127.0.0.1:8080/user/list?pageIndex='+this.pageIndex+'&pageSize='+this.pageSize;
                this.requestUserList(url);//调用请求用户列表的函数
            }
        });
    </script>

</body>
</html>

测试结果