前台kkk

<template>
	<div>
		<h1 align="center">SpringBoot阶段机试，ts={{ts}}</h1>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="书本名称">
        <el-input v-model="bookname" placeholder="书本名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="qry">查询</el-button>
        <el-button type="primary" @click="add">增加</el-button>
      </el-form-item>
    </el-form>
 
    <el-table
      :data="books"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="书本id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="bookname"
        label="书本名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格">
      </el-table-column>
      <el-table-column
        prop="booktype"
        label="书本类型">
      </el-table-column>
    </el-table>
 
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="书本名称" prop="bookname" :label-width="formLabelWidth">
          <el-input v-model="form.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书本价格" prop="price" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书本类型" prop="booktype" :label-width="formLabelWidth">
          <el-select v-model="form.booktype" placeholder="请选择书本类型">
            <el-option label="散文" value="散文"></el-option>
            <el-option label="小说" value="小说"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
 
	</div>
</template>
 
<script>
	export default {
		data:function(){
			return {
				ts:new Date().getTime(),
        bookname: '',
        books: [],
        dialogFormVisible: false,
        formLabelWidth: "100px",
 
        form: {},
 
        rules: {
          bookname: [
            { required: true, message: '请输入书本名称', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请输入价格', trigger: 'blur' }
          ],
          booktype: [
            { required: true, message: '请输入书本类型', trigger: 'blur' }
          ]
        }
			};
		},
    methods: {
      qry() {
        let url = this.axios.urls.BOOK_QRY;
        let param = {
          bookname: this.bookname
        }
        this.axios.get(url, {
          params: param
        }).then(resp => {
          if(resp.data.code == 0) {
             this.books = resp.data.data;
          }
        });
      },
 
      add() {
         this.dialogFormVisible = true;
         /* this.form.bookname = "";
         this.form.price = "";
         this.form.booktype = ""; */
         this.$refs['form'].resetFields();
      },
 
      reset() {
        this.form.bookname = "";
        this.form.price = "";
        this.form.booktype = "";
      },
 
      save() {
        let url = this.axios.urls.BOOK_ADD;
 
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.axios.post(url, this.form).then(resp => {
              if(resp.data.code == 0) {
                 this.$message({
                    message: resp.data.msg,
                    type: 'success'
                  });
                  this.qry();
                  this.dialogFormVisible = false;
                  this.reset();
              } else {
                this.$message({
                   message: resp.data.msg,
                   type: 'error'
                 });
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
 
                  }
 
    }
	}
</script>
 
<style>
</style>