vueAdmin项目笔记

全栈养成专员

已于 2023-10-16 22:04:34 修改

阅读量202

点赞数 1

分类专栏：前端文章标签： vue.js javascript 前端

于 2022-10-15 14:58:46 首次发布

本文链接：https://blog.csdn.net/qq_19754259/article/details/127335407

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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;
    }