糖糖246-CSDN博客

原创 vue 动态路由实现后端控制权限时的前端处理

前端思路：上图中，可以是控制的，可以是根据用户信息从路由表中筛选的。此处讲解路由信息的情况。

2022-09-18 10:20:43 884 2

原创【学习vite + vue3 + pinia + ts】pinia应用 store的创建及应用

1. 读取state中的属性 2. state属性的修改方式 3. actions处理同步异步逻辑 4. getters函数式写法与参数接收 5. 持久化存储pinia中的数据

2022-08-31 15:50:56 2918 5

原创 vite创建的项目，打包后的文件本地预览报错 Access to script at ‘...‘ from origin ‘null‘ has been blocked by COR

http-server -p 8090 // 8090为自己设置的端口号，不要跟之前打开的冲突即可。打包后的文件打开报错，原因是file文件不支持import，需要开启个服务。打开图中地址即可访问打包后的项目。进入打包后的文件夹，运行cmd。...

2022-08-29 11:17:19 3774 5

原创【学习 vite + vue3 + pinia + ts】vue3与vue2的一些差异点

created- 新增！在元素的 attribute 或事件监听器被应用之前调用。bind →mounted：新增！在元素本身被更新之前调用，与组件的生命周期钩子十分相似。update → 移除！该钩子与updated有太多相似之处，因此它是多余的。请改用updated。updated：新增！与组件的生命周期钩子类似，它将在元素被卸载之前调用。...

2022-08-26 10:12:17 204

原创【学习 vite + vue3 + pinia + ts】setup异步返回 async setup

正常情况下，setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到对象中的属性。但是，借助与结合，可以实现setup返回一个Promise实例。

2022-08-25 10:29:39 1546

原创【学习 vite + vue3 + pinia + ts】vue3响应式原理简单理解

新增属性、删除属性, 界面不会更新。借助 this.$set()/this.$delete()实现属性新增/删除。- 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。- 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。- 数组类型：通过重写更新数组的一系列方法来实现拦截。- 通过Reflect（反射）: 对源对象的属性进行操作。// 拦截设置属性值或添加新属性。// 拦截读取属性值。...

2022-08-23 15:13:02 278

原创【学习 vite + vue3 + pinia + ts】应用创建与常用组合api

组合式 API： setup，ref，reactive，computed，watch，watchEffect，toRef，toRefs，shallowRef，shallowReactive，readonly，shallowReadonly，toRaw，markRaw，provide，inject，customRef，

2022-08-23 15:07:59 735

原创【学习 vite + vue3 + pinia + ts】框架搭建

在src/components下新建index.ts// import ComponentVue from './ComponentVue.vue' // 替换为想要全局注册的组件// app.component('ComponentVue', ComponentVue) //注册}}修改main.tsapp.use(Antd)

2022-08-10 11:13:24 3509

原创 vscode 工作区配置插件配置不同工作环境

vscode提供了工作区的概念，可以给每个工作区配置不用的插件。

2022-07-29 20:49:33 6493 3

原创 typescript ts 基础知识之接口、泛型

接口用来定义一个对象结构，用来定义一个对象中应该包含哪些属性和方法使用关键字 interface 定义不同点：type不能声明同一个名字的类型两次，会报错接口interface可以声明同一个名字的类型两次，结果为两个声明合并，但后续声明中若有之前声明过的属性，则属性类型须一致接口可以在定义对象的时候限制对象的结构，接口中所有的属性都不能有实际的值，即接口只定义对象结构，不考虑实际值，类似于抽象类，不同的是在接口中所有的属性和方法都是抽象的，抽象类中可以有实质的属性和方法定义类时，可以使类去实现一个接口（使类

2022-07-26 11:05:52 511

原创 typescript ts 基础知识之类

通过new调用产生的实例对象可以访问namestring='名字'age}实例方法中的this表示当前调用方法的对象}以abstract关键字开头的类是抽象类，是专门用来继承的类，不能用来创建对象抽象类中可以添加抽象方法，只定义结构，不定义具体实现。抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写abstractnamestringstring){}abstractsayHi()void}sayHi()}......

2022-07-25 15:06:33 273

原创 typescript ts 基础知识之用webpack打包ts代码

一、基本配置1.新建文件夹webpack_js，在文件夹下建文件夹src，src下建文件index.ts2.在终端打开文件夹，运行命令行，初始化package.json包管理工具3.安装依赖4.根目录下新建webpack.config.js文件5.根目录下新建tsconfig.json文件6.在package.json文件的scripts选项中添加命令7.终端执行命令如果出现budle.js，则打包成功。............

2022-07-24 10:07:56 798

原创 vue antd a-table表格按需展开嵌套子表格

属性来给不满足条件的行增加特定的class名，配合css样式的displaynone实现展开图表的隐藏。row-class-name="record=>不展开的条件&&'noExpand'"在满足某一条件下，表格行可展开子表格。不满足条件的时候不能点击。不能点击不好实现，但可以实现让其隐藏，通过表格的。......

2022-07-22 17:37:05 2318

原创 vue 路由守卫解析

