vue前端开发demo示例

---

系统结构

js部分

代码如下（示例）：

import request from '@/utils/request'

export function getAllInfo(tableName) {
  return request({
    url:'/demo/'+tableName,
    method:'post',
  })
}


export function selectDemo(query) {
  return request({
    url:'/demo/list',
    method:'get',
    params: query
  })
}

export function selectName(name) {
  return request({
    url:'/demo/'+name,
    method:'get',
  })
}

export function insertStudent(demo) {
  return request({
    url: '/demo/list',
    method: 'post',
    data: demo
  })
}

export function deleteStudent(id) {
  return request({
    url: '/demo/'+id,
    method: 'delete',
  })
}

export function updateStudent(demo) {
  return request({
    url: '/demo/list',
    method: 'put',
    data: demo
  })
}

界面部分

代码如下（示例）：

<template>

  <div class="demo">
<!--    表格-->
    <div style="margin-top: 8px;width:60%;height: 100%;">
       <el-table
        :data="list"
        border
        style="width: 100%">
        <el-table-column
          label="ID"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="name"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="age"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.age }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--弹出层开始-->
      <el-dialog
        :visible.sync="centerDialogVisible"
        width="50%">
        <el-form ref="changeForm" :model="changeForm" :rules="rules" label-width="80px">
          <el-form-item label="name">
            <el-input v-model="changeForm.name"></el-input>
          </el-form-item>
          <el-form-item label="age">
            <el-input v-model="changeForm.age"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm1('changeForm')">提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--弹出层结束-->

    </div>

    <div>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="name">
          <el-input v-model="searchForm.name" placeholder="name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searched(searchForm.name)">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="search" border style="width: 100%">
        <el-table-column
          label="ID"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="name"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="age"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.age }}</span>
          </template>
        </el-table-column>

      </el-table>
    </div>

<!--按名字查询-->
    </div>


</template>

<script>
import {selectName, selectDemo, updateStudent} from "@/api/demo/index.js";
import {deleteStudent} from "@/api/demo/index.js";

  export default {
      name: "Demo",
      data(){
        var id = (rule, value, callback) => {
          if (value === '') {
            callback(new Error(' '));
          } else if (!Number.isInteger(value)) {
            callback(new Error(' '));
          } else {
            callback();
          }
        };
        var name = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入姓名'));
          } else {
            callback();
          }
        };
        var age = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入年龄'));
          } else if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            callback();
          }
        };
          return{
            user:{
              id:undefined,
              name:undefined,
              age:undefined
            },
            list:[],
            centerDialogVisible: false,

            changeForm: {
              id:'',
              name: '',
              age: ''
            },
            rules: {
              inid: [
                { validator: id, trigger: 'blur' }
              ],
              inname: [
                { validator: name, trigger: 'blur' }
              ],
              inage: [
                { validator: age, trigger: 'blur' }
              ]
            },

            searchForm: {
              name:''
            },
            search:[]
          }
      },
      methods:{
        //查询
        getInfo() {
          selectDemo().then((response) => {
            this.list = response;
            console.info(response);
          }).catch((error) => {
            console.info(error);
          });
        },

        searched(name){
          console.log(name);
          selectName(name).then((response) => {
            this.search = response;
          }).catch((error) => {
            console.info(error);
          });
        },
        //修改
        submitForm1(formName) {
          this.centerDialogVisible = false;
          const _this=this;
          console.log(_this.changeForm);
          //检查表达式
          this.$refs[formName].validate((valid) => {
            if (valid) {
              updateStudent(_this.changeForm).then(response => {
                this.msgSuccess("修改成功");
              });
              //数据错误
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },

        handleEdit(index, row) {
          this.centerDialogVisible = true
          this.changeForm=row;
          console.log(this.changeForm);
        },
        //删除
        handleDelete(index,row) {
          this.$confirm('是否确认删除名称为"' + row.id+row.name + '"的数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return deleteStudent(row.id);
          }).then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          }).catch(() => {});
        },
        //重置表单
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },

      },
      //初始
      created() {
        this.getInfo();
      },

     
  }
</script>

<style scoped>
  .demo {
    display: flex;
    flex-direction: row;
  }
</style>

界面