---

---

在 Vue 3 的 <script setup> 中实现常见的网站用到的业务：

1. 用户管理：用户注册、登录、权限控制、个人信息管理。
2. 数据管理：增删改查（CRUD）操作、分页、搜索、过滤等。
3. 文件管理：文件上传、预览、下载。
4. 消息通知系统：发送消息、通知中心、实时更新。
5. 复杂表单处理：多步骤表单、表单验证、表单数据预填充。
6. 权限管理：基于用户角色的访问控制。
7. 社交功能：点赞、评论、关注等。

1. 用户管理

用户管理是每个网站必不可少的部分，我们会实现用户的注册、登录、权限控制，以及个人信息的管理。

1.1 用户注册和登录

登录页面示例：Login.vue

<template>
  <div class="login-container">
    <el-form :model="form" ref="formRef">
      <el-form-item label="Email">
        <el-input v-model="form.email" />
      </el-form-item>
      <el-form-item label="Password">
        <el-input type="password" v-model="form.password" />
      </el-form-item>
      <el-button type="primary" @click="handleLogin">Login</el-button>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const form = ref({
  email: '',
  password: ''
});

const formRef = ref(null);
const router = useRouter();

const handleLogin = async () => {
  try {
    const response = await axios.post('/api/login', form.value);
    // 假设 API 返回一个用户 token
    const { token } = response.data;

    // 存储 token (可以用 VueCookies 或 LocalStorage)
    localStorage.setItem('userToken', token);

    // 跳转到主页
    router.push('/');
  } catch (error) {
    console.error('Login failed:', error);
  }
};
</script>

<style scoped>
.login-container {
  max-width: 400px;
  margin: auto;
}
</style>

• 登录表单：使用 Element Plus 创建表单。
• handleLogin：通过 axios 发起登录请求，获取用户 token 并存储到 localStorage 中。
• 路由跳转：登录成功后，使用 useRouter 跳转到主页。

2. 数据管理（增删改查）

2.1 CRUD 操作

以产品管理为例，展示如何实现产品的增删改查功能。

产品管理页面：ProductList.vue

<template>
  <el-table :data="products" style="width: 100%">
    <el-table-column prop="id" label="ID" width="50"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="price" label="Price"></el-table-column>
    <el-table-column label="Actions" width="150">
      <template #default="{ row }">
        <el-button type="primary" @click="editProduct(row)">Edit</el-button>
        <el-button type="danger" @click="deleteProduct(row.id)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button type="success" @click="addProduct">Add Product</el-button>

  <ProductDialog :visible="dialogVisible" :product="selectedProduct" @close="fetchProducts" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import ProductDialog from './ProductDialog.vue';

const products = ref([]);
const dialogVisible = ref(false);
const selectedProduct = ref(null);

// 获取产品列表
const fetchProducts = async () => {
  try {
    const response = await axios.get('/api/products');
    products.value = response.data;
  } catch (error) {
    console.error('Error fetching products:', error);
  }
};

// 新增产品
const addProduct = () => {
  selectedProduct.value = null;
  dialogVisible.value = true;
};

// 编辑产品
const editProduct = (product) => {
  selectedProduct.value = product;
  dialogVisible.value = true;
};

// 删除产品
const deleteProduct = async (id) => {
  try {
    await axios.delete(`/api/products/${id}`);
    fetchProducts();
  } catch (error) {
    console.error('Error deleting product:', error);
  }
};

onMounted(fetchProducts);
</script>

• fetchProducts：获取产品列表并更新 products 数据。
• addProduct 和 editProduct：控制对话框打开，并传递对应的产品数据。
• deleteProduct：根据产品 id 删除产品。

3. 文件管理

文件上传和下载是常见的功能之一，例如用户上传头像或文件。

3.1 文件上传示例：FileUpload.vue

<template>
  <el-upload
    action="/api/upload"
    :on-success="handleUploadSuccess"
    :headers="uploadHeaders"
    :file-list="fileList"
  >
    <el-button slot="trigger" type="primary">Upload File</el-button>
  </el-upload>
</template>

<script setup>
import { ref } from 'vue';

const fileList = ref([]);
const token = localStorage.getItem('userToken');

const uploadHeaders = {
  Authorization: `Bearer ${token}`
};

const handleUploadSuccess = (response, file, fileList) => {
  console.log('File uploaded successfully:', response);
};
</script>

• el-upload：使用 Element Plus 的上传组件。
• 上传文件成功：通过 handleUploadSuccess 方法处理上传后的反馈。
• Authorization：传递用户的 token 以确保用户有权限上传文件。

4. 消息通知系统

消息通知功能是一个现代应用不可或缺的部分。

4.1 消息通知示例

使用 WebSocket 实现实时消息通知：

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const notifications = ref([]);
let socket;

onMounted(() => {
  // 建立 WebSocket 连接
  socket = new WebSocket('ws://example.com/notifications');

  // 收到消息时处理
  socket.onmessage = (event) => {
    notifications.value.push(JSON.parse(event.data));
  };
});

onUnmounted(() => {
  // 组件卸载时关闭 WebSocket 连接
  socket.close();
});
</script>

<template>
  <el-notification
    v-for="(note, index) in notifications"
    :key="index"
    :title="note.title"
    :message="note.message"
    type="info"
  />
</template>

• WebSocket：用于接收来自服务器的实时通知。
• onMounted 和 onUnmounted：管理 WebSocket 的连接和断开。

5. 复杂表单处理

复杂表单通常包含多个步骤或输入项。

5.1 多步骤表单示例：MultiStepForm.vue

<template>
  <div>
    <div v-if="step === 1">
      <el-form :model="formStep1">
        <el-form-item label="Username">
          <el-input v-model="formStep1.username" />
        </el-form-item>
      </el-form>
      <el-button @click="nextStep">Next</el-button>
    </div>
    <div v-else-if="step === 2">
      <el-form :model="formStep2">
        <el-form-item label="Email">
          <el-input v-model="formStep2.email" />
        </el-form-item>
      </el-form>
      <el-button @click="prevStep">Previous</el-button>
      <el-button @click="submitForm">Submit</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const step = ref(1);
const formStep1 = ref({
  username: ''
});
const formStep2 = ref({
  email: ''
});

const nextStep = () => {
  step.value++;
};

const prevStep = () => {
  step.value--;
};

const submitForm = () => {
  console.log('Form Submitted:', {
    ...formStep1.value,
    ...formStep2.value
  });
};
</script>

• 多步骤表单：通过 step 的值来控制显示的步骤页面。
• nextStep 和 prevStep：用于导航表单步骤。

6. 权限管理

6.1 权限控制逻辑示例

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const userRole = ref(localStorage.getItem('userRole') || 'guest');

const isAdmin = userRole.value === 'admin';

if (!isAdmin) {
  router.push('/login');
}
</script>

• 用户角色管理：通过判断用户角色来控制权限。
• 路由跳转：如果用户不是管理员，则重定向到登录页面。

7. 社交功能

7.1 点赞功能示例：LikeButton.vue

<template>
  <el-button :type="liked ? 'danger' : 'primary'" @click="toggleLike">
    {{ liked ? 'Unlike' : 'Like' }} ({{ likesCount }})
  </el-button>
</template>

<script setup>
import { ref } from 'vue';

const likesCount = ref(100);
const liked = ref(false);

const toggleLike = () => {
  liked.value = !liked.value;
  liked.value ? likesCount.value++ : likesCount.value--;
};
</script>

• 点赞逻辑：控制 liked 状态和 likesCount 计数来实现点赞和取消点赞的功能。