Springboot Episode 9: Introduction to Basic Project Functions Takes You to Get Started

Language 2023-03-28 20:26:11 views: null

Catalog introduction

  • cache cache layer
    • The implementation class of unified storage cache
  • config configuration layer
    • The controller only makes simple calls and does not implement specific logic
  • controller controller
  • service service layer- impl implementation layer
  • validate Dto layer
  • vo Vo layer
    • Responsible for returning the field format specified by the front end
  • resources resource directory
  • common public class library
  • core core directory
  • entity entity directory
  • exception exception directory
  • folders Folders
  • plugin extension
  • utils directory
    • ArithUtil : Arithmetic operation tool
    • ListUtil : list array tool
    • MapUtil : Map object tool
    • ConfigUtil : configuration management tool
    • HttpUtil : Http request tool
    • IpUtil : Ip acquisition tool
    • RedisUtil : Redis tools
    • RequestUtil : request information tool
    • SpringUtil : Spring container tools
    • TimeUtil : time date tool
    • ToolsUtil : general utility class
    • UrlUtil : resource path processing tool
    • YmlUtil : application configuration acquisition tool
  • validator custom validator
    • Responsible for processing request parameters and verifying parameters

IDEA comments

Open IDEA's directory comments to increase the reading efficiency of source code  treeinfotip
Installation operation: File -> Settings -> Plugins -> Marketplace

Swagger3 configuration

搭配前端项目

编辑器推荐使用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. 点击“上传”，等待上传完成后即可提交审核。

需要注意的是，微信小程序对于总体积有一定限制，因此在分包时需要注意控制每个包的大小，避免超过限制。同时，在上传代码时也需要注意填写正确的版本号和版本描述，以便审核人员能够快速了解到本次更新的内容。

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

Guess you like

Origin juejin.im/post/7215424335720071228
Recommended
Ranking
SpringBoot-integrate redis
[Sword pointing to offer] Interview question 03: Repeated numbers in an array
Arrangement "Offer Penalty for prove safety" string
Browser prevent the automatic generation of fill and Echo have been saved account solutions
Work hard and never slacken——2022 Yinmai Information Year-End Summary
Install jdk7 on Linux system
App common dependency management tools
EduCoder-Web程序设计基础-html5— 给表单组件添加说明-第1关：label标签相关概念
Machine learning - clustering - density clustering algorithm notes
Ant's large model is exposed, AI+ finance enters the "big model" era
Daily
More
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)
2024-04-23(30)
2024-04-22(5)
2024-04-21(0)

Code World

© 2018 codetd.com