【SSM整合】如何快速构建一个SSM项目③-梦境学习站

五、设计前端页面

1、写好vue框架

在webapp新建book.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书籍展示</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/MyDate.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
</div>

<script>
    var vm = new Vue({
        el: "#app",
         data:{
         },
         created(){
         //钩子函数，进入页面就执行
             this.fetchData();   //调取书籍信息
         },
        methods:{
            fetchData(){
                axios.get(`book/findByPage?page=${this.page}&size=${this.size}`).then(response=>{
                    this.books = response.data.rows;
                    this.total = response.data.total;
                });
            },
        }
    });
</script>
</body>
</html>

2、使用element-ui快速搭建页面结构

 <div id="app">
     <el-table
            :data="books"
            style="width: 100%">
        <el-table-column
                prop="bid"
                label="编号">
        </el-table-column>
        <el-table-column
                prop="bname"
                label="书籍名称">
        </el-table-column>
        <el-table-column
                prop="author"
                label="作者">
        </el-table-column>
        <el-table-column
                prop="price"
                label="价格">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.row.bid, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row.bid, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
 </div>

可以在element-ui官网寻找想用的模块，然后修改对应参数，达到快速搭建页面的效果。

book.html源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书籍展示</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/MyDate.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-table
            :data="books"
            style="width: 100%">
        <el-table-column
                prop="bid"
                label="编号">
        </el-table-column>
        <el-table-column
                prop="bname"
                label="书籍名称">
        </el-table-column>
        <el-table-column
                prop="author"
                label="作者">
        </el-table-column>
        <el-table-column
                prop="price"
                label="价格">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.row.bid, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row.bid, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="fetchData"
            @current-change="fetchData"
            :current-page.sync="page"
            :page-sizes="[2, 4, 6, 8]"
            :page-size.sync="size"
            layout="sizes, prev, pager, next"
            :total="total">
    </el-pagination>

    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">

        <el-form :model="book" label-width="100px" class="demo-ruleForm">
            <el-form-item label="编号" prop="bid">
                <el-input  disabled="disabled" v-model="book.bid"></el-input>
            </el-form-item>
            <el-form-item label="书籍名称" prop="bname">
                <el-input v-model="book.bname"></el-input>
            </el-form-item>
            <el-form-item label="作者" prop="author">
                <el-input v-model="book.author"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
                <el-input v-model="book.price"></el-input>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="edit(book)">确 定</el-button>
        </span>
    </el-dialog>

</div>

<script>
    var vm = new Vue({
        el: "#app",
         data:{
            books:[],
             book:{},
             page: 1,
             size: 2,
             total: 100,
             dialogVisible: false,

         },
         created(){
            this.fetchData();
         },
        methods:{
            fetchData(){
                axios.get(`book/findByPage?page=${this.page}&size=${this.size}`).then(response=>{
                    this.books = response.data.rows;
                    this.total = response.data.total;
                });
            },
            handleDelete(bid){
                axios.get(`book/del/${bid}`).then(response=>{
                    console.log(response);
                });
                console.log(bid)
            },
            handleEdit(bid){
                this.dialogVisible = true;
                axios.get(`book/findById/${bid}`).then(response=>{
                    this.book = response.data.data;
                });
            },
            handleClose(){
                this.dialogVisible = false;
            },
            edit(book){
                axios.post("book/update",book).then(response=>{
                    console.log(response.data);
                });
            }
        }
    });
</script>
</body>
</html>

3、功能测试

开启tomcat服务器，并进入localhost:8080/book.html进行测试

图片[1]-【SSM整合】如何快速构建一个SSM项目③-梦境学习站 — 功能测试

到这里，整个SSM快速搭建的过程就已经完成了！剩下就可以自己去熟悉和扩充功能了。

SSM整合文章

5【SSM整合】如何快速构建一个SSM项目①

小梦同学

016011

【SSM整合】如何快速构建一个SSM项目②

小梦同学

01738

【SSM整合】如何快速构建一个SSM项目③

小梦同学

09613

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

文章版权声明 1、本网站名称：梦境学习站
2、本站永久网址：https://blog.godgy.xyz
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ361080778进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END