ai全栈软件开发工程师day10

发布时间：2026/10/13 23:57:24

ai全栈软件开发工程师day10
Element Plus 组件库与页面开发实战2026-07-12|第三阶段 · AI 应用 Web 开发|预计阅读 25 分钟文章目录一、今日学习内容概览二、Element Plus 组件库入门与主题定制三、登录页面开发：表单验证与 JWT 鉴权四、文章列表页：Table 分页排序与搜索过滤五、创作页面：富文本编辑器与 AI 生成六、路由守卫与权限控制七、今日踩坑记录八、收获总结九、明日学习计划第三阶段的第三天，今天终于进入了最激动人心的环节——页面开发实战！前两天的基础工作（Vue 3 语法、Pinia 状态管理、Axios 请求封装）都是为了今天能高效地搭建出"智能写手"前端项目的核心页面。Element Plus 是 Vue 3 生态中最成熟的企业级 UI 组件库，背靠饿了么大前端团队，组件丰富、文档完善、社区活跃。今天我将用它来完成三个核心页面的开发：登录页、文章列表页、创作页。同时整合之前封装好的 Axios 和 Pinia，打通从前端到后端的完整链路。一、今日学习内容概览Element Plus 组件库：安装与按需引入、主题定制、常用组件实战（Form / Table / Dialog / Pagination / Menu）登录页面开发：表单验证规则、JWT Token 存储（Pinia + localStorage）、登录状态持久化文章列表页：ElTable 数据展示、分页排序、搜索过滤、批量操作、数据导出创作页面：富文本编辑器（wangEditor）集成、Markdown 预览、AI 文本生成调用路由守卫：基于角色的权限控制、未登录拦截、动态路由加载阶段里程碑：今天是第三阶段第 3 天 / 共 20 天。经过今天的学习，"智能写手"前端项目已完成三大核心页面的 UI 开发与前后端联调，项目骨架基本成型。二、Element Plus 组件库入门与主题定制2.1 安装与按需引入Element Plus 支持完整引入和按需引入两种方式。完整引入简单但打包体积大；按需引入通过unplugin-vue-components和unplugin-auto-import实现自动导入，既保证开发体验又控制包体积。Bash终端# 安装 Element Plus npm install element-plus # 安装自动导入插件（推荐） npm install -D unplugin-vue-components unplugin-auto-importJavaScriptvite.config.js — 自动导入配置import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()], // 自动导入 Vue 和 Element Plus 的 API imports: ['vue', 'vue-router', 'pinia'], dts: 'src/auto-imports.d.ts' }), Components({ resolvers: [ElementPlusResolver()], dts: 'src/components.d.ts' }) ] })自动导入的好处：配置完成后，你可以在组件中直接使用ElButton、ElForm等组件，无需手动 import；同时ref、reactive、useRouter等 API 也会自动可用。编译时插件会自动帮你插入 import 语句，既省心又减少代码冗余。2.2 主题定制：打造品牌色系Element Plus 默认是蓝色主题，但我们的项目主色调是青绿色（#06d6a0）。通过 CSS 变量覆盖和 SCSS 配置，可以快速定制一套符合品牌调性的主题。SCSSstyles/element-theme.scss — 主题变量覆盖// 覆盖 Element Plus 的主色变量 @forward 'element-plus/theme-chalk/src/common/var.scss' with ( $colors: ( 'primary': ( 'base': #06d6a0, ), 'success': ( 'base': #22c55e, ), 'warning': ( 'base': #f59e0b, ), 'danger': ( 'base': #ef4444, ), ) ); // 引入组件样式（按需引入时需手动导入样式） @use 'element-plus/theme-chalk/src/index.scss' as *;JavaScriptmain.js — 引入自定义主题import { createApp } from 'vue' import App from './App.vue' // 引入自定义主题（覆盖默认蓝色） import './styles/element-theme.scss' // 引入 Element Plus 图标 import * as ElementPlusIconsVue from '@element-plus/icons-vue' const app = createApp(App) // 注册所有图标组件 for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } app.mount('#app')2.3 暗黑模式适配我们的博客和学习路线都使用深色主题，Element Plus 也原生支持暗黑模式。只需在 html 标签上添加class="dark"，并引入暗黑样式变量即可。JavaScriptcomposables/useDarkMode.js — 暗黑模式切换import { ref, watch } from 'vue' const isDark = ref(localStorage.getItem('theme') === 'dark') watch(isDark, (dark) = { const html = document.documentElement if (dark) { html.classList.add('dark') html.classList.remove('light') localStorage.setItem('theme', 'dark') } else { html.classList.add('light') html.classList.remove('dark') localStorage.setItem('theme', 'light') } }, { immediate: true }) export function useDarkMode() { return { isDark } }三、登录页面开发：表单验证与 JWT 鉴权3.1 登录表单 UI 与验证规则登录页是用户接触系统的第一个页面，既要美观又要安全。Element Plus 的ElForm组件内置了强大的表单验证能力，配合自定义校验规则可以实现复杂的验证逻辑。Vue SFCviews/LoginView.vue — 登录页面template div div div img / h2AI 智能写手/h2 p全栈 AI 内容创作平台/p /div el-form ref="formRef" :model="loginForm" :rules="loginRules" @keyup.enter="handleLogin" el-form-item prop="username" el-input v-model="loginForm.username" placeholder="用户名 / 邮箱" :prefix-icon="User" size="large" / /el-form-item el-form-item prop="password" el-input v-model="loginForm.password" type="password" placeholder="密码" :prefix-icon="Lock" show-password size="large" / /el-form-item el-form-item div el-checkbox v-model="rememberMe"记住我/el-checkbox a忘记密码？/a /div /el-form-item el-form-item el-button type="primary" size="large" :loading="loading" @click="handleLogin" { { loading ? '登录中...' : '立即登录' }} /el-button /el-form-item /el-form div p还没有账号？router-link to="/register"立即注册/router-link/p /div /div /div /template script setup import { ref, reactive } from 'vue' import { useRouter } from 'vue-router' import { useUserStore } from '@/stores/user' import { login } from '@/api/auth' import { ElMessage } from 'element-plus' import { User, Lock } from '@element-plus/icons-vue' const router = useRouter() const userStore = useUserStore() const formRef = ref(null) const loading = ref(false) const rememberMe = ref(false) const loginForm = reactive({ username: '', password: '' }) // 自定义验证规则 const validateUsername = (rule, value, callback) = { if (!value || value.trim() === '') { callback(new Error('请输入用户名或邮箱')) } else if (value.includes('@') !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) { callback(new Error('邮箱格式不正确')) } else { callback() } } const loginRules = { username: [ { required: true, validator: validateUsername, trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '密码长度需在 6-20 位之间', trigger: 'blur' }, { pattern: /^(?=.*[a-zA-Z])(?=.*\d).{6,20}$/, message: '密码必须同时包含字母和数字', trigger: 'blur' } ] } const handleLogin = async () = { const valid = await formRef.value.validate().catch(() = false) if (!valid) return loading.value = true try { const res = await login({ username: loginForm.username.trim(), password: loginForm.password }) // 存储登录状态 userStor

