ssm前端技术

<template>
  <div>
    <h1 align="center">SSM阶段机试，ts={{ts}}</h1>
    <!-- 搜索框-->
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="sname" placeholder="请输入学生姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button type="success" @click="add">添加</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180">
      </el-table-column>
      <el-table-column prop="sname" label="学生姓名" width="180">
      </el-table-column>
      <el-table-column prop="sex" label="学生性别" width="180">
      </el-table-column>
      <el-table-column prop="address" label="学生地址" width="180">
      </el-table-column>
    </el-table>
    <!-- 弹框-->
    <el-dialog title="添加" :visible.sync="dialogFormVisible">
      <el-form :model="ff" :rules="rules" ref="ff" label-width="100px" class="demo-ruleForm">
        <el-form-item label="学生姓名" prop="sname">
          <el-input v-model="ff.sname"></el-input>
        </el-form-item>
        <el-form-item label="学生性别" prop="sex">
          <el-input v-model="ff.sex"></el-input>
        </el-form-item>
        <el-form-item label="学生地址" prop="address">
          <el-input v-model="ff.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="open">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        ts: new Date().getTime(),
        sname: '',
        tableData: [],
        dialogFormVisible: false,
        ff: {
          sname: '',
          sex: '',
          address: ''
        },
        rules: {
          sname: [{
            required: true,
            message: '请输入学生姓名',
            trigger: 'blur'
          }],
          sex: [{
            required: true,
            message: '请输入学生性别',
            trigger: 'blur'
          }],
          address: [{
            required: true,
            message: '请输入学生地址',
            trigger: 'blur'
          }],
        }
      };
    },

    methods: {
      query: function() {
        let params = {
          sname: this.sname
        };
        let url = this.axios.urls.query;
        this.axios.post(url, params).then(resp => {
          console.log(resp.data);
          this.tableData = resp.data.data;
        }).catch(err => {

        })
      },

      add: function() {
        this.dialogFormVisible = true;
        this.ff = {
          sname: '',
          sex: '',
          address: ''
        }
      },

      open: function() {
        this.$refs['ff'].validate((valid) => {
          if (valid) {
            let url = this.axios.urls.add;
            this.axios.post(url, this.ff).then(resp => {
              let data = resp.data;
              if (data.success) {
                this.$message({
                  message: '成功',
                  type: 'success'
                });

                this.dialogFormVisible = false;
                this.query();
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>
<style>
</style>