学生管理系统二

前端vue

<template>
  <div align="center">
    <h1>学生管理系统</h1>
    <!-- 查询表单 -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="学生名称">
        <el-input v-model="searchForm.sname" placeholder="学生名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="seacher">查询</el-button>
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" stripe style="width: 100%" align="center">
      <el-table-column prop="sid" 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="age" label="年龄" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑学生的对话框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible">
      <el-form :inline="true" :model="student" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="student.sname" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="student.sex" placeholder="性别"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="student.age" placeholder="性别"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="student.address" placeholder="地址"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="eidt">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        tableData: [],
        searchForm: {
          sname: null
        },
        student: {},
        dialogVisible: false,
        title: "新增"
      }
    },
    methods: {
      seacher: function() {
        let url = this.axios.urls.STUDENT;
        this.axios.post(url, this.searchForm).then((resp) => {
          this.tableData = resp.data.list
        })
      },
      handleAdd: function() {
        this.dialogVisible = true;
        this.title = "新增"
        this.student = {
          sname: null,
          sex: null,
          age: null,
          address: null,
          sid: null
        }
      },
      handleEdit: function(row) {
        this.student = row;
        this.dialogVisible = true;
        this.title = "编辑"
      },
      handleDelete: function(row) {

        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = this.axios.urls.DELETE;
          this.axios.post(url, row).then((resp) => {
            if (resp.data.code > 0) {
              this.$message({
                message: resp.data.message,
                type: 'success'
              });
            } else {
              this.$message.error(resp.data.message);
            }
            //刷新数据
            this.seacher();
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      eidt: function() {
        let url = this.axios.urls.MGEGER;
        this.axios.post(url, this.student).then((resp) => {
          console.log(resp.data);
          if (resp.data.code > 0) {
            this.$message({
              message: resp.data.message,
              type: 'success'
            });
          } else {
            this.$message.error(resp.data.message);
          }
          //刷新数据
          this.seacher();
          //关闭对话框
          this.dialogVisible = false;
        })
      }
    },
    created: function() {
      this.seacher();
    }

  }
</script>

<style>
</style>

基本上的内容就是这样，其他没有什么组件就是一个最简单的页面

nmp install