一个完整的学院网站实现过程
2017-07-05 20:53
423 查看
分享
项目介绍
本项目是东北大学计算机学院网站的一个非官方版本.涉及了前端/后端/数据库/备案/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
相关文章推荐
- python实现一个完整的blog网站
- 一个完整的壁纸应用——[仿爱壁纸],从设计到实现的过程
- 一个完整的壁纸应用——[仿爱壁纸],从设计到实现的过程
- 完整编写一个TXT解析器的过程 parser 对照需求和功能实现处理
- 网站信息统计的简单实现过程 pcsky(原作)
- 网站信息统计的简单实现过程
- 实现了一个完整的chain 链表
- 一个简单的oracle分页存储过程的实现和调用
- Asp.net+Xml:实现制作一个完整的新闻系统
- 以二进制形式将图片保存到数据库,用存诸过程实现(完整代码+sql语句)
- 一个简单的oracle分页存储过程的实现和调用
- 遇到一个问题,网站可以实现让客户不能加入收藏夹吗?
- 一个简单的oracle分页存储过程的实现和调用
- MSSQL:存储过程-实现两个表中取出头两行,然后合并到一个表中
- hchxxzx--》一个实现图片上传/产生缩略图/在上传图片上写字功能的完整页面代码
- 构思一个网站是一个艰难的,挑战性的过程
- 第一次真正意义上的用VC++实现的一个完整的Win32程序-俄罗斯方块
- VB 实现大文件的分割与恢复,引用 ADODB.Stream 提供一个过程代码
- 用string实现的一个完整的类,包含以下操作:重载运算符 > >,< < ,string模板类,fstream对二进制数据读写
- html dropdownlist 一个完整的javascript类实现