Quantcast
Channel: 小蓝博客
Viewing all articles
Browse latest Browse all 3145
↧

Go-Admin脚手架系统快速启动教程（Gin + Vue3 + Element UI）

December 25, 2024, 8:17 am
$
0
0

Go-Admin脚手架系统快速启动教程（Gin + Vue3 + Element UI） 🚀🔧

在现代Web开发中，快速搭建一个功能齐全的管理后台系统是许多开发者的需求。Go-Admin作为一款强大的Go语言后台管理框架，结合Gin、Vue3及Element UI，能够帮助您高效构建高性能、用户友好的管理系统。本文将详细介绍如何快速启动一个基于Gin + Vue3 + Element UI的Go-Admin脚手架系统，涵盖环境配置、项目搭建、前后端集成等关键步骤。

一、教程概述 📚

本教程将引导您完成以下内容：

  1. 环境准备
  2. 安装并配置Gin框架
  3. 安装Go-Admin
  4. 设置Vue3前端项目并集成Element UI
  5. 前后端联动与项目运行
  6. 常见问题与解决方案

二、环境准备 🔧

在开始之前，请确保您的开发环境中已经安装了以下工具：

  • Go（版本1.16及以上）
  • Node.js（版本14及以上）
  • npm 或 yarn
  • Git

检查Go版本

go version

检查Node.js和npm版本

node -v
npm -v

三、安装并配置Gin框架 🛠️

Gin是一个高性能的Go语言Web框架，具有简洁的API和丰富的功能，非常适合构建高效的Web应用。

1. 创建Go项目

首先，创建一个新的Go项目目录并初始化模块。

mkdir go-admin-project
cd go-admin-project
go mod init github.com/yourusername/go-admin-project

解释：

  • mkdir go-admin-project：创建项目目录。
  • cd go-admin-project：进入项目目录。
  • go mod init：初始化Go模块，替换 github.com/yourusername/go-admin-project为您的模块路径。

2. 安装Gin框架

使用以下命令安装Gin：

go get -u github.com/gin-gonic/gin

解释：

  • go get -u：下载并更新Gin框架到最新版本。

3. 创建基础服务器

在项目根目录下创建一个 main.go文件，并添加以下代码：

package main

import (
    "github.com/gin-gonic/gin"
)

func main() {
    r := gin.Default()
    r.GET("/ping", func(c *gin.Context) {
        c.JSON(200, gin.H{
            "message": "pong",
        })
    })
    r.Run(":8080") // 监听并在 0.0.0.0:8080 上启动服务
}

解释：

  • gin.Default()：创建一个默认的Gin路由器，包含Logger和Recovery中间件。
  • r.GET("/ping", ...)：定义一个简单的GET路由，返回JSON响应。
  • r.Run(":8080")：启动服务器，监听8080端口。

4. 运行服务器

在终端中运行以下命令启动服务器：

go run main.go

访问 http://localhost:8080/ping，应返回：

{
  "message": "pong"
}

四、安装Go-Admin 📦

Go-Admin是一个基于Gin的开源后台管理框架，集成了丰富的功能和插件，能够快速搭建管理后台。

1. 安装Go-Admin

在项目中使用以下命令安装Go-Admin：

go get -u github.com/go-admin-team/go-admin

解释：

  • go get -u：下载并更新Go-Admin到最新版本。

2. 配置Go-Admin

在 main.go中引入并配置Go-Admin：

package main

import (
    "github.com/gin-gonic/gin"
    admin "github.com/go-admin-team/go-admin/v3"
    "github.com/go-admin-team/go-admin/v3/database"
    "github.com/go-admin-team/go-admin/v3/modules/config"
    "github.com/go-admin-team/go-admin/v3/modules/language"
    _ "github.com/go-admin-team/go-admin/template/types/bootstrap4"
)