路由跳转有两种方式1、方式，2、编程式跳转。路由守卫控制路由在符合某种条件下才能完成跳转。后置，在跳转之后判断，不管符不符合，路由都会跳转，浏览器地址栏都会变化，多用于跳转后修改页签标题等。中，亦或者是在与某个引入了src/router/index.js文件暴露的router的。前置，在路由切换之前判断，不符合条件则不跳转。//to要去的路由，from当前路由，next触发跳转。//to要去的路由，from当前路由，next触发跳转。1.全局前置路由守卫。...

2022-07-19 15:55:32 1112

原创 typescript ts基础知识之tsconfig.json配置选项

tsconfig.json是ts的配置文件，里边可以写注释，其常用配置选项如下： 1. include：定义希望被编译文件所在目录，默认值为['**/*']，**表示任意目录，*表示任意文件2. exclude：不需要被编译的文件目录，默认值为["node_modules", "bower_components", "jspm_packages"]3.extends：定义被继承的配置文件，将不想重复写的配置项引入进来4. files：指定被编译文件的列表，编译文件较少时适用5. co

2022-07-06 11:35:16 1286

原创 typescript ts 基础知识之类型声明

1. : number 数字2. : string 字符串3. :boolean 布尔值4. : 字面量限制变量的值就是该字面量的值，eg：let a: 10; a = 11会报错5. : any 任意类型，相当于对该变量关闭了TS类型检测，不建议使用6. : unknown 类型安全的any，不能直接赋值给其他变量7. : void 空值没有值（或undefined）常用来设置函数的返回值8. : never 不能是任何值，永远不会返回结果（throw new Error('报错了'

2022-07-05 21:57:56 811

原创 vue 前端用iframe实现单点登录

前端在实现单点登录过程中，最主要的是按照系统的要求保存好可以证明系统登录过的证据。保存证据（下文统称其为token）的位置：1. localStorage，2. cookie对于存在不同域名的系统，我们可以借助iframe的src属性解决跨域问题，然后用iframe的dom元素的contentWindow的postMessage向iframe内嵌的网页传递数据，再在被内嵌的网页的代码中添加message事件截取消息，然后去保存token。具体代码见下方监管系统中点击跳转的回调函数：.........

2022-06-29 21:20:00 5865 1

原创借助node.js+express框架简单搭建服务器运行前端打包代码

借助node.js+express框架简单搭建服务器运行前端打包代码 1. 新建文件夹demo2. 用编辑器打开文件夹3.调出终端，初始化项目 npm init，输入项目名称（英文），一直回车即可4. 安装express 5.在package.json同级目录下新建server.js和static文件夹 6.编辑server.js7.将打包好的前端代码放到static文件夹下8. 在终端执行node server，启动服务器9.在浏览器中访问：localhost:5005......

2022-06-29 17:53:20 989

原创 vue 路由跳转携带参数

vue 路由跳转携带参数的方式：一、方式跳转，1. 携带query参数，2. 携带params参数，3.将参数转换为props属性；二、编程方式跳转路由

2022-06-29 11:14:15 21518 1

原创 vue 配置代理，简单解决跨域问题

开发环境下，借助vue cli简单解决跨域问题。在vue.config.js文件中添加以下代码：这种方式只能配置一个代理，并且不能控制什么时候走代理，如果在public文件夹中有同路径名字一样的文件，则不走代理。方式二：在vue.config.js文件中添加以下代码：注意请求资源时必须加路径前缀............

2022-06-17 16:47:59 2424

原创 vue transition动画使用集成第三方动画 animate.css使用

1. 使用标签包裹要加动画的元素2. 标签中添加属性name，表示执行动画的名字，不加默认为v3.标签中添加属性appear，值为布尔值true/false，表示是否在初始化时就执行动画解析后在动画执行期间会给元素添加以下类名name值-enter（，name值-enter-to，name值-enter-active，name值-leave，name值-leave-to，name值-leave-active......

2022-06-15 16:22:21 1315

原创 vue 全局事件总线理解与应用

全局事件总线：任意组件间通信。需要满足的条件：1. 所有组件（VC）都能看到x组件2. 可以调用$on、$off、$emit

2022-06-07 10:11:32 303

原创 git 常用命令

6. 在当前分支有修改未提交，想要切换到其他分支。4. git新建远程仓库关联本地已有仓库。后根据提示，修改文件，然后暂存提交。git checkout 原分支名。git checkout 分支名。3. 修改分支名（已推送）修改完成提交后，切回原来分支。2. 修改分支名（未推送）1. 新建并切换到分支。...

2022-06-01 15:50:03 58

原创 vue中修改数据不生效，页面不刷新

数据更新后，页面不刷新的可能原因：1. 初始化时data中不存在该属性；2. 通过索引值修改数组元素。修改方式：1、通过数组的pop(末尾删除)/push(末尾添加)/shift(开头删除)/unshift(开头添加)/reverse(反转)/sort(排序)/splice(起始位置，删除数量，插入元素)方法操作；2、Vue.set(vm.items, indexOfItem，vm.$set(vm.items, indexOfIte；3通过其他方式（filter/map/...）修改数组，并重新赋值给原数组

2022-05-02 23:22:29 11892 1

空空如也

空空如也