手把手教你搭建Spring Boot+Vue前后端分离(下)

简介: 手把手教你搭建Spring Boot+Vue前后端分离

3.6 使用Element UI美化页面

index.vue
<template>
    <div>
        <el-menu class="el-menu-demo" mode="horizontal" :router="true">
            <el-menu-item index="/selectAll">全部学生</el-menu-item>
            <el-menu-item index="/insert">添加学生</el-menu-item>
            <el-menu-item index="/selectOne">查看学生</el-menu-item>
            <el-menu-item index="/update">修改学生</el-menu-item>
        </el-menu>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    name: "index"
}
</script>
<style scoped>
</style>
复制代码
insert.vue
<template>
    <div>
        <el-form :model="ruleForm" status-icon  label-width="100px" class="demo-ruleForm" style="margin-top:30px;width: 30%;">
            <el-form-item label="姓名" prop="pass">
                <el-input type="text" v-model="ruleForm.name" ></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="checkPass">
                <el-input type="text" v-model="ruleForm.age" ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name: "insert",
    data() {
        return {
            ruleForm: {
                name: '',
                age: ''
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    }
}
</script>
<style scoped>
</style>
复制代码
selectOne.vue
<template>
    <div>
        <el-form :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm"
                 style="margin-top:30px;width: 30%;">
            <el-form-item label="ID" prop="pass">
                <el-input type="text" v-model="ruleForm.id"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="pass">
                <el-input type="text" v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="checkPass">
                <el-input type="text" v-model="ruleForm.age"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name: "selectOne",
    data() {
        return {
            ruleForm: {
                id: '',
                name: '',
                age: ''
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>
<style scoped>
</style>
复制代码
selectAll.vue
<template>
    <div>
        <template>
            <el-table
                  :data="tableData"
                  style="width: 60%;margin-top:30px;">
                <el-table-column
                      prop="id"
                      label="ID"
                      width="180">
                </el-table-column>
                <el-table-column
                      prop="name"
                      label="姓名"
                      width="180">
                </el-table-column>
                <el-table-column
                      prop="age"
                      label="年龄">
                </el-table-column>
                <el-table-column
                      label="操作">
                    <template>
                        <el-button type="warning" size="small">修改</el-button>
                        <el-button type="danger" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</template>
<script>
export default {
    name: "selectAll",
    data() {
        return {
            tableData: []
        }
    }
}
</script>
<style scoped>
</style>
复制代码
update.vue
<template>
    <div>
        <el-form :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm"
                 style="margin-top:30px;width: 30%;">
            <el-form-item label="ID" prop="pass">
                <el-input type="text" v-model="ruleForm.id"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="checkPass">
                <el-input type="text" v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input type="text" v-model="ruleForm.age"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" @click="submitForm('ruleForm')">修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name: "update",
    data() {
        return {
            ruleForm: {
                id: '',
                name: '',
                age: ''
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>
<style scoped>
</style>
复制代码
效果

网络异常,图片无法展示
|


网络异常,图片无法展示
|


3.7 整合axios与Spring Boot后端交互

npm install axios --save
复制代码
insert.vue
<template>
    <div>
        <el-form :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm"
                 style="margin-top:30px;width: 30%;">
            <el-form-item label="姓名" prop="pass">
                <el-input type="text" v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="checkPass">
                <el-input type="text" v-model="ruleForm.age"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    name: "insert",
    data() {
        return {
            ruleForm: {
                name: '',
                age: ''
            }
        };
    },
    methods: {
        submitForm() {
            axios.post("http://localhost:8081/student/save", this.ruleForm).then(function (resp) {
                console.log(resp)
            })
        },
    }
}
</script>
<style scoped>
</style>
复制代码
selectOne.vue
<template>
    <div>
        <el-form :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm"
                 style="margin-top:30px;width: 30%;">
            <el-form-item label="ID" prop="pass">
                <el-input type="text" v-model="ruleForm.id"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="pass">
                <el-input type="text" v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="checkPass">
                <el-input type="text" v-model="ruleForm.age"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import axios from "axios";
export default {
    name: "selectOne",
    data() {
        return {
            ruleForm: {
                id: '',
                name: '',
                age: ''
            }
        };
    },
    methods: {
        getStudent() {
            const _this = this;
            axios.get("http://localhost:8081/student/findById/" + this.$route.query.id).then(function (resp) {
                _this.ruleForm = resp.data;
            })
        }
    },
    created() {
        this.getStudent();
    }
}
</script>
<style scoped>
</style>
复制代码
selectAll.vue
<template>
    <div>
        <template>
            <el-table
                  :data="tableData"
                  style="width: 60%;margin-top:30px;">
                <el-table-column
                      prop="id"
                      label="ID"
                      width="180">
                </el-table-column>
                <el-table-column
                      prop="name"
                      label="姓名"
                      width="180">
                </el-table-column>
                <el-table-column
                      prop="age"
                      label="年龄">
                </el-table-column>
                <el-table-column
                      label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="small" @click="select(scope.row)">查看</el-button>
                        <el-button type="warning" size="small" @click="update(scope.row)">修改</el-button>
                        <el-button type="danger" size="small" @click="remove(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</template>
<script>
import axios from "axios";
export default {
    name: "selectAll",
    data() {
        return {
            tableData: []
        }
    },
    methods: {
        getData() {
            const _this = this;
            axios.get("http://localhost:8081/student/findAll").then(function (resp) {
                _this.tableData = resp.data;
            })
        },
        remove(stu) {
            const _this = this;
            if (confirm("确定删除吗?")) {
                axios.delete("http://localhost:8081/student/remove/" + stu.id).then(function (resp) {
                    if (resp.data == 1) {
                        _this.getData();
                    }
                })
            }
        },
        select(stu) {
            this.$router.push({
                path: "/selectOne",
                query:{
                    id: stu.id
                }
            })
        },
        update(stu) {
            this.$router.push({
                path: "/update",
                query:{
                    id: stu.id
                }
            })
        }
    },
    created() {
        this.getData();
    }
}
</script>
<style scoped>
</style>
复制代码
update.vue
<template>
    <div>
        <el-form :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm"
                 style="margin-top:30px;width: 30%;">
            <el-form-item label="ID">
                <el-input type="text" v-model="ruleForm.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input type="text" v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input type="text" v-model="ruleForm.age"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" @click="submitForm()">修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import axios from "axios";
export default {
    name: "update",
    data() {
        return {
            ruleForm: {
                id: '',
                name: '',
                age: ''
            }
        };
    },
    methods: {
        submitForm() {
            axios.post("http://localhost:8081/student/update", this.ruleForm).then(function (resp) {
                console.log(resp)
            })
        },
        getStudent() {
            const _this = this;
            axios.get("http://localhost:8081/student/findById/" + this.$route.query.id).then(function (resp) {
                _this.ruleForm = resp.data;
            })
        }
    },
    created() {
        this.getStudent();
    }
}
</script>
<style scoped>
</style>
复制代码

4 总结

网络异常,图片无法展示
|

相关文章
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的志愿服务管理系统设计和实现(源码+LW+部署讲解)
基于SpringBoot+Vue的志愿服务管理系统设计和实现(源码+LW+部署讲解)
26 6
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的公园管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的公园管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
前端开发 JavaScript Java
前后端分离之Spring&Vue单页面开发(2)
前言     需求: 最近本人在学习SpringBoot,希望自己能搭一个简单的Demo应用出来,但是搭到前端的时候遇到了困惑,因为网络上大部分教程前端都是应用模板引擎thymeleaf生成的,它给我的感觉就是一个进化版的JSP,但是很明显这种开发方式已经有些落后了。
4094 0
|
1天前
|
JavaScript
vue知识点
vue知识点
13 5
|
3天前
|
JavaScript
|
5天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
18 6
|
2天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
13 2