目录介绍

  • cache 缓存层
    • 一致寄存缓存的完成类
  • config 装备层
    • controller只做简略的调用,不做详细的逻辑完成
  • controller 控制器
  • service 服务层 – impl 完成层
  • validate Dto层
  • vo Vo层
    • 担任回来前端规定的字段格式
  • resources 资源目录
  • common 公共类库
  • core 中心目录
  • entity 实体目录
  • exception 反常目录
  • mapper Mapper
  • plugin 扩展插件
  • utils 目录
    • ArithUtil : 算术运算东西
    • ListUtil : 列表数组东西
    • MapUtil : Map对象东西
    • ConfigUtil : 装备管理东西
    • HttpUtil : Http恳求东西
    • IpUtil : Ip获取东西
    • RedisUtil : Redis东西
    • RequestUtil : 恳求信息东西
    • SpringUtil : Spring容器东西
    • TimeUtil : 时刻日期东西
    • ToolsUtil : 通用东西类
    • UrlUtil : 资源途径处理东西
    • YmlUtil : application装备获取东西
  • validator 自定验证器
    • 担任恳求参数的处理和对参数的校验

IDEA注释

敞开IDEA的目录注释,增加源码的阅读功率treeinfotip
装置操作: File -> Settings -> Plugins -> Marketplace

Swagger3装备

  • swagger默许是敞开状态, 假如你需求封闭能够在application.yml中进行装备
  • 留意: 在出产环境中, 最好把swagger封闭
  • 拜访地址: http://localhost:8080/swagger-ui/index.html
  • PS: 地址中的 http://localhost:8080 改成你自己的项目地址

调配前端项目

编辑器引荐运用Visual Studio Code，编辑器插件引荐装置ESLintopen in new window、Prettier ESLintopen in new window、Tailwind CSS IntelliSenseopen in new window、Vue Language Features (Volar)open in new window、TypeScript Vue Plugin (Volar)open in new window

项目标准

运用eslint去检查代码标准，运用prettier去格式化代码

编辑器主动校验

运用vscode进行开发，调配vscode的一些插件，完成主动修正一些过错，一起项目中也自带了vscode的一些装备，在 .vscode/setting.json 文件中。

手动校验代码

执行命令：

yarn lint
// 假如没装置yarn，运用npm run lint

环境变量

变量命名规矩：需求以VITE_为前缀的
怎么运用：import.meta.env.VITE_

系统装备项

途径：src/config/index.ts，阐明如下：

const config = {
    terminal: 1, //终端
    title: '后台管理系统', //网站默许标题
    version: '1.2.1', //版本号
    baseUrl: `${import.meta.env.VITE_APP_BASE_URL}/`, //恳求接口域名
    urlPrefix: 'adminapi', //恳求默许前缀
    timeout: 10 * 1000 //恳求超时时长
}

题装备项

修正系统默许的主题 途径：src/config/setting.ts，阐明如下：

const defaultSetting = {
    sideWidth: 200, //侧边栏宽度
    sideTheme: 'light', //侧边栏主题
    sideDarkColor: '#1d2124', //侧边栏深色主题色彩
    theme: '#4A5DFF', //主题色
    successTheme: '#67c23a', //成功主题色
    warningTheme: '#e6a23c', //正告主题色
    dangerTheme: '#f56c6c', //风险主题色
    errorTheme: '#f56c6c', //过错主题色
    infoTheme: '#909399' //信息主题色
}
//以上各种主题色分别对应element-plus的几种行为主题

路由

目前路由分为两部分，一部分是静态路由：src/router/routes.ts，一部分是动态路由：在系统中的菜单中增加。

Vue 路由懒加载是一种技能，它能够让咱们按需加载 Vue 应用程序的路由组件，而不是一次性加载一切的路由组件。这能够显著提高应用程序的性能和响应速度。

在 Vue 中，路由懒加载一般运用 import 句子来完成。详细来说，咱们能够将路由组件界说为一个函数，当需求加载该组件时，咱们调用该函数来获取组件的界说。例如，在 vue-router 中，咱们能够运用 component: () => import('@/views/Home.vue') 的方法来完成懒加载。

以下是一个示例路由装备，其间运用了路由懒加载：

{
  path: '/home',
  name: 'Home',
  component: () => import('@/views/Home.vue')
}

需求留意的是，因为路由懒加载运用了动态导入（Dynamic Imports）功能，因而需求保证你的项目支撑 ES6 模块化，而且需求运用 webpack 进行打包构建。

路由装备阐明

