跳到主要内容

博客

思而不学则罔，学而不思则殆

  • 背景：距离上一个人网站的搭建已经七年了，那时候还在上学，如今很多年也没维护，于是如今干脆做个新的，发现一个不错的静态网站生成器Docusaurus ，是基于React的。于是找了个好看的模板，改了改从头搭建一个新的，展示下毕业工作以来完成的项目。
  • 源码地址：https://gitee.com/947790973/docusaurus-site
  • 演示地址：就是本站

效果展示

blog.png

projectdocusaurus阅读需 1 分钟

  • 背景：一直以来前端UI框架被固定形式占据（受限于传统的UI框架），导致视觉疲劳，在开发一些高度自定义的项目时，往往力不从心； 多设备适配的web优秀项目很少，学习和维护成本较高；当项目复杂后，在组件需要调用多个 api 时会变得复杂起来，比如需要管理多个 loading 和 error 状态，这会导致产生非常多的 state 声明，还有请求取消、请求竞态等可能存在的问题也容易被忽略；
  • 功能：登录 JWT认证、注册、首页（分类navBar、banner、slider、特价板块、hot板块、畅销板块）、搜索、二级分类页（分类navBar、banner、slider、特价板块、hot板块、畅销板块）、三级分类页（排序、筛选）、商品详情（购物车）、购物车页、支付页、个人中心、我的订单、我的评论等功能
  • 技术栈：
    • 前端：Nextjs, TailwindCss, TypeScript, Headless UI
    • 后端：Nestjs , TypeScript，mysql redis JWT Redux Docker
  • 演示地址：

展示

1712641542008.png

1712641575281.png

1712641619653.png

projecttsreactnestjsnextjs阅读需 1 分钟

  • 背景：用ts/nestjs对接了下vben的接口，完成了一个权限管理系统，可以作为后台模板项目使用，进行二次开发。
  • 功能：用户管理，角色管理，菜单管理，部门管理，文件上传，定时任务，部门管理，文件上传，定时任务，邮件工具，系统监控，在线用户。
  • 技术栈：
    • 前端：nextjs, TypeScript
    • 后端：Nestjs , TypeScript
    • 后台：vben
    • 数据库：mysql redis
  • 演示地址：school.wangc.site

展示

img

projecttsnestjsnextjsvben阅读需 1 分钟

  • 背景：用ts/nestjs对接了下vben的接口，完成了一个权限管理系统，可以作为后台模板项目使用，进行二次开发。
  • 功能：用户管理，角色管理，菜单管理，部门管理，文件上传，定时任务，部门管理，文件上传，定时任务，邮件工具，系统监控，在线用户。
  • 技术栈：
    • 前端：vue, vite, TypeScript
    • 后端：nestJs , TypeScript
    • 数据库：mysql redis
  • 演示地址： http://vben.wangc.site

展示

1712570715400.png

1712570846175.png

projecttsnestjsvuevben阅读需 1 分钟

  • 背景：随着电子商务、网上购物的迅速发展，师生对在网上缴费及业务办理的需求越来越强烈。同时，针对各高校在收费项目上存在的以上种种问题，迪科远望开发了校园缴费平台，旨在解决高校在缴费方面存在的各种问题，减轻学校财务管理人员工作量，方便校内外各类缴费人员。
  • 功能：可支持缴纳学费、报名费、住宿费等大额费用；全面支持银行卡支付、银联支付、支付宝支付以及微信支付；可缴纳电费、水费、网费、四六级考试费等小额费用，并可根据学校实际需求增加和扩充支付内容等功能
  • 技术栈：
    • 前端：vue elementui birt
    • 后端：springboot springmvc springdatajpa springcloud
    • 其他：oracle redis nacos nginx

用户端效果展示

1231412.jpg

管理端效果展示

1711364093361.png

1414.png

projectvuespringbootspringcloud阅读需 1 分钟

  • 背景：正所谓「无监控，不运维」，监控如同切脉诊断，是技术人员先于用户发现问题的最佳手段。完善的监控系统能够引导技术人员快速定位问题并解决。
  • 功能：主要包括运维数据监控、报警和报表。监控对象包括：服务器（linux/windows），终端（POS机/水控等设备），应用（Tomcat/Springboot等服务），业务（消费/充值等数据）、数据库（MySql/Oralce等）、三方插件（Redis/Nginx等中间件）。
  • 技术栈：
    • 前端：uniapp vue echarts grafana
    • 后端：java springboot springmvc springdatajpa javaagent
    • 数据库：mysql oracle prometheus elasticsearch
    • 中间件： nginx fink zookeeper kafka

移动端展示

1711353101315.png

Web端展示

大屏

monnio.png

后台管理系统展示

12341324.png

1675332147813.png

  • 背景：业务流程按照预先定义的流程进行执行，实现了系统的流程由工作流引擎进行管理，减少业务系统由于流程变更进行系统升级改造的工作量，从而提高系统的健壮性，同时也减少了系统开发维护成本。
  • 功能：在线流程设计器、在线流程表单设计器、单节点配置表单、多实例会签任务、任务节点配置任务/执行监听器、动态配置任务候选人等功能
  • 技术栈：
    • 前端：vue elementui uniapp
    • 后端：java springboot springmvc mybatis springsecurity
    • 其他：mysql redis jwt flowable

管理端效果展示

1711357900677.png

1975c80aa85b3d8469f5847264981cf.jpg

3e4598c085fd0f2c253817bfaceb89a.jpg

移动端效果展示

1231.png

projectvueelementuiflowablejavaspringboot阅读需 1 分钟

  • 功能：
    • 支付渠道：支持三方支付（微信，支付宝，云闪付），银行（中国交通银行，中国工商银行，中国建设银行，中国农业银行等）
    • 支付类型：付款码支付，扫码支付，H5支付，小程序支付，免密支付，APP支付，微信还有JSAPI支付
    • 业务接口：下单，订单查询，退款，退款查询，对账，支付结果通知，订单关闭，签约解约接口等
  • 技术栈：
    • 前端：vue elementui uniapp
    • 后端：springboot springmvc mybatis springsecurity
    • 其他：mysql redis nacos

管理端效果展示

pay-pc.png

1243.png

移动端效果展示

1241324.png

projectvueelementuiuniappspringboot阅读需 1 分钟