前端对接后台时增删改的实现

一、前期工作准备

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;
    }