自用,一个单词学习辅助网站,主要功能就是管理单词,然后可以抽选其中一部分单词出来生成默写格式,有中译英和英译中两种模式。单词的释义由后端自动获取,内置了几个翻译接口,支持扩展配置。
Node 版本:v14.21.3
Vue 2
项目基于前后端分离,但人不分离架构,不是专业的,如果觉得代码风格不适以你为准。
后端看这,前端基于 Vue2 + Vuetify2 + ElementUI + Axios, 同时用了两个UI框架,90%的UI都是使用的Vuetify2,只有在表格等极少数地方用了 ElementUI ,主要是觉得 Element 的表格比较好用。
简单介绍一下项目结构:
components
中存放的是自定义的组件。
其中dialog
、loading
、snackBar
、tableLoading
为全局组件,
分别为 全局弹窗
、全屏加载条
、提示条
、表格加载条
,均基于Vuetify进行二次封装,
我写过 一篇博客
记录了学习过程。
项目中的所有网络请求均放在了 network
文件夹下,其中 request.js
为请求模板文件。
details
文件夹下才是具体的请求,details
下我主要是以一个Controller或者一个模块进行命名,然后相关的请求全部放在下面。
当有需要使用的使用,直接import
对应的js然后像函数一样调用即可,这样比较方便管理接口,不会出现请求在代码中这一块那一块难找的情况,对复用性也很好的支持。
在 request.js
对后台接口进行配置,可以同时配置开发路径和部署路径,会根据环境自动切换
在package.json
中,运行build:version
命令,将会自动生成版本号(version.js)然后在主界面的左下角会显示版本号。