梦志博

前端实现登录拦截 一个项目学会vue全家桶+axios实现登录、拦截、登出功能，以及利用axios的http拦截器拦截请求和响应。 登录拦截逻辑第一步：路由拦截首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由， 否则就进入登录页面。 1234567891011121314151617181920const routes = [ { path: '/', name: '/', component: Index }, { path: '/repository', name: 'repository', meta: { requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的 }, compone ...

登录是每个网站中都经常用到的一个功能，在页面上我们输入账号密码，敲一下回车键，就登录了，但这背后的登录原理你是否清楚呢？今天我们就来介绍几种常用的登录方式。 Cookie + Session 登录 Token 登录 SSO 单点登录 OAuth 第三方登录 Cookie + Session 登录HTTP 是一种无状态的协议，客户端每次发送请求时，首先要和服务器端建立一个连接，在请求完成后又会断开这个连接。这种方式可以节省传输时占用的连接资源，但同时也存在一个问题：每次请求都是独立的，服务器端无法判断本次请求和上一次请求是否来自同一个用户，进而也就无法判断用户的登录状态。 为了解决 HTTP 无状态的问题，Lou Montulli 在 1994 年的时候，推出了 Cookie。 Cookie 是服务器端发送给客户端的一段特殊信息，这些信息以文本的方式存放在客户端，客户端每次向服务器端发送请求时都会带上这些特殊信息。 有了 Cookie 之后，服务器端就能够获取到客户端传递过来的信息了，如果需要对信息进行验证，还需要通过 Session。 客户端请求服务端，服务端会为这次请求开 ...

处理字体图标资源1. 下载字体图标文件 打开阿里巴巴矢量图标库open in new window 选择想要的图标添加到购物车，统一下载到本地 2. 添加字体图标资源 src/fonts/iconfont.ttf src/fonts/iconfont.woff src/fonts/iconfont.woff2 src/css/iconfont.css 注意字体文件路径需要修改 src/main.js 12345678910111213import { add } from "./math";import count from "./js/count";import sum from "./js/sum";// 引入资源，Webpack才会对其打包import "./css/iconfont.css";import "./css/index.css";import "./less/index.less";import "./sass ...

自动清空上次打包资源1. 配置123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051const path = require("path");module.exports = { entry: "./src/main.js", output: { path: path.resolve(__dirname, "dist"), filename: "static/js/main.js", clean: true, // 自动将上次打包目录资源清空 }, module: { rules: [ { // 用来匹配 .css 结尾的文件 test: /\.css$/, // use 数组里面 Loader 执行顺序是从右到左 use: [&q ...

修改输出资源的名称和路径1. 配置1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950const path = require("path");module.exports = { entry: "./src/main.js", output: { path: path.resolve(__dirname, "dist"), filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中 }, module: { rules: [ { // 用来匹配 .css 结尾的文件 test: /\.css$/, // use 数组里面 Loader 执行顺序是从右到左 use: ["s ...

处理图片资源过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理 现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源 1. 配置12345678910111213141516171819202122232425262728293031323334353637const path = require("path");module.exports = { entry: "./src/main.js", output: { path: path.resolve(__dirname, "dist"), filename: "main.js", }, module: { rules: [ { // 用来匹配 .css 结尾的文件 test: /\.css$/, // ...

computed函数computed在vue3中是一个组合式API，在使用之前得引入，他是一个函数，可以在实例当中多次使用。 12345678910111213<script>import {reactive,computed} from 'vue'export default { setup(){ let data = { msg: '高兴！' } let mood = computed({ return `今天的心情很${data.msg}` }) }}</script> 这种方法实现简单的计算属性，但是却是一个只读的属性，想要实现读和写需要对其进行完善。 123456789101112131415161718<script>import {reactive,computed} from 'v ...

setuo的两个注意点 setup是vue3新增的生命周期函数，setup的加入就是为了让vue3使用组合式API（Composition API）。使用组合式API更符合大型项目的开发，通过setup可以将该部分抽离成函数,让其他开发者就不用关心该部分逻辑。 在使用setup之前我们需要注意两个点： setup的执行时机 setuo的参数 setup的执行时机vue3的更新，让生命周期发生了很大的变化，setup的执行时机实在beforeCreated之前，用于代替created 和beforeCreated。由于在实例还没有创建之前就执行，所以这个时候不能访问data中的数据，他的this是undefind. 1234567<script>export default { setup(){ console.log(this) //undefined }}</script> setup的参数setup是一个函数，而且还有两个参数：props、context 1.propsprops跟vue2的含义一样，他的值是一 ...

处理样式资源 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源 介绍Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源 我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用 官方文档找不到的话，可以从社区 Github 中搜索查询 Webpack 官方 Loader 文档open in new window 处理 Css 资源1. 下载包1npm i css-loader style-loader -D 注意：需要下载两个 loader 2. 功能介绍 css-loader：负责将 Css 文件编译成 Webpack 能识别的模块 style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容 此时样式就会以 Style 标签的形式在页面上生效 3. 配置123456789101112131415161718192021const path = require("path");module.exports ...

基本配置在开始使用 Webpack 之前，我们需要对 Webpack 的配置有一定的认识。 5 大核心概念1.entry（入口） 指示 Webpack 从哪个文件开始打包 2.output（输出） 指示 Webpack 打包完的文件输出到哪里去，如何命名等 3.loader（加载器） webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析 4.plugins（插件） 扩展 Webpack 的功能 5.mode（模式） 主要由两种模式： 开发模式：development 生产模式：production 准备 Webpack 配置文件在项目根目录下新建文件：webpack.config.js 1234567891011121314module.exports = { // 入口 entry: "", // 输出 output: {}, // 加载器 module: { rules: [], }, // 插件 plugins: [], / ...