【Vue 3】使用＜script setup＞实现常见网站功能

文章目录

[1. 用户管理](#1. 用户管理)
- [1.1 用户注册和登录](#1.1 用户注册和登录)
[2. 数据管理（增删改查）](#2. 数据管理（增删改查）)
- [2.1 CRUD 操作](#2.1 CRUD 操作)
[3. 文件管理](#3. 文件管理)
- [3.1 文件上传示例：`FileUpload.vue`](#3.1 文件上传示例：FileUpload.vue)
[4. 消息通知系统](#4. 消息通知系统)
- [4.1 消息通知示例](#4.1 消息通知示例)
[5. 复杂表单处理](#5. 复杂表单处理)
- [5.1 多步骤表单示例：`MultiStepForm.vue`](#5.1 多步骤表单示例：MultiStepForm.vue)
[6. 权限管理](#6. 权限管理)
- [6.1 权限控制逻辑示例](#6.1 权限控制逻辑示例)
[7. 社交功能](#7. 社交功能)
- [7.1 点赞功能示例：`LikeButton.vue`](#7.1 点赞功能示例：LikeButton.vue)

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

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

1. 用户管理

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

1.1 用户注册和登录

登录页面示例：Login.vue

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

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`

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 实现实时消息通知：

vue 复制代码

<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`

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 权限控制逻辑示例

vue 复制代码

<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`

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 计数来实现点赞和取消点赞的功能。

【Vue 3】使用 ＜script setup＞ 实现常见网站功能

文章目录

1. 用户管理

1.1 用户注册和登录

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

2.1 CRUD 操作

3. 文件管理

3.1 文件上传示例：FileUpload.vue

4. 消息通知系统

4.1 消息通知示例

5. 复杂表单处理

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

6. 权限管理

6.1 权限控制逻辑示例

7. 社交功能

7.1 点赞功能示例：LikeButton.vue

【Vue 3】使用＜script setup＞实现常见网站功能

3.1 文件上传示例：`FileUpload.vue`

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

7.1 点赞功能示例：`LikeButton.vue`