path: '/path'                      // 路由途径
name:'router-name'                 // 设定路由的姓名
meta : {
    title: 'title'                  // 设置该路由在侧边栏的姓名
    icon: 'icon-name'                // 设置该路由的图标
    activeMenu: '/system/user'      // 当路由设置了该属性，则会高亮相对应的侧边栏。
    query: '{"id": 1}'             // 拜访路由的默许传递参数
    hidden: true                   // 当设置 true 的时分该路由不会在侧边栏呈现 
    hideTab: true                   //当设置 true 的时分该路由不会在多标签tab栏呈现
}
component: () => import('@/views/user/setting.vue')  // 路由组件

meta装备ts扩展

import 'vue-router'
declare module 'vue-router' {
    // 扩展 RouteMeta
    interface RouteMeta {
        title?: string
        icon?: string
        hidden?: boolean
        activeMenu?: string
        hideTab?: boolean
    }
}

组件注册

运用了插件unplugin-auto-importopen in new window、unplugin-vue-componentsopen in new window、vite-plugin-style-importopen in new window
写在components中的组件和element-plus的组件都是主动且按需引进的，不需求在组件中注册

样式

运用scssopen in new window作为预处理言语，一起也运用了tailwindcssopen in new window

├──styles
│  ├── dark.css       # 深色形式下的css变量
│  ├── element.scss   # 修正element-plus组件的样式
│  ├── index.scss     # 入口
│  ├── tailwind.css   # 引进tailwindcss样式表
│  ├── var.css        # css变量

tailwindcss

详细运用阐明详见tailwindcss.com/open in new…
在vscode中装置插件Tailwind CSS IntelliSenseopen in new window，能够得到提示，假如没有提示呈现，就按空格键

漆黑主题

漆黑形式的原理是运用css变量和在html标签增加class="dark"完成

<style scoped>
.example {
    background-color: var(--el-bg-color-page);
    color: var(--el-text-color-regular);
}
</style>

留意

apple M系列芯片在uniapp下编译的报错处理：在node_modules下仿制粘贴esbuild-darwin-arm64一份，重命名为esbuild-darwin-64

路由

页面装备

怎么装备请参阅uniapp pages.json 页面路由open in new window，此外系统也对其进行了扩展，如下：

    ...
    {
        "path": "",
        "style": {
            "navigationBarTitleText": "个人设置"
        },
        // 扩展项
        "auth": true 
        // 用于页面跳转阻拦，auth为true则代表页面需求登陆才干检查
        // 为false则不需求登陆
    },
    ...

由阻拦

路由阻拦的原理是经过uni.addInterceptor对uni.navigateTo、uni.redirectTo、uni.reLaunch、uni.switchTab等进行阻拦，因而有必要运用api方式的跳转才干被阻拦到

uni.addInterceptor文档详见uniapp阻拦器open in new window
路由跳转api文档详见uniapp页面和路由open in new window

留意

阻拦uni.switchTab本身没有问题。可是在微信小程序端点击tabbar的底层逻辑并不是触发uni.switchTab。所以误认为阻拦无效，此类场景的解决方案是在tabbar页面的页面生命周期onShow中处理。

组件注册

坐落uniapp/src/components中的组件无需注册，不过需求遵从uniapp easycom规矩，需契合components/组件称号/组件称号.vue目录结构，也能够自界说规矩，详见文档uniapp easycom文档

easycom

HBuilderX 2.5.5起支撑easycom组件形式。

传统vue组件，需求装置、引证、注册，三个步骤后才干运用组件。easycom将其精简为一步。 只要组件装置在项目根目录或uni_modules的components目录下，并契合components/组件称号/组件称号.vue或uni_modules/插件ID/components/组件称号/组件称号.vue目录结构。就能够不用引证、注册，直接在页面中运用。 如下：

<template>
	<view class="container">
		<uni-list>
			<uni-list-item title="榜首行"></uni-list-item>
			<uni-list-item title="第二行"></uni-list-item>
		</uni-list>
	</view>
</template>
<script>
	// 这里不用import引进，也不需求在components内注册uni-list组件。template里就能够直接用
	export default {
		data() {
			return {
			}
		}
	}
</script>

不管components目录下装置了多少组件，easycom打包后会主动剔除没有运用的组件，对组件库的运用尤为友好。

组件库批量装置，随意运用，主动按需打包。以官方的uni-ui为例，在HBuilderX新建项目界面挑选uni-ui项目模板，只需在页面中敲u，拉出很多组件代码块，直接挑选，即可运用。大幅提升开发功率，降低运用门槛。

