摘要

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

功能介绍

登录

首页

修改密码

提交申请

提交列表

数据可视化

审核列表

前端

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:

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

接口结构

保存与读取图片

# 生成随机文件名 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://vform666.com/