20260507笔记:vue: vue-router、vue的依赖package.json、组件下载更新机制、export与import、同步组件与异步组件。java: postgreSql的group by、DATE_TRUNC、case when ... then... end、vue1、vue-router2、vue项目的package.json与package-lock.json3、vue-router是做什么的4、组件存到了哪里是怎么下载的5、vue的import与export 是怎么用的6、vue-router的meta7、path: /:openType/:id,是什么意思8、vue-router使用同步组件与异步组件的区别java1、postgreSql: postgreSql和 mysql的 group by 行为不同2、日期截断函数 DATE_TRUNC3、CASE WHEN ... THEN ... END 判断语句vue1、vue-routervue-router 是vue官方核心插件就像java与springMvc2、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 模式constroutercreateRouter({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、内存模式createMemoryHistoryHTML5 模式并没有使用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文件并缓存到本地此时用户 第二次 访问就会从本地拿只有强制刷新(ctrlf6)或清缓存时会再次下载js文件那么重新部署项目后浏览器是怎么知道项目部署了的也不能我部署后让所有用户都手动刷新。在访问页面时vue还是会向服务器拿一些信息的下载的js文件有hash值比如说home.abc123.js重新部署后js文件变成了home.def456.js此时浏览器发现js文件有更新就会像服务器请求新的js文件5、vue的import与export 是怎么用的有两种暴露模式export default与exportexport 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’,是什么意思// 直接写标准路由配置没有封装constroutercreateRouter({history:createWebHashHistory(),// Hash 模式URL 带 #routes:[{path:/:openType/:id,name:CustomIndex,component:Index},]})表示匹配两层路径openType与id都是随便写的形参且并不规定是数字还是字符串必须匹配两层不能多不能少比如说匹配 /edit/4568、vue-router使用同步组件与异步组件的区别// 方式1同步直接导入importHomePagefrom /views/HomePage.vue component:HomePage// 方式2异步函数导入component:()import(/views/AboutPage.vue)同步组件在 页面打开 就下载而 异步组件 是访问到路由才下载为了让用户不要一次下载太多使用异步组件 用到时再下载一般首页这种组件才会使用同步组件其他的都可以使用异步组件java1、postgreSql: postgreSql和 mysql的 group by 行为不同PostgreSQL 更严格PostgreSQL 要求 SELECT 中的字段必须要么在 GROUP BY 中要么被聚合函数包裹。--❌ 错误PostgreSQLSELECTname,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_TRUNCDATE_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:003、CASE WHEN … THEN … END 判断语句CASE 是 SQL 的 if-then-else 语句基本语法CASEWHEN条件1THEN结果1WHEN条件2THEN结果2ELSE结果3END