功能介紹
登錄
首頁
修改密碼
提交申請(qǐng)
提交列表
數(shù)據(jù)可視化
審核列表
前端
components結(jié)構(gòu)
搭建Vue項(xiàng)目
? 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方法進(jìn)行echarts組件數(shù)據(jù)的初始化
生命周期應(yīng)用
? https://www.bilibili.com/video/BV1Rs4y127j8/?p=35&vd_source=b53d35d0f1e32279da1e60b030a06429
表格中預(yù)覽大圖
? https://blog.csdn.net/weixin_47390965/article/details/127402967
? 注意：原文章在調(diào)用彈框組件時(shí)，錯(cuò)誤使用了:show.sync="LicenseBigDialog"，而應(yīng)該寫成v-model="LicenseBigDialog"
低代碼表單
? Variant Form:
? https://vform666.com/
UI 框架
? Element Plus：
? https://element-plus.org/zh-CN/#/zh-CN
-
表單進(jìn)階（插入圖片、獲取表單所在行數(shù)）
<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> <!-- 獲取表單的所在行數(shù) --> <el-table-column label="是否通過" width="130" > <template #default="scope"> <button @click="submit(scope.$index)">通過</button> </template> </el-table-column> </el-table> </template>
網(wǎng)絡(luò)請(qǐng)求
? axios在vue中的使用：
? https://blog.csdn.net/m0_67403188/article/details/123420220
后端
接口實(shí)例
? 這里以登錄接口為例，介紹了怎么創(chuàng)建一個(gè)接口。
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')
# 創(chuàng)建游標(biāo)對(duì)象
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()
# 關(guān)閉游標(biāo)對(duì)象
cursor.close()
# 關(guān)閉連接
conn.close()
if len(results) != 0:
return {"code": "001", "id": results[0][0], "msg": "登陸成功"}
else:
return {"code": "002", "msg": "賬號(hào)密碼錯(cuò)誤"}
接口結(jié)構(gòu)
保存與讀取圖片
# 生成隨機(jī)文件名
def generate_random_string(length):
letters = string.ascii_lowercase
return ''.join(random.choice(letters) for _ in range(length))
# 上傳圖片時(shí)，把照片保存在本地
@app.post("/imgs/upload")
def upload_image(file: UploadFile = File(...)):
# 獲取當(dāng)前文件所在的目錄路徑
current_dir = os.path.dirname(os.path.abspath(__file__))
# 構(gòu)建目標(biāo)文件夾路徑
target_folder = os.path.join(current_dir, "img")
# 確保目標(biāo)文件夾存在
os.makedirs(target_folder, exist_ok=True)
# 生成隨機(jī)字符串作為文件名
file_name = generate_random_string(8)
# 獲取文件的擴(kuò)展名
extension = os.path.splitext(file.filename)[1]
# 構(gòu)建文件的完整路徑
file_path = os.path.join(target_folder, f"{file_name}{extension}")
# 保存文件到目標(biāo)路徑
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 文件同級(jí)的目錄路徑
base_dir = os.path.dirname(os.path.realpath(__file__))
# 構(gòu)建圖片文件路徑
image_path = os.path.join(base_dir, "img", name)
print(image_path)
if os.path.exists(image_path):
# 返回圖片作為響應(yīng)
return FileResponse(image_path, media_type="image/jpeg")
else:
# 如果圖片不存在，返回錯(cuò)誤信息
return {"error": "Image not found."}
跨域問題
app = FastAPI()
# 解決跨域問題
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_methods=["*"],
allow_headers=["*"],
allow_credentials=True,
)
部署方法
? 系統(tǒng)采用騰訊云2核2G輕量云服務(wù)器，在寶塔面板的python項(xiàng)目管理直接部署后端項(xiàng)目，提交requiremens.txt和py文件即可。部署時(shí)，注意修改后端文件的數(shù)據(jù)庫信息，以及下面的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)
項(xiàng)目地址
? https://github.com/githigher/CEMS
學(xué)習(xí)鏈接
-
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
-
免費(fèi)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后臺(tái)管理系統(tǒng)模板
- https://yiming_chang.gitee.io/pure-admin-doc/
-
IconPark
- https://iconpark.oceanengine.com/home
-
OSRC
- https://www.osrc.com/
-
即時(shí)設(shè)計(jì)文章來源：http://www.zghlxwxcb.cn/news/detail-704351.html
- https://js.design/community?category=explore
-
VariantForm文章來源地址http://www.zghlxwxcb.cn/news/detail-704351.html
- https://vform666.com/
到了這里，關(guān)于CEMS大學(xué)生綜合測(cè)評(píng)管理系統(tǒng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
