草庐IT

Vue-Router

全部标签

vue3+vite的axios的封装与全局使用

1.安装axios使用npm或yarn安装axios到项目中//使用pnpm安装  pnpminstallaxios//使用npm安装  npminstallaxios//使用yarn安装 yarnaddaxiosaxios是一个基于Promise的HTTP请求库,支持PromiseAPI、可以拦截请求和响应、可以转换请求和响应数据、支持取消请求、可以自动转换JSON数据等。 2.创建文件封装axios在src同级目录下创建utils(工具)文件夹,创建axios.ts,代码如下:因为是ts所以有时候会报红,是因为ts语法问题,给每个参或者函数添加类型就可以了。importaxiosfrom'

Vue入门三(表单控制|购物车案例|v-model进阶|与后端交互|计算属性|监听属性|Vue生命周期)

文章目录一、表单控制二、购物车案例三、v-model进阶四、与后端交互跨域问题解决,三种交互方法跨域问题详解1-CORS:后端代码控制,上面案例采用的方式1)方式一:后端添加请求头2)方式二:编写中间件3)方式三:第三方模块django-cors-headers2-Nginx反向代理(常用)3-JSONP:很老不会用了,它只能发get请求4-搭建Node代理服务器五、计算属性1)重写过滤案例六、监听属性七、Vue生命周期八个生命周期钩子函数实操案例一、表单控制 DOCTYPEhtml> htmllang="en"> head> metacharset="UTF-8"> title>Docume

【vue】 网站动态背景 | vanta.js的使用

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、Vanta.js是什么?二、使用步骤1.引入库在项目中安装three.js依赖在项目中安装VantaJS依赖2.代码部分,在具体项目中调用(基础调用)前言vanta.js可以为网站设置炫酷的动态背景比如在网站登陆的首页一、Vanta.js是什么?示例:vanta.js可以为网站设置炫酷的动态背景比如在网站登陆的首页。二、使用步骤首先我的测试项目是vue2版本,关于React和Angular框架自行查看npm官网Vantanpm官网:Vanta-npm1.引入库在项目中安装three.js依赖这里指定版本,否则会报错

react+vue 前端国密算法sm2、sm3 、sm4的js ts实现

1.简单介绍下SM2和SM3SM2算法:是一种公钥加密算法,它的密钥长度为256位,安全性较高。可用于数字签名、密钥协商等场景。SM3算法:是一种对称加密算法,用于消息摘要和数字签名等场景。它的密钥长度为256位,安全性较高。SM3算法与SM2算法相互配合,提高了整体安全性能。2.接下来讲前端如何实现安装npminstallsm-cryptoyarnaddsm-cryptosm2、sm3引入写法require('sm-crypto').sm2require('sm-crypto').sm3SM2非对称加密写法str是需要加密的字符串cipherMode//1-C1C3C2,0-C1C2C3,默

Vue+Element Ui实现el-table自定义表头下拉选择表头筛选

用vue+elementui开发管理系统时,使用el-table做表格,当表格列过多的时候,想要做成可选表头的,实现表格列的筛选显示,效果如下:代码文件结构:废话不多说,直接上代码:第一步:新建名为TableHeaderRender.vue 的文件      placement="bottom"    width="200"    trigger="manual"    v-model="visible"    @show="showPopover"    popper-class="table-header-popover"  >                  placeholder="

使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv-ui开发脚手架

使用命令行方式搭建uni-app+Vue3+Typescript+Pinia+Vite+TailwindCSS+uv-ui开发脚手架项目代码以上传至码云,项目地址:https://gitee.com/breezefaith/uniapp-vue3-ts-scaffold文章目录使用命令行方式搭建uni-app+Vue3+Typescript+Pinia+Vite+TailwindCSS+uv-ui开发脚手架一、前言二、脚手架技术栈简介2.1uni-app2.2vue32.3TypeScript2.4Pinia2.5TailwindCSS2.6uv-ui2.7vite三、详细步骤3.1Node.

Vue2+Koa2+Typescript前后端框架教程--05Sequelize(ORM)的使用,实现基础的班级增删改查API

本篇开始分享Node.js后端服务开发中对于数据结构ORM的实现,主要使用的技术栈是:Sequelize。上一篇文章中讲到班级管理的数据结构:ID,班级名称,班级编码,班主任ID,使用的数据库是MySQL,通过Sequelize,实现简单的增删改查的API。1.MySQL中创建数据库和班级表。  1.1创建数据库demo_nodeCREATEDATABASE`demo_node`/*!40100DEFAULTCHARACTERSETutf8mb4COLLATEutf8mb4_0900_ai_ci*//*!80016DEFAULTENCRYPTION='N'*/;  1.2创建班级表t_clas

利用Vue命令行快速创建项目案例

今天特意写了一篇关于如何利用Vue命令行快速创建项目案例,希望对大家有帮助,首先需要环境要求:安装有 Node.js、 vue、 vue-cli 安装有Node.js、vue、vue-cli(node下载地址:https://nodejs.org/en/),打开cmd,查看nodejs版本和npm版本,在命令行中输入: node-v//node版本 npm-v //npm版本12npm更新到最新的版本 npminstall-gnpm//更新至最新版1下载淘宝镜像,可加快下载速度 npminstall-gcnpm--registry=https://registry.npm.taobao

基于vue.js校园共享洗衣系统设计与实现(uni-app框架+PHP后台) 研究背景和意义、国内外现状

 博主介绍:黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程,免费项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频;项目的界面和功能都可以定制,包安装运行!!!如果需要联系我,可以在CSDN网站查询黄菊华老师在文章末尾可以获取联系方式一、研究背景和意义随着校园生活的不断丰富和学生生活质量的提高,学生们对日常生活服务的需求也日益增长。其中,洗衣服务作为学生日常生活中的重要一环,其便捷性和效率性直接关系到学

Vue H5 前端自定义车牌号输入键盘(支持新能源)

项目介绍:这个项目是基于vue2+vant 写的录入车牌的键盘,有需要的伙伴可以参考一下;先看一下效果图: 这个是组件的代码,直接在页面中引用即可,车牌号的值存在carNumber里面,在确定按钮中,讲完整的carNumber传到引用的页面中即可.输入车牌(绿色背景为新能源车牌){{first}}{{numArr[0]}}•{{numArr[1]}}{{numArr[2]}}{{numArr[3]}}{{numArr[4]}}{{numArr[5]}}{{numArr[6]}}确定完成{{val.name}}{{val.name}}//import{submitCarNumber}from'.