大家好，我是“不想打工的码农”。

上期我们用88行Java代码搞定了后端，很多兄弟留言：“老哥，后端有了，但总不能让客户天天用Postman吧？”

说得对！再好的后台，也得有个“脸”见人。今天，我就教你怎么用 Vue3 + Element Plus，只写30行核心代码，给你的学生管理系统配上一个清爽、能点、能操作的前端界面！

声明：本文假设你完全没碰过Vue，只要会点HTML/CSS，就能跟上！

一、为什么选Vue3 + Element Plus？

• Vue3：目前最友好的前端框架之一，学习曲线平缓。
• Element Plus：一套现成的UI组件库，按钮、表格、弹窗全都有，拿来即用，不用自己画样式。
• Vite：新一代构建工具，启动速度飞快，改完代码秒刷新。

这三件套组合起来，就是前端新手的“外挂”！

二、动手！5步搞定前端页面

第1步：创建Vue3项目（2分钟）

确保你已安装 Node.js（官网下载即可），然后在终端执行：

npm create vue@latest student-frontend

一路回车（全部选默认），完成后：

cd student-frontendnpm installnpm install element-plus  # 安装UI库npm run dev

浏览器打开 http://localhost:5173，看到欢迎页就成功了！

第2步：写一个“学生列表”页面（核心！8分钟）

删除 src/components 下的默认文件，新建 StudentList.vue：

<template>  <el-table :data="students" style="width: 100%">    <el-table-column prop="id" label="ID" width="60" />    <el-table-column prop="name" label="姓名" />    <el-table-column prop="age" label="年龄" width="80" />    <el-table-column prop="email" label="邮箱" />    <el-table-column label="操作" width="120">      <template #default="scope">        <el-button size="small" @click="edit(scope.row)">编辑</el-button>        <el-button size="small" type="danger" @click="del(scope.row.id)">删除</el-button>      </template>    </el-table-column>  </el-table>  <!-- 新增/编辑弹窗 -->  <el-dialog v-model="dialogVisible" :title="editing ? '编辑' : '新增'">    <el-form :model="form">      <el-form-item label="姓名"><el-input v-model="form.name" /></el-form-item>      <el-form-item label="年龄"><el-input v-model="form.age" type="number" /></el-form-item>      <el-form-item label="邮箱"><el-input v-model="form.email" /></el-form-item>    </el-form>    <template #footer>      <el-button @click="dialogVisible = false">取消</el-button>      <el-button type="primary" @click="save">保存</el-button>    </template>  </el-dialog></template><script setup>import { ref, onMounted } from 'vue'import axios from 'axios'const students = ref([])const dialogVisible = ref(false)const editing = ref(false)const form = ref({ id: null, name: '', age: null, email: '' })// 获取学生列表const fetchStudents = () => {  axios.get('http://localhost:8080/student/list')    .then(res => students.value = res.data)}// 删除const del = (id) => {  if (confirm('确定删除？')) {    axios.get(`http://localhost:8080/student/delete/${id}`).then(fetchStudents)  }}// 打开编辑/新增const edit = (row) => {  form.value = { ...row }  editing.value = true  dialogVisible.value = true}const add = () => {  form.value = { id: null, name: '', age: null, email: '' }  editing.value = false  dialogVisible.value = true}// 保存const save = () => {  const url = editing.value     ? 'http://localhost:8080/student/update'     : 'http://localhost:8080/student/add'  axios.post(url, form.value).then(() => {    dialogVisible.value = false    fetchStudents()  })}onMounted(fetchStudents)</script>

数一数，核心逻辑也就30多行！ 其余都是模板和UI配置。

第3步：在App.vue中引入组件

修改 src/App.vue：

<template>  <div style="padding: 20px">    <h1>学生信息管理系统</h1>    <el-button type="primary" @click="add">新增学生</el-button>    <StudentList />  </div></template><script setup>import StudentList from './components/StudentList.vue'</script>

第4步：解决跨域问题（关键！）

因为前端跑在5173端口，后端在8080，浏览器会拦截请求。
在后端Spring Boot项目中加一个配置类：

@Configurationpublic class CorsConfig {    @Bean    public CorsFilter corsFilter() {        CorsConfiguration config = new CorsConfiguration();        config.addAllowedOriginPattern("*");        config.addAllowedHeader("*");        config.addAllowedMethod("*");        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();        source.registerCorsConfiguration("/**", config);        return new CorsFilter(source);    }}

第5步：启动并测试！

• 启动后端（Spring Boot）
• 启动前端（npm run dev）
• 浏览器访问前端地址，就能看到一个带表格、能增删改查的完整系统了！

三、结语：你的第一个全栈作品诞生了！

看，前后端加起来不到200行核心代码，你就做出了一个真正可用的全栈应用！
你可以把它放进简历，可以说“我独立开发过XX系统”，甚至可以基于它扩展出商品管理、订单管理……

我是“不想打工的码农”，一个正在用代码搭建自己护城河的普通人。下期见！

#Vue3 #前端开发##elementplus##全栈开发##程序员副业##代码教程##不想打工的码农#职场#