snippets router pinia axios mock
文章目录
- 补充
- VS Code 代码片段
- 注册自定义组件
- vue router
- pinia
- 删除vite创建项目时默认的文件
- axios
- mock
- 3.0.x版本的 viteMockServe
补充
为文章做补充:https://blog.csdn.net/yavlgloss/article/details/140063387
VS Code 代码片段
- 为当前项目创建 Snippets
{"Vue 3 Component": {"prefix": "v3ts","body": ["<template>"," <div class=\"${1:component-name}\">"," ${2:<!-- Your content here -->}"," </div>","</template>","","<script setup>","import { ref } from 'vue';","","// Props","// defineProps({});","","// Emits","// defineEmits(['${3:eventName}']);","","// Reactive state","const ${4:stateName} = ref(${5:initialValue});","","// Methods","function ${6:methodName}() {"," ${7:// Your logic here}","}","</script>","","<style scoped>",".${1:component-name} {"," ${8:/* Add your styles here */}","}","</style>"],"description": "Generate a Vue 3 component template with script setup and scoped style"}
}
保存之后,以后可以用 v3ts 快速创建代码
注册自定义组件
vue router
pnpm add vue-router
在项目中创建路由配置文件,一般放在 src/router 目录下。
import { createRouter, createWebHistory } from 'vue-router';// 路由规则
const routes = [{path: '/',name: 'Home',component: () => import('@/views/Home.vue'), // 按需加载}
];// 创建路由实例
const router = createRouter({history: createWebHistory(), // 使用 HTML5 模式的路由routes,
});export default router;
新建 views/Home.vue
<template><div class="Home"><h1>!!!!!!!!!!!!!!!!</h1><!-- Your content here --></div>
</template><script setup>
import { ref } from 'vue';</script><style scoped>
.Home {/* Add your styles here */
}
</style>
在 App.vue 中添加 <router-view>
在 main.js 中注册了路由。
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 引入路由const app = createApp(App);app.use(router); // 注册路由
app.mount('#app');
pinia
-
pnpm add pinia
-
在 main.js 中注册 Pinia
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';const app = createApp(App);// 创建 Pinia 实例
const pinia = createPinia();// 注册 Pinia
app.use(pinia);app.mount('#app');
- 创建一个 Store
在项目中创建一个存储状态的 Store 文件夹,例如 src/stores。
src/
├── stores/
│ └── counter.js
- src/stores/counter.ts
import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {// 状态state: () => ({count: 0,name: 'Pinia Store',}),// 计算属性getters: {doubleCount: (state) => state.count * 2,},// 方法actions: {increment() {this.count++;},decrement() {this.count--;},},
});
- 在组件中使用 Store
示例组件:使用 Store 的状态和方法
<template><div><h1>{{ counter.name }}</h1><p>Count: {{ counter.count }}</p><p>Double Count: {{ counter.doubleCount }}</p><button @click="counter.increment">Increment</button><button @click="counter.decrement">Decrement</button></div>
</template><script setup>
import { useCounterStore } from '@/stores/counter';
const counter = useCounterStore();
</script>
删除vite创建项目时默认的文件
删除style.css
在main.ts中删除 import ‘./style.css’
axios
二次封装。
mock
这里我为了和之前的项目保持一致,指定了mockjs的版本
pnpm install -D vite-plugin-mock@2.9.6 mockjs
- 在 vite.config.ts 中配置 viteMockServe
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // SVG需要用的插件
import { viteMockServe } from 'vite-plugin-mock' // mock
import path from 'path' //node提供的模块,可以获取某个文件或者文件夹的路径// https://vite.dev/config/
export default defineConfig(({ command }) => {return {plugins: [vue(),createSvgIconsPlugin({// Specify the icon folder to be cachediconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],// Specify symbolId formatsymbolId: 'icon-[dir]-[name]',}),viteMockServe({mockPath: 'mock',localEnabled: command == 'serve', // 本地启动时启用}),],resolve: {alias: {'@': path.resolve('./src'), // 相对路径别名配置,使用 @ 代替 src},},//scss全局变量的配置css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: '@import "@/styles/variable.scss";',},},},}
})
- 在 根目录 下创建 mock文件夹,创建 mock\user.ts
- user.ts(这里的数据信息来自 硅谷甄选)
//用户信息数据
function createUserList() {return [{userId: 1,avatar:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',username: 'admin',password: '111111',desc: '平台管理员',roles: ['平台管理员'],buttons: ['cuser.detail'],routes: ['home'],token: 'Admin Token',},{userId: 2,avatar:'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',username: 'system',password: '111112',desc: '系统管理员',roles: ['系统管理员'],buttons: ['cuser.detail', 'cuser.user'],routes: ['home'],token: 'System Token',},]
}export default [// 用户登录接口{url: '/api/user/login',//请求地址method: 'post',//请求方式response: ({ body }) => {//获取请求体携带过来的用户名与密码const { username, password } = body;//调用获取用户信息函数,用于判断是否有此用户const checkUser = createUserList().find((item) => item.username === username && item.password === password,)//没有用户返回失败信息if (!checkUser) {return { code: 201, data: { message: '账号或者密码不正确' } }}//如果有返回成功信息const { token } = checkUserreturn { code: 200, data: { token } }},},// 获取用户信息{url: '/api/user/info',method: 'get',response: (request) => {//获取请求头携带tokenconst token = request.headers.token;//查看用户信息是否包含有次token用户const checkUser = createUserList().find((item) => item.token === token)//没有返回失败的信息if (!checkUser) {return { code: 201, data: { message: '获取用户信息失败' } }}//如果有返回成功信息return { code: 200, data: {checkUser} }},},
]
- 二次封装axios后 App.vue
onMounted(()=>{request({url: '/user/info',method: 'get'}).then(res => {console.log(res);});// axios.post('/api/user/login')request({url: '/user/login',method: 'post',data: {username: 'admin',password: '111111'}}).then(res => {console.log(res);});
})
- 这一次我项目搭建出错的点在 ①mock文件夹创建的位置错了(我没放在根目录下 放在src下了) ②我尝试着用 request.get 获取,但是一直没有获取到正确的信息,原因是对代码不熟,mock中定义的get方法是要设置header的。
3.0.x版本的 viteMockServe
localEnabled 字段改成了 enabled
相关文章:
snippets router pinia axios mock
文章目录 补充VS Code 代码片段注册自定义组件vue routerpinia删除vite创建项目时默认的文件axiosmock3.0.x版本的 viteMockServe 补充 为文章做补充:https://blog.csdn.net/yavlgloss/article/details/140063387 VS Code 代码片段 为当前项目创建 Snippets {&quo…...
C#常考随笔2:函数中多次使用string的+=处理,为什么会产生大量内存垃圾(垃圾碎片),有什么好的方法可以解决?
在 C# 中,由于string类型是不可变的,当在函数中多次使用操作符来拼接字符串时,每次操作都会创建一个新的string对象,旧的对象则成为垃圾对象,这会导致大量的内存分配和垃圾回收,产生内存垃圾和碎片。 在需…...
GitLab配置免密登录和常用命令
SSH 免密登录 Windows免密登录 删除现有Key 访问目录:C:\Users\Administrator\ .ssh,删除公钥:id_rsa.pub ,私钥:id_rsa 2.生成.ssh 秘钥 运行命令生成.ssh 秘钥目录( ssh-keygen -t rsa -C xxxxxx126.…...
编码器和扩散模型
目录 摘要abstract1.自动编码器2.变分编码器(VAE)3.论文阅读3.1 介绍3.2 方法3.3 结论 4.总结参考文献 摘要 本周学习了自动编码器(AE)和变分自动编码器(VAE)的基本原理与实现,分析其在数据降维…...
three.js用粒子使用canvas生成的中文字符位图材质
three.js用粒子使用canvas生成中文字符材质 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Three.…...
数据结构与算法之堆: LeetCode 208. 实现 Trie (前缀树) (Ts版)
实现 Trie (前缀树) https://leetcode.cn/problems/implement-trie-prefix-tree/description/ 描述 Trie(发音类似 “try”)或者说 前缀树 是一种树形数据结构,用于高效地存储和检索字符串数据集中的键。这一数据结构有相当多的应用情景&am…...
在 Linux 中使用 nslookup命令
什么是 nslookup? nslookup 命令是名称服务器查找的缩写,是一种网络管理工具,用于获取域名的 IP 地址或其他 DNS 记录信息,通常用于解决 DNS 或名称解析问题 nslookup一般语法,<domain-name>是您要查询的域名,…...
【Numpy核心编程攻略:Python数据处理、分析详解与科学计算】1.1 从零搭建NumPy环境:安装指南与初体验
1. 从零搭建NumPy环境:安装指南与初体验 NumPy核心能力图解(架构图) NumPy 是 Python 中用于科学计算的核心库,它提供了高效的多维数组对象以及用于处理这些数组的各种操作。NumPy 的核心能力可以概括为以下几个方面:…...
PHP校园助手系统小程序
🔑 校园助手系统 —— 智慧校园生活 📱一款基于ThinkPHPUniapp框架深度定制的校园助手系统,犹如一把智慧之钥,专为校园团队精心打造,解锁智慧校园生活的无限精彩。它独家适配微信小程序,无需繁琐的下载与安…...
2_高并发内存池_各层级的框架设计及ThreadCache(线程缓存)申请内存设计
一、高并发内存池框架设计 高并发池框架设计,特别是针对内存池的设计,需要充分考虑多线程环境下: 性能问题锁竞争问题内存碎片问题 高并发内存池的整体框架设计旨在提高内存的申请和释放效率,减少锁竞争和内存碎片。 高并发内存…...
在线可编辑Excel
1. Handsontable 特点: 提供了类似 Excel 的表格编辑体验,包括单元格样式、公式计算、数据验证等功能。 支持多种插件,如筛选、排序、合并单元格等。 轻量级且易于集成到现有项目中。 具备强大的自定义能力,可以调整外观和行为…...
物业管理系统源码优化物业运营模式实现服务智能化与品质飞跃
内容概要 在当今快速发展且竞争激烈的市场环境中,物业管理面临着众多挑战,而“物业管理系统源码”的优化,无疑为解决这些问题提供了有效的途径。这些优化不仅提升了物业管理的效率,还实现了服务智能化,推动了物业运营…...
双足机器人开源项目
双足机器人(也称为人形机器人或仿人机器人)是一个复杂的领域,涉及机械设计、电子工程、控制理论、计算机视觉等多个学科。对于想要探索或开发双足机器人的开发者来说,有许多开源项目可以提供帮助。这些项目通常包括硬件设计文件、…...
第五部分:Linux中的gcc/g++以及gdb和makefile
目录 1、编译器gcc和g 1.1、预处理(进行宏替换) 1.2、编译(生成汇编) 1.3、汇编(生成机器可识别代码) 1.4、连接(生成可执行文件或库文件) 1.5、gcc编译器的使用 2、Linux调试器-gdb使用 2.1、debug…...
decison tree 决策树
熵 信息增益 信息增益描述的是在分叉过程中获得的熵减,信息增益即熵减。 熵减可以用来决定什么时候停止分叉,当熵减很小的时候你只是在不必要的增加树的深度,并且冒着过拟合的风险 决策树训练(构建)过程 离散值特征处理:One-Hot…...
GPU算力平台|在GPU算力平台部署AI虚拟换衣模型(CatVTON)的应用实战教程
文章目录 一、GPU算力服务平台概述智能资源分配优化的Kubernetes架构按需计费安全保障平台特色功能 二、平台账号注册流程AI虚拟换衣模型(CatVTON)的应用实战教程AI虚拟换衣模型(CatVTON)的介绍AI虚拟换衣模型(CatVTON)的部署步骤 一、GPU算力服务平台概述 蓝耘GPU算力平台专为…...
使用云服务器自建Zotero同步的WebDAV服务教程
Zotero 是一款广受欢迎的文献管理软件,其同步功能可以通过 WebDAV 实现文献附件的同步。相比 Zotero 官方提供的300MB免费存储服务,自建 WebDAV 服务具有存储空间大、成本低以及完全控制数据的优势。本文将详细介绍如何使用云服务器自建 WebDAV 服务&…...
单片机基础模块学习——按键
一、按键原理图 当把跳线帽J5放在右侧,属于独立按键模式(BTN模式),放在左侧为矩阵键盘模式(KBD模式) 整体结构是一端接地,一端接控制引脚 之前提到的都是使用了GPIO-准双向口的输出功能&#x…...
FlinkSql使用中rank/dense_rank函数报错空指针
问题描述 在flink1.16(甚至以前的版本)中,使用rank()或者dense_rank()进行排序时,某些场景会导致报错空指针NPE(NullPointerError) 报错内容如下 该报错没有行号/错误位置,无法排查 现状 目前已经确认为bug,根据github上的PR日…...
WPF基础 | WPF 基础概念全解析:布局、控件与事件
WPF基础 | WPF 基础概念全解析:布局、控件与事件 一、前言二、WPF 布局系统2.1 布局的重要性与基本原理2.2 常见布局面板2.3 布局的测量与排列过程 三、WPF 控件3.1 控件概述与分类3.2 常见控件的属性、方法与事件3.3 自定义控件 四、WPF 事件4.1 路由事件概述4.2 事…...
【AIGC学习笔记】扣子平台——精选有趣应用,探索无限可能
背景介绍: 由于近期业务发展的需求,我开始接触并深入了解了扣子平台的相关知识,并且通过官方教程自学了简易PE工作流搭建的技巧。恰逢周会需要准备与工作相关的分享主题,而我作为一个扣子平台的初学者,也想探索一下这…...
mock可视化生成前端代码
介绍:mock是我们前后端分离的必要一环、ts、axios编写起来也很麻烦。我们就可以使用以下插件,来解决我们的问题。目前支持vite和webpack。(配置超级简单!) 欢迎小伙伴们提issues、我们共建。提升我们的开发体验。 vi…...
csapp2.4节——浮点数
目录 二进制小数 十进制小数转二进制小数 IEEE浮点表示 规格化表示 非规格化表示 特殊值 舍入 浮点运算 二进制小数 类比十进制中的小数,可定义出二进制小数 例如1010.0101 小数点后的权重从-1开始递减。 十进制小数转二进制小数 整数部分使用辗转相除…...
Java面试题2025-Spring
讲师:邓澎波 Spring面试专题 1.Spring应该很熟悉吧?来介绍下你的Spring的理解 1.1 Spring的发展历程 先介绍Spring是怎么来的,发展中有哪些核心的节点,当前的最新版本是什么等 通过上图可以比较清晰的看到Spring的各个时间版本对…...
element tbas增加下拉框
使用Tabs 标签页的label插槽,嵌入Dropdown 下拉菜单,实现Tabs 标签页增加下拉切换功能 Tabs 标签页 tab-click"事件"(这个事件当中到拥有下拉框的tab里时,可以存一下Dropdown 第一个菜单的id,实现点击到拥有…...
Windows Defender添加排除项无权限的解决方法
目录 起因Windows Defender添加排除项无权限通过管理员终端添加排除项管理员身份运行打开PowerShell添加/移除排除项的命令 起因 博主在打软件补丁时,遇到 Windows Defender 一直拦截并删除文件,而在 Windows Defender 中无权限访问排除项。尝试通过管理…...
Git上传了秘钥如何彻底修改包括历史记录【从安装到实战详细版】
使用 BFG Repo-Cleaner 清除 Git 仓库中的敏感信息 1. 背景介绍 在使用 Git 进行版本控制时,有时会不小心将敏感信息(如 API 密钥、密码等)提交到仓库中。即使后续删除,这些信息仍然存在于 Git 的历史记录中。本文将介绍如何使用…...
贪心专题----
看了讲解,贪心似乎没有定式的解题方法,更多是按照常识来; 455. 分发饼干 将胃口和饼干尺寸 都排序; 然后遍历胃口,从饼干尺寸的最后一个开始。 这里为什么是遍历胃口? 当胃口大于饼干尺寸,…...
YOLOv8改进,YOLOv8检测头融合DynamicHead,并添加小目标检测层(四头检测),适合目标检测、分割等,全网独发
摘要 作者提出一种新的检测头,称为“动态头”,旨在将尺度感知、空间感知和任务感知统一在一起。如果我们将骨干网络的输出(即检测头的输入)视为一个三维张量,其维度为级别 空间 通道,这样的统一检测头可以看作是一个注意力学习问题,直观的解决方案是对该张量进行全自…...
LabVIEW项目中的工控机与普通电脑选择
工控机(Industrial PC)与普通电脑在硬件设计、性能要求、稳定性、环境适应性等方面存在显著差异。了解这些区别对于在LabVIEW项目中选择合适的硬件至关重要。下面将详细分析这两种设备的主要差异,并为LabVIEW项目中的选择提供指导。 硬件设…...
AI赋能医疗:智慧医疗系统源码与互联网医院APP的核心技术剖析
本篇文章,笔者将深入剖析智慧医疗系统的源码架构以及互联网医院APP背后的核心技术,探讨其在医疗行业中的应用价值。 一、智慧医疗系统的核心架构 智慧医疗系统是一个高度集成的信息化平台,主要涵盖数据采集、智能分析、决策支持、远程医疗等…...
一文详解Filter类源码和应用
背景 在日常开发中,经常会有需要统一对请求做一些处理,常见的比如记录日志、权限安全控制、响应处理等。此时,ServletApi中的Filter类,就可以很方便的实现上述效果。 Filter类 是一个接口,属于 Java Servlet API 的一部…...
Spring Boot - 数据库集成03 - 集成Mybatis
Spring boot集成Mybatis 文章目录 Spring boot集成Mybatis一:基础知识1:什么是MyBatis2:为什么说MyBatis是半自动ORM3:MyBatis栈技术演进3.1:JDBC,自行封装JDBCUtil3.2:IBatis3.3:My…...
力扣算法题——202.快乐数【系统讲解】
目录 💕1.题目 💕2.解析思路 本题思路总览 借助 “环” 的概念探索规律 从规律到代码实现的转化 快慢指针的具体实现 代码整体流程 💕3.代码实现 💕4.完结 二十七步也能走完逆流河吗 💕1.题目 💕2.解…...
求阶乘(信息学奥赛一本通-2019)
【题目描述】 利用for循环求n!的值。 提示,n!12...n。 【输入】 输入一个正整数n。 【输出】 输出n!的值。 【输入样例】 4 【输出样例】 24 【提示】 【数据规模及约定】 对于所有数据,1≤n≤20。 【题解代码】 #include<iostream> using namesp…...
【含代码】逆向获取 webpack chunk 下的__webpack_require__ 函数,获悉所有的模块以及模块下的函数
背景 Webpack 打包后的代码是不会直接暴露 __webpack_require__ 函数,目的是为了避免污染全局变量同时也为了保护 webpack 的打包后的模块都隐藏在闭包函数里,达到数据的安全性。 而有时我们为了测试某个函数,想直接获取这个内置函数&#…...
图生3d算法学习笔记
目录 hunyuan3d 2 stable-point-aware-3d hunyuan3d 2 https://github.com/Tencent/Hunyuan3D-2/tree/main/hy3dgen stable-point-aware-3d GitHub - Stability-AI/stable-point-aware-3d: SPAR3D: Stable Point-Aware Reconstruction of 3D Objects from Single Images...
WebSocket 心跳机制:确保连接稳定与实时性
目录 前言 什么是 WebSocket 心跳机制? WebSocket 心跳机制的实现 关键代码如下: WebSocket 心跳机制的应用场景 WebSocket 心跳机制的优势 WebSocket 心跳机制的注意事项 前言 WebSocket 是一种基于持久连接的协议,它支持全双工通信&…...
[SUCTF 2018]MultiSQL1
进去题目页面如下 发现可能注入点只有登录和注册,那么我们先注册一个用户,发现跳转到了/user/user.php, 查看用户信息,发现有传参/user/user.php?id1 用?id1 and 11,和?id1 and 12,判断为数字型注入 原本以为是简单的数字型注入,看到大…...
数据结构——AVL树的实现
Hello,大家好,这一篇博客我们来讲解一下数据结构中的AVL树这一部分的内容,AVL树属于是数据结构的一部分,顾名思义,AVL树是一棵特殊的搜索二叉树,我们接下来要讲的这篇博客是建立在了解搜索二叉树这个知识点…...
Kubernetes可视化界面
DashBoard Kubernetes Dashboard 是 Kubernetes 集群的一个开箱即用的 Web UI,提供了一种图形化的方式来管理和监视 Kubernetes 集群中的资源。它允许用户直接在浏览器中执行许多常见的 Kubernetes 管理任务,如部署应用、监控应用状态、执行故障排查以及…...
flutter_学习记录_00_环境搭建
1.参考文档 Mac端Flutter的环境配置看这一篇就够了 flutter的中文官方文档 2. 本人环境搭建的背景 本人的电脑的是Mac的,iOS开发,所以iOS开发环境本身是可用的;外加Mac电脑本身就会配置Java的环境。所以,后面剩下的就是&#x…...
【React】PureComponent 和 Component 的区别
前言 在 React 中,PureComponent 和 Component 都是用于创建组件的基类,但它们有一个主要的区别:PureComponent 会给类组件默认加一个shouldComponentUpdate周期函数。在此周期函数中,它对props 和 state (新老的属性/状态)会做一…...
vim如何设置制表符表示的空格数量
:set tabstop4 设置制表符表示的空格数量 制表符就是tab键,一般默认是四个空格的数量 示例: (vim如何使设置制表符表示的空格数量永久生效:vim如何使相关设置永久生效-CSDN博客)...
Python中程序流程的控制
本篇我们将介绍程序流程控制方面的内容,了解如何控制程序的流程,使得程序具有“判断能力”, 能够像人脑一样分析问题。在Python中,程序流程的控制主要通过以下几种方式实现: 分支语句 前言:我很熟悉分支语句…...
基于聚类与相关性分析对马来西亚房价数据进行分析
碎碎念:由于最近太忙了,更新的比较慢,提前祝大家新春快乐,万事如意!本数据集的下载地址,读者可以自行下载。 1.项目背景 本项目旨在对马来西亚房地产市场进行初步的数据分析,探索各州的房产市…...
【例51.3】 平移数据
题目描述 将a数组中第一个元素移到数组末尾,其余数据依次往前平移一个位置。 输入 第一行为数组a的元素个数; 第二行为n个小于1000的正整数。 输出 平移后的数组元素,每个数用一个空格隔开。 样例输入 复制 10 1 2 3 4 5 6 7 8 9 10 样例输出 复…...
【unity游戏开发之InputSystem——02】InputAction的使用介绍(基于unity6开发介绍)
文章目录 前言一、InputAction简介1、InputAction是什么?2、示例 二、监听事件started 、performed 、canceled1、启用输入检测2、操作监听相关3、关键参数 CallbackContext4、结果 三、InputAction参数相关1、点击齿轮1.1 Actions 动作(1)动…...
Alfresco Content Services docker自动化部署操作
Alfresco Content Services docker部署文档 前提条件 在开始之前,需要确保已经安装了 Docker 和 Docker Compose。Docker 用于创建和管理容器,Docker Compose 则用于定义和运行多容器的 Docker 应用。 步骤 1. 创建目录结构 首先,创建一个…...
侧边导航(Semi Design)
根据前几次的导航栏设计,从最简单的三行导航栏到后面响应式的导航栏,其实可以在这个的基础上慢慢优化,就可以得到一个日常使用设计的导航栏。设计步骤也和之前的类似。 一、实现步骤 1、先下载安装好npm install douyinfe/semi-icons 2、引…...