考面经小程序
⭐考面经数据总台是考面经小程序的PC端管理系统(包含PC前端、项目后端)
Github:https://github.com/Solar-Rain-Git/practice-pc.git
Online:https://practice.sunrainzc.cn
⭐考面经喽是考面经小程序的小程序主体
1. 项目介绍
1.1 简介
考面经是一款免费IT技术答题刷面经小程序,搭载AI问答,旨在辅助在校生、应届生和正在寻找工作的同学快捷高效掌握面试技术难点和面试答题。
现其中包括JavaScript
、Vue
、React
、TypeScript
、计算机网络
、Git
、性能优化
等多个分类的技术答题和技术面经内容。
主要分为PC管理端、微信小程序端
(本人也在找工作刷面经,由感而发自研了考面经,研发自己产品的同时也作为学习使用,哈哈哈哈🤣🤣🤣)
1.2 功能:
1.21 PC端:
👨🎓用户系统管理:
- 用户邮箱注册、账户/邮箱登录
- 用户忘记密码邮箱通过重置
- 用户权限路由访问
- 用户个人中心修改数据
- 管理员用户管理
- 管理员按照更多条件查询用户
- 管理员逻辑删除用户
- 管理员不得修改普通用户信息,只能修改用户状态和用户角色,邮箱通知修改信息
- 管理员不能修改自己的状态和角色,只能修改除状态角色的其他信息
- 管理员不能修改同级管理员的任何信息
- 支持用户头像上传至阿里云OSS对象存储
- 支持邮箱发送相关信息给具体用户
👨🍳答题系统、面经管理:
- 答题、面经搜索
- 分页查询、系统管理
- 查看题目详情(进入刷题页面)
- 标签管理,级联更新答题、面经题库的标签
- 【管理员】管理题目 - 增删改查(比如按照题库查询题目、修改题目所属题库等)
- 【管理员】批量向题库添加答题、面经
- 【管理员】批量从题库移除答题、面经
- 【管理员】批量删除答题、面经
🤖 AI赋能:
- 用户在刷面经时,可联网询问AI当前题目的题解,搭载AI服务,有更佳的使用体验
- 示例图:
1.22 小程序端:
- 考答题
- 具体分类
- 答题模式(自由练习、考试模式)
- 答题结果分析(答题卡、答题对照、答题解析)
- 考面经
- 具体分类
- 分类加载面试题列表
- 点击具体面试题进行考面经(支持上下题检索)
- 官方解析、优质解析
- 登陆注册、忘记密码
- 个人信息修改(头像上传、其他信息)
- 刷题记录(支持点击某题进入详情页)
- 题目收藏(支持点击某题进入详情页)
- 登出 / 清空记录登出
1.3 预览:
1.31 小程序:
1.32 PC端:
2. 业务流程
3. 项目技术
3.1 PC前端:
主要运用阿里 Ant Design 生态:
- HTML + CSS + JavaScript 三件套
- React 开发框架
- React-Markdown
- Mrakdown-Navbar
- Redux
- Ant Design Pro 项目模板
- Ant Design 端组件库
- Umi 开发框架
- Umi Request 请求库
- 正向和反向代理
3.2 小程序:
- uniapp
- vue3
- ts
- vite
- uview-plus
- pinia
- mp-html
3.3 后端:
- 编程语言java
- spring(依赖注入框架,帮助你管理 Java 对象,集成一些其他的内容)
- springboot( 快速启动 / 快速集成项目。不用自己管理 spring 配置,不用自己整合各种框架)
- springmvc(web 框架,提供接口访问、restful接口等能力)
- mybatis(Java 操作数据库的框架,持久层框架,对 jdbc 的封装)
- mybatis-plus(对 mybatis 的增强,不用写 sql 也能实现增删改查)
- Redis
- junit 单元测试库
- mysql 数据库
- Swagger
- 阿里云OSS
- Email邮箱发送配置
3.4 部署
-
阿里云ECS服务器
-
PC前端:Linux、Nginx
-
小程序:项目打包后走小程序平台发布流程
-
后端:docker
4. 项目收获
主要学习到企业性质项目开发流程,从需求分析到技术选型,从开发实施到代码提交审核,从项目部署到发布上线
4.1 前端
- 熟悉 React 框架开发,能够根据业务定制前端模板,比如基于umi封装全局异常处理逻辑、多环境配置等
- 熟悉前端代码规范,并能够使用 ESLint + Prettier + TypeScript + StyleLint 等技术保证前端项目质量。
- 熟悉 Ant Design Pro 框架,以及 Ant Design、Ant Design ProComponents 等组件库的使用
- 能够使用 VS Code、WebStorm IDE 等开发工具快速开发前端项目
- 提升问题解决能力,能够利用 GitHub Issues 区、AI 工具、搜索引擎、Stack Overflow 等自主解决问题
4.2 小程序
- 熟悉了Uniapp跨平台开发的流程和工具,熟悉Uniapp的请求接口和其他Api,比如基于uni.request和uni.uploadfile的全局请求接口封装。
- 熟悉小程序API使用、开发流程、部署上线等操作。
- 熟悉针对uniapp使用 uView Plus 组件库,使我能够快速构建美观且一致的用户界面。
- 熟悉Pinia 与 Vue 3 的集成配合,使得状态的定义和管理更加简单明了,有效减少了状态管理的复杂性。
4.3 后端
- 熟悉 Java 知识(如集合类、异常处理),能熟练运用 Lambda 表达式编程,使用 JUnit 编写单元测试。
- 熟悉 SSM + Spring Boot 开发框架,能够使用 MyBatis Plus + MyBatis X 自动生成基础 CRUD 代码
- 熟悉 MySQL 数据库及库表设计,能够通过创建索引、Explain 分析等方式优化性能
- 熟悉常见业务问题的解决方案:比如正向 / 反向代理、全局跨域解决、多环境问题解决等
- 熟练使用 Git、IDEA、ChatGPT、Navicat 等工具提高开发协作效率
- 熟悉使用阿里云OSS对象存储文件上传配置
- 熟悉第三方邮件发送配置,结合freemarker自定义ftl文件发送邮件给用户
- 熟悉如何自定义全局异常处理器、自定义通用返回数据格式
- 熟使用 Redis 存储用户登录的分布式 Session,实现多机用户登录状态同步
4.4 部署
- 熟悉了云服务器的购买和搭建过程,域名解析等
- 学会了多种项目部署方式:Linux 单机部署、Nginx Web 服务器、Docker 容器、容器托管平台
- 学会
Nginx
配置代理,网关配置跨域代理 - 学会了多种跨域问题的解决方法
- 学会了小程序完整开发上线流程
- 学会前后端分离部署,统一请求后端接口
5. 项目优化
前后端业务代码优化过后,真实企业项目的业务大多优化都是放在后端处理的
以下问题是作为一名前端开发能想到的一些项目优化问题
- 使用 RBAC 权限管理设计,给不同的用户分配不同的权限,实现复杂的权限管理
- 通过 set-cookie 父域名的方式,使得用户 cookie 能够在多个同父域名子系统间共享,实现单点登录(也可以使用 OAuth2、JWT Token 等方式)
- 后端使用 AOP 或者 Filter 实现全局请求拦截器,统一去判断用户权限、统一记录请求日志等
- 后端增加Elasticsearch 搜索引擎、Redis 分布式缓存 + Caffeine 本地缓存
- 增加批量导入导出和Excel导入导出
- 优化小程序页面UI
- 新增需求,优化功能
- 变更小程序主体,接入支付接口,实现盈利
(注:微信限制个人小程序不支持调用支付接口)