20260507笔记

vue

1、vue-router

vue-router 是vue官方核心插件，就像java与springMvc

2、vue项目的package.json与package-lock.json

这两个文件在项目路径下，package.json为可以为开发人员手动修改，用于规定这个依赖能使用的范围，package-lock.json为程序自动生成，用于显示具体使用了哪个版本的依赖
package.json：与maven项目不同，vue的依赖没有手动在xml中加依赖的行为，但开发在控制台运行比如说npm install vue-router，他就会将依赖自动加在package.json上，当然你也可以手动修改package.json某个依赖的版本
package-lock.json：为控制你具体下载哪个版本，package.json的依赖可确定范围，比如说

{"dependencies":{"vue":"^3.4.0"}}

这个"^3.4.0" 的意思是：3.4.0 ≤ 版本 < 4.0.0
但当你首次 install 时，就会根据规则下载具体的版本，记录在package-lock.json里，这样你上传到git后，其他开发运行npm install 就会下载跟你一样的package-lock.json里的版本

3、vue-router是做什么的

因为浏览器默认切换页面时加载新的页面会闪烁<传统网站是这样的>，为了让浏览器进行页面跳转时不闪烁，vue采用了SPA（单页应用）的核心原理，即vue项目一般只有一个主页面app.vue,切换页面时只是在切换app页面里的组件
但这样出现了很对问题，一个app页面只对应了一个网址，你在输入网址后，只会跳转到app页面的初始状态，并且你页面的前进后退等切换页面功能都失效了，此时vue提供了vue-router解决方案，vue-router会 监听、改变 浏览器的 URL，当你进行跳转时，vue-router模拟了假的页面跳转
他是怎么解决的。app页面只有一个url，他在使用时会指定url的 history 控制策略，比如说Hash 模式：

constrouter=createRouter({history:createWebHistory(),routes})

history: createWebHashHistory()这个策略会让url变成 http://example.com/#/user/123 这种，在原生浏览器设置中，/#叫hash（哈希/锚点），后面的内容本身是不会不会作为url发送给浏览器的，vue利用了这个技巧，让你的url始终是 http://example.com始终指向app页面 ，并且运行在浏览器的vue也能从/#/user/123里读取到具体的信息，通过信息在app页面中加载具体的组件

除了hash模式：createWebHashHistory，还有HTML5 模式：createWebHistory、内存模式：createMemoryHistory

HTML5 模式并没有使用hash（哈希/锚点），他的url就是http://example.com/user/123，但这就没有指向app页面了，就需要服务器里nginx配合，让你的不同的url请求始终指向app页面,这样既能找到app页面，又能读取路由

# nginx 配置 location/{try_files $uri $uri//index.html;# 所有路径都返回 index.html}

内存模式：内存模式没有更改url,前进后退等都存在了内存中，当然这样你每次刷新页面，清除内存都会回到app页面的初始状态，比较少用

4、组件存到了哪里，是怎么下载的

组件部署到服务器后，用户在浏览器中 第一次访问 会从浏览器下载组件的js文件，并缓存到本地，此时用户 第二次 访问，就会从本地拿，只有强制刷新(ctrl+f6)或清缓存时，会再次下载js文件
那么重新部署项目后，浏览器是怎么知道项目部署了的，也不能我部署后让所有用户都手动刷新。在访问页面时，vue还是会向服务器拿一些信息的，下载的js文件有hash值，比如说home.abc123.js，重新部署后js文件变成了home.def456.js，此时浏览器发现js文件有更新，就会像服务器请求新的js文件

5、vue的import与export 是怎么用的

有两种暴露模式，export default与export
export default只能存在一个，在import使用时，暴露的是什么import拿到的就是什么
export 可以存在多个，且可以与export default并存，使用时需要用{}

暴露文件：// 默认导出（只能1个）exportdefault[{name:"ForTheRecord",component:ForTheRecord}]// 命名导出（可以多个）exportconstapiUrl='/api/record' exportconstmoduleName='备案管理'export functionformatRecord(data){returndata}加载文件：importrecordRoutes,{apiUrl,moduleName,formatRecord}from './modules/record.js'

如何把 多个模块怎么收集成一个数组呢

// router/index.jsimportrecordRoutesfrom './modules/record.js'// 数组1importuserRoutesfrom './modules/user.js'// 数组2importsettingRoutesfrom './modules/setting.js'// 数组3// 展开运算符合并成一个数组constallRoutes=[...recordRoutes,// 把数组1的每个元素拿出来...userRoutes,// 把数组2的每个元素拿出来...settingRoutes// 把数组3的每个元素拿出来]

6、vue-router的meta

{path:'/',name:'Index',component:Index,meta:{requireAuth:true,aaa:123}}

你可以在meta中设置各种标签信息，这样你在访问时可以拿到这个标签

// 2. 比如说路由守卫读标签router.beforeEach((to)=>{if(to.meta.requireAuth){}})

7、path: ‘/:openType/:id’,是什么意思

// 直接写标准路由配置，没有封装constrouter=createRouter({history:createWebHashHistory(),// Hash 模式（URL 带 #）routes:[{path:'/:openType/:id',name:'CustomIndex',component:Index},]})

表示匹配两层路径，openType与id都是随便写的形参，且并不规定是数字还是字符串，必须匹配两层，不能多不能少，比如说匹配： /edit/456

8、vue-router使用同步组件与异步组件的区别

// 方式1：同步（直接导入）importHomePagefrom '@/views/HomePage.vue' component:HomePage// 方式2：异步（函数导入）component:()=>import('@/views/AboutPage.vue')

同步组件在 页面打开 就下载，而 异步组件 是访问到路由才下载，
为了让用户不要一次下载太多，使用异步组件 用到时再下载，一般首页这种组件才会使用同步组件，其他的都可以使用异步组件

java

1、postgreSql: postgreSql和 mysql的 group by 行为不同

PostgreSQL 更严格，PostgreSQL 要求： SELECT 中的字段必须要么在 GROUP BY 中，要么被聚合函数包裹。

--❌ 错误（PostgreSQL）SELECTname,department,COUNT(*)FROMemployeesGROUPBYdepartment;--✅ 正确SELECTdepartment,COUNT(*)FROMemployeesGROUPBYdepartment;

--MySQLSELECTid,name,department,COUNT(*)FROMordersGROUPBYdepartment;在PostgreSQL里必须改成：--要么说明 id 和 name 怎么处理SELECTMIN(id)ASany_id,MIN(name)ASany_name,department,COUNT(*)FROMordersGROUPBYdepartment;

2、日期截断函数 DATE_TRUNC

DATE_TRUNC 是 PostgreSQL 的日期截断函数

DATE_TRUNC('month','2025-03-1514:30:25')--结果：2025-03-0100:00:00DATE_TRUNC('quarter', '2025-05-1514:30:25')//季度截断--结果：2025-04-0100:00:00

3、CASE WHEN … THEN … END 判断语句

CASE 是 SQL 的 if-then-else 语句，基本语法

CASEWHEN条件1THEN结果1WHEN条件2THEN结果2ELSE结果3END