SSPM小案例之前端展示(1)列表功能

这里的前端技术用到了Vue+ElementUI+axios
Springboot有个专门放静态资源的地方

先看一下前端的页面的结构

这个盒子就是第一行了

第二部分然后就是表单

第三部分就是表格，这里都进行了双向数据绑定

最后是分页

其他的先不管，然后是vue部分

```
 var vue = new Vue({
        el: '#app',
        data:{
            dataList: [],//当前页要展示的列表数据
            dialogFormVisible: false,//添加表单是否可见
            dialogFormVisible4Edit:false,//编辑表单是否可见
            formData: {},//表单数据
            rules: {//校验规则
                type: [{ required: true, message: '图书类别为必填项', trigger: 'blur' }],
                name: [{ required: true, message: '图书名称为必填项', trigger: 'blur' }]
            },
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:10,//每页显示的记录数
                total:0//总记录数
            }
        },

        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            this.getAll() ;
        },

        methods: {
            //列表
            getAll() {
                axios.get("/books").then((res)=>{
                    console.log(res.data);
                });
            },

            //弹出添加窗口
            handleCreate() {
            },

            //重置表单
            resetForm() {
            },

            //添加
            handleAdd () {
            },

            //取消
            cancel(){
            },
            // 删除
            handleDelete(row) {
            },

            //弹出编辑窗口
            handleUpdate(row) {
            },

            //修改
            handleEdit() {
            },

            //分页查询

            //切换页码
            handleCurrentChange(currentPage) {
            },

            //条件查询
        }
    })
```

了解了结构后，我们先发送一个请求，看一下后端传过来的数据。这里用钩子函数created()表示在vue加载完成后就执行这里面的东西，我们在钩子函数里面调用getAll,然后在getAll里面发送一个异步请求获取数据。

可以看到是可以收到数据的

下面要做的就是把接收到的这些数据，展示到我们页面的表格部分。

这里获取的是数据里的data数据，所以是res.data.data

为什么赋值给dataList呢？
可以看到表格绑定的是dataList，所以赋值给它就行了。