vue学生管理系统

《Web前端技术》课程期末作品要求
1.网站主题自拟
2.手机版或者pc版均可
3.css必须使用如bootstrap等框架，样式统一
4.使用ison-server模拟后台数据库，用axios访问数据
5.javascript使用Vue框架
6.采用单页面SPA技术
7.具有增删改查功能
8.图文并茂，不能只是文字数据
9.工作量饱满，参考购物车例子
10至少包含两个以上的页面，设计美观，新颖
11.突出个性
12项目要求能够正常运行，在15周最后一次课进行演示
13.各写各的，要有自己的想法，不能雷同或抄袭，否则按0分处理参考题目:
1学籍管理:学生列表、详情，信息编辑(增加、删除、编辑)。
2校园新闻:新闻列表、详情，信息编辑(增加、删除、编辑)。
3微人事:员工列表、详情，信息编辑(增加、删除、编辑)。
4博客:博客列表、详情，发表评论，博客编辑。
5消费管理:消费列表，统计，编辑等。
6考试系统:答卷，成绩统计，试卷编辑等
7.心理压力测评:测评，结果显示，测评题目编辑等。
展示界面如图所示：

代码如下提供大家学习，提供升达学弟学习，使用技术完全如上文所述。如有需要运行本项目可以加QQ2777255072，费用QQ咨询，价格低。

