Week 1-8: Spring Boot 学习计划完整项目

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-04-29 23:45:17 +08:00
commit f95aa18724
201 changed files with 18595 additions and 0 deletions
--- a/week6/.gitignore
+++ b/week6/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/week6/README.md
+++ b/week6/README.md
@@ -0,0 +1,5 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 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.
+
+Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
--- a/week6/index.html
+++ b/week6/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Week 6 — Vue 3 学习项目</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/week6/package-lock.json
+++ b/week6/package-lock.json
--- a/week6/package.json
+++ b/week6/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "week6",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.15.2",
+    "pinia": "^3.0.4",
+    "vue": "^3.5.32",
+    "vue-router": "^5.0.6"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.6",
+    "vite": "^8.0.10"
+  }
+}
--- a/week6/public/favicon.svg
+++ b/week6/public/favicon.svg
--- a/week6/public/icons.svg
+++ b/week6/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/week6/src/App.vue
+++ b/week6/src/App.vue
@@ -0,0 +1,11 @@
+<!-- 根组件：NavBar + 路由视图 -->
+<template>
+  <NavBar />
+  <main>
+    <router-view />
+  </main>
+</template>
+
+<script setup>
+import NavBar from './components/NavBar.vue'
+</script>
--- a/week6/src/api/http.js
+++ b/week6/src/api/http.js
@@ -0,0 +1,40 @@
+// 第 7 天：Axios 封装 — 统一处理 JWT 和错误
+import axios from 'axios'
+
+const http = axios.create({
+  baseURL: '/api',
+  timeout: 10000
+})
+
+// 请求拦截器：自动附加 Token
+http.interceptors.request.use(config => {
+  const token = localStorage.getItem('wk6_token')
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`
+  }
+  return config
+}, error => Promise.reject(error))
+
+// 响应拦截器：统一错误处理
+http.interceptors.response.use(
+  response => response,
+  error => {
+    if (error.response) {
+      switch (error.response.status) {
+        case 401:
+          localStorage.removeItem('wk6_token')
+          window.location.href = '/login'
+          break
+        case 403:
+          alert('权限不足')
+          break
+        case 500:
+          alert('服务器错误: ' + (error.response.data?.message || '未知'))
+          break
+      }
+    }
+    return Promise.reject(error)
+  }
+)
+
+export default http
--- a/week6/src/components/NavBar.vue
+++ b/week6/src/components/NavBar.vue
@@ -0,0 +1,35 @@
+<!-- 导航栏组件（第 4-5 天：组件通信 + 路由导航） -->
+<template>
+  <nav>
+    <div class="nav-brand">Vue 3 学习</div>
+    <div class="nav-links">
+      <router-link to="/">首页</router-link>
+      <router-link to="/counter">计数器</router-link>
+      <router-link to="/form">表单</router-link>
+      <router-link to="/todo">Todo</router-link>
+      <router-link to="/about">关于</router-link>
+    </div>
+  </nav>
+</template>
+
+<script setup>
+// NavBar 是纯展示组件，无 props/emits
+// router-link 是 Vue Router 提供的组件，渲染为 <a> 标签
+</script>
+
+<style scoped>
+nav {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 0 24px; height: 56px; background: #667eea; color: #fff;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+.nav-brand { font-size: 1.2em; font-weight: 700; }
+.nav-links { display: flex; gap: 8px; }
+.nav-links a {
+  color: rgba(255,255,255,0.8); text-decoration: none;
+  padding: 6px 14px; border-radius: 6px; font-size: 0.9em; transition: all 0.2s;
+}
+.nav-links a:hover, .nav-links a.router-link-active {
+  color: #fff; background: rgba(255,255,255,0.15);
+}
+</style>
--- a/week6/src/components/TodoForm.vue
+++ b/week6/src/components/TodoForm.vue
@@ -0,0 +1,43 @@
+<!-- 第 4 天：TodoForm 组件 — 演示 v-model 和 emits 传值 -->
+<template>
+  <form class="todo-form" @submit.prevent="handleSubmit">
+    <input
+      v-model="text"
+      type="text"
+      placeholder="输入新的任务..."
+      maxlength="50"
+      autofocus
+    />
+    <button type="submit" class="btn-add" :disabled="!text.trim()">添加</button>
+  </form>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const emit = defineEmits(['add'])
+const text = ref('')
+
+function handleSubmit() {
+  if (!text.value.trim()) return
+  emit('add', text.value.trim())
+  text.value = ''
+}
+</script>
+
+<style scoped>
+.todo-form {
+  display: flex; gap: 10px; margin-bottom: 20px;
+}
+.todo-form input {
+  flex: 1; padding: 10px 14px; border: 1.5px solid #ddd; border-radius: 8px;
+  font-size: 0.95em;
+}
+.todo-form input:focus { outline: none; border-color: #667eea; }
+.btn-add {
+  padding: 10px 24px; background: #667eea; color: #fff; border: none;
+  border-radius: 8px; font-size: 0.95em; cursor: pointer;
+}
+.btn-add:disabled { background: #ccc; cursor: not-allowed; }
+.btn-add:not(:disabled):hover { background: #5a6fd6; }
+</style>
--- a/week6/src/components/TodoItem.vue
+++ b/week6/src/components/TodoItem.vue
@@ -0,0 +1,30 @@
+<!-- 第 4 天：TodoItem 组件 — 演示 props 和 emits -->
+<template>
+  <li :class="{ done: todo.done }">
+    <span class="todo-text" @click="$emit('toggle', todo.id)">{{ todo.text }}</span>
+    <button class="btn-del" @click="$emit('remove', todo.id)">删除</button>
+  </li>
+</template>
+
+<script setup>
+// props: 父组件传入的 todo 对象
+// emits: 向父组件发送 toggle / remove 事件
+defineProps({ todo: { type: Object, required: true } })
+defineEmits(['toggle', 'remove'])
+</script>
+
+<style scoped>
+li {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 12px 14px; background: #f8f9fa; border-radius: 8px; margin-bottom: 8px;
+  transition: all 0.2s;
+}
+li:hover { background: #eef0ff; }
+li.done .todo-text { text-decoration: line-through; color: #aaa; }
+.todo-text { cursor: pointer; flex: 1; }
+.btn-del {
+  background: #e74c3c; color: #fff; border: none; padding: 4px 12px;
+  border-radius: 6px; cursor: pointer; font-size: 0.82em;
+}
+.btn-del:hover { background: #c0392b; }
+</style>
--- a/week6/src/main.js
+++ b/week6/src/main.js
@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import router from './router'
+import App from './App.vue'
+import './style.css'
+
+const app = createApp(App)
+app.use(createPinia())   // 第 6 天：Pinia 状态管理
+app.use(router)          // 第 5 天：Vue Router
+app.mount('#app')
--- a/week6/src/router/index.js
+++ b/week6/src/router/index.js
@@ -0,0 +1,47 @@
+// 第 5 天：Vue Router 路由配置
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: () => import('../views/HomeView.vue'),
+    meta: { title: '首页' }
+  },
+  {
+    path: '/counter',
+    name: 'Counter',
+    component: () => import('../views/CounterView.vue'),
+    meta: { title: '响应式计数器 — Day 2' }
+  },
+  {
+    path: '/form',
+    name: 'FormDemo',
+    component: () => import('../views/FormDemoView.vue'),
+    meta: { title: '表单指令 — Day 3' }
+  },
+  {
+    path: '/todo',
+    name: 'Todo',
+    component: () => import('../views/TodoView.vue'),
+    meta: { title: 'Todo List — Day 2-6' }
+  },
+  {
+    path: '/about',
+    name: 'About',
+    component: () => import('../views/AboutView.vue'),
+    meta: { title: '关于 Week 6' }
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+// 导航守卫：动态修改页面标题
+router.afterEach((to) => {
+  document.title = to.meta.title || 'Vue 3 学习'
+})
+
+export default router
--- a/week6/src/stores/auth.js
+++ b/week6/src/stores/auth.js
@@ -0,0 +1,36 @@
+// 第 6-7 天：Pinia — 认证 Store（Token 管理 + 模拟登录）
+// Week 7 对接真实后端时会替换为实际 API 调用
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export const useAuthStore = defineStore('auth', () => {
+  const token = ref(localStorage.getItem('wk6_token') || '')
+  const user = ref(null)
+
+  const isLoggedIn = computed(() => !!token.value)
+
+  function login(username, password) {
+    // 第 7 天会用 axios 调用真实登录接口替换此模拟
+    return new Promise((resolve, reject) => {
+      // 模拟延迟
+      setTimeout(() => {
+        if (username && password) {
+          token.value = 'demo-jwt-token-' + Date.now()
+          user.value = { username, role: username === 'admin' ? 'ADMIN' : 'USER' }
+          localStorage.setItem('wk6_token', token.value)
+          resolve(user.value)
+        } else {
+          reject(new Error('用户名和密码不能为空'))
+        }
+      }, 500)
+    })
+  }
+
+  function logout() {
+    token.value = ''
+    user.value = null
+    localStorage.removeItem('wk6_token')
+  }
+
+  return { token, user, isLoggedIn, login, logout }
+})
--- a/week6/src/stores/counter.js
+++ b/week6/src/stores/counter.js
@@ -0,0 +1,15 @@
+// 第 6 天：Pinia — 计数器 Store（演示 ref/computed 在 store 中的用法）
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+
+  const double = computed(() => count.value * 2)
+
+  function increment() { count.value++ }
+  function decrement() { count.value-- }
+  function reset() { count.value = 0 }
+
+  return { count, double, increment, decrement, reset }
+})
--- a/week6/src/stores/todo.js
+++ b/week6/src/stores/todo.js
@@ -0,0 +1,36 @@
+// 第 6 天：Pinia — Todo Store（跨组件共享状态）
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export const useTodoStore = defineStore('todo', () => {
+  const todos = ref([
+    { id: 1, text: '学习 Vue 3 响应式数据', done: true },
+    { id: 2, text: '理解 computed 计算属性', done: true },
+    { id: 3, text: '掌握组件通信 (props/emits)', done: false }
+  ])
+
+  let nextId = 4
+
+  // 计算属性：未完成 / 已完成
+  const undone = computed(() => todos.value.filter(t => !t.done))
+  const done = computed(() => todos.value.filter(t => t.done))
+
+  function add(text) {
+    todos.value.push({ id: nextId++, text, done: false })
+  }
+
+  function toggle(id) {
+    const t = todos.value.find(t => t.id === id)
+    if (t) t.done = !t.done
+  }
+
+  function remove(id) {
+    todos.value = todos.value.filter(t => t.id !== id)
+  }
+
+  function clearDone() {
+    todos.value = todos.value.filter(t => !t.done)
+  }
+
+  return { todos, undone, done, add, toggle, remove, clearDone }
+})
--- a/week6/src/style.css
+++ b/week6/src/style.css
@@ -0,0 +1,11 @@
+/* ========== 全局重置 ========== */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
+               "Microsoft YaHei", sans-serif;
+  background: #f0f2f5; color: #333; min-height: 100vh;
+}
+
+a { color: #667eea; text-decoration: none; }
+button { font-family: inherit; }
--- a/week6/src/views/AboutView.vue
+++ b/week6/src/views/AboutView.vue
@@ -0,0 +1,36 @@
+<!-- 关于页面 -->
+<template>
+  <div class="page">
+    <h1>关于 Week 6</h1>
+    <div class="card">
+      <h3>学习目标</h3>
+      <p>掌握 Vue 3 核心，能独立开发 SPA 应用。</p>
+    </div>
+    <div class="card">
+      <h3>技术栈</h3>
+      <ul>
+        <li>Vue 3 (Composition API + SFC)</li>
+        <li>Vite (构建工具)</li>
+        <li>Vue Router (路由)</li>
+        <li>Pinia (状态管理)</li>
+        <li>Axios (HTTP 客户端)</li>
+      </ul>
+    </div>
+    <div class="card">
+      <h3>下周预告：Week 7</h3>
+      <p>将本项目的 Vue 前端与 Week 5 的 Spring Boot 后端对接，实现前后端分离的完整学生管理系统。</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page { max-width: 600px; margin: 40px auto; padding: 0 20px; }
+h1 { margin-bottom: 24px; }
+.card {
+  background: #fff; border-radius: 10px; padding: 20px; margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+.card h3 { color: #667eea; margin-bottom: 8px; }
+.card ul { padding-left: 20px; color: #555; }
+.card li { margin-bottom: 4px; }
+</style>
--- a/week6/src/views/CounterView.vue
+++ b/week6/src/views/CounterView.vue
@@ -0,0 +1,65 @@
+<!-- 第 2 天：响应式数据 — ref / reactive / computed 演示 -->
+<template>
+  <div class="page">
+    <h1>计数器 — ref / reactive / computed</h1>
+
+    <!-- 使用 Pinia Store（第 6 天升级） -->
+    <div class="card">
+      <h2>Pinia Store 版</h2>
+      <p class="count">{{ store.count }}</p>
+      <p class="hint">两倍值: {{ store.double }}</p>
+      <div class="btns">
+        <button @click="store.decrement()">-1</button>
+        <button @click="store.increment()">+1</button>
+        <button class="btn-reset" @click="store.reset()">归零</button>
+      </div>
+    </div>
+
+    <!-- 本地 ref 演示（Day 2 教学用） -->
+    <div class="card">
+      <h2>本地 ref 版（组件内状态）</h2>
+      <p class="count local">{{ localCount }}</p>
+      <p class="hint">{{ localCount }} 是 {{ parity }}</p>
+      <div class="btns">
+        <button @click="localCount--">-1</button>
+        <button @click="localCount++">+1</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useCounterStore } from '../stores/counter'
+
+const store = useCounterStore()
+
+// 本地响应式数据
+const localCount = ref(0)
+
+// computed：计算属性，依赖 localCount 自动缓存
+const parity = computed(() => localCount.value % 2 === 0 ? '偶数' : '奇数')
+</script>
+
+<style scoped>
+.page { max-width: 600px; margin: 40px auto; padding: 0 20px; }
+h1 { margin-bottom: 24px; }
+
+.card {
+  background: #fff; border-radius: 10px; padding: 28px; margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08); text-align: center;
+}
+.card h2 { font-size: 1.1em; color: #667eea; margin-bottom: 12px; }
+.count { font-size: 4em; font-weight: 700; margin: 10px 0; }
+.count.local { color: #764ba2; }
+.hint { color: #888; margin-bottom: 16px; }
+
+.btns { display: flex; gap: 10px; justify-content: center; }
+.btns button {
+  padding: 10px 24px; border: 1.5px solid #667eea; border-radius: 8px;
+  background: #fff; color: #667eea; font-size: 1em; cursor: pointer; transition: all 0.2s;
+}
+.btns button:hover { background: #667eea; color: #fff; }
+.btn-reset { background: #f0f0f0 !important; border-color: #ccc !important; color: #666 !important; }
+.btn-reset:hover { background: #eee !important; color: #333 !important; }
+</style>
--- a/week6/src/views/FormDemoView.vue
+++ b/week6/src/views/FormDemoView.vue
@@ -0,0 +1,84 @@
+<!-- 第 3 天：指令 — v-if / v-for / v-model / v-bind 演示 -->
+<template>
+  <div class="page">
+    <h1>表单指令演示</h1>
+
+    <!-- v-model 双向绑定 -->
+    <div class="card">
+      <h2>v-model 双向绑定</h2>
+      <input v-model="form.name" placeholder="输入姓名" />
+      <input v-model="form.email" placeholder="输入邮箱" type="email" />
+      <p class="live-preview">👤 {{ form.name || '???' }} &lt;{{ form.email || '???' }}&gt;</p>
+    </div>
+
+    <!-- v-if / v-show 条件渲染 -->
+    <div class="card">
+      <h2>v-if / v-show</h2>
+      <label><input type="checkbox" v-model="showDetail" /> 显示详细信息</label>
+      <div v-if="showDetail" class="detail-box">
+        <strong>v-if：</strong>完全销毁和重建 DOM 元素。适合切换频率低的场景。
+      </div>
+      <div v-show="showDetail" class="detail-box show">
+        <strong>v-show：</strong>仅切换 display 属性。适合切换频率高的场景。
+      </div>
+    </div>
+
+    <!-- v-for 列表渲染 -->
+    <div class="card">
+      <h2>v-for 列表渲染</h2>
+      <ul>
+        <li v-for="(item, index) in skills" :key="index" :class="{ highlight: item.level > 3 }">
+          <span>{{ item.name }}</span>
+          <span class="level">
+            <span v-for="n in 5" :key="n" :class="{ filled: n <= item.level }">★</span>
+          </span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+// reactive：适合对象/数组（与 ref 对比学习）
+const form = reactive({ name: '', email: '' })
+const showDetail = ref(false)
+
+const skills = [
+  { name: 'ref / reactive', level: 5 },
+  { name: 'computed / watch', level: 4 },
+  { name: 'v-if / v-for / v-model', level: 3 },
+  { name: 'component props/emits', level: 2 }
+]
+</script>
+
+<style scoped>
+.page { max-width: 600px; margin: 40px auto; padding: 0 20px; }
+h1 { margin-bottom: 24px; }
+
+.card {
+  background: #fff; border-radius: 10px; padding: 20px; margin-bottom: 18px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+.card h2 { font-size: 1.05em; color: #667eea; margin-bottom: 12px; }
+
+input {
+  width: 100%; padding: 9px 12px; border: 1.5px solid #ddd; border-radius: 8px;
+  margin-bottom: 10px; font-size: 0.93em;
+}
+input:focus { outline: none; border-color: #667eea; }
+.live-preview { color: #764ba2; font-weight: 600; margin-top: 6px; }
+
+label { cursor: pointer; display: block; margin-bottom: 10px; font-size: 0.95em; }
+.detail-box { background: #f0f4ff; padding: 12px; border-radius: 8px; margin-top: 8px; font-size: 0.9em; }
+.detail-box.show { background: #fff8e1; }
+
+ul { list-style: none; padding: 0; }
+li { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #f0f0f0; }
+li:last-child { border-bottom: none; }
+li.highlight { background: #f0f4ff; border-radius: 6px; }
+
+.level { color: #ddd; letter-spacing: 2px; }
+.level .filled { color: #f39c12; }
+</style>
--- a/week6/src/views/HomeView.vue
+++ b/week6/src/views/HomeView.vue
@@ -0,0 +1,74 @@
+<!-- 首页：Week 6 知识点总览（Day 1） -->
+<template>
+  <div class="page">
+    <h1>欢迎来到 Vue 3 学习 🎉</h1>
+    <p class="subtitle">Week 6 目标：掌握 Vue 3 基础，能开发 SPA 应用</p>
+
+    <div class="day-grid">
+      <div class="day-card" v-for="day in days" :key="day.num">
+        <h3>第 {{ day.num }} 天</h3>
+        <p>{{ day.title }}</p>
+        <ul>
+          <li v-for="item in day.items" :key="item">{{ item }}</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="api-test" v-if="apiMsg">
+      <h3>后端连通性测试</h3>
+      <p>{{ apiMsg }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// 第 2 天：ref 响应式数据
+import { ref, onMounted } from 'vue'
+
+const days = ref([
+  { num: 1, title: 'Vue 3 入门', items: ['SFC 单文件组件', 'Vite 脚手架', 'template/script/style'] },
+  { num: 2, title: '响应式数据', items: ['ref / reactive', 'computed 计算属性', 'watch 侦听器'] },
+  { num: 3, title: '指令系统', items: ['v-if / v-show', 'v-for', 'v-model 双向绑定'] },
+  { num: 4, title: '组件通信', items: ['props 父传子', 'emits 子传父', '插槽 slot'] },
+  { num: 5, title: '路由', items: ['Vue Router', '路由懒加载', '导航守卫'] },
+  { num: 6, title: '状态管理', items: ['Pinia', 'defineStore', '跨组件共享'] },
+  { num: 7, title: 'HTTP 客户端', items: ['Axios 封装', '请求拦截器', '代理配置'] }
+])
+
+// 第 7 天预习：尝试连接后端（后端启动后可见效果）
+const apiMsg = ref('')
+
+onMounted(async () => {
+  try {
+    const resp = await fetch('/api/students?keyword=')
+    if (resp.ok) apiMsg.value = '✅ 后端连接成功！Spring Boot 运行中。'
+    else apiMsg.value = '⚠ 后端返回异常状态: ' + resp.status
+  } catch {
+    apiMsg.value = '💡 后端未启动（Week 7 会对接）。这是正常的，当前专注于前端学习。'
+  }
+})
+</script>
+
+<style scoped>
+.page { max-width: 960px; margin: 40px auto; padding: 0 20px; }
+h1 { font-size: 1.8em; margin-bottom: 6px; }
+.subtitle { color: #666; margin-bottom: 32px; }
+
+.day-grid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 16px;
+}
+.day-card {
+  background: #fff; border-radius: 10px; padding: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+.day-card h3 { color: #667eea; margin-bottom: 6px; }
+.day-card p { font-weight: 600; margin-bottom: 10px; }
+.day-card ul { padding-left: 18px; color: #555; font-size: 0.9em; }
+.day-card li { margin-bottom: 4px; }
+
+.api-test {
+  margin-top: 32px; background: #f0f4ff; padding: 20px; border-radius: 10px;
+}
+.api-test h3 { margin-bottom: 6px; }
+</style>
--- a/week6/src/views/TodoView.vue
+++ b/week6/src/views/TodoView.vue
@@ -0,0 +1,66 @@
+<!--
+  第 2-6 天综合：Todo List
+  演示：组件拆分（Day 4）+ Pinia Store（Day 6）+ 响应式计算
+-->
+<template>
+  <div class="page">
+    <h1>Todo List 📝</h1>
+
+    <!-- 第 4 天：TodoForm 子组件，通过 emit 传递 add 事件 -->
+    <TodoForm @add="store.add" />
+
+    <!-- 统计 -->
+    <div class="stats">
+      总计 <strong>{{ store.todos.length }}</strong> 项，
+      未完成 <strong>{{ store.undone.length }}</strong> 项，
+      已完成 <strong>{{ store.done.length }}</strong> 项
+      <button v-if="store.done.length" class="btn-clear" @click="store.clearDone()">
+        清除已完成
+      </button>
+    </div>
+
+    <!-- 第 3 天：v-if / v-for -->
+    <ul v-if="store.todos.length" class="todo-list">
+      <!-- 第 4 天：TodoItem 子组件，props 传数据，emits 收事件 -->
+      <TodoItem
+        v-for="todo in store.todos"
+        :key="todo.id"
+        :todo="todo"
+        @toggle="store.toggle"
+        @remove="store.remove"
+      />
+    </ul>
+    <div v-else class="empty">暂无任务，添加一个吧 ✨</div>
+  </div>
+</template>
+
+<script setup>
+import { useTodoStore } from '../stores/todo'
+import TodoForm from '../components/TodoForm.vue'
+import TodoItem from '../components/TodoItem.vue'
+
+const store = useTodoStore()
+</script>
+
+<style scoped>
+.page { max-width: 600px; margin: 40px auto; padding: 0 20px; }
+h1 { margin-bottom: 20px; }
+
+.stats {
+  background: #f8f9fa; padding: 10px 16px; border-radius: 8px;
+  margin-bottom: 16px; font-size: 0.88em; color: #666;
+  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
+}
+.stats strong { color: #667eea; }
+.btn-clear {
+  margin-left: auto; background: #e74c3c; color: #fff; border: none;
+  padding: 4px 14px; border-radius: 6px; cursor: pointer; font-size: 0.82em;
+}
+.btn-clear:hover { background: #c0392b; }
+
+.todo-list { list-style: none; padding: 0; }
+
+.empty {
+  text-align: center; color: #aaa; padding: 60px 0; font-size: 1.1em;
+}
+</style>
--- a/week6/vite.config.js
+++ b/week6/vite.config.js
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {                     // 第 7 天：代理后端 API
+        target: 'http://localhost:8080',
+        changeOrigin: true
+      }
+    }
+  }
+})
--- a/week6/教案.md
+++ b/week6/教案.md
@@ -0,0 +1,226 @@
+# Week 6：Vue 3 前端框架入门
+
+**目标**：掌握 Vue 3 Composition API + Vite + Vue Router + Pinia，能独立开发 SPA 应用。
+
+**前置**：已完成 Week 5 Spring Boot 后端，有 HTML/CSS/JS 基础。
+
+**本周产出**：一个独立的 Todo SPA 应用，包含计数器、动态表单、组件拆分、路由导航、状态管理和 HTTP 封装。
+
+**启动方式**：
+```bash
+cd week6
+npm install    # 首次运行
+npm run dev    # 启动开发服务器 → http://localhost:5173
+```
+
+---
+
+## Day 1：Vue 3 介绍、Vite 脚手架、组件基础
+
+**知识点**：
+- Vue 3 是什么：渐进式前端框架，核心是"响应式数据 + 声明式渲染"
+- SFC（Single File Component）：`.vue` 文件 = `<template>` + `<script setup>` + `<style scoped>`
+- Composition API vs Options API：为什么选 Composition API
+- Vite：新一代构建工具，冷启动快（ES Module）、HMR 极速
+- 项目结构：`main.js`（入口）、`App.vue`（根组件）、`components/`、`views/`
+
+**动手 → 理解**：
+1. 打开 `src/main.js`：理解 `createApp(App).mount('#app')` 的过程
+2. 打开 `src/App.vue`：观察 `<script setup>` 语法糖
+3. 修改 `index.html` 中的 `<title>`，观察浏览器标签变化
+4. 在 `HomeView.vue` 的 `<template>` 中加一行 `<p>Hello Vue!</p>`，观察热更新
+5. 把 `style scoped` 去掉，观察样式是否泄漏到其他组件
+
+**核心文件**：
+- `index.html` — 入口 HTML，`<div id="app">` 挂载点
+- `src/main.js` — 应用初始化
+- `src/App.vue` — 根组件
+- `vite.config.js` — Vite 配置（插件、代理、端口）
+
+**思考题**：`<script setup>` 和普通的 `<script>` 有什么区别？为什么 Vue 3 推荐 setup 语法糖？
+
+---
+
+## Day 2：响应式数据（ref/reactive）、计算属性
+
+**知识点**：
+- `ref()`：包装基本类型（number、string、boolean），通过 `.value` 访问
+- `reactive()`：包装对象/数组，直接访问属性（不需要 `.value`）
+- `computed()`：计算属性，依赖变化时自动重新计算，带缓存
+- `watch()` / `watchEffect()`：侦听数据变化执行副作用
+- 响应式的本质：Proxy 拦截 getter/setter，数据变 → 视图自动变
+- 模板中 ref 自动解包（不需要写 `.value`）
+
+**动手 → 理解**：
+1. 打开 `CounterView.vue`，在模板中写 `{{ localCount }}`，不需要 `.value`
+2. 在 `<script>` 中用 `console.log(localCount.value)` 打印当前值
+3. 修改 `computed` 的计算逻辑，改为判断"是否大于 10"
+4. 添加一个 `watch`，在 `localCount` 变化时 `console.log('变了:', newVal)`
+5. 对比：把 `reactive` 改为 `ref` 写一个对象，体会 `.value` 的区别
+
+**核心文件**：
+- `views/CounterView.vue` — ref + computed 演示
+- `stores/counter.js` — Pinia store（第 6 天预热）
+
+**思考题**：为什么模板中 ref 自动解包，但 `<script>` 里必须用 `.value`？
+
+---
+
+## Day 3：指令系统（v-if/v-for/v-model）
+
+**知识点**：
+- `v-if` / `v-else-if` / `v-else`：条件渲染（销毁/重建 DOM）
+- `v-show`：条件显示（仅切换 `display`）—— 适合频繁切换
+- `v-for`：列表渲染，必须有 `:key` 唯一标识
+- `v-bind`（缩写 `:`）：动态绑定属性 `:class`、`:style`、`:href`
+- `v-model`：双向绑定，表单输入 ↔ 数据自动同步
+- `v-on`（缩写 `@`）：事件绑定 `@click`、`@submit`、`@keyup`
+- `v-model` 修饰符：`.trim`、`.number`、`.lazy`
+
+**动手 → 理解**：
+1. 打开 `FormDemoView.vue`，在输入框中输入，观察下方实时预览
+2. 用 DevTools 检查：勾选"显示详细信息"时，`v-if` 的元素是否在 DOM 中？
+3. 把 `v-if` 换成 `v-show`，再次检查 DOM 差异
+4. 在 `v-for` 的 `<li>` 中故意不写 `:key`，观察控制台警告
+5. 尝试加一个 `v-model.lazy` 的输入框，对比 `input` 事件和 `change` 事件的区别
+
+**核心文件**：
+- `views/FormDemoView.vue` — 指令综合演示
+
+**思考题**：什么时候用 `v-if`，什么时候用 `v-show`？为什么 `v-for` 和 `v-if` 不建议同时使用？
+
+---
+
+## Day 4：组件通信（props/emits）、插槽
+
+**知识点**：
+- `defineProps()`：父组件向子组件传递数据（单向数据流）
+- `defineEmits()`：子组件向父组件发送事件（回调模式）
+- Prop 校验：`type`、`required`、`default`、`validator`
+- 单向数据流原则：子组件不能直接修改 props
+- `v-model` 组件版：`modelValue` + `update:modelValue`
+- `<slot>` 插槽：父组件向子组件传递模板内容
+- 命名插槽、作用域插槽（高级）
+
+**动手 → 理解**：
+1. 打开 `TodoForm.vue` 和 `TodoItem.vue`，对照看 props 和 emits
+2. 在 `TodoItem` 中尝试直接 `todo.done = true`（不通过 emit），观察 Pinia 是否感知
+3. 给 `TodoItem` 的 props 加一个 `validator`，限制 `todo.text` 不能为空
+4. 练习：新建一个 `<Card>` 组件，用 `<slot>` 让父组件填充内容
+5. 尝试用 `v-model` 模式改写 `TodoForm`（父组件用 v-model 双向绑定输入值）
+
+**核心文件**：
+- `components/TodoForm.vue` — props 接收 / emits 发送
+- `components/TodoItem.vue` — props 接收 / emits 发送
+- `views/TodoView.vue` — 父组件，组装 TodoForm + TodoItem
+
+**思考题**：为什么不直接在子组件中操作 Pinia store，而是通过 props/emits 层层传递？
+
+---
+
+## Day 5：Vue Router 路由
+
+**知识点**：
+- `vue-router`：前端路由，URL 变化时不刷新页面
+- `createRouter({ history: createWebHistory() })`：HTML5 History 模式
+- `<router-link>`：导航链接（渲染为 `<a>` 标签）
+- `<router-view>`：路由出口（匹配的组件渲染在这里）
+- 路由懒加载：`() => import('../views/XXX.vue')`
+- `meta`：路由元信息（标题、权限等）
+- 导航守卫：`beforeEach`、`afterEach`
+- 动态路由：`/user/:id`
+
+**动手 → 理解**：
+1. 点击导航栏各链接，观察 URL 变化和页面内容，按 F12 Network 面板看是否有网络请求
+2. 在 `router/index.js` 中临时把 `createWebHistory` 改为 `createWebHashHistory`，观察 URL 变化（`#` 号出现）
+3. 修改某个路由的 `meta.title`，观察浏览器标签变化
+4. 在导航守卫中加 `console.log('从', from.path, '到', to.path)`
+5. 添加一个 `/user/:name` 动态路由页面
+
+**核心文件**：
+- `router/index.js` — 路由配置 + 导航守卫
+- `components/NavBar.vue` — `<router-link>` 导航
+
+**思考题**：为什么前端路由要用 History 模式而不是 Hash 模式？History 模式上线需要注意什么（Nginx 配置）？
+
+---
+
+## Day 6：Pinia 状态管理
+
+**知识点**：
+- 为什么需要状态管理：跨组件/跨页面共享数据
+- `defineStore('name', () => { ... })`：Setup Store 语法（与 Composition API 一致）
+- State：`ref()` / `reactive()` 定义状态
+- Getters：`computed()` 定义派生状态
+- Actions：普通函数，可异步
+- `storeToRefs()`：解构时保持响应性
+- Store 在 `main.js` 中通过 `app.use(createPinia())` 注入
+- 组件中直接 `const store = useXxxStore()` 使用
+
+**动手 → 理解**：
+1. 打开 `stores/todo.js`，观察 state/getters/actions 的定义方式
+2. 在浏览器中操作 Todo，打开 Vue DevTools 的 Pinia 面板查看状态变化
+3. 在 `CounterView.vue` 中对比：Pinia store 的 counter 和本地 ref 的 counter
+4. 用 `storeToRefs(todoStore)` 解构 `todos`，验证响应性
+5. 练习：新建一个 `theme` store，管理暗色/亮色主题切换
+
+**核心文件**：
+- `stores/counter.js` — 简单 store 示例
+- `stores/todo.js` — 完整 CRUD store
+- `stores/auth.js` — 认证 Token store
+- `main.js` — `app.use(createPinia())`
+
+**思考题**：Pinia 和 Vuex 有什么区别？为什么 Vue 3 官方推荐 Pinia？
+
+---
+
+## Day 7：Axios 封装与请求拦截
+
+**知识点**：
+- `axios.create()`：创建实例，配置 baseURL、timeout
+- 请求拦截器：自动附加 Token、设置 Content-Type
+- 响应拦截器：统一处理 401/403/500
+- `Authorization: Bearer <token>`：JWT 标准格式
+- Vite proxy 配置：开发环境代理 `/api` 到 Spring Boot
+- `.env` 环境变量：`VITE_API_BASE_URL`
+
+**动手 → 理解**：
+1. 打开 `api/http.js`，对照 Week 5 的 `app.js` 中 `api()` 函数，对比封装方式
+2. 用 DevTools Network 面板观察请求头中是否有 `Authorization`
+3. 故意把 token 改错，观察响应拦截器的 401 处理
+4. 检查 `vite.config.js` 的 proxy 配置，理解开发环境代理原理
+5. 添加 `VITE_API_BASE_URL` 环境变量，修改 `baseURL` 读取环境变量
+
+**核心文件**：
+- `api/http.js` — Axios 实例 + 拦截器
+- `vite.config.js` → `server.proxy` — 开发代理
+- `stores/auth.js` — Token 存储与模拟登录
+
+**思考题**：为什么开发环境需要 Vite proxy，而生产环境用 Nginx 反向代理？
+
+---
+
+## Week 6 总结
+
+| 维度 | 掌握内容 |
+|------|---------|
+| 脚手架 | Vite 创建项目、目录结构、HMR 热更新 |
+| 响应式 | ref / reactive / computed / watch |
+| 指令 | v-if / v-show / v-for / v-model / v-bind / v-on |
+| 组件 | SFC、props / emits、slot、scoped style |
+| 路由 | Vue Router、懒加载、导航守卫 |
+| 状态 | Pinia Setup Store、storeToRefs |
+| 网络 | Axios 封装、拦截器、Vite proxy |
+
+**与 Week 5 的对比**：
+
+| | Week 5 前端 | Week 6 前端 |
+|------|-----------|-----------|
+| 框架 | 原生 HTML + 原生 JS | Vue 3 + Vite |
+| 状态管理 | localStorage + DOM 操作 | Pinia 响应式 store |
+| 路由 | 无（单页面切换 display） | Vue Router History 模式 |
+| HTTP | fetch 手写 | Axios 拦截器封装 |
+| 组件化 | 无 | SFC + props/emits |
+| 开发体验 | 手动刷新 | HMR 热更新 |
+
+**预习 Week 7**：将本项目的 Vue 前端与 Week 5 的 Spring Boot 后端对接，用 Axios 替换模拟登录，实现前后端分离的学生管理系统 v3。