基于Nodejs+vue开发实现高校学院网站系统
作者主页:编程千纸鹤
作者简介:Java、前端、Pythone开发多年,做过高程,项目经理,架构师
主要内容:Java项目开发、毕业设计开发、面试技术整理、最新技术分享
项目编号:BS-QD-KS-001
一,项目简介
本项目基于纯前端技术为学院开发实现了一个学院网站系统,界面美观大方,采用Nodejs+Vue+ElemenetUI开发实现,主要包含:首页展示、系部新闻、系部概况、教学科研、党建工作、学生工作、招生就业、教师风采、制度建设、技能竞赛、学院首页等功能模块。
二,环境介绍
语言环境:nodejs
数据库:无
应用服务器:nodejs
开发工具:IDEA或vscode
开发技术:nodejs+vue+elementUI
三,系统展示
学院首页
招生就业
党建科研
教师风采
教学研究
系部新闻
新闻详情
四,核心代码展示
<template><div id="homemaing"><div class="zhaosheng"><el-tabs v-model="activeName" @tab-click="handleClick" class="zsjy"><el-tab-pane label="招生就业 | ADMINSSIONS" name="first"><ul><li><a href=""><div class="time"><div class="day">22</div><div class="month">十月</div></div> <p>广州兴森科技有限公司2021大专技术校招</p></a></li><li><a href=""><div class="time"><div class="day">18</div><div class="month">六月</div></div> <p>深圳顺络电子股份有限公司招聘信息</p></a></li><li><a href=""><div class="time"><div class="day">22</div><div class="month">十二月</div></div> <p>中信银行信用卡中心助理综合经营岗2022年校招</p></a></li><li><a href=""><div class="time"><div class="day">26</div><div class="month">十月</div></div> <p>中兴通讯股份有限公司制造部校园招聘简章</p></a></li><li><a href=""><div class="time"><div class="day">22</div><div class="month">十月</div></div> <p>宜通世纪科技股份有限公司招聘信息</p></a></li></ul></el-tab-pane></el-tabs></div><div class="jingneng"><el-tabs v-model="activeName" @tab-click="handleClick" class="jnjs"><el-tab-pane label="技能竞赛 | SKILLS COMPETITION" name="first"><ul><li><a href=""><div class="time"><div class="day">22</div><div class="month">十月</div></div> <p>喜讯:计算机学子首次参加广东省职业院校学生专业技能大...</p></a></li><li><a href=""><div class="time"><div class="day">18</div><div class="month">六月</div></div> <p>喜讯:我系学子获2021年广东省技能大赛(高职组)“ 虚拟现...</p></a></li><li><a href=""><div class="time"><div class="day">22</div><div class="month">十二月</div></div> <p>喜讯:我系学子荣获广东省职业院校专业技能大赛“区块链...</p></a></li><li><a href=""><div class="time"><div class="day">26</div><div class="month">十月</div></div> <p>喜讯:我系学子首次参加广东省高职院校学生专业技能大赛“中文信息处理”赛项荣获...</p></a></li><li><a href=""><div class="time"><div class="day">22</div><div class="month">十月</div></div> <p>喜讯:我系学子荣获2021年度广东省职业院校学生专业技能大赛“Web应用软件开发”赛...</p></a></li></ul></el-tab-pane></el-tabs></div><div class="jiaoxue"><el-tabs v-model="activeName" @tab-click="handleClick" class="jxky"><el-tab-pane label="教学科研 | TEACHING RESEARCH" name="first"><ul><li><a href=""><div class="time"><div class="day">22</div><div class="month">十月</div></div> <p>2021级数字媒体技术专业人才培养方案</p></a></li><li><a href=""><div class="time"><div class="day">18</div><div class="month">六月</div></div> <p>2021级软件技术专业人才培养方案</p></a></li><li><a href=""><div class="time"><div class="day">22</div><div class="month">十二月</div></div> <p>2021级计算机应用技术专业人才培养方案</p></a></li><li><a href=""><div class="time"><div class="day">26</div><div class="month">十月</div></div> <p>2021级计算机网络技术专业人才培养方案</p></a></li><li><a href=""><div class="time"><div class="day">22</div><div class="month">十月</div></div> <p>2021级现代通信技术专业人才培养方案</p></a></li></ul></el-tab-pane></el-tabs></div></div>
</template><script>
export default {data() {return {activeName: "first"}},components: {},methods: {handleClick(tab, event) {console.log(tab, event)}}
}
</script><style>
*{margin: 0;padding: 0;
}
.fontblue{color: #1846e0;
}
.fontsred{color: red;
}
#homemaing {width: 1200px;height: 350px;margin: 0 auto;
}
.el-tabs--top .el-tabs__item.is-top:last-child{margin-left: 5px;
}
.zhaosheng {width: 370px;height: 326px;float: left;margin-left: 13px;
}
.zsjy{width: 370px;height: 326px;margin-top: 0;
}
.zsjy ul{margin-left: 10px;
}
.zsjy ul li{height: 40px;width: 350px;margin-top: 10px;font-size: 13px;
}
.zsjy ul li i{float: right;
}
.zsjy ul li p{transition: 0.6s all;float: right;width: 300px;border-bottom: 1px solid #e6e6e6;font-size: 13px;color: #333;line-height: 24px;height: 44px;overflow: hidden;font-family: '';padding-bottom: 8px;
}
.jingneng{width: 355px;float: left;
}
.jnjs{width: 360px;margin-top: 0;margin-left: 60px;
}
.jnjs ul{margin-left: 10px;
}
.jnjs ul li{height: 40px;width: 355px;font-size: 13px;margin-top: 10px;
}
.jnjs ul li i{float: right;
}
.jnjs ul li p{transition: 0.6s all;float: right;width: 305px;border-bottom: 1px solid #e6e6e6;font-size: 13px;color: #333;line-height: 24px;height: 44px;overflow: hidden;font-family: '';padding-bottom: 8px;
}
.jiaoxue {width: 360px;float: left;margin-left: 13px;
}
.jxky{width: 360px;margin-top: 0;margin-left: 95px;
}
.jxky ul{margin-left: 10px;
}
.jxky ul li{height: 40px;margin-top: 10px;width: 350px;font-size: 13px;
}
.jxky ul li i{float: right;
}
.jxky ul li p{transition: 0.6s all;float: right;width: 300px;border-bottom: 1px solid #e6e6e6;font-size: 13px;color: #333;line-height: 24px;height: 44px;overflow: hidden;font-family: '';padding-bottom: 8px;
}
</style>
<template><div id="home"><login></login><navlink></navlink><div id="jymain"><div class="jymainwz"><div class="jymright"><div class="jynrs"><h3>科学教研</h3><div class="jydaohangww"><ul><li class="widthssw"><router-link to="/jxcontent"><img src="../assets/images/jx2.png" alt="" class="picss"> <i class="ccc">计算机工程系开展开学第一天教学检查</i><i class="cccs">为了进一步加强教学质量管理和教风学风建设,2021年3月1日,新学期开课第一天,计算机工程系教学</i></router-link><span>2021-10-20</span></li><li class="widthssw"><router-link to="/jxcontent"><img src="../assets/images/kx1.jpg" alt="" class="picss"> <i class="ccc">计算机工程系召开考风考纪主题会议</i><span class="cccw">临近期末考试,为严肃考风考纪,加强诚信教育,强化考试管理,营造“公平、公正、诚实守信”的考试氛围,计算机工程系在南校区6号教学楼401室开展考风考纪主题会议</span></router-link><span class="spanww">2021-09-29</span></li><li class="widthssw"><router-link to="/jxcontent"><img src="../assets/images/jx3.png" alt="" class="pic"> <i class="ccc">计算机工程系召开立体式教材项目研讨会</i><span class="cccw">为积极开展高职院校结对帮扶,2020年11月28日,广州民航职业技术学院计算机系主任洪锐锋到访茂名职业技术学院计算机工程系,开展立体式教材项目建设研讨会。</span></router-link><span class="spanww">2021-09-23</span></li><li class="widthssw"><router-link to="/jxcontent"><img src="../assets/images/jx4.png" alt="" class="pic"> <i class="ccc">计算机工程系举行结对共建研讨会</i><span class="cccw">为了深入落实广东省教育大会精神,更好地实施一流高职院校结对帮扶计划,11月13日下午,计算机工程系在南校区6号教学楼4楼会议室举行了广州民航职业技术学院与茂名职业技术学院结对共建研讨会</span></router-link><span class="spanww">2021-09-15</span></li></ul><div class="fenye"><i class="tiaoshuss">共93条</i><el-paginationclass="fenyedao"backgroundlayout="prev, pager, next":total="90"></el-pagination></div></div></div></div></div></div><footermain></footermain></div>
</template><script>
import login from "@/view/Login";
import navlink from "@/view/Navlink";
import footermain from "@/view/FooterMain";export default {data() {return {};},components: {login,navlink,footermain,},methods: {},
};
</script><style>
ul li {list-style: none;
}
a {text-decoration: none;color: black;
}
router-link:hover {color: #fd0;
}
#jymain {width: 100%;
}
.picss{width: 165px;
}
.jymainwz {width: 1200px;height: 620px;margin: 0 auto;font-size: 13px;position: relative;
}
.widthssw{height: 130px;
}
.jymainwz .jymright {float: left inherit;
}
.jymainwz .jymright .jynrs {margin-top: 10px;
}
.jymainwz .jymright .jynrs h3 {font-weight: 400;background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);color: white;height: 30px;font-size: 18px;line-height: 30px;background-color: #f5f5f5;border-left: 4px solid #5584b0;padding-left: 10px;
}
.jymainwz .jymright .jynrs ul li {width: 1160px;margin-top: 0px;margin-left: 12px;
}
.jymainwz .jymright .jynrs ul li a:hover {color: #00c9ff;margin-left: 10px;font-size: 20px;transition: 0.6s all;text-decoration: underline;
}
.jymainwz .jymright .jynrs ul li .spanww {margin-top: -15px;
}
.jymainwz .jymright .jynrs ul li span {float: right;color: #999;margin-top: 70px;
}
.jymainwz .jymright .jynrs .jydaohangww img{margin-top: 5px;float: left;
}
.jymainwz .jymright .jynrs .jydaohangww .ccc{float: left;margin-bottom: -100px;font-size: 18px;
}
.jymainwz .jymright .jynrs .jydaohangww .cccs{float: left;margin-top: 30px;
}
.jymainwz .jymright .jynrs .jydaohangww .cccw{margin-top: -80px;margin-left: 200px;color: black;
}
.jymainwz .jymright .jynrs .jydaohangww {height: 580px;position: relative;border: 1px solid #e7e7e7;
}
.jymainwz .jymright .jynrs .fenye .fenyedao {position: absolute;left: 400px;bottom: 0px;
}
.tiaoshuss {position: absolute;font-style: normal;left: 320px;bottom: 20px;font-size: 10px;color: #999;
}
.jymainwz .jymright .jynrs .fenye ul li {margin-top: 0px;width: 10px;
}
</style>
<template><div id="home"><login></login><navlink></navlink><div id="gkmain"><div class="gkmainwz"><div class="gkmright"><div class="gknr"><h3>系部概况</h3><div class="gkdaohang"><ul><li class="widthss"><router-link to="/gkcontent"><img src="../assets/images/R-C.jpg" alt="" class="pics"> <i class="ccc">计算机工程系简介</i><i class="cccs">计算机工程系承担着计算机专业人才的培养,及全院计算机相关的基础课程,为社会提供技术支持和服务。</i></router-link><span>2021-10-20</span></li><li class="widthss"><router-link to="/gkcontent"><img src="../assets/images/gk1.jpg" alt="" class="pics"> <i class="ccc">计算机工程系组织结构图</i><span class="cccww">计算机工程系组织结构图详情</span></router-link><span>2021-09-29</span></li><li class="widthss"><router-link to="/gkcontent"><img src="../assets/images/gk2.jpg" alt="" class="pics"> <i class="ccc">计算机工程系实训室介绍</i><span class="cccw">计算机工程系实训室主要位于学院水东湾新城南校区6号教学楼。目前,计算机实验室的教学实验室有18间,建筑面积约有2200平方米,电脑、投影、服务器、摄像机、多媒体设备等台套数量约1128台/套</span></router-link><span class="sapnss">2021-09-23</span></li><li class="widthss"><router-link to="/gkcontent"><img src="../assets/images/gk4.jpg" alt="" class="pics"> <i class="ccc">计算机工程系系徽</i><span class="cccww">计算机工程系系徽照片</span></router-link><span class="sapns">2021-04-12</span></li></ul><div class="fenye"><i class="tiaoshuss">共20条</i><el-paginationclass="fenyedao"backgroundlayout="prev, pager, next":total="20"></el-pagination></div></div></div></div></div></div><footermain></footermain></div>
</template><script>
import login from "@/view/Login";
import navlink from "@/view/Navlink";
import footermain from "@/view/FooterMain";export default {data() {return {};},components: {login,navlink,footermain,},methods: {},
};
</script><style>
ul li {list-style: none;
}
a {text-decoration: none;color: black;
}
router-link:hover {color: #fd0;
}
#gkmain {width: 100%;
}
.pics{width: 150px;
}
.gkmainwz {width: 1200px;height: 650px;margin: 0 auto;font-size: 13px;position: relative;
}
.gkmainwz .gkmright .gknr ul li .sapnss{margin-top: -10px;
}
.gkmainwz .gkmright .gknr ul li .sapns{margin-top: 110px;margin-right: -73px;
}
.gkmainwz .gkmright {float: left inherit;
}
.gkmainwz .gkmright .gknr {margin-top: 10px;
}
.gkmainwz .gkmright .gknr h3 {font-weight: 400;background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);color: white;height: 30px;font-size: 18px;line-height: 30px;background-color: #f5f5f5;border-left: 4px solid #5584b0;padding-left: 10px;
}
.gkmainwz .gkmright .gknr ul li {width: 1171px;margin-top: 0px;margin-left: 12px;
}
.gkmainwz .gkmright .gknr ul li a:hover {color: #00c9ff;margin-left: 10px;font-size: 20px;transition: 0.6s all;text-decoration: underline;
}
.gkmainwz .gkmright .gknr ul li span {float: right;color: #999;margin-top: 80px;
}
.gkmainwz .gkmright .gknr .gkdaohang img{margin-top: 5px;float: left;
}
.gkmainwz .gkmright .gknr .gkdaohang .ccc{float: left;margin-bottom: -100px;font-size: 18px;
}
.gkmainwz .gkmright .gknr .gkdaohang .cccs{float: left;margin-top: 30px;
}
.gkmainwz .gkmright .gknr .gkdaohang .cccw{margin-top: -80px;margin-left: 150px;color: black;
}
.gkmainwz .gkmright .gknr .gkdaohang .cccww{margin-top: 40px;color: black;float: left;
}
.gkmainwz .gkmright .gknr .gkdaohang {height: 580px;position: relative;border: 1px solid #e7e7e7;
}
.gkmainwz .gkmright .gknr .fenye .fenyedao {position: absolute;left: 400px;bottom: 0px;
}
.tiaoshuss {position: absolute;font-style: normal;left: 320px;bottom: 20px;font-size: 10px;color: #999;
}
.gkmainwz .gkmright .gknr .fenye ul li {margin-top: 0px;width: 10px;
}
</style>
五,项目总结
基于Nodejs+vue开发实现高校学院网站系统相关推荐
- 前端项目:基于Nodejs+vue开发实现高校学院网站系统
作者主页:编程指南针 作者简介:Java领域优质创作者.CSDN博客专家 .掘金特邀作者.多年架构师设计经验.腾讯课堂常驻讲师 主要内容:Java项目.毕业设计.简历模板.学习资料.面试题库.技术互助 ...
- 基于nodejs+vue+elementUI的电影交流网站(前后端分离)电影网站
该系统基于nodejs+vue+elementUI整合,mysql数据库,前后端分离,具有完整的业务逻辑. 电影交流网站,在网站首页可以查看首页.电影信息.交流论坛.电影资讯.个人中心.后台管理等内容 ...
- nodejs+vue+elementui二手车评估信息网站系统java python
在许多发达国家,二手车市场已经相当完善,二手车的网站量是新车的2-3倍.新世纪以来,随着我国经济水平的提升.人民生活水平提高,国人对汽车的购买率使用率更是有了大幅提升,汽车市场的扩大导致二手车市场应运 ...
- 一个基于.Net+Vue开发的开源权限工作流系统
今天给大家推荐一个开源权限工作流系统,一个快速开发框架. 项目简介 这是一个基于.Net 5开发的权限管理.工作流系统框架.借鉴了Martin Fowler企业级应用开发思想,框架选项都是使用最新的技 ...
- 在线阅读网站|基于Springboot+Vue开发实现小说阅读网站
作者主页:编程指南针 作者简介:Java领域优质创作者.CSDN博客专家 .掘金特邀作者.多年架构师设计经验.腾讯课堂常驻讲师 主要内容:Java项目.毕业设计.简历模板.学习资料.面试题库.技术互助 ...
- nodejs+vue+elementui图书在线阅读网站系统express
在线阅读系统前端技术:nodejs+vue+elementui是将在线阅读管理系统功能模块主要分为管理员模块.管理员添加读者管理.图书信息管理,出版社管理.我的收藏管理等操作 本系统结合计算机系统的结 ...
- 就业信息追踪|基于Springboot+Vue开发实现就业信息追踪系统
作者主页:编程千纸鹤 作者简介:Java.前端.Pythone开发多年,做过高程,项目经理,架构师 主要内容:Java项目开发.毕业设计开发.面试技术整理.最新技术分享 收藏点赞不迷路 关注作者有好 ...
- 基于JAVAWeb前端开发技术儿童教育网站计算机毕业设计源码+数据库+lw文档+系统+部署
基于JAVAWeb前端开发技术儿童教育网站计算机毕业设计源码+数据库+lw文档+系统+部署 基于JAVAWeb前端开发技术儿童教育网站计算机毕业设计源码+数据库+lw文档+系统+部署 本源码技术栈: ...
- 精品基于PHP实现的计算机信息管理学院网站
<[含文档+PPT+源码等]精品基于PHP实现的计算机信息管理学院网站>该项目含有源码.文档.PPT.配套开发软件.软件安装教程.项目发布教程等 软件开发环境及开发工具: 操作系统:Win ...
最新文章
- linux查询锁定时间,Linux限制远程登陆尝试密码次数及锁定时间
- JVM内存管理:深入Java内存区域与OOM
- 【数据竞赛】可能是全网特征工程实操最通透的...
- 风格迁移应用_进展丨图像也能做情感迁移?罗切斯特大学团队提出计算机视觉新任务...
- AngularJS的学习笔记(一)
- Maven父子结构的项目依赖使用以及打包依赖_微服务项目(maven父子级项目)怎么打包
- android root截图软件下载,截屏软件(无需ROOT)
- 定了!百度运维工程师非法挖矿获利 10 万、被判 3 年,如何避免面向监狱编程?...
- 【2013年总结】思维跌宕起伏,生命颠簸曲折的一年
- html彩色条,html5 canvas彩色流动线条动画特效
- 用R进行文本分析初探——包含导入词库和和导入李白语句
- repo init 下载代码error.GitError: manifests ls-remote: usage: git ls-remote
- PLC实训 —系统电路及设备认识
- 美团内部讲座 | 清华大学崔鹏:因果推断技术最新的发展趋势
- echarts 柱状图渐变色背景
- 【Blog】Hexo_Next_博客搭建记 (by onlychristmas)
- 智能小程序档案馆——文件系统能力
- 怎么选择产品摄影的最佳相机?
- 火狐中国版历史版本pc_为什么选择Firefox,以及如何在PC上获取它?
- 初学html---标签简单实用
热门文章
- Python编程之围圈报数
- unity build报错Type has an extra field of type in the and thus can‘t be serialized error
- 1919获阿里20亿投资,独角兽如何搅动酒饮业格局
- 海康威视 + 搭配内网穿透,搭建远程视频监控教程
- 了解区块链(一)——加密货币以及区块链的价值
- java espresso_java – 带有片段的Android Espresso功能测试
- 语言和语义(一,什么是语言)
- 苹果开发者账号可以创建多少测试证书_苹果开发者帐户能创建多少个发布证书...
- 2022下半年软考考试时间安排已确定!
- You earned your Program Management Professional (PgMP)® Credential