func main() {
    r := gin.Default()

    // 配置Go-Admin
    cfg := config.Config{
        Databases: config.DatabaseList{
            "default": {
                Host:       "127.0.0.1",
                Port:       "3306",
                Database:   "go_admin",
                User:       "root",
                Password:   "password",
                Prefix:     "go_admin_",
                Driver:     "mysql",
                SslMode:    "disable",
                Config:     &database.Config{},
                DryRun:     false,
                Charset:    "utf8mb4",
                ParseTime:  true,
                Loc:        "Local",
            },
        },
        UrlPrefix: "admin",
        Language:  language.EN,
        Store: config.Store{
            Path:   "./storage",
            Prefix: "prefix",
        },
    }

    // 初始化Go-Admin
    adminPlugin := admin.NewAdmin(&cfg)
    adminPlugin.AddGenerators(&generator.UserGenerator{})
    r.Use(adminPlugin.Middleware())

    r.Run(":8080")
}

解释：

  • config.Config：配置Go-Admin，包括数据库连接信息、URL前缀、语言等。
  • admin.NewAdmin(&cfg)：初始化Go-Admin插件。
  • r.Use(adminPlugin.Middleware())：将Go-Admin中间件应用到Gin路由器。

3. 创建数据库

确保您已安装并运行了MySQL数据库。使用以下SQL脚本创建所需的数据库和表：

CREATE DATABASE go_admin;
USE go_admin;

CREATE TABLE go_admin_users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    password VARCHAR(100) NOT NULL,
    email VARCHAR(100),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

解释：

  • 创建 go_admin数据库及 go_admin_users表，用于存储用户信息。

五、设置Vue3前端项目并集成Element UI 🎨

Vue3是现代前端框架，Element UI则是基于Vue的桌面端组件库，两者结合能够打造美观且功能强大的前端界面。

1. 创建Vue3项目

使用 @vue/cli或 Vite创建一个新的Vue3项目。这里以Vite为例：

npm init vite@latest frontend -- --template vue
cd frontend
npm install

解释：

  • npm init vite@latest frontend -- --template vue：使用Vite创建一个名为 frontend的Vue3项目。
  • cd frontend：进入项目目录。
  • npm install：安装依赖。

2. 安装Element Plus

Element Plus是Element UI的Vue3版本，兼容性更好。

npm install element-plus

解释：

  • npm install element-plus：安装Element Plus组件库。

3. 配置Element Plus

在 src/main.js中引入并配置Element Plus：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

解释：

  • import ElementPlus from 'element-plus'：引入Element Plus。
  • app.use(ElementPlus)：将Element Plus插件应用到Vue实例。

4. 创建基础页面

在 src/App.vue中添加一个简单的Element Plus组件：

<template>
  <el-container>
    <el-header>
      <h1>Go-Admin后台管理系统</h1>
    </el-header>
    <el-main>
      <el-button type="primary">点击我</el-button>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
h1 {
  color: #409EFF;
}
</style>

解释：

  • el-container、el-header、el-main：Element Plus的布局组件。
  • el-button：Element Plus的按钮组件。

5. 运行前端项目

在 frontend目录下运行：

npm run dev

访问 http://localhost:3000，应看到包含按钮的简单页面。

六、前后端联动与项目运行 🔗

1. 配置CORS

为了实现前后端通信，需要在Gin服务器中配置CORS（跨域资源共享）。

安装CORS中间件：

go get -u github.com/gin-contrib/cors

修改 main.go以添加CORS支持：

package main

import (
    "github.com/gin-contrib/cors"
    "github.com/gin-gonic/gin"
    admin "github.com/go-admin-team/go-admin/v3"
    "github.com/go-admin-team/go-admin/v3/database"
    "github.com/go-admin-team/go-admin/v3/modules/config"
    "github.com/go-admin-team/go-admin/v3/modules/language"
    _ "github.com/go-admin-team/go-admin/template/types/bootstrap4"
)

func main() {
    r := gin.Default()

    // 配置CORS
    r.Use(cors.Default())

    // 配置Go-Admin
    cfg := config.Config{
        Databases: config.DatabaseList{
            "default": {
                Host:       "127.0.0.1",
                Port:       "3306",
                Database:   "go_admin",
                User:       "root",
                Password:   "password",
                Prefix:     "go_admin_",
                Driver:     "mysql",
                SslMode:    "disable",
                Config:     &database.Config{},
                DryRun:     false,
                Charset:    "utf8mb4",
                ParseTime:  true,
                Loc:        "Local",
            },
        },
        UrlPrefix: "admin",
        Language:  language.EN,
        Store: config.Store{
            Path:   "./storage",
            Prefix: "prefix",
        },
    }

    // 初始化Go-Admin
    adminPlugin := admin.NewAdmin(&cfg)
    r.Use(adminPlugin.Middleware())

    r.Run(":8080")
}

