前后端分离入门(5) 数据对接+实现数据添加

数据对接

使用eleui的table标签 渲染图书数据
完整代码

<template>
  <div>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="编号"
          width="80">
      </el-table-column>
      <el-table-column
          prop="name"
          label="书名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="author"
          label="作者"
          width="140">
      </el-table-column>
      <el-table-column
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    },
  },
  created() {
    const _this=this//保存this 在回调函数时可以正常使用
    axios.get('http://localhost:8181/book/findAll').then(function (resp){
      _this.tableData=resp.data
    })
  },
  data() {
    return {
      tableData: [{
        id: '1',
        name: 'java',
        author: 'jie',
        },
        {
          id: '2',
          name: 'java2',
          author: 'jie2',
        },
        {
          id: '3',
          name: 'java3',
          author: 'jie3',
        },]
    }
  }
}
</script>

实现添加功能

后端操作

定义添加图书方法接口和mapper
void addBook(Book book);

<select id="addBook" parameterType="Book">
    insert into book(id,name,author) values (#{id},#{name},#{author});
    </select>

编写控制类,由于接受的数据是前端JSON格式转化为对象,使用@RequestBody注解

@PostMapping("/save")
    public void save(@RequestBody Book book){
        bookMapper.addBook(book);
    }

前端编写

提交使用ele的表单,并进行简单的验证

编写提交函数

使用axios的post提交

submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        const _this=this
        if (valid) {
          axios.post('http://localhost:8181/book/save',this.ruleForm).then(function (resp){
          })
        } else {
          return false;
        }
      });
    },

完整代码

<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="图书ID" prop="id">
        <el-input v-model="ruleForm.id"></el-input>
      </el-form-item>

      <el-form-item label="图书名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>

      <el-form-item label="作者" prop="author">
        <el-input v-model="ruleForm.author"></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 {
  data() {
    return {
      ruleForm: {
        id: '',
        name: '',
        author: '',
      },
      rules: {
        id: [
          { required: true, message: '请输入id', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入图书名称', trigger: 'blur' },
        ],
        author: [
          { required: true, message: '请输入作者', trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        const _this=this
        if (valid) {
          axios.post('http://localhost:8181/book/save',this.ruleForm).then(function (resp){
          })
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>