在uni-app插件商场下载契合components/组件称号/组件称号.vue目录结构的组件，均可直接运用。

easycom是主动敞开的，不需求手动敞开，有需求时能够在pages.json的easycom节点进行个性化设置，如封闭主动扫描，或自界说扫描匹配组件的策略。设置参数如下：

属性 类型 默许值 描绘
autoscan Boolean true 是否敞开主动扫描，敞开后将会主动扫描契合components/组件称号/组件称号.vue目录结构的组件
custom Object – 以正则方法自界说组件匹配规矩。假如autoscan不能满意需求，能够运用custom自界说匹配规矩

自界说easycom装备的示例

假如需求匹配node_modules内的vue文件，需求运用packageName/path/to/vue-file-$1.vue方式的匹配规矩，其间packageName为装置的包名，/path/to/vue-file-$1.vue为vue文件在包内的途径。

"easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
    "^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
  }
}

仿制代码

阐明

  • easycom方法引进的组件无需在页面内import，也不需求在components内声明，即可在恣意页面运用
  • easycom方法引进组件不是全局引进，而是局部引进。例如在H5端只要加载相应页面才会加载运用的组件
  • 在组件名完全一致的状况下，easycom引进的优先级低于手动引进（区分连字符方式与驼峰方式）
  • 考虑到编译速度，直接在pages.json内修正easycom不会触发从头编译，需求改动页面内容触发。
  • easycom只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）。不处理后缀为.nvue的组件。但vue组件也能够全端运行，包括小程序和app-nvue。能够参阅uni ui，运用vue后缀，一起兼容nvue页面。
  • nvue页面里引证.vue后缀的组件，会按照nvue方法运用原生渲染，其间不支撑的css会被疏忽掉。这种状况同样支撑easycom

运用vue插件

下面以pinia为比如： 在src/plugins/modules下面新建一个文件pinia.ts

// pinia.ts 
import { App } from 'vue'
import { createPinia } from 'pinia'
const pinia = createPinia()
export default (app: App) => {
    app.use(pinia)
}

这样就完成了插件的注册，不需求将文件引进到main.ts

HbuildX装置插件Tailwind CSS言语服务open in new window，点击链接前往插件

分包主张

因为小程序有体积和资源加载限制，因而尽量保证每个包的巨细小于2M，微信小程序支撑总体积一共不能超过20M，因而多分几个包也无所谓，还有主包包括了公共代码，因而尽量将新的页面写到分包里去。 怎么分包及更多细节请见文档uniapp subpackages

在Uniapp中，能够经过装备manifest.json文件来完成分包。详细步骤如下：

  1. 在项目根目录下创立一个名为subpackages的文件夹。
  2. 在subpackages文件夹中创立一个子包，例如叫做testPackage。
  3. 在testPackage文件夹中创立页面或组件，并在manifest.json文件中进行装备。

示例代码如下：

{
  "subPackages": [
    {
      "root": "subpackages/testPackage",
      "pages": [
        "pages/testA",
        "pages/testB"
      ]
    }
  ]
}

上面的代码表示将testPackage作为一个子包，其间包括了两个页面testA和testB。在这个示例中，咱们将testPackage放在了subpackages文件夹中，可是这并不是有必要的，你也能够将它放在任何一个适宜的方位。

需求留意的是，一个页面只能属于一个子包，而不能一起存在于多个子包中。

除了上述装备方法外，还能够经过代码动态加载子包。详细方法请参阅Uniapp官方文档中的相关章节。

在Uniapp中，分包打包和上传小程序能够参阅以下步骤：

  1. 在manifest.json文件中装备好子包以及子包所包括的页面或组件。
  2. 进入命令行东西，运用命令npm run build进行打包。在打包时，会根据manifest.json文件中的装备将代码分为主包和子包。
  3. 打包完成后，在项目目录下会生成一个dist文件夹，里面包括了主包和子包的一切代码。
  4. 登录微信公众平台，进入小程序管理后台，点击“开发”->“开发设置”->“上传代码”，挑选刚才生成的dist文件夹。
  5. 在上传代码的界面中，需求填写版本号以及版本描绘等信息。一起，假如存在分包，则还需求在“分包预览图”中上传子包的预览图。
  6. 点击“上传”，等候上传完成后即可提交审阅。

需求留意的是，微信小程序关于总体积有必定限制，因而在分包时需求留意控制每个包的巨细，防止超过限制。一起，在上传代码时也需求留意填写正确的版本号和版本描绘，以便审阅人员能够快速了解到本次更新的内容。

联络作者vx：xiaoda0423

仓库地址：github.com/webVueBlog/…