首页分享 web前端开发项目案例

web前端开发项目案例

来源：花匠小妙招时间：2024-12-07 19:21

web前端开发 web前端开发

项目职责：2019.3---2019.4 这个项目为电商后台管理系统，有商品管理，订单管理，销售记录，店铺管理，账号管理，权限管理，会员管理，积分设置，优惠券管理等模块，我主要负责模块开发有优惠券管理的，积分设置，权限管理、会员管理对数据CRUD的功能。 1. 使用axios 进行前后台交互， 2. 使用了 elementUl 快速搭建页面； 3. 对公用的部分进行了简单的封装，简化代码，方便后续管理；使用了 localStroage 存储用户信息； 4. 使用了日期选择组件，获取时间使用dayjs进行时间格式转换； 5. 利用了vue实例的生命周期中的钩子函数 mounted时组件加载完毕后再进行部分数据的处理；

查看详情

web前端开发 web前端开发

项目职责：2019.5---2019.7 此小程序,为用户提供,在线购买,蛋糕,面包等等在线购物商品服务,并且提供配送服务. 主要模块: 首页、分类、购物车、我的、商品详情、商品列表、支付模块； 1.根据设计图，使用flex布局进行页面搭建和vw、rpx进行自适应； 2.使用Swipe组件进行首页轮播图的搭建； 3.使用Promise对uni.request请求的封装，同时使用async await让异步转为同步，优化代码，避免地狱回调； 4.在商品列表页面通过触底事件和上拉事件，实现下拉刷新和上滑加载； 5.对于商品的收藏、添加购物车、购物车页面、我的页面的操作进行是否登录判断，已登录则可以操作，如果没有登录，则需要先去登录； 6.使用uni.setStorageSync进行token、购物车数据的保存； 7.在computed中封装获取总金额、总数量； 8.实现支付流程: 创建订单、预支付、发起微信支付、查询订单； 9.使用uni.requestPayment实现微信支付功能； 10.每次在发送网络请求时利uni.showLoading添加loading效果，提高用户体验；米旗商城后台管理系统（pc端）

查看详情

web前端开发 web前端开发

项目职责：2019.8---2019.10 项目介绍: 阿芙官方商城是一个微信商城小程序，整个项目使用了uniapp结合uview 进行开发，主要包括首页、商品分类、商品详情、个人中心、购物车，订单列表 1．分类页面的布局及数据渲染和点击左侧分类实现右侧商品对应的展示 2．利用swiper 组件实现商品详情页的轮播图，和轮播图放大预览的功能 3．使用微信小程序原生组件实现转发和联系客服功能 4．个人页面验证token 判断用户是否登录，调用微信小程序原生API获取用户信息 5．使用uview 框架的组件完成个人中心页面 6. 实现订单列表页面订单状态的处理 7．完成个人页面和订单列表页面对应的跳转米旗商城(小程序)

查看详情

web前端开发 web前端开发

项目职责：2020.4---2020.7 项目描述: 该项目是可以查阅搜索各类新闻文章的综合性资讯网站，能够提供用户了解掌握各类新闻的最新资讯使用技术: vue.js＋vue-cli＋vue-router＋vuex + axios＋element-ui 功能: 登录页，首页，新闻详情页，评论页，个人中心页，设置页。主要负责: 登录页，首页，新闻详情页，评论页。主要职责: 1.根据ui提供的设计图，使用vant—ui组件完成页面的布局。 2.使用vue—cli脚手架搭建，实现组件模块化，对页面中大量重复出现的部分封装公共组件，实现按需加载。 3. 注册和登录模块，使用本地存储token以及登录信息达到数据持久化的目的。 4.使用Vue—router导航守卫路由拦截（只有通过登录页进入并通过效验才能进入以及解决了token登录的问题，保证了安全性）。 5.个人中心页面，使用formData将所有表单元素的name与value组成一个queryString提交到后台，然后通过请求ajax请求更新个人信息口头条的首页的功能。 6.为了挺高用户体验，使用vantUI组件中下拉刷新组件和List列表的上拉组件,实现了上拉加载更多的交互功能。 7.评论模块,使用递归组件来实现评论的回复层级次序。阿芙官方商城（小程序）

查看详情

web前端开发 web前端开发

项目职责：2020.8---2020.10 项目描述: 看点咨询是为用户推出的广泛资讯类的后台管理系统，主要有登录模块，用户模块、文章管理模块（文章发布，文章修改，文章列表），栏目管理等模块责任描述: 主要负责: 登录模块、用户模块、文章管理模块、栏目管理、评论管理。技术描述: 1．技术的使用 vue＋vue-cli＋vue-router＋axios＋element-ui＋less， 2．使用vue—cli手脚架搭建，实现组件模块化，对页面中大量重复出现的部分封装公用模块，按需加载； 3．使用 elementUI 进行页面的静态布局与功能实现； 4．使用axios 向后台发送请求获取数据并进行页面动态渲染； 5．使用token 实现状态保持，添加axios 拦截器，解决 axios 请求无token时的报错问题。 6. 使用 vue2Editor富文本编辑插件,实现文章的编辑内容。 7. 使用Element的pagination 组件实现文章列表的分页。 8. 封装图片上传组件,实现图片上传的功能。夜读咨询(h5)

