窗口拆分可拖动布局组件splitpanes

介绍 官网和文档 https://github.com/antoniandre/splitpanes https://antoniandre.github.io/splitpanes/ 这个组件能实现上面效果,窗口任意拆分,拆分完还可以拖动来改变每个布局的大小。 还是响应式的 类似android中的weight布局方式,甚至更好用一些 安装 npm i splitpanes import { Splitpanes, Pane } from 'splitpanes' import 'splitpanes/dist/splitpanes.css' 使用 安装好之后就可以直接import使用了 <template> <splitpanes class="defaul...

Vue3增删改查demo源码

介绍 一个vue纯前端的增删改查的demo源码 用来学习vue的一些组件和功能非常不错,实现的功能也是很实用的 毕竟UI仔最常见的操作就是增删改查 项目教程来自B站,原本也配套了源码。 https://space.bilibili.com/94560450/channel/collectiondetail?sid=582261&spm_id_from=333.788.0.0 https://github.com/yanmiao99/vue3-go-crud-project 不过源码实际跑的时候发现after源码又增加了后端的go接口的代码不能直接运行了 before的源码没有go接口,但是也有一些bug跑不起来。 我将源码改了改,纯前端,clone之后直接npm install,npm run dev就可以运行了 项目具体介绍 支持增加item,删...

vue3开箱即用的demo源码

介绍 本文分享自用的vue3项目开箱即用的源代码 常用的依赖已经安装好了, 包括element-plus,route,axios的get,post,stream接口 pinia,pinia持久化,tailwindcss 一个左右布局的vue组件 启动以后类似如下 源码地址 https://gitcode.com/atandroid/vue3BaseDemo/overview git提交记录 ...

pinia与cookie的同步工具类

介绍 有时候pinia的store状态需要与cookie同步,比如用户信息 这里提供一个方便的工具类 使用 cookie.js工具类 //设置cookie,增加到vue实例方便全局调用 //vue全局调用的理由是,有些组件所用到的接口可能需要session验证,session从cookie获取 //当然,如果session保存到vuex的话除外 //全局引入vue var cookie={ setCookie (c_name, value, expiredays){ var exdate = new Date(); exdate.setTime(exdate.getTime()+expiredays); exdate.setDate(exdate....

Vue的路由组件Router的基本使用

安装和注册 官方文档 https://router.vuejs.org/zh/introduction.html npm i vue-router "vue-router": "^4.3.0" main.js中注册 import router from './router' 定义路由 import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../components/HomeView.vue' import AboutView from '../components/AboutView.vue' ...

vue接口请求库axios,fetch的使用

介绍 本文介绍一下axios的安装,配置,get,post和stream用法(封装方式),拦截器用法 安装 npm install axios "axios": "^1.6.8", request封装 request.js主要是对axios进行基本配置 import axios from 'axios' export const API_BASE_URL = "http://192.168.68.92:16603"; const service = axios.create({ //url = base url + reqeust url baseURL : API_BASE_URL, //配置请求超时时间 ...

element-plus的Menu菜单

介绍 Menu菜单用来做标题头还是蛮方便的。 https://element-plus.org/zh-CN/component/menu.html 本文介绍一下基本使用 基本使用 <template> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true" > <el-menu-item index="/">Home</el-menu-item> <...

django开发JWT登录功能流程梳理

django开发JWT登录功能流程梳理 jwt介绍 JWT登录功能,就是返回给用户JWT验证信息做token。后端验证用户信息的时候对信息解密,验证用户是否正确。 jwt分为三部分,header定义加密算法,payload是用户信息,signature是前两部分的base64字符串后再加密。三部分再base64中间用点号连接组成JWT jwt可以是对称加密也可以是非对称加密(私钥加密,公钥解密),秘钥要保存在服务器端不能泄露 登录流程 验证码表 用户表   JWTtoken生成 安装依赖库: https://github.com/jpadilla/django-rest-framework-jwt 注意上面项目其实已经不再维护,不过现在还可以用。如果更高版本的django可以考虑使用下面的库 https://github...

pnpm使用介绍

介绍 一般前端项目使用npm做包管理,下载依赖包到项目node_modules文件夹下。 但是发现一个基础项目node_modules文件夹就有几百兆,每个项目都要下载一次,太占硬盘。 pnpm可以解决这个问题,它下载依赖的时候下载到全局文件夹,然后通过硬链接的方式关联到项目node_modules文件夹下。 但是具体配置还挺多的,网上教程也不够详细,这里总结一下配置和使用方法万一有写的不对,欢迎指正。 安装 npm install -g pnpm 先全局安装pnpm 然后打开下面文件,没有就创建 C:\Users\用户名\.npmrc registry=https://registry.npmmirror.com/ global-bin-dir=D:\greensoft\IDE\pnpm_modules_repo cache...

element-plus的form表单

介绍 form表单官网介绍非常多,但是很难看懂怎么用的。 这里用个例子介绍常用场景 这里一个form表单设计两个提交按钮, 第一个提交按钮需要校验验证码和邮箱。 第二个提交按钮不需要校验验证码,校验验证码以外的的其他输入框 官方文档 https://element-plus.org/zh-CN/component/form.html 使用 <template> <div class="register-container"> <el-form :model="form" :rules="rules" ref="formRef" label-width="100px"> <el-form...
切换注册

登录

忘记密码 ?

切换登录

注册