CEMS大学生综合测评管理系统-Toy模板网

这篇具有很好参考价值的文章主要介绍了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

表单进阶（插入图片、获取表单所在行数）

<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

学习链接

w3school
- https://www.w3school.com.cn/
Vue
- https://cn.vuejs.org/
ECMAScript 6 入门
- https://es6.ruanyifeng.com/
Animate.css
- https://animate.style/
ECharts
- https://echarts.apache.org/zh/index.html
免费API
- https://api.aa1.cn/
CSS菜鸟教程
- https://www.runoob.com/css/css-intro.html
Font Awesome
- https://fontawesome.com/
Element
- https://element.eleme.cn/#/zh-CN
FastAPI
- https://fastapi.tiangolo.com/zh/
字体下载
- https://blog.csdn.net/dyx001007/article/details/127792981
- https://zh.fonts2u.com/
Pure Admin后台管理系统模板
- https://yiming_chang.gitee.io/pure-admin-doc/
IconPark
- https://iconpark.oceanengine.com/home
OSRC
- https://www.osrc.com/
即时设计
- https://js.design/community?category=explore
VariantForm文章来源地址https://www.toymoban.com/news/detail-704351.html
- https://vform666.com/