查看详情

web前端开发 web前端开发

项目职责：2020.11---2021.2 提供员工管理的后台系统，用户登录，首页加载模块，公司的组织架构模块，公司设置，员工的模块以及人员 Excel 表格的导入导出，角色权限的管理，考勤与工资模块; 使用技术: vue.js＋vue-cli＋vue-router＋vuex + axios＋element-ui；负责的模块为: 登录模块，员工模块,组织架构以及角色权限管理模块；工作职责: 1.使用vue—router 完成路由跳转； 2.使用vuex存储token,且保存在localStorage中，达到数据共享和方便下次请求携带目的； 3.使用axios的请求拦截器，响应拦截器来设置一些公共的操作； 4.根据功能处理业务逻辑，通过axios 发送异步请求，配合 async＋await 实现数据交互，渲染页面； 5.使用axios 发送请求，完成员工模块的CRUD等功能； 6.使用js—xlsx插件进行excel 员工的导入导出； 7.使用路由守卫,拦截用户的访问； 8.使用RBAC权限管理设计模式,实现角色权限分配功能； 9.退出登录删除vuex和本地存储的token； 10.封装函数对数据进行树形化处理； 11.进行element-tree组件的封装实现代码的复用；夜读咨询后台管理系统(PC)

查看详情

web前端开发 web前端开发

项目职责：2021.5---2021.7 项目描述: 该项目是可以查阅搜索各类新闻文章的综合性资讯网站，能够提供用户了解掌握各类新闻的最新资讯功能: 登录页，首页，新闻详情页，评论页，个人中心页，设置页责任描述: 主要负责: 登录页，首页，新闻详情页，评论页，个人中心页，设置页主要职责: 根据ui提供的设计图，使用vant—ui插件完成页面的布局口使用vue—cli脚手架搭建，实现组件模块化，对页面中大量重复出现的部分封装公共组件，按需加载主要负责注册登录模块，使用到的只是有表单验证，本地token以及登录信息 Vue—router导航守卫路由拦截只有通过登录页进入并通过效验才能进入以及解决了token登录的问题，保证了安全性口个人中心页面，使用formData将所有表单元素的name与value组成一个queryString提交到后台，然后通过请求ajax请求更新个人信息口头条的首页的功能。使用vant—ui中的无限加载来实现浏览时下拉刷新文章的详情页，以及使用递归组件来实现评论的回复惠来人力资源管理系统(PC)

查看详情

web前端开发 web前端开发

项目职责：2021.7---2021.9 项目描述: 主要是做一个商城类的移动端网站，主要负责实现登录和购物车功能；主要技术: react、react-thunk、axios、ts、antd-mobile；项目职责: 1．使用vite 构建react-ts项目，做基于react的工程化开发； 2．采用rem＋百分比做移动端适配，编写静态资源； 3.根据功能设计拆分组件，设计组件关系； 4.用axios实现和服务器数据接口交互； 5.用localstorage保存重要数据，避免请求重复数据，减少网络请求，优化性能； 6.使用antd-mobile组件库完成轮播图、图片懒加载、下拉刷新、上拉加载更多等效果； 7.使用react-virtualized虚拟列表技术实现商品列表数据渲染； 8.使用lazy方法进行路由的懒加载,避免出现白屏现象,优化用户的体验；晨间快讯(移动端)

查看详情

前端开发

项目职责：2021.10---2021.12 是一款全品类的电商购物网站，用户可在线购买商品，加入购物车，下单等操作主要模块: 包括首页、分类、商品详情、登录、购物车、结算以及支付页面、个人中心页,订单等模块。技术: Vue3+VueUse+VueRouter+Axios+Vuex+less+esLint 项目责任: 主要负责: 登录模块,购物车,结算,支付模块,封装面包屑,城市级联选择,骨架屏组件。 1.使用H5C3注册登录、购物车模块的页面搭建。 2.使用v-model收集用户的数据,并且使用自定义正则规则进行表单数据的校验功能。 3.使用vuex对数据进行集中管理，购物车与用户信息使用vuex的persistedstate插件进行数据持久化，可省去自行存储的环节。 4.使用vue.render来封装Message消息提示框组件。 5.使用原生js数组的能力,(filter,reduce)实现有效商品数据筛选,总价计算。 6.利用@vueuse/core中的函数来监听可视区域，实现懒加载。 7.利用@vueuse/core中的useIntervalFn函数二次封装实现,倒计时的功能。 8.使用vue—router进行嵌套路由,实现多级路由。 9.使用css3配合动画实现骨架屏封装以及使用提示组件,提高用户体验。捧茶网(移动端)

