作品集

移动端/H5

王者荣耀官网

• 说明

  这是我练习移动端网站开发的demo项目，只做了首页、新闻详情页、英雄详情页，前端页面展示内容可在后台进行配置

• 技术栈

  1. 移动端开发（rem适配）
  2. vue.js
  3. node.js
  4. express
  5. mongodb

• 项目组成

  1. 前端网站（web）
  2. 简易后台管理系统（admin）
  3. 服务端（server）

• 技术点

  1. 首屏加载优化
     • webpack-bundle-analyzer分析打包大小
     • ui组件按需引用
     • 路由改成懒加载方式引入
     • cdn优化，vue全家桶和一些不常变动的库走cdn，图片因为没钱所以没走cdn，将就一下吧
     • nginx开启gzip（这个最重要！）
  2. 移动端适配
  3. 自定义小型样式库，类似bootstrap
  4. 首页轮播图，新版本vue-awesome-swiper的坑很多
  5. vue组件模块封装
  6. 富文本编辑器
  7. 遵循H5 CSS3最新规范

• 演示：https://moba.liang2uv.top/

• 源码：https://github.com/Liang2uv/NODE-VUE-MOBA

页面布局

数据可视化大屏

• 说明

  这是我在工作的项目做的一个后台管理系统大屏，demo数据均为假数据，不涉及实际项目。

• 技术点

  1. 数据可视化
  2. html、css、js
  3. echarts应用
  4. echarts地图插件

• 演示：https://www.liang2uv.top/wave-blockchain/

• 源码：https://github.com/Liang2uv/wave-blockchain

炫酷登录页

• 说明

  这是我初学前端时做的页面，涉及技术：html、css、js、less

• 技术点

  1. 遵循H5 CSS3最新规范，语义化开发
  2. iconfont图标字体
  3. less预处理器
  4. 良好的代码规范

• 演示：https://www.liang2uv.top/demo-login/

• 源码：https://github.com/Liang2uv/demo-login

小程序开发

实习交流管理平台

• 说明

  这是我的毕业设计作品，现在已开源，界面不是很好看，但是功能已全部实现，做毕设的小伙伴可以参考一下，顺便点个 ⭐️ 吧

• 技术栈

  1. 微信小程序开发
  2. vue.js
  3. node.js
  4. express
  5. mongodbww
  6. ColorUI

• 技术点

  1. 小程序开发
  2. 基于JWT的Token登录验证 + 小程序登录验证
  3. 基于角色的权限控制
  4. 文件上传下载（腾讯云COS对象存储）
  5. 小程序地图map的实现
  6. 小程序部署上线
  7. 良好的项目结构组织和编写代码规范

• 演示

  测试账号：13768131080
  密码：123456
  ⚠cos已过期，所以小程序内的所有图片无法显示，后期考虑不维护此项目
  

• 源码：https://github.com/Liang2uv/bs_practice