综合电商平台vue前端搭建

在搭建完了后端springboot之后（后端springboot搭建全流程），你可能会再想要一个前端。这里展示vue前端搭建全流程。

1.vue初始化创建

找到后端的根目录，在根目录同级新建一个文件夹vuefront来存储前端代码

点进去vuefront，在终端打开，在终端输入：vue create <项目名称>比如vue create ecommerceplatform（注意不能用大写字母）

然后默认选vue3就行，等待一会搭建完了就是下面这样。

这时候你的vuefront/ecommerceplatfrom就多了一堆文件，注意vue.config.js后面要删除新建

删除后建一个新的vue.config.js（还是原位置），内容如下（注意：这里是假设你的后端端口是8080，请求的后端服务器为http://localhost:8080即本机8080端口，如果不是，要对应修改）

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer: {
    port: 8081, // 前端端口，别和后端 8080 冲突
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 后端地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 前端请求 /api/admin/xxx 会被代理到 http://localhost:8080/admin/xxx
        }
      }
    }
  }
})

2.试着写一个界面，并且与后端相连

在现有的vuefront/ecommerceplatform/src文件夹下创建一个文件夹views用来存放页面

我们以管理员个人信息页面为例子，在views下创建Admin.vue

admin.vue代码

<template>
  <div class="admin-container">
    <h2>管理员管理页面</h2>

    <!-- 管理员列表 -->
    <div class="admin-list">
      <div class="admin-item" v-for="admin in adminList" :key="admin.id">
        <span>ID：{{ admin.id }}</span>
        <span>用户名：{{ admin.userName }}</span>
        <span>密码：******</span>

        <!-- 修改密码按钮 -->
        <button class="edit-btn" @click="openEditModal(admin)">
          修改密码
        </button>
      </div>
    </div>

    <!-- 修改密码弹窗 -->
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <h3>修改密码（ID：{{ currentAdmin.id }}）</h3>

        <input
          type="password"
          v-model="newPassword"
          placeholder="请输入新密码（≥6位）"
        />

        <p class="tip" v-show="newPassword && newPassword.length < 6">
          密码长度不能少于6位
        </p>

        <div class="btns">
          <button @click="showModal = false">取消</button>
          <button @click="submitUpdatePwd">确认修改</button>
        </div>
      </div>
    </div>
  </div>
</template>

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

// 管理员列表
const adminList = ref([])

// 弹窗控制
const showModal = ref(false)
const currentAdmin = ref({})
const newPassword = ref('')

// 1. 页面加载时获取所有管理员
onMounted(() => {
  getAdminList()
})

// 获取所有管理员
const getAdminList = async () => {
  try {
    const res = await axios.get('/api/admin/getAll')
    adminList.value = res.data.data
  } catch (err) {
    alert('获取管理员失败')
    console.error(err)
  }
}

// 打开修改密码弹窗
const openEditModal = (admin) => {
  currentAdmin.value = admin
  newPassword.value = ''
  showModal.value = true
}

// 提交修改密码
const submitUpdatePwd = async () => {
  const id = currentAdmin.value.id
  const pwd = newPassword.value

  if (!pwd || pwd.length < 6) {
    alert('密码长度不能少于6位')
    return
  }

  try {
    const res = await axios.post(`/api/admin/updatePwd/${id}`, null, {
      params: { password: pwd }
    })

    if (res.data.code === 200) {
      alert('密码修改成功！')
      showModal.value = false
    } else {
      alert('修改失败：' + res.data.msg)
    }
  } catch (err) {
    alert('修改失败，服务器异常')
    console.error(err)
  }
}
</script>

<style scoped>
.admin-container {
  padding: 30px;
}

.admin-list {
  margin-top: 20px;
}

.admin-item {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 12px 15px;
  border: 1px solid #eee;
  margin-bottom: 10px;
  border-radius: 6px;
}

.edit-btn {
  padding: 6px 12px;
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 8px;
  width: 400px;
}

input {
  width: 100%;
  padding: 8px;
  margin: 10px 0;
}

.btns {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}

.tip {
  color: red;
  font-size: 12px;
}
</style>

3.修改现有文件，添加路由

再改造App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

在src/文件夹下新建router文件夹，新建一个index.js来路由

import { createRouter, createWebHistory } from 'vue-router'
import Admin from '../views/Admin.vue'

const routes = [
  {
    path: '/',
    redirect: '/admin'  // 默认打开管理员页面
  },
  {
    path: '/admin',
    component: Admin
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

修改一下现有的main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 引入路由

const app = createApp(App)
app.use(router) // 启用路由
app.mount('#app')

然后在vue.config.js中添加一行代码，解决ESLint 语法校验错误

lintOnSave: false

完成后文件目录结构为

4.添加依赖

最后，用下面命令添加router和axios依赖

npm install axios
npm install vue-router@4

5.运行

用下面命令直接跑起来即可

npm run serve

在终端可以查看本地跑起来的url，直接在浏览器打开