一個完整的學院網站實現過程

分享

項目介紹

​ 本項目是東北大學計算機學院網站的一個非官方版本.涉及了前端/後端/數據庫/備案/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-router的lazy-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號依舊顯示備案中.

項目截圖

首頁

首頁

新聞頁

新聞頁

通知頁

通知頁

學習過程當中遇到什麼問題或者想獲取學習資源的話，歡迎加入學習交流羣
343599877，咱們一塊兒學前端！

項目結構

.
├── 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