一个完整的学院网站实现过程

项目介绍

​ 本项目是东北大学计算机学院网站的一个非官方版本.涉及了前端/后端/数据库/备案/https/域名/服务器等内容

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

技术栈

vue.js

vue-router

axios

element-ui

express

实现

总体实现

前端页面采用vue框架实现,后端采用基于node.js的后端框架express.

前后端的交互

采用前端分离的方式,利用axios发送向后端发送ajax请求,后端在收到请求后返回json,实现了交互过程.

例如: 前端界面要向获取新闻,需要向后端发送一个请求,利用axios发送

this.$axios({
      method: 'get',  //请求方法
      url: 'http://118.89.173.108:3000/api/ImNews',  //请求url
      timeout: '3000'})          //设置超时时间为3000ms
    .then(response => {          
      console.log(response.data)
      this.topNews = response.data
    })
    .catch(error => {           //发送失败
      console.log(error)
    })

后端收到请求,查询数据库,以json的形式返回结果

app.get('/api/latestNews', function (req, res,next) {
        pool.getConnection(function(err, connection) { 
            var resResult=[]
            connection.query('select * from ImageNews',function(err,result1){
                if(result1){
                    resResult=result1
                }
            })
            connection.query('select * from News',function(err,result2){
                if(result2){
                //console.log(resResult)
                resResult.push(result2)
                responseJSON(res,resResult)
                connection.release()
            }
        })

        })
    });

返回结果:

前端渲染:

<div id="centerList" class="column">
    <div class="list" v-for="item in centerNews"><a href="#" target="_blank">{{item.Title}}</a></div>
</div>

路由

得益于vue-router的强大,我们可以通过它实现强大的路由功能.

lazy-load

由于项目含有较多组件,如果在页面首次打开时就需要加载所有组件,无疑无大大减缓加载速度,为此,引入vue-routerlazy-load功能, 由于在首页加载完成后不需要加载校友组件,所以下面以校友页面为例,说明该过程

export default new Router({
  routes: [
  {
      path: '/Alumnus',
      component: resolve => require(['@/components/Identity/Alumnus.vue'], resolve)
    }
  ]
})

嵌套路由

父路由下还有子路由,路由之间存在嵌套,定义子路由如下:

{
    path: '/',
      name: 'Index',
      component: Index,
      redirect: '/AcademyProfile/index',
      children: [{
        path: '/AcademyProfile/:page',
        name: AcademyProfile,
        component: AcademyProfile
      }]
}

默认路由

更改网站打开的默认路由

redirect: '/AcademyProfile/index',

动态路由

{
        path: '/News/:page',
        component: resolve => require(['@/components/Tree/News.vue'], resolve)
}

通过$route.params传递参数,来匹配不同的路由,然后通过watch来检测变化.

UI

这里我使用的UI组件库是有饿了么出品的element-ui,需要在main.js引入组件和样式表

import elementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(elementUI)

应用主要是左侧的树型结构和新闻页的轮播效果.

https

由于存在登录,为了更加安全,引入了https,在Apache2中引入开启https的代码如下:

 <VirtualHost *:443>
    ServerName www.neucse.cn
    SSLCertificateFile /etc/apache2/ssl/2_www.neucse.cn.crt   //ssl为存放证书的路径
    SSLCertificateKeyFile /etc/apache2/ssl/3_www.neucse.cn.key
    SSLCertificateChainFile /etc/apache2/ssl/1_root_bundle.crt
>

数据库操作

数据库选用的是MySQL,用express操纵数据库.

备案

截止到今天,备案仍然没有通过,不得不吐槽办事效率,从腾讯云开始提交信息再到提交管局,从5月20号到7月5号依旧显示备案中.

项目截图

首页

首页

新闻页

新闻页

通知页

通知页

校友

校友

相关链接

github地址

本人博客

项目结构

.
├── Footer.vue       //底部栏
├── Identity         //身份
│   ├── Alumnus.vue  //校友模块
│   └── Student.vue  //学生模块
├── Index.vue        //首页
├── mobile           //移动端 
│   ├── bottomFooter.vue   
│   ├── latestNews.vue
│   ├── majorChoice.vue
│   ├── mobileIndex.vue
│   ├── notice.vue
│   └── topStories.vue    
├── Nav.vue           //导航栏
├── Tree              //树型结构对应的显示界面
│   ├── AcademyProfile.vue      //学院介绍
│   ├── News.vue                //学院新闻
│   └── Notice.vue              //通知
└── Tree.vue                    //左侧树型结构

3 directories, 16 files

For detailed explanation on how things work, checkout the guide and docs for vue-loader.?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 221,820评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,648评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 168,324评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,714评论 1 297
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,724评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,328评论 1 310
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,897评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,804评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,345评论 1 318
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,431评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,561评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,238评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,928评论 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,417评论 0 24
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,528评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,983评论 3 376
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,573评论 2 359

推荐阅读更多精彩内容

  • 了解自己。 爱自己。 爱自己就是凡事都以取悦自己为目的,做那些能让自己愉悦的、有价值的事,放弃那些只能取悦别人却为...
    五十年后阅读 327评论 0 0
  • 《蓟运河畔》作者:罗兰类型:自传体散文《蓟运河畔》是台湾作家罗兰(原名靳佩芬)的自传体《岁月沉沙》的第一部。全书以...
    Dove不是德芙阅读 1,247评论 1 0
  • 紫藝阅读 112评论 0 0
  • 小渔乐学阅读 317评论 0 0
  • 最近打算学习一下Java语言,虽然是前端,但是对后端只是应该也要有所了解。初步查了下资料,发现Java有一些地方和...
    酷热summer阅读 192评论 0 0