```html
<template>
  <div style="margin:20px;">
    <el-row :gutter="20">
      <el-col :span="5">
        <el-input size="mini" placeholder="请输入学号" v-model="serarch">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" size="mini" @click="getStudentListMethod()">搜索</el-button>
      </el-col>
      <el-button style="float:right;margin-right:10px;" size="mini" type="success" @click="handleCreate()">新增</el-button>
    </el-row>
    <el-row style="margin-top:20px;">
      <el-table :data="tableData" size="mini" :height="tableHeight*0.75" style="width: 100%">
        <el-table-column label="序号" type="index" width="50" align="center">
        </el-table-column>
        <el-table-column prop="stuNo" label="学号" width="120" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120" align="center">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="80" align="center">
        </el-table-column>
        <el-table-column prop="birthday" label="出生日期" width="120" align="center">
        </el-table-column>
        <el-table-column prop="grade" label="年级" width="150" align="center">
        </el-table-column>
        <el-table-column prop="class" label="班级" width="150" align="center">
        </el-table-column>
        <el-table-column prop="address" label="家庭住址" align="center">
        </el-table-column>
        <el-table-column prop="address" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @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-row type="flex" justify="end">
        <el-pagination  @current-change="handleCurrentChange" background layout="prev, pager, next" :page-size.sync="pageSize" :current-page.sync="indexPage" :total="totalCount">
        </el-pagination>
      </el-row>
    </el-row>
    <el-dialog :title="tittle" :visible.sync="dialogVisible" :modal="false" width="50%">
      <el-form ref="studentInfo" :rules="rules" :model="studentInfo" label-width="80px">
        <el-form-item label="学号:" prop="stuNo">
          <el-input v-model="studentInfo.stuNo"></el-input>
        </el-form-item>
        <el-form-item label="姓名:" prop="name">
          <el-input v-model="studentInfo.name"></el-input>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="出生日期:" prop="birthday">
              <!-- <el-input v-model="studentInfo.sex"></el-input> -->
              <el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="studentInfo.birthday" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- <el-input v-model="studentInfo.sex"></el-input> -->
            <el-form-item label="性别:" prop="sex">
              <el-select v-model="studentInfo.sex" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="年级:" prop="grade">
          <el-input v-model="studentInfo.grade"></el-input>
        </el-form-item>
        <el-form-item label="班级:" prop="class">
          <el-input v-model="studentInfo.class"></el-input>
        </el-form-item>
        <el-form-item label="地址:" prop="address">
          <el-input v-model="studentInfo.address"></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="handleStudent()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getStudentList,
  deleteStudent,
  CreateStudent,
  UpadateStudent
} from '@/api/student'
export default {
  name: 'StudentList',
  components: {},
  data () {
    return {
      // 表格高度
      tableHeight: window.innerHeight,
      // 学生信息
      studentInfo: {},
      // 弹出框标题内容
      tittle: '',
      // 弹出框
      dialogVisible: false,
      // 搜索框
      serarch: '',
      // 当前页
      indexPage: 1,
      // 每页显示数据
      pageSize: 10,
      // 总数据条数
      totalCount: 0,
      // 绑定表格数据
      tableData: [],
      // 验证规则
      rules: {
        stuNo: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        birthday: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        sex: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        grade: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        class: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        address: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getStudentListMethod()
  },
  methods: {
    // 获取学生信息
    getStudentListMethod () {
      if (this.serarch.length !== 0) {
        getStudentList({
          stuNo: this.serarch,
          _page: this.indexPage,
          _limit: this.pageSize
        }).then((res) => {
          this.tableData = res.data
          // this.totalCount = res.data.length
        })
        getStudentList({
          stuNo: this.serarch
        }).then((res) => {
          this.totalCount = res.data.length
        })
      } else {
        getStudentList({
          _page: this.indexPage,
          _limit: this.pageSize
        }).then((res) => {
          this.tableData = res.data
        })
        getStudentList().then((res) => {
          this.totalCount = res.data.length
        })
      }
    },
    // 编辑操作方法
    handleEdit (row) {
      this.resetForm()
      this.tittle = '编辑学生'
      this.dialogVisible = true
      this.studentInfo = row
    },
    // 删除操作方法
    handleDelete (row) {
      deleteStudent(row.id).then((res) => {
        if (res.status === 200) {
          this.$message({
            message: '删除学生信息成功！',
            type: 'success'
          })
          this.getStudentListMethod()
        } else {
          this.$message({
            message: '删除学生信息失败！',
            type: 'error'
          })
        }
        this.getStudentListMethod()
      })
    },
    // 添加操作方法
    handleCreate (row) {
      this.tittle = '新增学生'
      this.resetForm()
      this.studentInfo = {}
      this.dialogVisible = true
    },
    guid () {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
        /[xy]/g,
        function (c) {
          var r = (Math.random() * 16) | 0
          var v = c === 'x' ? r : (r & 0x3) | 0x8
          return v.toString(16)
        }
      )
    },
    handleCurrentChange (page) {
      this._page = page
      this.getStudentListMethod()
    },
    // 重置表单验证规则
    resetForm () {
      if (this.$refs.studentInfo !== undefined) {
        this.$refs.studentInfo.resetFields()
      }
    },
    handleStudent () {
      if (this.studentInfo.id === undefined) {
        this.studentInfo.id = this.guid
        console.log(this.studentInfo)
        this.$refs.studentInfo.validate((valid) => {
          if (valid) {
            CreateStudent(this.studentInfo).then((res) => {
              if (res.status === 201) {
                this.$message({
                  message: '添加学生信息成功！',
                  type: 'success'
                })
                this.getStudentListMethod()
                this.dialogVisible = false
              } else {
                this.$message({
                  message: '添加学生信息失败！',
                  type: 'error'
                })
                this.dialogVisible = false
              }
            })
          } else {
            return false
          }
        })
      } else {
        this.$refs.studentInfo.validate((valid) => {
          if (valid) {
            // console.log(this.studentInfo)
            UpadateStudent(this.studentInfo).then((res) => {
              if (res.status === 200) {
                this.$message({
                  message: '修改学生信息成功！',
                  type: 'success'
                })
                this.getStudentListMethod()
                this.dialogVisible = false
              } else {
                this.$message({
                  message: '修改学生信息失败！',
                  type: 'error'
                })
                this.dialogVisible = false
              }
            })
          } else {
            return false
          }
        })
      }
    }
  }
}
</script>
<style scoped>
</style>