2022.9.21-2022.9.22
资源访问
用IDEA创建springboot项目，会默认创建出classpath:/static/目录，一般存放静态资源，前后端分离的话用不到这个文件夹。比如在static中有一个test.jpg文件，使用ip/test.jpg即可
在application.properties中直接定义过滤规则和静态资源位置(需要的时候上网查)
spring.mvc.static-path-path-pattern=/image/** 就可以过滤，使用ip/image/test.jpg才可访问
上传文件的默认最大为1mb，要更改的话修改application.properties中的
spring.servlet.multipart.max-file-size = 10MB;
spring.servlet.multipart.max-request-size = 10MB;
上传文件
(未完待续)
2022.10.2
今天看了一下vue3的相关框架 发现element plus提供了一些很好看的图标按钮等等
官网：一个 Vue 3 UI 框架 | Element Plus (gitee.io)
安装：
npm install element-plus --save
不过我用这种方法安装之后控件失效，于是通过vue ui来安装，可以正常使用
配置如下:
#main.js 全部导入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
import Elementplus from 'element-plus'
import "element-plus/dist/index.css"
const app = createApp(App)
app.use(Elementplus)
app.use(router).mount('#app')
下滑菜单：
<el-dropdown style="width:200px;top:10px">
<el-button type="primary" style="width:100px">菜单<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="test1()">我的账户</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
Vue3路由守卫:
1、beforeEach （全局前置守卫，配置在全局路由的js文件里面，也就是我自己写的index.js那个文件）
router.beforeEach((to,from,next)=>{
next()
})
to:to 表示去往哪个路由
from:from 表示从哪个路由离开
next: next 是一个方法，代表的是是否展示路由页面，如果不使用next方法，那么指定页面无法显示
常用来判断是否登录
2、beforeEnter （路由独享守卫，配置在单独的路由里面，也就是路由那个数组任意一个里面）
3、beforeRouteEnter (组件内部守卫，和data等同级)
javascript里面本地存储键值对和读取
localStorage.setItem("key", "value"); 新增
var lastname = localStorage.getItem("key"); 获取
localStorage.removeItem("key"); 删除
用法：
router.beforeEach((to, from, next) => {
// 判断有没有登录
if (!localStorage.getItem('user')) { 如果获取的user这个键就跳转，反之不跳转
if (to.name == "a") {
next();
} else {
router.push('/login')
}
} else {
next();
}
});
缺点：永久缓存，需要手动删除，如果需要关闭界面自动删除的缓存则可使用如下方法
sessionStorage.setItem("lastname", "Smith");
