AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

基于Nodejs+vue开发实现高校学院网站系统

2022-12-14 188
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 基于Nodejs+vue开发实现高校学院网站系统

项目编号：BS-QD-KS-001

一，项目简介

本项目基于纯前端技术为学院开发实现了一个学院网站系统，界面美观大方，采用Nodejs+Vue+ElemenetUI开发实现，主要包含：首页展示、系部新闻、系部概况、教学科研、党建工作、学生工作、招生就业、教师风采、制度建设、技能竞赛、学院首页等功能模块。

二，环境介绍

语言环境：nodejs

数据库：无

应用服务器：nodejs

开发工具：IDEA或vscode

开发技术：nodejs+vue+elementUI

三，系统展示

招生就业

image.png

党建科研

image.png

教师风采

image.png

教学研究

image.png

系部新闻

image.png

四，核心代码展示

<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-pagination
                  class="fenyedao"
                  background
                  layout="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-pagination
                  class="fenyedao"
                  background
                  layout="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>

五，项目总结

文章标签：
JavaScript
前端开发
开发工具
应用服务中间件
数据库
关键词：
Node.js开发
node.js系统
VUE.js开发
VUE.js系统
node.js vue
编程千纸鹤
目录
相关文章
肥猪肥猪-17824
|
4天前
|
Web App开发 存储 JavaScript
深入浅出Node.js后端开发
【10月更文挑战第31天】本文将引导你进入Node.js的奇妙世界，探索其如何革新后端开发。通过浅显易懂的语言和实际代码示例，我们将一起学习Node.js的核心概念、搭建开发环境，以及实现一个简单但完整的Web应用。无论你是编程新手还是希望拓展技术的开发者，这篇文章都将为你打开一扇通往高效后端开发的大门。
肥猪肥猪-17824
22 8
游客zi3qmblbcdexu
|
4天前
|
JavaScript
Vue基础知识总结 4：vue组件化开发
Vue基础知识总结 4：vue组件化开发
游客zi3qmblbcdexu
16 6
shuj
|
4天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第30天】本文将通过一个Node.js的简单示例，引导你进入Node.js的世界。我们将从基础概念讲起，然后一步步深入到代码实现，最后总结Node.js在后端开发中的优势和应用场景。无论你是前端开发者还是后端新手，这篇文章都将为你打开一扇了解Node.js的大门。
shuj
15 2
东方睿赢
|
14天前
|
JavaScript 前端开发 测试技术
组件化开发：创建可重用的Vue组件
【10月更文挑战第21天】组件化开发：创建可重用的Vue组件
东方睿赢
23 1
石小石Orz
|
15天前
|
JavaScript 前端开发
vue全局公共组件自动引入并注册，开发效率直接起飞！
【10月更文挑战第14天】vue全局公共组件自动引入并注册，开发效率直接起飞！
石小石Orz
38 1
游客62mqllx53nctc
|
17天前
|
SQL JavaScript 关系型数据库
node博客小项目：接口开发、连接mysql数据库
【10月更文挑战第14天】node博客小项目：接口开发、连接mysql数据库
游客62mqllx53nctc
25 2
邹荣乐
|
22天前
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
邹荣乐
164 0
mrq4nk6ni2neg
|
2天前
|
Web App开发 JavaScript 前端开发
探索后端开发：Node.js与Express的完美结合
【10月更文挑战第33天】本文将带领读者深入了解Node.js和Express的强强联手，通过实际案例揭示它们如何简化后端开发流程，提升应用性能。我们将一起探索这两个技术的核心概念、优势以及它们如何共同作用于现代Web开发中。准备好，让我们一起开启这场技术之旅！
mrq4nk6ni2neg
9 0
mrq4nk6ni2neg
|
28天前
|
Web App开发 存储 JavaScript
深入浅出Node.js后端开发
【10月更文挑战第7天】本文将带你进入Node.js的世界，从基本概念、环境搭建到实际案例，逐步深入探索Node.js在后端开发中的应用。我们将通过一个简单的在线聊天室项目，学习如何利用Node.js进行网络编程和数据处理，让你对Node.js有更全面的认识。
mrq4nk6ni2neg
17 3
游客62mqllx53nctc
|
25天前
|
JavaScript 开发者
vue指令的开发看这篇文章就够了！超详细，赶快收藏！
【10月更文挑战第8天】vue指令的开发看这篇文章就够了！超详细，赶快收藏！
游客62mqllx53nctc
80 0
vue指令的开发看这篇文章就够了！超详细，赶快收藏！

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    前端常见Vue2.0面试题
  • 3
    VUE element-ui 之table表格勾选复选框动态带出（将某列的值赋值给指定列）对应列的数据
  • 4
    Chrome插件vue-devtools是如何把VSCode中对应的组件文件打开的
  • 5
    vue基于 input 实现密码的显示与隐藏功能
  • 6
    自制简单的range（Vue）
  • 7
    Vue $watch监听对象属性，数组内对象属性改变
  • 8
    vite原理之解析.vue文件
  • 9
    Vue的单文件组件：.vue文件的结构和优势
  • 10
    Vue+Echart实现利用率表盘效果【组件已封装，可直接使用】
  • 1
    mq报错abbit@syld36: * connected to epmd (port 4369) on syld36 * epmd reports node ‘rabbit‘ uses po
    66
  • 2
    【node】图片验证码(svg-captcha)
    217
  • 3
    【node写接口】 通过node 快速搭建一个服务器、get请求、post请求 小白入门
    94
  • 4
    DOM 节点列表长度（Node List Length）
    28
  • 5
    前端node如何学习进阶知识
    44
  • 6
    跨平台的JavaScript运行环境：Node.js
    53
  • 7
    「AIGC」NodeJs使用openai流式请求与非流式请求
    293
  • 8
    DOM 节点列表长度（Node List Length）
    19
  • 9
    Node.js介绍 , 安装与使用
    53
  • 10
    使用Node.js 框架（ Express.js）来创建一个简单的 API 端点
    37

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Node.js 入门与实战
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • Node.js 入门教程文档

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 穆客带你快速定位Node.js内存泄露
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础1：前端开发环境的安装和配置
  • 搭建Node.js编程环境
    • 下一篇
    DataWorks售前咨询