介绍
官网和文档
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...