《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>