前端对接后台时增删改的实现
目录
前端对接后台时增删改的实现
前端对接后台时增删改的实现
一、前期工作准备
1、在/src/views下创建后台所对应一个类（表）的文件夹，新建List.vue文件并写好vue文件代码基本结构
<!-- vue的三个模块 -->
<!-- 模板 html -->
<template>
<!-- 这里有且只能有一个根标签 -->
<div>
example
</div>
</template>
<!-- 脚本 js -->
<script>
export default {
// 定义变量，在模板中直接使用
// data()是一个方法，这个方法会返回一个对象，这个对象用于定义（返回）在模板中直接使用的变量
data(){
return {
}
},
// 定义事件处理函数（方法）
methods:{
},
// 生命周期钩子函数
created(){
}
}
</script>
<!-- 样式 css -->
<!-- sass：css 的一个脚本化语言，能帮我们产生 css；scoped：限定范围，写的 css 只能运用于当期模块 -->
<!-- 在此环境之下，我们写的样式不会影响到其他人的组件 -->
<style lang="sass" scoped>
</style>其中模板 html 的 template 为 html.vue
脚本 js 为 javascript.vue
css 样式为 css-scoped.vue
2、考虑到我们需要新增记录需要跳转到一个新的页面，所以我们同时也在同文件夹内新建一个 Form.vue（表单），并构建好 vue 文件代码基本结构
3、在 router 路由目录下 index.js 配置 List.vue 和 List.vue 表单的路由
{
path: '/lpa',
component: Layout,
redirect: '/lpa/example',
name: 'lpa',
meta: { title: 'lpa', icon: 'example' },
children: [
{
path: 'example',
name: 'ExampleList',
component: () => import('@/views/example/List'),
meta: { title: '例子'}
},
{
hidden:true,
path: 'example_form',
name: 'Example_Form',
component: () => import('@/views/example/Form'),
meta: { title: '例子表单'}
}
}注：考虑到添加记录的表单页面应该是在点击新增按钮之后才显示，正常情况下应该是隐藏起来，这里使用了 hidden:true 属性隐藏路由，不在菜单显示
4、在 List.vue 内添加表格组件，用以显示从后台获取的数据并定义对应变量
<!-- 表格 -->
<div class="tab_content">
<el-table :data="baseroles" style="width: 100%" size="small">
<el-table-column prop="id" label="编号" width="180"> </el-table-column>
<el-table-column prop="name" label="权限" width="180"> </el-table-column>
</el-table>
</div>定义变量：
data(){
return {
baseroles:[],
}
},5、为了方便我们后续增删改查的使用，我们 import { post，del，get } from ‘@/utils/request’
至此，我们有了可以获取后台数据并将数据显示出来的前端页面，接下来就可以做增删改查操作
二、查找
定义获得后台数据的方法并将其放入生命周期钩子函数
// 定义事件处理函数（方法）
methods:{
// 查询所有的基本角色数据
loadBaseroles(){
// let 可以理解为 var；url 为后端服务器地址+接口地址
let url = "http://localhost:8888/baserole/query"
// get 方法在<script>中 import { get } from '@/utils/request'获得
// get(url)建立连接后，then 接通之后，再获得后台数据——js 是单线程的
// resp=>{}箭头函数，是 function(response){}的简写
get(url).then(resp=>{
// 获得前端请求数据之后做的事情
// 获取后端数据（后端数据是放在 data 里面的）：当前实例当中的 baseroles（即 data()当中的 baseprivileges）
this.baseroles = resp.data;
})
}
},
// 生命周期钩子函数
created(){
// loadBaseroles()函数默认不会自动执行，所以我们在这里加载使其执行
// 做了这一步才能从数据库拿到数据 this.baseroles = resp.data
// 页面加载出来的时候，拿到路由中的参数，放到 this.form 中
this.loadBaseroles();
}三、增加记录
1、在 List.vue 里的新增按钮添加一个点击事件
<!-- 按钮 -->
<!-- @click="toFormHandler"：跳转到表单的处理器，toFormHandler 是一个方法 -->
<div class="btns">
<el-button type="primary" size="small" @click="toFormHandler">新增</el-button>
</div>并在下面 export default {}内 methods:{}定义对应点击事件的方法 toFormHandler（）{}
// 跳转到添加表单的页面
toFormHandler(){
// 跳转到表单。$router：vue的一个模块；push：推动；
// {}内为一个对象,里面有两个元素，path为form表单路由的路径（子路由+父路由），
// query为传递的参数（因为我们新增的时候不需要传参，所以我们可不写）
this.$router.push({
path:"/lpa/example_form",
// query:
})
}2、在表单文件内新增 vue 页头返回组件
<!-- 表头 -->
<!-- go：前进，前进-1 即后退一步 -->
<el-page-header @back="goBack" content="编辑 example 信息"></el-page-header>并在下面 export default {}内 methods:{}定义对应点击事件的方法 goBack（）{}
//返回
goBack(){
this.$router.go(-1)
}其实也可以在页头组件标签内将goBack方法直接用具体方法实现直接替换（前者更工程化）
<!-- go：前进，前进-1即后退一步 -->
<el-page-header @back="$router.go(-1)" content="编辑 example 信息"></el-page-header>3、在表单文件内增加用于存放后台所获取数据的表单组件
<!-- 表单 -->
<el-form ref="form" :model="form" size="small" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>有多少个属性就使用多少个 el-form-item 标签，想要使用其他种类的标签可自行查找 elementui
可以看到标签内有一个 form 对象，所以我们需要在 export default {}内 data(){}进行定义
data(){
return{
form:{}
}
},4、在表单文件 From.vue 上添加一个带点击事件的提交按钮
<el-form-item label="">
<div style="text-align:right">
<!-- submitHandler：提交处理器 -->
<el-button type="primary" size="small" @click="submitHandler">提交</el-button>
</div>
</el-form-item>并在下面 export default {}内 methods:{}定义对应点击事件的方法 submitHandlerr（）{}
// 提交
submitHandler(){
let url = "http://localhost:8888/example/saveOrUpdate"
// post 方法从 import { get } from '@/utils/request'获得（要导包）
post(url,this.form).then(resp =>{
// 获取前端请求数据之后做的事情
// 弹出提示：获取保存成功后后台给前端的更新成功信息，要注意我们后台 response 除了有 message 还有 data 和 status
this.$message({type:"success",message:resp.message})
// 返回列表页面
this.goBack();
})
},四、修改和删除记录
1、在所显示的每个对象的旁边添加修改和删除两个按钮
<!-- 操作列 -->
<el-table-column width="100" align="center" label="操作">
<!-- slot-scope="scope"：作用域插槽 -->
<template slot-scope="scope">
<el-button type="text" @click="editHandler(scope.row)">修改</el-button>
<!-- scope.row：当前行数据 -->
<el-button type="text" @click="deleteHandler(scope.row)">删除</el-button>
</template>
</el-table-column>2、定义修改和删除函数
// 删除的处理函数
deleteHandler(row){
this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 当用户点击了确定才会执行
let url = "http://localhost:8888/baserole/deleteById"
// {id:row.id}是一个对象 get、post、delete 的三个方法在传参的时候只能传对象
// 记得导入 import { del, get } from '@/utils/request'
del(url,{id:row.id}).then(resp =>{
// 提示
this.$message({type:"success",message:resp.message});
// 更新页面
this.loadBaseroles();
})
})
},
// 修改的处理函数
editHandler(row){
// 跳转到表单。$router：vue 的一个模块；push：推动；
// {}内为一个对象,里面有两个元素，path 为 form 表单路由的路径（子路由+父路由），
// query 为前端传递进来的参数
this.$router.push({
path:"/lpa/baserole_form",
query:row
})
},其中，删除操作时二次确认使用的弹框ui模板：
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
})3、修改记录时提取当前行对象的数据到修改表单
created(){
// 页面加载出来的时候，拿到路由中的参数，放到this.form中
// 体现了双向数据绑定：当用户输入数据时，数据由表单进入到vue（由用户页面进入到vue实例当中）；vue的form中有数据，数据也会渲染到页面当中
// route：当前路由实例，query即表单传递过来的参数
this.form = this.$route.query;
}