技术领域

选型工具 / 框架

说明

前端框架

Vue3 + Vite

支持 Composition API

UI 组件库

Element Plus

适配 Vue3

状态管理

Pinia

替代 Vuex

路由 / 请求

Vue Router 4 / Axios

路由控制 / 接口请求

后端

Node.js + Express + MySQL

简易接口与数据存储

-- 用户表

CREATE TABLE users (

  id INT PRIMARY KEY AUTO_INCREMENT,

  username VARCHAR(50) UNIQUE NOT NULL,

  password VARCHAR(100) NOT NULL,

  role ENUM('user','admin') DEFAULT 'user',

  create_time DATETIME DEFAULT CURRENT_TIMESTAMP

);

-- 商品表

CREATE TABLE goods (

  id INT PRIMARY KEY AUTO_INCREMENT,

  title VARCHAR(100) NOT NULL,

  price DECIMAL(10,2) NOT NULL,

  user_id INT,

  status ENUM('pending','passed','rejected'),

  FOREIGN KEY (user_id) REFERENCES users(id)

);

npm create vite@latest vue-secondhand -- --template vue

npm install element-plus pinia vue-router@4 axios

import { createRouter, createWebHistory } from 'vue-router'

import { useUserStore } from '@/store/user'

const routes = [

  // 前台路由

  {

    path: '/',

    component: () => import('@/layouts/FrontLayout.vue'),

    children: [

      { path: '', component: () => import('@/views/front/Index.vue') },

      { path: 'publish', component: () => import('@/views/front/PublishGoods.vue'), meta: { requireAuth: true } }

    ]

  },

  // 后台路由（需管理员权限）

  {

    path: '/admin',

    component: () => import('@/layouts/AdminLayout.vue'),

    meta: { requireAuth: true, requireAdmin: true },

    children: [{ path: 'goods', component: () => import('@/views/admin/GoodsManagement.vue') }]

  },

  { path: '/login', component: () => import('@/views/Login.vue') }

]

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

// 路由守卫

router.beforeEach((to, from, next) => {

  const userStore = useUserStore()

  if (to.meta.requireAuth && !userStore.token) next('/login')

  else if (to.meta.requireAdmin && userStore.role !== 'admin') next('/')

  else next()

})

export default router

import { defineStore } from 'pinia'

import { login, getUserInfo } from '@/api/user'

export const useUserStore = defineStore('user', {

  state: () => ({

    token: localStorage.getItem('token') || '',

    role: 'user'

  }),

  actions: {

    async login(userInfo) {

      const res = await login(userInfo)

      this.token = res.data.token

      localStorage.setItem('token', this.token)

      await this.fetchUserInfo()

    },

    async fetchUserInfo() {

      const res = await getUserInfo()

      this.role = res.data.role

    },

    logout() { this.token = ''; localStorage.removeItem('token') }

  }

})

<template>

  <el-form :model="form" :rules="rules" ref="formRef">

    <el-form-item label="标题" prop="title"><el-input v-model="form.title"></el-input></el-form-item>

    <el-form-item label="价格" prop="price"><el-input v-model="form.price" type="number"></el-input></el-form-item>

    <el-button type="primary" @click="submit">提交</el-button>

  </el-form>

</template>

<script setup>

import { ref } from 'vue'

import { ElMessage } from 'element-plus'

import { publishGoods } from '@/api/goods'

const formRef = ref(null)

const form = ref({ title: '', price: '' })

const rules = ref({

  title: [{ required: true, message: '请输标题', trigger: 'blur' }],

  price: [{ required: true, message: '请输价格', trigger: 'blur' }]

})

const submit = async () => {

  await formRef.value.validate()

  await publishGoods(form.value)

  ElMessage.success('发布成功')

}

</script>

src/

├── api/        # 接口封装

├── components/ # 公共组件

├── router/     # 路由配置

├── store/      # Pinia状态

├── views/      # 页面（front前台/admin后台）

├── App.vue     # 根组件

└── main.js     # 入口