校内资讯是基于东农教务处及官网资讯的移动端展示平台
项目预览地址:point_right: 点我预览 (请在移动端查看)
- 前端页面
- 和一些简单的小动画:blush:
src ├── assets # 项目中的图标目录 ├── components # 组件目录 | ├── detail.vue # 资讯详情页 │ ├── pagination.vue # 主页 │ └── search.vue # 搜索结果页 ├── css | └── main.css # 组件的主要样式表 ├── router | └── index.js # vue-router配置文件 ├── main.js └── App.vue
git clone https://github.com/JserShadow/news-front.git cd news-front npm i npm run dev # 浏览器访问 http://localhost:8080 即可
npm run build
由于官网部分的数据动辄几千条,让它进入页面时一次加载完是不现实的,因此我们选择分批加载数据的方式,就有了以下两种解决方案:
- 无限滚动
- 分页
在校园资讯早期版本我们采用了无限滚动,但是由于用户体验不好,更改为分页式数据呈现。
由于vue-cli监听8080端口,Egg.js监听7001端口,根据同源策略,向后端发送请求成为跨域行为。我们使用Vue中的proxyTable处理跨域问题。
// /config/index.js proxyTable: { '/jwc/*': { // key为需要处理的请求的路由(/*表示它父路由的所有子路由) target: 'http://localhost:7001', changeOrigin: true }, }
- 在生产环境中,由于服务器带宽限制,静态资源加载极慢
- 使用
CDN加速技术可以解决此问题- 使用又拍云的CDN加速服务
- 使用
FileZilla搭建FTP服务器 - 上传静态资源到该服务器
- 修改静态资源路径