DOCSEARCHbyAlgolia
Submit Docs

go-admin-ui

repository·master·Indexed 23 days ago

https://github.com/go-admin-team/go-admin-ui

A Vue and Element UI based frontend for go-admin, a decoupled authority management system. It provides an out-of-box UI solution for enterprise applications featuring RBAC (Role-Based Access Control), JWT authentication, and administrative modules for managing users, roles, and system configurations. Version 2.0.9.

Tokens
7.8K
Snippets
15
Records
66
Agent score
79%

What's inside go-admin-ui

  1. Overview of go-admin

    master
    go-admin is a decoupled permission management system built with Gin (backend) and Vue + Element UI (frontend). It is designed for rapid application development with features including RESTful API design, RBAC access control via Casbin, JWT authentication, and Swagger documentation. It uses GORM for database abstraction and includes powerful tools for code generation and form building.

  2. Run go-admin using Docker

    master

    You can build and run the backend service using Docker containers.

    1. Build the image:
      docker build -t go-admin .
    
2. **Run the container**:
   Map the local configuration file to the container and expose port 8000.
   ```shell
docker run --name go-admin -p 8000:8000 -v /config/settings.yml:/config/settings.yml -d go-admin-server
    docker build -t go-admin .
docker run --name go-admin -p 8000:8000 -v /config/settings.yml:/config/settings.yml -d go-admin-server

  3. Run the go-admin UI (frontend)

    master

    To start the Vue-based user interface:

    1. Navigate to the UI directory.
    2. Install dependencies using npm. It is recommended to use a mirror if you are in a region with slow access to the default registry to avoid bugs associated with cnpm.
    3. Run the development server.
    # Install dependencies
npm install --registry=https://registry.npm.taobao.org

# Start service
npm run dev
    npm install --registry=https://registry.npm.taobao.org
npm run dev

  5. Deploy go-admin using Docker

    master

    You can compile and run the backend using Docker.

    1. Build the image:
    docker build -t go-admin .
    1. Run the container: Map the local configuration file to the container and expose port 8000.
    docker run --name go-admin -p 8000:8000 -v /config/settings.yml:/config/settings.yml -d go-admin-server
    docker build -t go-admin .
docker run --name go-admin -p 8000:8000 -v /config/settings.yml:/config/settings.yml -d go-admin-server

  6. Run the go-admin backend server

    master

    Follow these steps to compile and start the backend service.

    1. Compile the project: Navigate to the go-admin directory and run go build.
    2. Configure Database: Edit go-admin/config/settings.yml to update the settings.database section with your database credentials and verify the log path.
    3. Initialize Database: Run the migration command to set up the initial database schema.
    4. Start Server: Run the server command.

    Note for Windows users: If you encounter CGO errors (e.g., exec: "gcc": executable file not found), ensure you have a C compiler installed and configured in your PATH.

    Commands for macOS/Linux:

    cd ./go-admin
go build
# Initialize database
./go-admin migrate -c=config/settings.dev.yml
# Start server
./go-admin server -c config/settings.yml

    Commands for Windows:

    cd ./go-admin
go build
# Initialize database
go-admin.exe migrate -c=config/settings.dev.yml
# Start server
go-admin.exe server -c config/settings.yml
    # macOS/Linux
./go-admin migrate -c=config/settings.dev.yml
./go-admin server -c config/settings.yml

# Windows
go-admin.exe migrate -c=config/settings.dev.yml
go-admin.exe server -c config/settings.yml

  7. Set up the go-admin development environment

    master

    To develop with go-admin, you need to set up both the backend and the frontend.

    Prerequisites:

    • Go 1.17+
    • Node.js v18+
    • npm 6.14.11+
    • Git

    Step 1: Create a workspace Create a parent directory and clone both the backend (go-admin) and the frontend (go-admin-ui) repositories into it. Important: The two projects must be placed in the same folder level.

    # Create a development directory
mkdir goadmin
cd goadmin

# Get backend code
git clone https://github.com/go-admin-team/go-admin.git

# Get the front-end code
git clone https://github.com/go-admin-team/go-admin-ui.git
    # Create a development directory
mkdir goadmin
cd goadmin

# Get backend code
git clone https://github.com/go-admin-team/go-admin.git

# Get the front-end code
git clone https://github.com/go-admin-team/go-admin-ui.git

  8. Run the go-admin backend service

    master

    Follow these steps to compile and start the backend service:

    1. Compile the project:

      cd ./go-admin
go build

      Note: On Windows, if you encounter CGO errors related to go-sqlite3, ensure you have a C compiler (like gcc) installed and configured in your PATH.

    2. Configure Database: Edit the configuration file at go-admin/config/settings.yml. Update the settings.database section with your database credentials.

    3. Initialize Database: Run the migration command to set up the initial database schema and resources.

      • macOS/Linux: ./go-admin migrate -c=config/settings.dev.yml
      • Windows: go-admin.exe migrate -c=config/settings.dev.yml

    4. Start the Server:

      • macOS/Linux: ./go-admin server -c config/settings.yml
      • Windows: go-admin.exe server -c config/settings.yml

  9. Configure route metadata for sidebar and breadcrumbs

    master

    When defining routes in go-admin-ui, you can use the meta object and specific route properties to control how items appear in the sidebar, breadcrumbs, and tags-view.

    Route Properties

    • hidden: true: The item will not show in the sidebar.
    • alwaysShow: true: The root menu will always show. If false (default), the root menu only shows if it has exactly one child; otherwise, it becomes a nested menu.
    • redirect: 'noRedirect': Prevents redirection in the breadcrumb.
    • name: 'router-name': Required for <keep-alive> functionality.

    Meta Object Keys

    • roles: ['admin', 'editor']: Controls page access based on user roles.
    • title: 'title': The name displayed in the sidebar and breadcrumb.
    • icon: 'svg-name': The icon displayed in the sidebar.
    • noCache: true: If true, the page will not be cached.
    • affix: true: If true, the tab will be fixed (affixed) in the tags-view.
    • breadcrumb: false: If false, the item is hidden in the breadcrumb.
    • activeMenu: '/example/list': Sets the path that the sidebar will highlight.

  10. Change the development server port

    master

    The default development port is 9527. You can change the port using one of the following methods:

    1. Via CLI flag: Pass the --port flag to the dev command.
    2. Via Environment Variable: Set the port environment variable.

    Note: If you attempt to use port 80, you may need administrator privileges (e.g., sudo npm run dev on macOS).

  11. Install the permission and permisaction directives

    master

    To use element-level permission control in your Vue application, you can install the permission and permisaction directives.

    If you are using a standard Vue build system (like Webpack or Vite), you can import the default export and use Vue.use() to register them globally. If you are working in an environment where Vue is available on the window object, the directives will be automatically installed and attached to the window object.

  12. Configure global application settings in settings.js

    master

    The src/settings.js file is used to configure global UI behaviors and application settings for the go-admin interface. You can toggle features like the settings panel, top navigation, tags view, and header behavior here.

    module.exports = {
  title: 'go-admin后台管理系统',

/**
   * @type {boolean} true | false
   * @description Whether show the settings right-panel
   */
  showSettings: true,

/**
   * 是否显示顶部导航
   */
  topNav: true,

/**
   * @type {boolean} true | false
   * @description Whether need tagsView
   */
  tagsView: true,

/**
   * @type {boolean} true | false
   * @description Whether fix the header
   */
  fixedHeader: true,

/**
   * @type {boolean} true | false
   * @description Whether show the logo in sidebar
   */
  sidebarLogo: true,

/**
   * @type {string | array} 'production' | ['production', 'development']
   * @description Need show err logs component.
   * The default is only used in the production env
   * If you want to also use it in dev, you can pass ['production', 'development']
   */
  errorLog: 'production',

themeStyle: 'dark'
}