Skip to content

S
support
Commit f0e7ad3a by suwenbiao
Options

更新代码

parent 8aa35c3a
Showing with 308 additions and 328 deletions
.env.development
...@@ -3,5 +3,6 @@ ENV = 'development' ...@@ -3,5 +3,6 @@ ENV = 'development'
# base api # base api
#VUE_APP_BASE_API = 'http://192.168.3.44:8981' VITE_APP_API = 'http://192.168.3.44:8981'
.gitignore
.DS_Store # Logs
node_modules logs
/dist *.log
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
pnpm-debug.log* pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files # Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea .idea
.vscode .DS_Store
*.suo *.suo
*.ntvs* *.ntvs*
*.njsproj *.njsproj
......
README.md
# v3test # Vue 3 + TypeScript + Vite
## Project setup This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
```
npm install
```
### Compiles and hot-reloads for development ## Recommended IDE Setup
```
npm run serve
```
### Compiles and minifies for production - [VS Code](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).
```
npm run build
```
### Customize configuration ## Type Support For `.vue` Imports in TS
See [Configuration Reference](https://cli.vuejs.org/config/).
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.
index.html 0 → 100644
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
{ {
"name": "support", "name": "my-vue-ts-project",
"version": "0.1.0",
"private": true, "private": true,
"version": "0.0.0",
"type": "module",
"scripts": { "scripts": {
"dev": "vue-cli-service serve", "dev": "vite",
"build:prod": "vue-cli-service build", "build": "vue-tsc && vite build",
"build:stage": "vue-cli-service build --mode staging", "preview": "vite preview"
"preview": "node build/index.js --preview",
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
"lint": "eslint --ext .js,.vue src",
"test:unit": "jest --clearCache && vue-cli-service test:unit",
"test:ci": "npm run lint && npm run test:unit"
}, },
"dependencies": { "dependencies": {
"axios": "^1.6.0", "axios": "^1.6.0",
"element-plus": "^2.4.1", "element-plus": "^2.4.1",
"vue": "^3.2.13", "vue": "^3.3.4"
"vue-class-component": "^8.0.0-0",
"vue-router": "^4.0.3",
"vuex": "^4.0.0"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-router": "~5.0.0", "@vitejs/plugin-vue": "^4.2.3",
"@vue/cli-plugin-typescript": "~5.0.0", "sass": "^1.69.5",
"@vue/cli-plugin-vuex": "~5.0.0", "typescript": "^5.0.2",
"@vue/cli-service": "~5.0.0", "vite": "^4.4.5",
"sass": "^1.32.7", "vue-tsc": "^1.8.5"
"sass-loader": "^12.0.0", }
"typescript": "~4.5.5"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
} }
public/index.html deleted 100644 → 0
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
public/vite.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
src/.env.development deleted 100644 → 0
# just a flag
ENV = 'development'
# base api
VITE_APP_BASE_API = 'http://192.168.3.44:8981'
src/.env.production deleted 100644 → 0
# just a flag
ENV = 'production'
# base api
# VUE_APP_BASE_API = '/prod-api'
VUE_APP_BASE_API = 'https://channel-api.occloud.net/'
VUE_APP_LIVE_PLAYER='https://webjs-lib.finezb.com/live.player_commons_4.7.js'
VUE_APP_REDIRECT_URL = 'https://qw.occloud.net'
src/App.vue
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import HomeView from './views/HomeView.vue'
</script>
<template> <template>
<router-view/> <HomeView />
<HelloWorld msg="Vite + Vue" />
</template> </template>
<style lang="scss"> <style scoped>
#app { .logo {
font-family: Avenir, Helvetica, Arial, sans-serif; height: 6em;
-webkit-font-smoothing: antialiased; padding: 1.5em;
-moz-osx-font-smoothing: grayscale; will-change: filter;
text-align: center; transition: filter 300ms;
color: #2c3e50; }
height: 100vh; .logo:hover {
min-width: 1400px; filter: drop-shadow(0 0 2em #646cffaa);
overflow: auto;
} }
*{ .logo.vue:hover {
margin: 0; filter: drop-shadow(0 0 2em #42b883aa);
padding:0;
} }
</style> </style>
src/api/index.js deleted 100644 → 0
import request from './request.js'
//账号密码登录
function login(data) {
// return request('/auth/login', "POST", data)
const form = new FormData()
for (const key in data) {
form.append(key, data[key])
}
return request(
'/auth/login',
'POST',
form
)
}
export default {
login,
}
\ No newline at end of file
src/api/request.js deleted 100644 → 0
import axios from 'axios'
const baseUrl = "http://192.168.3.44:8981"
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
const token = sessionStorage.getItem('u_token');
if (token) {
config.headers.Token = token;
}
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
axios.interceptors.response.use(response => {
// 对响应数据做点什么
if (response.data.code === 200) {
return response;
} else {
return Promise.reject(response);
}
}, error => {
// 对响应错误做点什么
return Promise.reject(error);
});
const request = (url, method, data) => {
const config = {
headers: {
'Content-Type': 'application/json', // 可根据实际情况修改
},
method,
url: baseUrl + url,
};
if (method === 'GET') {
config.params = data;
} else if (method === 'POST') {
config.data = data;
}
return axios(config);
};
export default request;
src/api/request.ts 0 → 100644
// request.ts
import axios, { AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios';
const baseUrl = import.meta.env.VITE_APP_API;
// 添加一个新的类型，用于包装 AxiosRequestConfig
interface InternalAxiosRequestConfig<T = any> extends AxiosRequestConfig {
headers?: Record<string, any> | undefined;
// 可以在这里添加额外的属性
// 比如 token?: string;
}
const token = sessionStorage.getItem('u_token');
const defaultHeaders: Record<string, any> = {
Accept: 'application/json',
...(token && { Token: token }),
// 其他默认头部...
};
// 创建一个 axios 实例
const instance = axios.create({
baseURL: baseUrl,
timeout: 10000,
});
// 请求拦截器
const requestConfig: InternalAxiosRequestConfig = {
// 其他配置...
headers: { ...defaultHeaders },
};
// 响应拦截器
instance.interceptors.response.use(
(response: AxiosResponse) => {
if (response.status === 200) {
return response.data;
} else {
// 处理非 200 状态码
return Promise.reject(new Error(`HTTP error: ${response.status}`));
}
},
(error: AxiosError) => {
// 对响应错误做处理
if (error.response) {
// 请求已经发出，但服务器响应的状态码不在 2xx 范围内
console.error(`HTTP error: ${error.response.status}`);
// 这里你可以根据状态码执行一些特定的逻辑
if (error.response.status === 401) {
console.error("Unauthorized. Redirecting to login...");
// 例如，重定向到登录页面
// window.location.href = "/login";
}
} else {
// 请求没有发出，可能是网络问题或者其他原因
console.error("Network error:", error.message);
}
return Promise.reject(error);
}
);
// 封装请求函数
const request = <T>(config: InternalAxiosRequestConfig): Promise<InternalAxiosRequestConfig> => {
return instance.request(config);
};
export default request;
src/assets/vue.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file
src/components/HelloWorld.vue 0 → 100644
<script setup lang="ts">
import { ref } from 'vue'
import request from '../api/request'
const data = ref('')
const fetchData = async () => {
try {
const result = await request<string>({
method: 'POST',
url: '/auth/login?login=shi.jiuyan@163.com&password=654321',
// 其他请求配置...
});
data.value = result.data; // 注意这里的修改
// 处理请求成功的逻辑
} catch (error) {
// 处理请求失败的逻辑
console.error('Error fetching data:', error);
}
};
</script>
<template>
<button @click="fetchData">调取接口</button>
<div v-if="data">{{ data }}</div>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>
src/login/index.vue
...@@ -9,10 +9,10 @@ ...@@ -9,10 +9,10 @@
<svg-icon icon-class="user" /> <svg-icon icon-class="user" />
</span> </span>
<el-input <el-input
ref="login" ref="username"
v-model="loginForm.login" v-model="loginForm.username"
placeholder="请输入用户名" placeholder="请输入用户名"
name="login" name="username"
type="text" type="text"
tabindex="1" tabindex="1"
auto-complete="on" auto-complete="on"
...@@ -66,11 +66,12 @@ export default { ...@@ -66,11 +66,12 @@ export default {
} }
return { return {
loginForm: { loginForm: {
login: '', username: '',
subDomain: '',
password: '' password: ''
}, },
loginRules: { loginRules: {
login: [{ required: true, trigger: 'blur', validator: validateUsername }], username: [{ required: true, trigger: 'blur', validator: validateUsername }],
password: [{ required: true, trigger: 'blur', validator: validatePassword }] password: [{ required: true, trigger: 'blur', validator: validatePassword }]
}, },
loading: false, loading: false,
...@@ -106,7 +107,11 @@ export default { ...@@ -106,7 +107,11 @@ export default {
}) })
}, },
handleLogin() { handleLogin() {
api.login(this.loginForm).then(res=>{ var loginfrom = {
login:"shi.jiuyan@163.com",
password:'654321'
}
api.login(loginfrom).then(res=>{
console.log(res); console.log(res);
}) })
}, },
......
src/main.ts
import { createApp } from 'vue' import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus' import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import store from './store'
const app = createApp(App) createApp(App).mount('#app')
app.config.warnHandler = (msg, vm, trace) => {
console.log(msg, trace)
}
app.use(store)
app.use(router)
app.use(ElementPlus)
app.mount('#app')
src/permission.js deleted 100644 → 0
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import { getUrlKey } from '@/utils/utils'
import getPageTitle from '@/utils/get-page-title'
NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = ['/login', '/register', 'authRedirect'] // no redirect whitelist
const whiteLike = '/subLogin' // 白名单模糊匹配
router.beforeEach(async(to, from, next) => {
// start progress bar
NProgress.start()
// set page title
document.title = getPageTitle(to.meta.title)
// determine whether the user has logged in
const hasToken = getToken()
// console.log(to.path)
if (getUrlKey('token')) {
await store.dispatch('user/occloudLogin', getUrlKey('token'))
}
if (hasToken) {
if (to.path === '/login') {
// if is logged in, redirect to the dashboard page
next({ path: '/' })
NProgress.done()
} else {
// const hasGetUserInfo = store.getters.name
const accountId = store.getters.accountId
// console.log(accountId)
// const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (accountId) {
next()
} else {
try {
// get user info
// note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
// const { roles } = await store.dispatch('user/getInfo')
const res = await store.dispatch('user/getInfo')
const roles = res.menuList
// generate accessible routes map based on roles
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
// dynamically add accessible routes
router.addRoutes(accessRoutes)
// hack method to ensure that addRoutes is complete
// set the replace: true, so the navigation will not leave a history record
next({ ...to, replace: true })
// next()
} catch (error) {
// remove token and go to login page to re-login
await store.dispatch('user/resetToken')
Message.error(error || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
} else {
/* has no token*/
// 解析子域名登录
if (whiteList.indexOf(to.path) !== -1 || to.path.includes(whiteLike)) {
// in the free login whitelist, go directly
next()
} else {
// other pages that do not have permission to access are redirected to the login page.
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
router.afterEach(() => {
// finish progress bar
NProgress.done()
})
src/shims-vue.d.ts deleted 100644 → 0
/* eslint-disable */
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
src/store/index.ts deleted 100644 → 0
import { createStore } from 'vuex'
export default createStore({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
src/style.css 0 → 100644
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
.card {
padding: 2em;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
src/vite-env.d.ts 0 → 100644
/// <reference types="vite/client" />
tsconfig.json
{ {
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "ES2020",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"useDefineForClassFields": true, "useDefineForClassFields": true,
"sourceMap": true, "module": "ESNext",
"baseUrl": ".", "lib": ["ES2020", "DOM", "DOM.Iterable"],
"types": [ "skipLibCheck": true,
"webpack-env"
], /* Bundler mode */
"paths": { "moduleResolution": "bundler",
"@/*": [ "allowImportingTsExtensions": true,
"src/*" "resolveJsonModule": true,
] "isolatedModules": true,
}, "noEmit": true,
"lib": [ "jsx": "preserve",
"esnext",
"dom", /* Linting */
"dom.iterable", "strict": true,
"scripthost" "noUnusedLocals": true,
] "noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
}, },
"include": [ "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"src/**/*.ts", "references": [{ "path": "./tsconfig.node.json" }]
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
} }
tsconfig.node.json 0 → 100644
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
vite.config.ts 0 → 100644
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment