搜索到
26
篇与
的结果
-
-
Vue3学习笔记：路由（Router）概念及使用教程 前置条件使用语言使用的是ts语言，不是js.安装路由包Vue3要使用路由，如果没有安装，先进行安装路由包，命令如下npm install vue-router@4路由的使用创建路由创建目录 在src目录下进行创建目录（文件夹）：router创建文件及路由定义 在创建的目录下创建文件：index.ts,其内容如下：import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'; import Login from '@/views/LoginPage.vue'; import Home from '@/views/HomePage.vue'; const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Home', component: Home, }, { path: '/login', name: 'Login', component: () => import('@/views/Login/LoginPage.vue'), children: [ { path: '', name: 'LoginFrom', component: () => import('@/views/Login/components/LoginForm.vue'), }, ], }, ]; const router = createRouter({ history: createWebHashHistory(), routes, }); // 全局前置守卫：路由跳转前设置页面标题（可选） router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title as string } next() // 必须调用 next() 放行 }) export default router; 以上内容中路由的路径、名称及组件包括子路由的都可以添加或修改以适应当下项目。以以上路由进行举例：对应关系是路由名是Home，对应的组件也就是组件是上边导入的页面，也就是路由要展示的内容。而Login下的子路由有一个名为loginFrom的路由，可以在Login的组件中定义子路由页面，子路由没有路径，就是默认展示页面。以下文件内容就是展示。App.vue 文件内容如下：<template> <RouterView /> </template> <script setup lang="ts"> </script>LoginPage.vue 文件内容如下：<template> <div class="common-layout"> <el-container class="layout-container"> <el-main class="layout-mian"> <div class="login-title"> <div style="font-size: 30px; font-weight: bold;">欢迎使用运维管理系统</div> <div style="margin-top: 10px;">本产品对各家系统进行整合使用</div> </div> </el-main> <el-aside class="layout-left-aside"> <RouterView /> </el-aside> </el-container> </div> </template> <script setup lang="ts"> </script> <style lang="scss" scoped> .common-layout { height: 100vh; background-image: url('../assets/imgs/bg-login.jpg'); .login-title { position: absolute; bottom: 30px; left: 50px; color: #fff; text-shadow: 0 0 10px rgba(178, 178, 178, 0.5); } .layout-container { height: 100%; } .layout-left-aside { width: 500px; display: flex; justify-content: left; align-items: center; height: 100%; } } </style>LoginForm.vue 文件内容如下：<template> <el-card style="width: 400px;"> <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" style="max-width: 600px; min-width: 300px;" :size="size" :label-position="labelPosition"> <div class="login-title"> 账号登录 </div> <el-form-item label="用户名" prop="username"> <el-input v-model="ruleForm.username" placeholder="请输入用户名" :prefix-icon="Avatar"/> </el-form-item> <el-form-item label="密 码" prop="password"> <el-input v-model="ruleForm.password" placeholder="请输入密码" type="password" :prefix-icon="Lock" /> </el-form-item> <el-form-item> <el-checkbox v-model="ruleForm.rememberMe" >记住我</el-checkbox> </el-form-item> <el-form-item > <el-row justify="space-between" style="width: 100%;"> <el-col :span="6"> <el-link href="#" type="primary">忘记密码？</el-link> </el-col> <el-col :span="12" style="text-align: right;"> <el-button plain type="primary" @click="goToRegister" link>还没有账号？立即注册</el-button> </el-col> </el-row> </el-form-item> <el-form-item> <div class="login-button"> <el-button type="danger" size="large" @click="onSubmit" :loading="isLoading" style="width: 60%; text-align: center;">登录</el-button> </div> </el-form-item> </el-form> <el-divider><span>其他登录方式</span></el-divider> <!-- 三方登录 --> <div class="third-party-login"> <el-button icon="Github" type="default" @click="thirdPartyLogin('github')" class="third-btn" > GitHub 登录 </el-button> <el-button icon="Google" type="default" @click="thirdPartyLogin('google')" class="third-btn" > Google 登录 </el-button> </div> </el-card> </template> <script setup lang="ts"> import { reactive,ref } from 'vue' import { Search,Lock,Avatar,House } from '@element-plus/icons-vue' import type { FormInstance, FormRules, FormProps, ElForm, ComponentSize } from 'element-plus' import { ElMessage } from 'element-plus' import { useRouter } from 'vue-router' const labelPosition = ref<FormProps['labelPosition']>('top'); const size = ref<ComponentSize>('large'); const isLoading = ref(false); const router = useRouter(); interface RuleForm { username: string; password: string; rememberMe: boolean; } const ruleFormRef = ref<FormInstance>() const ruleForm = reactive<RuleForm>({ username: '', password: '', rememberMe: false, }) const rules = reactive<FormRules<RuleForm>>({ username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, ], }); const goToRegister = () => { router.push('/register') } const onSubmit = () => { isLoading.value = true; if (!ruleFormRef.value) return; ruleFormRef.value.validate((valid) => { console.log(valid); if (valid) { // 模拟登录请求（实际项目中应调用后端登录接口） if (ruleForm.username === 'admin' && ruleForm.password === 'admin123') { ElMessage.success('登录成功！'); // 存储用户信息和 token（实际项目中应根据后端返回的数据进行存储） const token = 'mock-token-' + Date.now(); localStorage.setItem('userToken', token); isLoading.value = false; } else { ElMessage.error('用户名或密码错误！'); isLoading.value = false; } }else { isLoading.value = false; } }) } // 三方登录（模拟） const thirdPartyLogin = (platform: 'github' | 'google') => { isLoading.value = true // 模拟三方登录授权流程（实际项目需对接对应平台的 OAuth2.0 接口） setTimeout(() => { const token = `third-party-token-${platform}-${Date.now()}` localStorage.setItem('userToken', token) localStorage.setItem('userInfo', JSON.stringify({ username: `github_user_${Date.now().toString().slice(-4)}` })); ElMessage.primary(`${platform} 登录成功！`) router.push('/') isLoading.value = false }, 1500) } </script> <style scoped> .login-title { font-size: 24px; font-weight: bold; text-align: center; margin-bottom: 30px; } .login-button { margin-top: 12px; width: 100%; display: flex; justify-content: center; align-items: center; } </style>
-
安卓AudLux OS笔记：MinIO安装 1.先下载对应的版本，本次使用的安卓处理器是arm64的，与我一致的大概率直接可以使用这个版本。下载minIO arm64 链接 这个是二进制的，所以下载后可以直接使用。2、下载后需要对下载的文件加执行权chmod +x minio.RELEASE.2025-04-22T22-12-26Z命令中的 minio.RELEASE.2025-04-22T22-12-26Z 替换成你自己的文件3、（选做）移动到全局环境变量中mv ./minio.RELEASE.2025-04-22T22-12-26Z /usr/bin/minio4、测试和启动minio -versionminio server --address :10008 --console-address :10009 /mnt/data/
-
玩机笔记：树莓派五的摄像头 设置摄像头自己买的非官方的摄像头，需要在 /boot/firmware/config.txt文件中进行设置下用以下命令打开文件。sudo nano /boot/firmware/config.txt在文件中找到camera_auto_detect=1，将其数字1改为数字0。紧接着在下边添加一行：dtoverlay=imx219,cam1等于号之后的第一个参数：是根据你买的摄像头模块有关，下边的图是根据模块填写的对应值第二个参数：是根据你摄像头用的哪个口来设置的，靠近以太网口的就是cam0，不是的就是cam1重启使设置生效设置完移后进行重启机器：sudo reboot验证重启后用树莓派自带的摄像软件进行测试rpicam-hello -t 0
-
Wails教程：快速创建 创建项目{tabs}{tabs-pane label="React"}{alert type="info"}由 Facebook 开发的声明式 UI 库，基于组件化思想，使用 JSX 语法，生态丰富，广泛应用于单页应用和大型项目。{/alert}使用 JavaScript 生成一个 React 项目:wails init -n myproject -t react如果您更愿意使用 TypeScript:wails init -n myproject -t react-ts{/tabs-pane}{tabs-pane label="Vue"}{alert type="info"}渐进式 JavaScript 框架，易于上手，核心库只关注视图层，可与其他库或现有项目整合，有完善的官方文档和生态。{/alert}使用 JavaScript 生成一个 Vue 项目:wails init -n myproject -t vue如果您更愿意使用 TypeScript:wails init -n myproject -t vue-ts{/tabs-pane}{tabs-pane label="Svelte"}{alert type="info"}与传统框架不同，它在构建时将代码编译为原生 JavaScript，运行时无需虚拟 DOM，性能优秀，适合构建高效的 Web 应用。{/alert}使用 JavaScript 生成一个 Svelte 项目:wails init -n myproject -t svelte如果您更愿意使用 TypeScript:wails init -n myproject -t svelte-ts{/tabs-pane}{tabs-pane label="Preact"}{alert type="info"}轻量级的 React 替代方案，API 与 React 相似，体积小巧（约 3KB），适合对性能和体积有严格要求的场景。{/alert}使用 JavaScript 生成一个 Preact 项目:wails init -n myproject -t preact如果您更愿意使用 TypeScript:wails init -n myproject -t preact-ts{/tabs-pane}{tabs-pane label="Lit"}{alert type="info"}由 Google 开发的轻量级 Web 组件库，基于 Web Components 标准，语法简洁，专注于构建可复用的组件。{/alert}使用 JavaScript 生成一个 Lit 项目:wails init -n myproject -t lit如果您更愿意使用 TypeScript:wails init -n myproject -t lit-ts{/tabs-pane}{tabs-pane label="Vanilla"}{alert type="info"}通常指原生 JavaScript（即不使用任何框架或库），直接使用浏览器提供的 API 进行开发，适合简单场景或需要深入理解 JS 基础的项目。{/alert}使用 JavaScript 生成一个 Vanilla 项目:wails init -n myproject -t vanilla如果您更愿意使用 TypeScript:wails init -n myproject -t vanilla-ts{/tabs-pane}{/tabs}项目结构概要/main.go - 主应用 /frontend/ - 前端项目文件 /build/ - 项目构建目录 /build/appicon.png - 应用程序图标 /build/darwin/ - Mac 特定的项目文件 /build/windows/ - Windows 特定的项目文件 /wails.json - 项目配置 /go.mod - Go module 文件 /go.sum - Go module 校验文件 frontend 目录没有特定于 Wails 的内容，可以是您选择的任何前端项目。build 目录在构建过程中使用。 这些文件可以修改以自定义您的构建。 如果从 build 目录中删除文件，将重新生成默认版本。go.mod 中的默认模块名称是“changeme”。 您应该将其更改为更合适的内容。
