一、项目名称:云岚培训学生管理系统 项目周期:2023.2-2023.5
项目描述:该网站是的主要业务是管理学生信息,列表分页,可实现增删改查功能,查看学生作业完成情况,通过图表的方式展示数据,使用了地图 API,标记出室外采风地点。同时本项目可以设置管理员权限,通过树形控件进行展示
项目职责:该项目主要负责学生信息、作业列表的展示以及权限管理页面。二次封装 axios,通过设置拦截器配置config.headers 设置 token 值,达到初步的登录验证需求以及后续各种数据请求的初步优化。在列表展示页面,通过 Table 表格展示查找到的人员信息,使用 form 组件对信息进行增删改查,设置 el-pagination 实现分页效果,更直观的展示数据。引入 el-tree 组件,便于简洁设置权限。通过递归调用判断树形数据中是否还有子节点的存在,通过 this 获取然后设置更改。项目整体采用 vuex 来统一控制数据流,采用 vue-router 实现不同组件间的动态跳转。
主要技术:Vue 全家桶、Axios、Icon-font、Element UI、webpack、Echarts 等
二、项目名称:欣阳超市购物平台 项目周期:2022.6 ~ 2022.7
项目描述:该项目为面向用户使用的购物平台,包含登陆,注册,地址管理,订单查询,购物车管理等模块,使用 vue3来完成整个项目的编写,实现了登陆注册的权限验证,主体采用 div+css 布局,用 vue-cli 来进行项目架构,封装 axios 来请求数据,获取后台提供的信息展示到页面上。
项目职责:封装 axios,便于后续请求数据的统一管理。通过路由守卫完成登录页,注册页的登录权限验证,首页中使用 iconfont 提供的图标库美化项目中各个图标,购物车页面通过点击侧边栏来切换不同的购物需求,通过 vuex统一管理购物车数据流,实现代码高度复用,购物车自动计算所选商品的总价,存储到本地 localStorage,并将数据提交到支付页面。封装多个组件及购物车逻辑,实现多页面复用。优化代码,项目可读性,更利于维护。
主要技术:Vue3、vuex、axios、antd、swiper、ajax、iconfont 等