相关新闻

免费网盘直链下载助手完整教程：三步告别限速，实现满速下载

免费网盘直链下载助手完整教程：三步告别限速，实现满速下载

免费网盘直链下载助手完整教程：三步告别限速，实现满速下载 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ，支持 百度网盘 / 阿里云盘 / 中国…

2026/10/14 4:01:36 阅读更多 →
GitHub精准下载神器：3分钟学会只下载你需要的代码文件

GitHub精准下载神器：3分钟学会只下载你需要的代码文件

GitHub精准下载神器：3分钟学会只下载你需要的代码文件 【免费下载链接】DownGit github 资源打包下载工具 项目地址: https://gitcode.com/gh_mirrors/dow/DownGit 还在为克隆整个GitHub仓库而烦恼吗？今天我要向你推荐一款GitHub文件精准下载工具…

2026/10/12 17:10:53 阅读更多 →
5分钟掌握EPubBuilder：浏览器内打造专业级EPUB电子书的终极方案

5分钟掌握EPubBuilder：浏览器内打造专业级EPUB电子书的终极方案

5分钟掌握EPubBuilder：浏览器内打造专业级EPUB电子书的终极方案 【免费下载链接】EPubBuilder 一款在线的epub格式书籍编辑器 项目地址: https://gitcode.com/gh_mirrors/ep/EPubBuilder 你是否曾经面对复杂的电子书制作软件感到无从下手？或者想要…

2026/10/8 17:43:17 阅读更多 →

最新新闻

Codex国内API配置指南：环境变量、模型映射与网关接入实战

Codex国内API配置指南：环境变量、模型映射与网关接入实战

简介：面向国内 Windows 开发者使用 OpenAI Codex 编码工具的需求，这份代码包提供了一条从环境准备到 API 联通验证的完整实践路径。资源先给出 Node.js 与 npm 的检查方法，并用一键安装脚本降低新手搭建门槛；随后梳理 Codex CLI 的…

