vueAdmin前后端分离后台管理系统项目笔记
1. vue与vue-cli的关系
1.1 定义:
- Vue CLI是一个脚手架,通俗点说就是代码生成器,可以快速生成一套基于Vue完整的前端框架,单独编译,单独部署。可以再集成各种第三方插件,扩展出更多的功能。
- Vue是渐近式框架,你可以用它一个功能,也可以用全家桶。比如你可以在老的jsp或thymeleaf项目里,引入vue.js,只用它核心的数据绑定功能
1.2 与Spring Cloud作类比
- Spring Cloud = Spring Boot + 一堆第三方组件。
- Vue CLI = Vue + 一堆的js插件。
1.3 Vue CLI版本号对应
- Vue CLI 4.5以下,对应的是Vue2
- Vue CLI 4.5及以上,对应的是Vue3,但是,创建项目的时候可以选择Vue2
2. vue2安装
npm install -g vue-cli 适用于vue-cli 2.0
npm install -g @vue/cli 适用于vue-cli 3.0
全局安装vue-cli 4.3.1
npm install @vue/cli@4.3.1 -g
3. 引入element-ui样式
通常情况下会看到element-ui使用el-row和el-col时el-col并没有自动分列,而是新开了一行,这是因为没有引入相关的样式导致,我们需要在main.js中引入element-theme-chalk
import 'element-theme-chalk';
4. sass与less样式
TypeError: this.getOptions is not a function在vue2中常会遇到应用sass、less时找不到对应包的情况 ,这是由于版本不适配导致(版本过高)
我们需要卸载高版本,安装低版本。
> npm uninstall sass-loader
> npm install sass-loader@5.0.0
>
> npm uninstall less-loader
> npm install less-loader@5.0.0
5.vue : 无法加载文件 C:\Users\XXX\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本
以管理员权限打开windows powershell,输入set-ExecutionPolicy RemoteSigned
,选择Y或A即可
6.VUE中图片无法加载问题
https://blog.csdn.net/NineWaited/article/details/125163896
6.1 如果图片存放在assets里,则只能指定静态路径
6.2 图片存放在static中
直接使用相对路径访问
6.3 其他tips
- 标签内不可以使用el表达式<img :src=“{{ scope.row.photo }}” />这样是错的
- 使用require()内部只能传输静态字符串<img :src=“require(‘@/assets/xxx.png’)”/>这样是对的,如果传输一个变量则是错的。
- 如果需要一个标签动态展示图片,放在static不要用assets目录
原因是asset的文件会被直接打包到项目中,而static的文件在打包后会独立成为一个文件夹,如果动态引入某文件,默认是采取打包后路径访问的方式,因此只能访问打包后还存在的static文件夹。asset的文件只能直接静态使用,因为一旦静态使用就会默认被加载到项目包里了,所以在检查器中看到的是直接获取到了源文件的二进制。
@click.native中 .native 的含义与使用
@click是我们在vue开发中经常用到的事件绑定,而@实际上是 v-on 的简写,而 v-on 则是对 vue 的事件体系封装之后的 API接口
也就是说,在处理DOM原生事件的场合中需要添加额外的标识符
比如:如果使用router-link标签,加上@click事件,绑定的事件会无效,因为router-link的作用是单纯的路由跳转,会阻止click事件,如果不加 .native, 事件是不会触发的,因此需要加上 .native 才会触发事件
7. Spring Security 内置 Filter
- ChannelProcessingFilter 用来过滤哪些请求必须用 https 协议, 哪些请求必须用 http 协议
- ConcurrentSessionFilter 用来判断session是否过期以及更新最新的访问时间
- WebAsyncManagerIntegrationFilter 用来处理异步请求的安全上下文
- SecurityContextPersistenceFilter 控制 SecurityContext 的在一次请求中的生命周期 。 请求来临时,创建SecurityContext 安全上下文信息,请求结束时清空 SecurityContextHolder。
- HeaderWriterFilter 用来给 http 响应添加一些 Header
- CorsFilter 跨域相关的过滤器
- CsrfFilter 用于防止csrf攻击,前后端使用json交互需要注意的一个问题
- LogoutFilter 处理注销的过滤器
- OAuth2AuthorizationRequestRedirectFilter 该过滤器是处理 OAuth2 请求首选重定向相关逻辑的
- Saml2WebSsoAuthenticationRequestFilter 是一个基于 SMAL 的 SSO 单点登录请求认证过滤器
- X509AuthenticationFilter 是X509 认证过滤器
- AbstractPreAuthenticatedProcessingFilter 处理经过预先认证的身份验证请求的过滤器的基类,其中认证主体已经由外部系统进行了身份验证。 目的只是从传入请求中提取主体上的必要信息,而不是对它们进行身份验证
- CasAuthenticationFilter 是CAS单点登录认证过滤器
- OAuth2LoginAuthenticationFilter 是OAuth2 登录认证过滤器。处理通过 OAuth2 进行认证登录的逻辑
- Saml2WebSsoAuthenticationFilter 是一个基于 SMAL 的 SSO 单点登录认证过滤器
- UsernamePasswordAuthenticationFilter 处理用户以及密码认证的核心过滤器。认证请求提交的username和 password,被封装成token进行一系列的认证,主要通过这个过滤器完成的,在表单认证的方法中,这是最最关键的过滤器。
- OpenIDAuthenticationFilter 基于OpenID 认证协议的认证过滤器
- DefaultLoginPageGeneratingFilter 生成默认的登录页。默认 /login
- DefaultLogoutPageGeneratingFilter 生成默认的退出页。 默认 /logout
- DigestAuthenticationFilter 处理 HTTP 头中显示的摘要式身份验证凭据
- BasicAuthenticationFilter 处理 HTTP 头中显示的基本身份验证凭据
- RequestCacheAwareFilter 用于用户认证成功后,重新恢复因为登录被打断的请求
- SecurityContextHolderAwareRequestFilter 用来 实现j2ee中 Servlet Api 一些接口方法
- JaasApiIntegrationFilter 适用于JAAS (Java 认证授权服务)
- RememberMeAuthenticationFilter 是 记住我 登录方式比较重要的类,其主要功能有 自动登录、身份认证、登录成功、事件发布、异常处理/登录失败 等
- AnonymousAuthenticationFilter 匿名认证过滤器。对于 Spring Security 来说,所有对资源的访问都是有 Authentication 的。对于无需登录(UsernamePasswordAuthenticationFilter )直接可以访问的资源,会授予其匿名用户身份
- SessionManagementFilter 是Session 管理器过滤器
- ExceptionTranslationFilter 主要来传输异常事件
- FilterSecurityInterceptor 用与动态权限控制,这个过滤器决定了访问特定路径应该具备的权限,访问的用户的角色,权限是什么?访问的路径需要什么样的角色和权限?这些判断和处理都是由该类进行的
- SwitchUserFilter 是用来做账户切换的。默认的切换账号的url为/login/impersonate,默认注销切换账号的url为/logout/impersonate,默认的账号参数为username
final基本知识点
- 修饰类的时候此类不能被继承。
- 修饰方法时方法不能被重写。
- 修饰变量时不能被重新赋值。
- 为什么用final
如同private,为了程序更好的安全性,让外界不能任意修改我们的变量
获取到用户访问的真实ip地址
public static String getRemoteAddr(HttpServletRequest request) {
String ip = request.getHeader("X-Forwarded-For");
if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
ip = request.getHeader("Proxy-Client-IP");
}
if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
ip = request.getHeader("WL-Proxy-Client-IP");
}
if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
ip = request.getHeader("HTTP_CLIENT_IP");
}
if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
ip = request.getHeader("HTTP_X_FORWARDED_FOR");
}
if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {
ip = request.getRemoteAddr();
}
return ip;
}