解释：

  • github.com/gin-contrib/cors：Gin的CORS中间件，允许跨域请求。
  • r.Use(cors.Default())：应用默认的CORS设置，允许所有来源的请求。

2. 前后端API对接

在Vue前端项目中，使用Axios进行API请求。

安装Axios：

npm install axios

在 src/main.js中引入Axios：

import axios from 'axios'
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.config.globalProperties.$axios = axios
app.use(ElementPlus)
app.mount('#app')

解释：

  • axios：HTTP客户端，用于发送API请求。
  • app.config.globalProperties.&dollar;axios = axios：将Axios挂载到Vue实例，便于全局使用。

3. 创建API请求示例

在 src/App.vue中添加API请求按钮功能：

<template>
  <el-container>
    <el-header>
      <h1>Go-Admin后台管理系统</h1>
    </el-header>
    <el-main>
      <el-button type="primary" @click="fetchPing">点击我</el-button>
      <p v-if="message">{{ message }}</p>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: '',
    }
  },
  methods: {
    fetchPing() {
      this.$axios.get('http://localhost:8080/ping')
        .then(response => {
          this.message = response.data.message
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

<style>
h1 {
  color: #409EFF;
}
</style>

解释：

  • fetchPing：点击按钮时发送GET请求到 /ping，并显示响应消息。
  • v-if="message"：如果有消息，则显示在页面上。

4. 测试前后端联动

  1. 启动后端服务器：

    go run main.go

  2. 启动前端项目：

    npm run dev
  3. 访问 http://localhost:3000，点击按钮，应在页面下方看到 pong消息。

七、常见问题与解决方案 ❓🔧

问题1：CORS错误

症状：在浏览器控制台看到CORS相关的错误信息，无法进行前后端通信。

解决方案：

  • 确保后端Gin服务器已正确配置CORS中间件。
  • 检查请求的URL是否正确，确保前端请求指向后端服务器的正确地址和端口。

问题2：Go-Admin无法连接数据库

症状：启动后端服务器时报错，提示无法连接到数据库。

解决方案：

  • 确认数据库服务已启动并运行。
  • 检查 main.go中数据库连接配置（主机、端口、用户名、密码等）是否正确。
  • 确保防火墙或安全组允许数据库端口（默认3306）的访问。

问题3：前端组件无法正常显示

症状：Element UI组件样式不正确或无法显示。

解决方案：

  • 确认已在 main.js中正确引入Element Plus的CSS文件。
  • 检查是否正确安装了Element Plus依赖。
  • 确保Vue版本与Element Plus兼容。

八、最佳实践 🌟

  1. 环境隔离：使用Docker或虚拟环境隔离开发和生产环境，确保依赖的一致性。
  2. 版本控制：使用Git进行版本控制，定期提交代码，确保代码安全和可追溯性。
  3. 配置管理：将敏感信息（如数据库密码）存储在环境变量或配置文件中，避免硬编码。
  4. 日志监控：配置后端日志记录和监控，及时发现和解决问题。
  5. 安全加固：启用HTTPS，使用防火墙和访问控制，保护系统安全。

示例：使用Docker容器化部署

创建一个 docker-compose.yml文件，配置Go-Admin和MySQL服务：

version: '3.8'

services:
  db:
    image: mysql:8.0
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: go_admin
    ports:
      - "3306:3306"
    volumes:
      - db_data:/var/lib/mysql

  app:
    build: .
    depends_on:
      - db
    ports:
      - "8080:8080"
    environment:
      DB_HOST: db
      DB_PORT: 3306
      DB_USER: root
      DB_PASSWORD: password
      DB_NAME: go_admin

volumes:
  db_data:

解释：

  • db：MySQL服务，设置根密码和默认数据库。
  • app：Go-Admin应用，依赖于MySQL服务，映射8080端口。
  • volumes：持久化数据库数据。

构建并启动服务：

docker-compose up -d

九、工作流程图示意 📈

graph TD
    A[开始] --> B[环境准备]
    B --> C[安装Gin框架]
    C --> D[安装配置Go-Admin]
    D --> E[创建Vue3项目]
    E --> F[集成Element UI]
    F --> G[前后端联动]
    G --> H{测试与优化}
    H -->|通过| I[完成]
    H -->|未通过| B

解释：

  • 开始：启动教程流程。
  • 环境准备：安装必要的开发工具。
  • 安装Gin框架：搭建后端基础服务。
  • 安装配置Go-Admin：集成Go-Admin后台管理框架。
  • 创建Vue3项目：搭建前端基础项目。
  • 集成Element UI：添加Element UI组件库。
  • 前后端联动：实现前后端的API通信。
  • 测试与优化：测试功能并进行优化。
  • 完成：成功搭建Go-Admin脚手架系统。

十、总结 📝

通过本文的详细教程，您已经掌握了如何快速启动一个基于Gin + Vue3 + Element UI的Go-Admin脚手架系统。从环境配置、后端框架搭建、前端项目创建到前后端联动，每一步都进行了深入讲解和实用示例。掌握这些技能，将极大提升您在Web开发和后台管理系统搭建中的效率与质量。

持续学习和实践，结合最佳实践与优化建议，您将能够构建出高性能、稳定且易维护的管理后台系统。希望本教程能为您的开发工作带来实质性的帮助和提升。💪🌟

关键配置示例 🌈

以下是一个完整的Go-Admin脚手架系统配置示例，展示了如何集成Gin、Go-Admin、Vue3和Element UI，并实现前后端联动：

1. main.go 后端配置

package main

import (
    "github.com/gin-contrib/cors"
    "github.com/gin-gonic/gin"
    admin "github.com/go-admin-team/go-admin/v3"
    "github.com/go-admin-team/go-admin/v3/database"
    "github.com/go-admin-team/go-admin/v3/modules/config"
    "github.com/go-admin-team/go-admin/v3/modules/language"
    _ "github.com/go-admin-team/go-admin/template/types/bootstrap4"
)

func main() {
    r := gin.Default()

    // 配置CORS，允许前端访问
    r.Use(cors.Default())

    // 配置Go-Admin
    cfg := config.Config{
        Databases: config.DatabaseList{
            "default": {
                Host:       "db", // Docker Compose中服务名称
                Port:       "3306",
                Database:   "go_admin",
                User:       "root",
                Password:   "password",
                Prefix:     "go_admin_",
                Driver:     "mysql",
                SslMode:    "disable",
                Config:     &database.Config{},
                DryRun:     false,
                Charset:    "utf8mb4",
                ParseTime:  true,
                Loc:        "Local",
            },
        },
        UrlPrefix: "admin",
        Language:  language.EN,
        Store: config.Store{
            Path:   "./storage",
            Prefix: "prefix",
        },
    }

    // 初始化Go-Admin
    adminPlugin := admin.NewAdmin(&cfg)
    r.Use(adminPlugin.Middleware())

    r.Run(":8080")
}

解释：

  • CORS配置：允许前端Vue应用访问后端API。
  • 数据库配置：连接到Docker Compose中的MySQL服务。
  • Go-Admin初始化：配置并启动Go-Admin中间件。

2. docker-compose.yml Docker配置

version: '3.8'

services:
  db:
    image: mysql:8.0
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: go_admin
    ports:
      - "3306:3306"
    volumes:
      - db_data:/var/lib/mysql

  app:
    build: .
    depends_on:
      - db
    ports:
      - "8080:8080"
    environment:
      DB_HOST: db
      DB_PORT: 3306
      DB_USER: root
      DB_PASSWORD: password
      DB_NAME: go_admin

volumes:
  db_data:

解释：

  • db：配置MySQL数据库服务，设置根密码和默认数据库。
  • app：配置Go-Admin应用服务，依赖于MySQL服务，映射8080端口。
  • volumes：持久化数据库数据，防止数据丢失。

3. 前端 src/main.js配置

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import axios from 'axios'

const app = createApp(App)

// 全局配置Axios
app.config.globalProperties.$axios = axios

app.use(ElementPlus)
app.mount('#app')

解释：

  • ElementPlus：引入并应用Element Plus组件库。
  • Axios配置：将Axios挂载到Vue实例，方便全局使用。

4. 前端 src/App.vue示例

<template>
  <el-container>
    <el-header>
      <h1>Go-Admin后台管理系统</h1>
    </el-header>
    <el-main>
      <el-button type="primary" @click="fetchPing">点击我</el-button>
      <p v-if="message">{{ message }}</p>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: '',
    }
  },
  methods: {
    fetchPing() {
      this.$axios.get('http://localhost:8080/ping')
        .then(response => {
          this.message = response.data.message
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

<style>
h1 {
  color: #409EFF;
}
</style>

解释：

  • el-container、el-header、el-main：Element Plus布局组件。
  • el-button：Element Plus按钮组件，点击触发API请求。
  • fetchPing方法：使用Axios发送GET请求到后端，获取响应并显示。

5. 完整项目结构 📁

go-admin-project/
├── frontend/
│   ├── node_modules/
│   ├── public/
│   ├── src/
│   │   ├── App.vue
│   │   └── main.js
│   ├── package.json
│   └── vite.config.js
├── main.go
├── go.mod
├── go.sum
└── docker-compose.yml

解释：

  • frontend/：前端Vue3项目目录。
  • main.go：后端Go项目主文件。
  • docker-compose.yml：Docker配置文件，用于启动MySQL和Go-Admin服务。

通过以上关键配置示例，您可以快速搭建并启动一个功能齐全的Go-Admin脚手架系统，结合Gin、Vue3和Element UI，实现高效的后台管理系统开发。

结束语

掌握Go-Admin脚手架系统的快速启动方法，能够显著提升您的Web开发效率和后台管理系统的开发质量。通过本文详细的步骤指导和关键配置示例，您可以轻松搭建一个基于Gin + Vue3 + Element UI的高性能管理后台。持续学习和优化，将使您在实际项目中更加游刃有余，打造出功能强大且用户友好的管理系统。💪🌟

↧
Search
Viewing all articles
Browse latest Browse all 3145

Trending Articles

《沈冰自述——我和周永康的故事》全本

February 8, 2015, 9:08 pm

Moog - Subsequent 25

January 16, 2020, 12:00 am

出售: 林憶蓮•回來愛的身邊 (東芝1A1頭版)

March 9, 2013, 11:02 am

筆記 - 使用 PowerShell 清除停用 AD 帳號與 OU

July 16, 2019, 11:03 pm

df-dferh-01 中国区 Android 安装 Google Play Store 后报错 的 解决办法

April 24, 2019, 6:56 am

「一棒接一棒、棒棒強棒」108學年度家長會長交接典禮

October 28, 2019, 8:49 pm

吸烟与MBTI类型判断捷径 (豆瓣 INFJ的奇幻之旅小组)

December 28, 2017, 6:55 pm

acermark龍璿國際 展出多款包裝設備

April 18, 2016, 6:02 am

枋寮北勢寮隆山宮 睽違12年再辦迎王祭典

October 15, 2018, 6:03 am

日本女优有村千佳COS集锦：狂三&黑白岩&亚丝娜&绫波丽

September 4, 2013, 2:57 am

有遇到过这个问题么。/jsb-videoplayer.js not found, possible missing file.

June 23, 2020, 2:17 am

MAS v2.8 magicgenius 汉化版 - 11.11更新

November 10, 2024, 5:46 pm

出售: Monster Cable Interlink Reference 2

May 23, 2018, 2:00 am

福建佛教人士望云和尚(林斌)的九仙禅寺被强行收走，望云妈妈被赶出寺庙

August 17, 2015, 1:12 am

R 语言中的OpenBLAS*和英特尔® 数学核心函数库的性能比较

December 21, 2016, 9:38 pm

[转载]煞貢、直星、人專吉日\金神七煞歌

March 3, 2016, 6:37 am

HAKERS哈克士戶外 12月8~14日廠拍

December 6, 2016, 3:52 am

OBS Studio 23.2.1 免安裝中文版 - 免費網路實況廣播軟體 實況主必備軟體 取代Fraps

June 16, 2019, 8:10 am

<請教>行駛中安卓機會重新開機

August 5, 2018, 7:25 am

Udp2raw-tunnel 及其一键安装脚本

October 23, 2017, 6:46 pm
Search