CEMS大学生综合测评管理系统
功能介绍
登录
首页
修改密码
提交申请
提交列表
数据可视化
审核列表
前端
components结构
搭建Vue项目
Vue3快速上手:
https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application
页面布局
<template>
<el-container >
<el-header>
<HomeHeader/>
</el-header>
<el-container>
<el-aside width="250px">
<HomeAside/>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
import HomeAside from './HomeAside.vue';
import HomeHeader from './HomeHeader.vue';
export default {
components: {
HomeAside,
HomeHeader
}
}
</script>
<style>
.el-header{
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
html,body,#app,.demo,.el-container {
height: 100%;
width: 100%;
}
</style>
组件通信
js-cookie的使用:
https://blog.csdn.net/weixin_52615140/article/details/128543259
Echarts
在vue中使用echarts:
https://www.bilibili.com/video/BV16Z4y1U7BW
Vue-ECharts:
https://github.com/ecomfe/vue-echarts/tree/main
注意:采用created方法进行echarts组件数据的初始化
生命周期应用
https://www.bilibili.com/video/BV1Rs4y127j8/?p=35&vd_source=b53d35d0f1e32279da1e60b030a06429
表格中预览大图
https://blog.csdn.net/weixin_47390965/article/details/127402967
注意:原文章在调用弹框组件时,错误使用了:show.sync="LicenseBigDialog",而应该写成v-model="LicenseBigDialog"
低代码表单
Variant Form:
UI 框架
Element Plus:
https://element-plus.org/zh-CN/#/zh-CN
表单进阶(插入图片、获取表单所在行数)
<template>
<el-table class="submitList" :data="tableData" stripe border> <!-- 插入图片 -->
<el-table-column prop='evidence' label="加分材料" width="130" >
<template #default="scope">
<el-image :src="scope.row.evidence" @click="showBigImage(scope.row.evidence)" preview-src-list min-width="70" height="70" />
</template>
</el-table-column> <!-- 获取表单的所在行数 -->
<el-table-column label="是否通过" width="130" >
<template #default="scope">
<button @click="submit(scope.$index)">通过</button>
</template>
</el-table-column> </el-table>
</template>
网络请求
axios在vue中的使用:
https://blog.csdn.net/m0_67403188/article/details/123420220
后端
接口实例
这里以登录接口为例,介绍了怎么创建一个接口。
class LoginClass(BaseModel):
id: str
password: str
@app.post("/login")
async def login(lc: LoginClass):
conn = pymysql.connect(host='localhost', port=3306, user='root', password='123456',
db='student_evaluation_and_management_system', charset='utf8')
# 创建游标对象
cursor = conn.cursor()
cursor.execute("select * from admin where id = %s and password = %s", (lc.id, lc.password))
conn.commit()
results = cursor.fetchall()
if len(results) != 0:
return {"code": "003", "id": results[0][0], "msg": "登陆成功"}
cursor.execute("select * from student where id = %s and password = %s", (lc.id, lc.password))
conn.commit()
results = cursor.fetchall()
# 关闭游标对象
cursor.close()
# 关闭连接
conn.close()
if len(results) != 0:
return {"code": "001", "id": results[0][0], "msg": "登陆成功"}
else:
return {"code": "002", "msg": "账号密码错误"}
接口结构
保存与读取图片
# 生成随机文件名
def generate_random_string(length):
letters = string.ascii_lowercase
return ''.join(random.choice(letters) for _ in range(length))
# 上传图片时,把照片保存在本地
@app.post("/imgs/upload")
def upload_image(file: UploadFile = File(...)):
# 获取当前文件所在的目录路径
current_dir = os.path.dirname(os.path.abspath(__file__))
# 构建目标文件夹路径
target_folder = os.path.join(current_dir, "img")
# 确保目标文件夹存在
os.makedirs(target_folder, exist_ok=True)
# 生成随机字符串作为文件名
file_name = generate_random_string(8)
# 获取文件的扩展名
extension = os.path.splitext(file.filename)[1]
# 构建文件的完整路径
file_path = os.path.join(target_folder, f"{file_name}{extension}")
# 保存文件到目标路径
with open(file_path, "wb") as buffer:
shutil.copyfileobj(file.file, buffer)
# 返回文件的名字
return {"data": {"url": f"{file_name}{extension}"}}
# 从本地读取图片
@app.get('/img')
def get_image(name):
# 获取与 Python 文件同级的目录路径
base_dir = os.path.dirname(os.path.realpath(__file__))
# 构建图片文件路径
image_path = os.path.join(base_dir, "img", name)
print(image_path)
if os.path.exists(image_path):
# 返回图片作为响应
return FileResponse(image_path, media_type="image/jpeg")
else:
# 如果图片不存在,返回错误信息
return {"error": "Image not found."}
跨域问题
app = FastAPI()
# 解决跨域问题
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_methods=["*"],
allow_headers=["*"],
allow_credentials=True,
)
部署方法
系统采用腾讯云2核2G轻量云服务器,在宝塔面板的python项目管理直接部署后端项目,提交requiremens.txt和py文件即可。部署时,注意修改后端文件的数据库信息,以及下面的host信息,从“127.0.0.1”修改为“0.0.0.0”。
if __name__ == '__main__':
uvicorn.run(app='main:app', host='0.0.0.0', port=8000, reload=True)
项目地址
https://github.com/githigher/CEMS
学习链接
w3school
Vue
ECMAScript 6 入门
Animate.css
ECharts
免费API
CSS菜鸟教程
Font Awesome
Element
FastAPI
字体下载
Pure Admin后台管理系统模板
- https://yiming_chang.gitee.io/pure-admin-doc/
IconPark
OSRC
即时设计
VariantForm
CEMS大学生综合测评管理系统的更多相关文章
- R_Studio(学生成绩)对两个班级学生成绩进行集合,重新计算学生综合测评成绩并对学生按综合测评成绩进行排名
对成绩表"11_1_1.csv" "11_2_1.csv"进行集成,并重新计算4门课程的平均分为综合测评,增加“排名”属性,并按排名排序 "11_1_ ...
- asp.net C# 题目大全
net001在线饰品销售系统 net002鲜花商城 net003商品销售管理系统 net004在线辅导答疑 net005土地税务管理系统 net006旅游管理 net007房产中介 net008房产信 ...
- 教务管理系统(node+express+mysql)
模块拆分 现在将教务系统拆分成九个模块: 教务系统教师业务:师资管理.教学计划管理.排课管理 教务系统学生业务:考试管理.毕业生管理.学生综合测评 信息查询:自习室查询.课程表查询 考试系统:实现学生 ...
- JSP/JAVA目录清单
JAVA253中国象棋(CS) JAVA258网络五子棋游戏的设计与实现(CS) JAVA390停车场管理系统SQL(CS) JSP001学生综合素质测评系统JAVA+Mysql JSP002学生成绩 ...
- 2014年6月份第2周51Aspx源码发布详情
AMX高效自定义分页控件(WinForm)源码 2014-6-9 [VS2008]2014.6.9更新内容: 1. 更改用户自定义分页控件功能布局.大大精简了调用分页自定义控件的代码,和使用系统 ...
- Android九宫格界面实现点击每个格点击跳转界面
刚开始有个任务就是做一个九宫格界面,后来有个任务就是实现点击每个格并跳转界面实现每个格的功能.下面我就介绍一下我是如何实现该功能的 首先写一下我的想法是: 登录成功后显示一个九宫格界面,每个九宫格的每 ...
- JAVA上百实例源码以及开源项目
简介 笔者当初为了学习JAVA,收集了很多经典源码,源码难易程度分为初级.中级.高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情.执着,对IT的憧憬. ...
- java开发第四天——莫名其妙的一天
搞了一天的ACM,欲哭无泪,消化的不好打了一天的嗝,然后在机房睡了一个下午,感觉还真的有点对不起队友的说.别的借口我也不找了,确实是自己不努力,时至今日,一切都是我咎由自取.等这次项目一结束我就全身心 ...
- ebe2
Email:kefu007@vip.qq.com 软件每天有更新.请用Ctrl+F键搜索您需要的软件..如果你找不到你需要的软件可以联系客户服务人员帮您找! 海拉之光LucidShape光学设计仿真分 ...
- 我的大学,我的SPR机器人队
时间过的真快,我这个在协会呆了好多年的老油条今年都毕业了,在石油大学大学七年几乎三分之二的时间就是在协会度过的.实话说在北京这是我最亲切的地方,这里有我喜欢的各种设备,有亲爱的老师和一起奋斗的队友,在 ...
随机推荐
- [abc279 G] At Most 2 Colors
G - At Most 2 Colors (atcoder.jp) 重点讲解方法三,因为方法三是蒟蒻都能想出来的方法一和方法二都可以借助方法三的思想推出 方法一 这是最简单的设置状态的方法,\(dp[ ...
- 马拉车(manacher) & 回文自动机(PAM)
补充,PAM 的 a[0]=-1,这一点我每次写都要忘记. 读了徐安矣2023年集训队论文写的,对于差分性质和习题,我会在理解清楚之后再补充.本篇博客仅讨论前两种算法. 首先,马拉车和回文自动机都是处 ...
- Some book
## book [C++] Accelerated C++ C++ Primer 5th C++ 程序设计语言: 1 ~ 3 C++ 程序设计语言: 4 C++ 编程思想 C++ 标准库 2th C+ ...
- NSDI-2023 微软论文:解构有状态网络功能
本文通过chatgpt代理站(支持gpt4):gptschools.cn翻译整理 微软Azure对每个虚拟机进行了为期三个月的网络监控,获得了新建.并发.PPS等指标情况,发现: 1) 网络功能负载不 ...
- AI-4多层感知机
4.1笔记 在线性网络中,任何特征的增大都会导致模型输出的增大或减小.这种想法在某些情况下不在适用,例如x和y并非线性关系.或者是x和y并不具有单调性.以及x1.x2会对y产生交互作用时. 为解决该问 ...
- 把langchain跑起来的3个方法
使用LangChain开发LLM应用时,需要机器进行GLM部署,好多同学第一步就被劝退了,那么如何绕过这个步骤先学习LLM模型的应用,对Langchain进行快速上手?本片讲解3个把LangChain ...
- Nginx使用Lua脚本连接Redis验证身份并下载文件
目录 安装Nginx 下载 解压安装包 安装依赖 安装 启动 测试访问 安装LuaJIT 安装ngx_devel_kit 安装lua-nginx-module 在已安装的Nginx中添加Lua模块 L ...
- BOM和DOM相关API
一.DOM相关API 1. DOM API DOM(Document Object Model)文档对象模型得树形结构 文档对象模型就是一个树形结构,类似于家谱树 html标签里面包裹了所有的文档内容 ...
- BUUCTF-Misc-荷兰宽带数据泄露(RouterPassView的使用)
题目 下载附件是一个bin文件 这里用的一个工具RouterPassView--路由器密码查看工具 路由器的备份文件通常包含了像您的ISP的用户名重要数据/密码,路由器的登录密码,无线网络的KEY. ...
- 【技术积累】Vue.js中的事件【一】
Vue中的事件是什么 在Vue.js中,事件是用于处理用户交互的重要机制.Vue.js提供了一系列的事件处理方法和指令,使开发者能够方便地处理用户的各种操作. 1. 事件绑定:Vue.js通过v-on ...