模块主要包括登录界面、系统首页、学生成绩查询、学生信息管理、科目管理、成绩管理、6个模块，系统登录页面主要功能根据用户登录系统，本系统主要根据账号来判断后台功能，如果不是管理员账号只能查询首页和登录界面、学生成绩查询界面，首页主要用来展示系统信息介绍、学生管理界面主要主要实现学生信息的编辑，删除操作、查询操作、查询操作，只有管理员可以看到。学生成绩信息查询主要用来查询学生成绩，有检索功能、管理员可以查询所有的学生信息、学生只能查询个人的成绩，不能查询其他人员成绩。成绩管理主要是对学生成绩的增删改查操作只有管理员可以看到，科目管理用来对课程科目的增删改查操作只有管理员可以看到。
数据库表： 学生信息表： Student(id,stuNo unique primary key, name,sex,birthday,grade,className,address,password)
课程信息表： Course(id,courseNo unique primary key,courseName,credits,hours)
成绩信息表Score(id,stuNo,courseNo,score,primary key(stuNo,courseNo))
一共三张表
开发环境：node.js
编程语言：vue、websql、javascript、 html、 css 、localstorage、json
使用组件库： elment.ui
在这里插入图片描述
登录界面
首页界面
成绩查询界面
学生管理界面
成绩管理
科目管理
代码如下
在这里插入代码片
```import Vue from 'vue'
const WebSql = function () {
if (window.openDatabase) {
// openDatabase('数据库名称','版本','数据库描述','数据库大小')
var db = openDatabase('mydb', '1.0', '练习', 200 * 1024 * 1024)
Vue.prototype.$db = db
if (!db) {
console.log('数据库创建失败！')
} else {
db.transaction(function (tx) {
// 创建学生、科目、成绩三张表结构
tx.executeSql('CREATE TABLE IF NOT EXISTS Student(id,stuNo unique primary key, name,sex,birthday,grade,className,address,password)')
tx.executeSql('CREATE TABLE IF NOT EXISTS Course(id,courseNo unique primary key,courseName,credits,hours)')
tx.executeSql('CREATE TABLE IF NOT EXISTS Score(id,stuNo,courseNo,score,primary key(stuNo,courseNo))')
// 如果表中数据为空，则插入数据
tx.executeSql('SELECT COUNT(*) AS NUM FROM Student', [], function (tx, mes) {
if (mes.rows[0].NUM === 0) {
console.log('插入学生数据')
tx.executeSql("insert into Student(id,stuNo,name,sex,birthday,grade,className,address,password)values('1','admin','谢文星','男','1998-05-02','大一','软件工程3班','河南信阳','123456')")
tx.executeSql("insert into Student(id,stuNo,name,sex,birthday,grade,className,address,password)values('1','admin1','谢文星','男','1998-05-02','大一','软件工程3班','河南信阳','123456')")
console.log('插入学生成功')
}
}, function (tx, err) {
console.log(err)
})
tx.executeSql('SELECT COUNT(*) AS NUM FROM Course', [], function (tx, mes) {
if (mes.rows[0].NUM === 0) {
console.log('插入科目数据')
tx.executeSql("insert into Course(id,courseNo,courseName,credits,hours)values('1','01','高等数学','2','24')")
console.log('插入科目成功')
}
}, function (tx, err) {
console.log(err)
})
tx.executeSql('SELECT COUNT(*) AS NUM FROM Score', [], function (tx, mes) {
if (mes.rows[0].NUM === 0) {
console.log('插入成绩数据')
tx.executeSql("insert into Score(id,stuNo,courseNo,score)values('1','admin','01','99')")
console.log('插入成绩成功')
}
}, function (tx, err) {
console.log(err)
})
})
}
} else {
console.log('不支持本地存储！')
}
}
export default WebSql
**成绩查询界面代码**
```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="seachMethod()">搜索</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="160" align="center">
</el-table-column>
<el-table-column prop="name" label="姓名" width="160" align="center">
</el-table-column>
<el-table-column prop="courseNo" label="课程编码" width="160" align="center">
</el-table-column>
<el-table-column prop="courseName" label="课程名称" width="160" align="center">
</el-table-column>
<el-table-column prop="credits" label="课程学分" width="160" align="center">
</el-table-column>
<el-table-column prop="hours" label="课程学时" width="160" align="center">
</el-table-column>
<el-table-column prop="score" label="成绩" align="center">
</el-table-column>
<!-- <el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="info" size="mini" icon="el-icon-edit" @click="handleUpdate(scope.row)" />
<el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row)" />
</template>
</el-table-column> -->
</el-table>
<!-- <el-row type="flex" justify="end">
<el-pagination background layout="prev, pager, next">
</el-pagination>
</el-row> -->
</el-row>
<el-dialog :title="tittle" :visible.sync="dialogVisible" :modal="false" width="50%" :before-close="cancel">
<el-form ref="courseInfo" :rules="rules" :model="courseInfo" label-width="80px">
<el-form-item label="课程名称:" prop="courseName">
<el-select :disabled="IsUpdate" style="width:100%;" v-model="courseInfo.courseNo" placeholder="请选择">
<el-option v-for="(item,index) in courseOptions" :key="index" :label="item.courseName" :value="item.courseNo">
</el-option>
</el-select>
<!-- <el-input :disabled="IsUpdate" v-model="courseInfo.courseName"></el-input> -->
</el-form-item>
<el-form-item style="width:100%;" label="姓名:" prop="stuNo">
<el-select :disabled="IsUpdate" style="width:100%;" v-model="courseInfo.stuNo" placeholder="请选择">
<el-option v-for="(item,index) in studentOptions" :key="index" :label="item.name" :value="item.stuNo">
</el-option>
</el-select>
<!-- <el-input :disabled="IsUpdate" v-model="courseInfo.stuNo"></el-input> -->
</el-form-item>
<el-form-item label="成绩:" prop="score">
<el-input v-model="courseInfo.score"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel()">取 消</el-button>
<el-button type="primary" @click="handSubmit()">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'CourseList',
components: {},
data () {
return {
IsUpdate: false,
// 表格高度
tableHeight: window.innerHeight,
// 学生信息
courseInfo: {},
// 弹出框标题内容
tittle: '',
// 弹出框
dialogVisible: false,
// 搜索框
serarch: '',
// 当前页
indexPage: 1,
// 每页显示数据
pageSize: 10,
// 总数据条数
totalCount: 0,
// 绑定表格数据
tableData: [],
// 验证规则
rules: {},
// 学生下拉框信息
studentOptions: [],
// 课程名称下拉菜单
courseOptions: []
}
},
created () {
// 默认获取数据
this.getScoreData()
// 默认加载下拉框数据
this.getStudentData()
// 默认加载下拉框数据
this.getSubjectsData()
},
methods: {
getSubjectsData () {
// console.log(123)
// eslint-disable-next-line no-array-constructor
var arry = new Array()
this.$db.transaction(function (tx) {
tx.executeSql(
'SELECT * FROM Course',
[],
function (tx, results) {
var len = results.rows.length
var i
for (i = 0; i < len; i++) {
// 把查出来的数据封装到一个对象里面 最后放到数组里面
const id = results.rows.item(i).id
const courseNo = results.rows.item(i).courseNo
const courseName = results.rows.item(i).courseName
const credits = results.rows.item(i).credits
const hours = results.rows.item(i).hours
// eslint-disable-next-line no-new-object
var o = new Object() // 创建一个js对象
o.id = id
o.courseNo = courseNo
o.courseName = courseName
o.credits = credits
o.hours = hours
arry.push(o)
}
},
null
)
}) // 将数组赋值给vue创建的数组
this.courseOptions = arry
},
// 下拉框获取学生信息
getStudentData () {
// console.log(123)
// eslint-disable-next-line no-array-constructor
var arry = new Array()
this.$db.transaction(function (tx) {
tx.executeSql(
'SELECT * FROM STUDENT',
[],
function (tx, results) {
var len = results.rows.length
var i
for (i = 0; i < len; i++) {
// 把查出来的数据封装到一个对象里面 最后放到数组里面
const id = results.rows.item(i).id
const stuNo = results.rows.item(i).stuNo
const name = results.rows.item(i).name
const sex = results.rows.item(i).sex
const age = results.rows.item(i).age
const birthday = results.rows.item(i).birthday
const grade = results.rows.item(i).grade
const className = results.rows.item(i).className
const address = results.rows.item(i).address
const password = results.rows.item(i).password
// eslint-disable-next-line no-new-object
var o = new Object() // 创建一个js对象
o.id = id
o.name = name
o.age = age
o.stuNo = stuNo
o.sex = sex
o.birthday = birthday
o.grade = grade
o.className = className
o.address = address
o.password = password
arry.push(o)
}
},
null
)
}) // 将数组赋值给vue创建的数组
this.studentOptions = arry
// console.log(this.studentOptions)
},
// 取消按钮
cancel () {
this.dialogVisible = false
this.getScoreData()
},
// 输入框检索方法
seachMethod () {
const serarch = this.serarch
// eslint-disable-next-line no-array-constructor
var arry = new Array()
const user = window.localStorage.getItem('user')
const username = JSON.parse(user).username
// console.log(serarch.length)
if (username === 'admin') {
if (serarch.length !== 0) {
this.$db.transaction(function (tx) {
tx.executeSql(
'SELECT SCORE.id,SCORE.courseNo,SCORE.Stuno,SCORE.score,COURSE.courseName,COURSE.credits,COURSE.hours,STUDENT.NAME FROM SCORE,STUDENT,COURSE WHERE SCORE.Stuno = STUDENT.Stuno and SCORE.courseNo = COURSE.courseNo AND SCORE.courseNo = ?',
[serarch],
function (tx, results) {
var len = results.rows.length
var i
for (i = 0; i < len; i++) {
// 把查出来的数据封装到一个对象里面 最后放到数组里面
const id = results.rows.item(i).id
const courseNo = results.rows.item(i).courseNo
const courseName = results.rows.item(i).courseName
const credits = results.rows.item(i).credits
const hours = results.rows.item(i).hours
const name = results.rows.item(i).name
const stuNo = results.rows.item(i).stuNo
const score = results.rows.item(i).score
// eslint-disable-next-line no-new-object
var o = new Object() // 创建一个js对象
o.id = id
o.courseNo = courseNo
o.courseName = courseName
o.credits = credits
o.hours = hours
o.name = name
o.stuNo = stuNo
o.score = score
arry.push(o)
}
},
null
)
}) // 将数组赋值给vue创建的数组
this.tableData = arry
} else {
this.getScoreData()
}
} else {
if (serarch.length !== 0) {
this.$db.transaction(function (tx) {
tx.executeSql(
'SELECT SCORE.id,SCORE.courseNo,SCORE.Stuno,SCORE.score,COURSE.courseName,COURSE.credits,COURSE.hours,STUDENT.NAME FROM SCORE,STUDENT,COURSE WHERE SCORE.Stuno = STUDENT.Stuno and SCORE.courseNo = COURSE.courseNo AND SCORE.courseNo = ? AND STUDENT.Stuno = ?',
[serarch, username],
function (tx, results) {
var len = results.rows.length
var i
for (i = 0; i < len; i++) {
// 把查出来的数据封装到一个对象里面 最后放到数组里面
const id = results.rows.item(i).id
const courseNo = results.rows.item(i).courseNo
const courseName = results.rows.item(i).courseName
const credits = results.rows.item(i).credits
const hours = results.rows.item(i).hours
const name = results.rows.item(i).name
const stuNo = results.rows.item(i).stuNo
const score = results.rows.item(i).score
// eslint-disable-next-line no-new-object
var o = new Object() // 创建一个js对象
o.id = id
o.courseNo = courseNo
o.courseName = courseName
o.credits = credits
o.hours = hours
o.name = name
o.stuNo = stuNo
o.score = score
arry.push(o)
}
},
null
)
}) // 将数组赋值给vue创建的数组
this.tableData = arry
} else {
this.getScoreData()
}
}
},
// 生成不重复id
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)
}
)
},
// 单击新增按钮
handleCreate () {
this.IsUpdate = false
this.dialogVisible = true
this.courseInfo = {
id: undefined,
courseNo: undefined,
courseName: undefined,
credits: undefined,
hours: undefined,
stuNo: undefined,
score: undefined,
name: undefined
}
},
// 手动提交记录
handSubmit () {
const id = this.courseInfo.id
const courseNo = this.courseInfo.courseNo
const stuNo = this.courseInfo.stuNo
const score = this.courseInfo.score
console.log(this.courseInfo.score)
console.log(this.courseInfo.courseNo)
if (id === undefined) {
this.id = this.guid()
console.log(this.courseNo)
this.$db.transaction(function (tx) {
tx.executeSql(
'INSERT INTO SCORE (id,courseNo,stuNo,score) VALUES (?, ?, ?, ?)',
[id, courseNo, stuNo, score]
)
})
} else {
this.$db.transaction(function (tx) {
tx.executeSql(
'UPDATE SCORE SET score = ? WHERE stuNo =? AND courseNo = ?',
[score, stuNo, courseNo]
)
})
}
this.getScoreData()
this.dialogVisible = false
},
// 更新成绩
handleUpdate (row) {
this.dialogVisible = true
this.courseInfo = row
this.IsUpdate = true
},
// 删除成绩
handleDelete (row) {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.$db.transaction(function (tx) {
// id参数
tx.executeSql(
'DELETE FROM SCORE WHERE courseNo = ? AND stuNo = ?',
[row.courseNo, row.stuNo]
)
})
this.getScoreData()
this.$message({
type: 'success',
message: '删除成功!'
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
// 默认查询成绩
getScoreData () {
// console.log(123)
// eslint-disable-next-line no-array-constructor
var arry = new Array()
const user = window.localStorage.getItem('user')
const username = JSON.parse(user).username
if (username === 'admin') {
this.$db.transaction(function (tx) {
tx.executeSql(
'SELECT SCORE.id,SCORE.courseNo,SCORE.Stuno,SCORE.score,COURSE.courseName,COURSE.credits,COURSE.hours,STUDENT.NAME FROM SCORE,STUDENT,COURSE WHERE SCORE.Stuno = STUDENT.Stuno and SCORE.courseNo = COURSE.courseNo',
[],
function (tx, results) {
var len = results.rows.length
var i
for (i = 0; i < len; i++) {
// 把查出来的数据封装到一个对象里面 最后放到数组里面
const id = results.rows.item(i).id
const courseNo = results.rows.item(i).courseNo
const courseName = results.rows.item(i).courseName
const credits = results.rows.item(i).credits
const hours = results.rows.item(i).hours
const name = results.rows.item(i).name
const stuNo = results.rows.item(i).stuNo
const score = results.rows.item(i).score
// eslint-disable-next-line no-new-object
var o = new Object() // 创建一个js对象
o.id = id
o.courseNo = courseNo
o.courseName = courseName
o.credits = credits
o.hours = hours
o.name = name
o.stuNo = stuNo
o.score = score
arry.push(o)
}
},
null
)
})
} else {
this.$db.transaction(function (tx) {
tx.executeSql(
'SELECT SCORE.id,SCORE.courseNo,SCORE.Stuno,SCORE.score,COURSE.courseName,COURSE.credits,COURSE.hours,STUDENT.NAME FROM SCORE,STUDENT,COURSE WHERE SCORE.Stuno = STUDENT.Stuno and SCORE.courseNo = COURSE.courseNo AND STUDENT.Stuno = ?',
[username],
function (tx, results) {
var len = results.rows.length
var i
for (i = 0; i < len; i++) {
// 把查出来的数据封装到一个对象里面 最后放到数组里面
const id = results.rows.item(i).id
const courseNo = results.rows.item(i).courseNo
const courseName = results.rows.item(i).courseName
const credits = results.rows.item(i).credits
const hours = results.rows.item(i).hours
const name = results.rows.item(i).name
const stuNo = results.rows.item(i).stuNo
const score = results.rows.item(i).score
// eslint-disable-next-line no-new-object
var o = new Object() // 创建一个js对象
o.id = id
o.courseNo = courseNo
o.courseName = courseName
o.credits = credits
o.hours = hours
o.name = name
o.stuNo = stuNo
o.score = score
arry.push(o)
}
},
null
)
})
}
// 将数组赋值给vue创建的数组
this.tableData = arry
}
}
}
</script>
<style scoped>
</style>
1297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
