1. 后端与前端进行通信
Axios(前端 HTTP 请求库):React/Vue/UniApp 可以通过 Axios 或 Fetch 来请求后端 API。
后端返回的数据一般是 JSON 格式,前端通过解析 JSON 来获取数据。
2. Web服务器
Nginx 或 Apache:通常用于反向代理、负载均衡和静态资源托管。
Node.js(针对 JavaScript 生态的后端开发):可以用来搭建服务端,比如使用 Express 或 Koa 框架。
Java(Spring Boot 等)或 Python(Django, Flask)等:在更复杂的企业级应用中可能会使用到。
3. 身份认证与授权
JWT(JSON Web Token):一种常用的无状态认证机制,通常用于前后端分离的项目中。
OAuth 2.0:一种授权框架,通常用于第三方登录(如 Google 登录、微信登录等)。
Session/Cookie:传统的基于服务器的认证方式,后端会存储会话状态。
4. 文件上传和存储
本地存储:如服务器文件系统。
云存储服务:如 AWS S3、Aliyun OSS、腾讯云 COS 等,方便处理大规模文件存储和 CDN 分发。
5. 跨域处理(CORS)
CORS(Cross-Origin Resource Sharing):前后端分离架构下,前端可能和后端部署在不同的域名或端口上,需要设置跨域资源共享来允许跨域请求。
6. 实时通信
WebSocket:一个全双工通信协议,适用于实时数据交换。
7.对项目进行上传并发布(小程序除外)
vivitian商店后台管理系统(pc端) 前端工程师
2023.01-2023.06
vivitian商店后台管理系统为公司进行商品销售的数据记录,进行销售商品的添加上架管理、商城的推广运营配置、商品优 惠
券管理、用户下单后的订单评论管理等。
开发技术:vue3+Element-plus+ Lodash+css3+h5
项目技术:
1.使用 Vue3+Element 搭建项目框架环境;
2.使用 Axios 并且封装成方法,添加请求和响应拦截器;
3.使用自定义指令根据用户所拥有的权限进行权限按钮的管理;
4.使用路由钩子函数检验用户登录状态,没有 token 跳转到登录页面;
5.部分功能按钮采用 Lodash 的防抖函数进行优化;
6.使用 keep-alive 对组件进行缓存,提高用户的体验感;
7.在 axios 的响应拦截器中根据返回的状态码实现令牌的无痛刷新;
8.使用 tinymce 实现添加商品详情的富文本编辑器;
vivitian线上商店(小程序) 前端工程师
2022.12-2023.01
vivitian线上商店是一款提供在线购买潮流服饰,品牌代理/订货,媒体博主探店,品牌跨界合作的微信小程序。该项目主要分
为首页、分类、购物车、个人中心等模块。
开发技术:微信开发者工具+Vant
项目技术:
1.通过 wx.getUserProfile和 wx.login ,实现用户登录;
2.对微信小程序的 wx.request的 api 进行 promise 风格的二次封装;
3.页面整体布局采用 flex 进行弹性布局,配合 rpx 实现多端响应;
4.使用 wx.requestPayment的 api 实现支付功能;
5.制作纵向选项卡组件实现分类页面;
6. 微信公众平台设置客服账号,使用 wx.connectSocket()与 Socket 服务建立连接,并通过 wx.onSocketOpen() 方法监听 WebSoc
ket 连接成功的事件,再调用 wx.sendSocketMessage() 方法将消息发送给客服。
星界会务(pc端) 前端工程师
该项目是一个一站式全流程会务解决方案,包含会议场地、明星资源、嘉宾出席与会务承办公司等等功能。
开发技术::Vue +vue-router+vuex+axios+element-plus等
项目技术:
1、在配置好对应的路由,并使用 push或 replace 方法跳转到对应的页面
2、根据 ui 还原页面与一些基本的跳转逻辑
2022.10-2022.12
3、使用 axios 封装的异步请求调用后端提供的接口,获取后端返回的数据。并解析、处理数据,并且对后端返回的状态码进行相
应的操作。
4、对一些常用的组件模块进行封装(比如上传图片并裁剪)、复用,实现优化代码。
5、通过调用浏览器提供的 navigator.geolocation.etCurrentPosition 对象来获取用户的位置信息
项目连接:https://www.xingjie360.com
美联英语教学系统(小程序) 前端工程师
2022.08-2022.10
项目描述:美联英语教学管理系统(微信版)是给美联英语教育基于其官方公众号开发的一套在线学习系统,该系统共分五
个功能板块:1.签到,学生可以在不同的时段进行打卡签到,并且可以在日历面板上查看历史签到记录(日历面板是自己写的
插件)。2.单词,学生可以查看单词听写历史记录、易错单词以及在线单词自测。3.阅读,学生可以在手机上在线阅读英文文
章并做相关题目。4.测试,学生可以查看成绩单、常见错题集并且能够进行在线自我测试。5.排行榜,排行榜是以班级为单位
将阅读、单词听写和阶段测试三个部分的完成情况进行展示。另外该系统还有登录、注册及找回密码的功能。
开发技术: 微信开发者工具+Vant
项目技术:
1、运用 css3+vant 编写静态页面,实现页面布局。
2、封装 wx.request 异步请求获取后端返回的 JSON 格式数据。并对数据解析渲染到 WXML。
3、调用百度地图接口实现定位。
4、使用小程序官方提供的日期选择器组件来实现日期选择功能。
5、在 app.json 里面配置 enablePullDownRefresh为 true ,并搭配 onPullDownRefresh 方法来开启该页面的下拉刷新功能,数据更
新之后调用 wx.stopPullDownRefresh() 方法停止下拉刷新
6、用户注册、登录通过正则表达式简单的验证输入格式,再次使用 wx.reque