【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官网寻找想用的模块,然后修改对应参数,达到快速搭建页面的效果。

<!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整合文章

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

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

© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片