CEMS大学生综合测评管理系统

  • CEMS大学生综合测评管理系统已关闭评论
  • 18 次浏览
  • A+
所属分类:Web前端
摘要

​ Vue3快速上手:​ https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application​ js-cookie的使用:


功能介绍

登录

CEMS大学生综合测评管理系统

首页

CEMS大学生综合测评管理系统

修改密码

CEMS大学生综合测评管理系统

提交申请

CEMS大学生综合测评管理系统

提交列表

CEMS大学生综合测评管理系统

数据可视化

CEMS大学生综合测评管理系统

审核列表

CEMS大学生综合测评管理系统

前端

components结构

CEMS大学生综合测评管理系统

搭建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:

https://vform666.com/

UI 框架

​ Element Plus:

https://element-plus.org/zh-CN/#/zh-CN

  1. 表单进阶(插入图片、获取表单所在行数)

    <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": "账号密码错误"} 

接口结构

CEMS大学生综合测评管理系统

保存与读取图片

# 生成随机文件名 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

学习链接