查看详情

移动e企商户助手（b端）

项目职责：2022.4---2023.2 此项目是一个商户端的小程序，为商户网上开店，门店模板定制，支付进件，流水记账为一体化的小程序。此小程序，是使用uni.app vue技术框迭代开发的项目，里面的功能是非常强大的。主要的功能模块，登录模块，会员充值，快速收款，流水，点餐（使用webView嵌入h5，点餐模块中，有催单，退菜，修改金额等等功能），门店订单（包括店内订单，外卖，自取），菜品管理（包括单位管理，规格管理，做法管理，加料管理，分类管理，新建菜品，商品上下架，编辑，删除等功能）等模块。 1. 封装图片上传的组件，完成新建菜品和新建套餐的图片上传功能。 2. 使用eventChannel.emit()配合this.getOpenerChannel()以及eventChannel.on()的方式跨页面传递参数。 3. 使用小程序的扫码功能，返回的扫码后的结果数据串，配合后端接口，完成b扫c的支付功能。 4. 使用webSocket，完成前后端的及时通信，实现及时打印小票的功能。 5. 使用uview ui框架配合原生js，完成点餐中的各种交互，以及流程处理，实现点餐功能。 6. 使用本地存储的功能，实现点餐h5页面，商品数据数据传输。 7. 使用小程序的本地存储的功能，实现登录模块中的记住密码和自动登录的功能。研发部商户后台

查看详情

研发

项目职责：此项目是商户端小程序的系统后台管理系统，主要方便商户，统一管理。此项目是商户小程序的配套系统，主要的功能模块，登录，菜品管理，门店管理，门店权限管理，门店装修（c端），流水账单，交班，营业报表，商城管理，会员管理等等模块。技术栈: vue2，elementui，axios 1. 使用elementui搭配vue2实现，实现页面中各种，页面布局和功能交互。 2. 使用原生js的数组方法，处理新建和编辑菜品中的复杂的逻辑结构，以实现对应的功能开发。 3. 使用qrcode.js配合后端数据生成，对应的员工收款码。 4. 使用elementui中，el-form表单组件，收集用户操作的数据，完成商城设置中扫码点餐功能的开发。 5. 使用原生html，windown.href搭配后端数据返回的对应路径，完成对应的餐桌二维码下载功能。 6. 使用echart图表插件，实现经营报表的大屏数据展示。 7. 使用cropper.js图片裁切插件，在上传图片时，按照对应尺寸规格，完成对应的图片裁切功能。 8. 按照不同的功能模块封装对应的模块api，避免api接口调用混乱问题，方便项目后期的维护。研发部机构后台

查看详情

研发

项目职责：此项目是，商户后台的配套项目。机构后台，就广东来说，每一个地市可以是一个机构，对应的每一个机构，可以创建多个门店，并且可以为每个机构配置不同的权限的多权化系统。技术栈: vue2，elementui，axios，vueEditor，cropper，vue-json-excel 1. 使用权限设计模式的RBAC设计模式，权限和角色绑定，角色和用户管理关联，用户拥有对应的角色，那么用户就拥有对应的权限。 2. 使用eleementui和vueEdit富文本，实现用户信息的收集和展示。 3. 使用cropper插件，按照不同场景不同尺寸规格的图片进行裁切功能。 4. 使用vue-json-excel插件，实现各页面表格数据的导出功能。研发 h5推荐前台

查看详情

研发

项目职责：此项目是，是针对不同的客户，推荐不同的套餐平台。技术栈: 原生js，jquery，html2canvas，layui。 1. 使用flex盒子技术，完成页面的布局。 2. 使用layui，jquery实现页面交互和前后端的数据交互。 3. 使用html2canvas将页面html转化成图片，用于用户保存图片。研发部 h5推荐后台系统

查看详情

研发

项目职责：此项目是，为h5推荐后台提供服务的，系统后台。此项目是使用vue3，vue-router，pinia，axios，elementPlus，md5。 1. 使用vite 脚手架，搭建项目。 2. 使用axios的请求拦截器，对访问的接口，使用md5算法对请求的参数进行统一加密处理。 3. 把登录时，请求后端接口返回的token，保存到本地，在axios的请求拦截器，统一添加上token，方便后期维护以及接口的使用。 4. 使用动态添加路由的方式与pinia并用，实现系统的权限控制功能。 5. 对于elementPlus的图片上传组件进行二次封装（进行图片上传时，数据加密），以实现组件的复用，减少代码的冗余。研发部乐乐淘商家管理系统(PC)

查看详情