2026/10/14 4:01:42 阅读更多 →
PyTorch深度解析：张量契约、autograd引擎与显存博弈

PyTorch深度解析：张量契约、autograd引擎与显存博弈

1. 这不是“学PyTorch”，而是重建你对深度学习工程的认知很多人点开一篇叫“pytorch”的文章，下意识以为要读教程、抄代码、跑通MNIST——结果三小时后卡在CUDA out of memory，五小时后被autograd的梯度计算路径绕晕，七小时后发现…

2026/10/14 4:01:42 阅读更多 →
roLabelImg旋转框标注工具实战：从安装到格式转换全指南

roLabelImg旋转框标注工具实战：从安装到格式转换全指南

简介：roLabelImg 是一款面向目标检测数据生产的旋转框标注工具源码，专为遥感影像、OCR 文字检测等需贴合旋转目标的场景设计，适合计算机视觉研究者、算法工程师及标注工具二次开发人员使用。与普通矩形标注不同，该工具支持任意角度…

2026/10/14 4:01:42 阅读更多 →
自定义Emoji实现指南：从短代码映射到前端渲染

自定义Emoji实现指南：从短代码映射到前端渲染

如果你负责过一个带聊天功能的Web应用，大概率收到过这类需求：用户想把一张自制表情包图片，当作Emoji一样发出去。我最近在某协作平台重做了这个功能，从上传、解析到渲染，踩了一串坑，也把整套实现思路理顺了…

2026/10/14 4:01:42 阅读更多 →
内蒙古SHP数据清洗与道路网拓扑处理实战指南

内蒙古SHP数据清洗与道路网拓扑处理实战指南

简介：这份资源是2022年7月整理的内蒙古自治区GIS矢量数据集，面向地理信息研究者、交通规划人员、区域经济分析者及高校师生，用于行政区划研究、路网分析与空间制图等场景。压缩包约26.32MB，内含省级、地市、区县三级行政边界&…

2026/10/14 4:01:42 阅读更多 →
办公设备管理系统OAMS源码实战：从台账混乱到扫码即用

办公设备管理系统OAMS源码实战：从台账混乱到扫码即用

简介：办公设备管理系统OAMS是一套面向企事业单位设备管理员与信息化开发者的全生命周期管理解决方案，覆盖采购、入库、领用、维修、报废等核心环节，适合需要落地资产台账、审批流程与统计报表的Java Web项目学习与二次开发。资源包共451个文件…

2026/10/14 4:00:41 阅读更多 →

日新闻

AnyPS5通用适配层设计：兼容性与性能的工程取舍

AnyPS5通用适配层设计：兼容性与性能的工程取舍

1. 从"AnyPS5"这个名字说起：它到底想解决什么问题第一次看到"AnyPS5"这个标题，我脑子里冒出来的第一个念头是：这大概率是一个围绕"跨平台运行"或者"通用适配"做文章的项目。名字里的"Any"…

2026/10/14 0:00:41 阅读更多 →
Flutter跨平台开发实战：二手交易应用与HarmonyOS适配

Flutter跨平台开发实战：二手交易应用与HarmonyOS适配

1. 项目概述：Flutter跨平台二手交易应用开发作为一名长期从事移动应用开发的工程师，我最近完成了一个基于Flutter框架的二手物品交易平台项目。这个项目最吸引我的地方在于它完美结合了Flutter的跨平台优势与HarmonyOS的生态特性，实现了"…

2026/10/14 0:00:41 阅读更多 →
DFS算法解决飞机降落调度问题实战

DFS算法解决飞机降落调度问题实战

1. 项目背景与核心思路飞机降落问题是一个经典的调度优化场景，也是算法竞赛和面试中的高频题目。这个题目要求我们合理安排多架飞机的降落顺序和时间，确保所有飞机都能安全着陆而不发生冲突。在实际航空管制中，这类问题直接关系到飞行安全和机…

2026/10/14 0:00:41 阅读更多 →

周新闻

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

简介：基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码，面向计算机相关专业课程设计与期末大作业学生，以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程，…

2026/10/14 3:30:28 阅读更多 →
影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化，十个新手有八个栽在"往输入框里填东西"这件事上：要么填不进去，要么填了一半，要么直接把原来内容追加在后面。这背后的根因&…

2026/10/13 16:22:04 阅读更多 →
影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀：什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面，跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/14 3:29:58 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/13 22:01:27 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/13 14:57:39 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/12 18:11:17 阅读更多 →