account/http
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 增加代码

Browse Source
This commit is contained in:
pangdezhen
2023-06-19 09:19:48 +08:00
commit 9284f8029b
39 changed files with 6317 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
playground/.gitignore vendored Normal file
View File

@ -0,0 +1,28 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

40
playground/README.md Normal file
View File

@ -0,0 +1,40 @@
# playground
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
1. Disable the built-in TypeScript Extension
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
pnpm install
```
### Compile and Hot-Reload for Development
```sh
pnpm dev
```
### Type-Check, Compile and Minify for Production
```sh
pnpm build
```

1
playground/env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

17
playground/index.html Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Crami Http</title>
<style>
html{
background: #121212;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

13
playground/src/App.vue Normal file
View File

@ -0,0 +1,13 @@
<script setup lang="ts">
import GetComp from './components/get.vue'
import PostComp from './components/post.vue'
import Upload from './components/upload.vue'
</script>
<template>
<div>
<get-comp />
<post-comp />
<Upload />
</div>
</template>

10
playground/src/api/index.ts Normal file
View File

@ -0,0 +1,10 @@
export interface RequestParams{
username?: string
password?: string
}
export interface ResponseData{
data?: any
success?: boolean
code: number
msg: string
}

74
playground/src/assets/base.css Normal file
View File

@ -0,0 +1,74 @@
/* color palette from <https://github.com/vuejs/theme> */
:root {
--vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;
--vt-c-black: #181818;
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;
--vt-c-indigo: #2c3e50;
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
/* semantic color variables for this project */
:root {
--color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);
--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);
--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
position: relative;
font-weight: normal;
}
body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition: color 0.5s, background-color 0.5s;
line-height: 1.6;
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

1
playground/src/assets/logo.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69" xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 308 B

49
playground/src/components/get.vue Normal file
View File

@ -0,0 +1,49 @@
<script lang="ts" setup>
import { Http, useGet, useHttp } from '@crami/http'
import type { ResponseData } from '~/api'
const handleGet = async() => {
const data = await Http.get<ResponseData>({
url: '/api/table/columns',
})
// eslint-disable-next-line no-console
console.log(data)
}
const handleUseHttp = async() => {
const data = await useHttp<ResponseData>({
url: '/api/table/columns',
params: {
aaa: 'SAdasdas',
nnn: 'dasdasd',
},
})
// eslint-disable-next-line no-console
console.log(data)
}
const useGetData = async() => {
const data = await useGet('/api/table/columns')
// eslint-disable-next-line no-console
console.log(data)
}
</script>
<template>
<div p-3>
<div text-white mb-2>
Get类型请求测试
</div>
<div flex="~ wrap gap-2">
<button btn @click="handleGet">
Http测试请求
</button>
<button btn @click="handleUseHttp">
useHttp请求测试
</button>
<button btn @click="useGetData">
useGet请求测试
</button>
</div>
</div>
</template>

54
playground/src/components/post.vue Normal file
View File

@ -0,0 +1,54 @@
<script lang="ts" setup>
import { Http, useHttp, usePost } from '@crami/http'
import type { RequestParams, ResponseData } from '~/api'
const handleGet = async() => {
const data = await Http.post<ResponseData>({
url: '/api/date/table/data',
})
// eslint-disable-next-line no-console
console.log(data)
}
const handleUseHttp = async() => {
const data = await useHttp<ResponseData>({
url: '/api/date/table/data',
method: 'POST',
data: [
'1', '2',
],
})
// eslint-disable-next-line no-console
console.log(data)
}
const useGetData = async() => {
const data = await usePost<ResponseData, RequestParams>(
'/api/date/table/data',
{
username: '',
password: '',
})
// eslint-disable-next-line no-console
console.log(data)
}
</script>
<template>
<div p-3>
<div text-white mb-2>
Post类型请求测试
</div>
<div flex="~ wrap gap-2">
<button btn @click="handleGet">
Http测试请求
</button>
<button btn @click="handleUseHttp">
useHttp请求测试
</button>
<button btn @click="useGetData">
usePost请求测试
</button>
</div>
</div>
</template>

31
playground/src/components/upload.vue Normal file
View File

@ -0,0 +1,31 @@
<script lang="ts" setup>
import { Http } from '@crami/http'
import { ref } from 'vue'
const file = ref<File>()
const handleChange = (e: any) => {
// console.log(e.target.files)
file.value = e.target.files[0]
}
const handleGet = () => {
Http.uploadFile({
url: '/api/table/columns',
}, {
filename: 'test.txt',
file: file.value,
})
}
</script>
<template>
<div p-3>
<div text-white mb-2>
文件上传测试
</div>
<div flex="~ wrap gap-2">
<input type="file" @change="handleChange">
<button btn @click="handleGet">
文件上传测试
</button>
</div>
</div>
</template>

34
playground/src/main.ts Normal file
View File

@ -0,0 +1,34 @@
import { createApp } from 'vue'
import { createAxios, createHttp, icpxTransform, icpxTransformConfig } from '@crami/http'
import App from './App.vue'
import '@unocss/reset/tailwind.css'
import 'uno.css'
const axios = createAxios({
baseURL: '/',
})
axios.interceptors.request.use((config) => {
return config
})
axios.interceptors.response.use((response) => {
return response.data
})
// axios.interceptors.request = function() {
//
// }
const http = createHttp(axios, {
responseTransform: icpxTransform,
requestTransform: icpxTransformConfig,
headers: () => ({
token: 'this is my token',
}),
})
const app = createApp(App)
app.use(http)
app.mount('#app')

38
playground/unocss.config.ts Normal file
View File

@ -0,0 +1,38 @@
import {
defineConfig,
presetAttributify,
presetIcons,
presetTypography,
presetUno,
presetWebFonts,
transformerDirectives,
transformerVariantGroup,
} from 'unocss'
export default defineConfig({
shortcuts: [
['btn', 'px-4 py-1 rounded inline-block bg-teal-700 text-white cursor-pointer hover:bg-teal-800 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
],
presets: [
presetUno(),
presetAttributify(),
presetIcons({
scale: 1.2,
warn: true,
}),
presetTypography(),
presetWebFonts({
fonts: {
sans: 'DM Sans',
serif: 'DM Serif Display',
mono: 'DM Mono',
},
}),
],
transformers: [
transformerDirectives(),
transformerVariantGroup(),
],
safelist: 'prose prose-sm m-auto text-left'.split(' '),
})

30
playground/vite.config.ts Normal file
View File

@ -0,0 +1,30 @@
import { URL, fileURLToPath } from 'url'
import Unocss from 'unocss/vite'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue({
reactivityTransform: true,
}),
Unocss(),
],
resolve: {
alias: {
'@crami/http': fileURLToPath(new URL('../src', import.meta.url)),
'~/': fileURLToPath(new URL('./src/', import.meta.url)),
},
},
server: {
proxy: {
'/api': {
target: 'http://10.0.59.229:7300/mock/622ff143ec91f63c580c0560',
rewrite: (path) => {
return path.replace(/^\/api/, '')
},
},
},
},
})