On the 5th day of my participation in the November Gwen Challenge, check out the details of the event: the last Gwen Challenge 2021

First I will show you my gift from last month

Gin-vue-admin background management system framework built based on GIN + VUE integrates JWT authentication, permission management, dynamic routing, paging encapsulation, multi-point login interception, resource permissions, upload and download, code generator, form generator, general workflow and other basic functions. A set of CURD front-end and back-end codes in five minutes. VUE3 is currently supported, issue and PR ~ are welcome

Gitee address: gitee.com/pixelmax/gi…

Github address: github.com/flipped-aur…

Plugin repository and development specification :github.com/flipped-aur…

Approval flow branch: github.com/flipped-aur…

Let’s start with some of the problems with starting up code

D:\nodejs\node_global\webpack.ps1, because running scripts on this system is prohibited…

Yarn is used in development today. It was installed globally and can be used in CMD, but an error was reported in VS Code. The following information is displayed: None

Method to load the file D: \ nodejs \ node_global \ webpack ps1, because the ban on the system run the script, for details please refer to the https:/go.microsoft.com/fwlink/?LinkID=135170Copy the code

Solution:

Start by running VS Code as an administrator.

After the GET-executionPolicy command is executed on the terminal, Restricted is displayed indicating that the state is prohibited.

Then run set-executionPolicy remotesigned -s currentUser on the terminal

Here enter the get-ExecutionPolicy to view the RemoteSigned.

After yarn Install is used, the problem described above does not occur again. If other similar cases occur, the solution is the same.

# # into the web folder CD web installation depend on CNPM install | | NPM install # start web project NPM run serveCopy the code

Good, enter the body ::::

Project documentation

Online documentation: www.gin-vue-admin.com

Initialize the

From environment to deployment instructional videos

Development teaching (Contributor: LLemonGreen And Fann)

Important note

1. The project has documents and detailed video tutorials from start-up to development to deployment

2. This project requires you to have a certain golang and VUE foundation

3. You can complete all operations through our tutorials and documents, so we no longer provide free technical services, if you need services, please pay for support

4. If you are using this project for commercial use, comply with the Apache2.0 agreement and retain the author technical support statement. You must retain the following copyright information, and do not restrict the rest of the information. For rejection, please contact shouzi_1994 on wechat

5. If you need server 2C4G8M 80GB Tencent cloud one year 70 three years 198 buy here: curl.qcloud.com/tJrn0bK0

1. Basic introduction

1.1 Project Introduction

Gin-vue-admin is a full stack development base platform based on VUE and Gin development. It integrates JWT authentication, dynamic routing, dynamic menu, Casbin authentication, form generator, code generator, etc. It provides a variety of sample files, so that you can spend more time on business development.

Online preview: demo.gin-vue-admin.com

The test user name is admin

Test password: 123456

1.2 Contribution Guide

Hi! First thank you for using gin-vue-admin.

Gin-vue-admin is a set of open source framework for rapid development of a front-end and back-end separation architecture, designed to quickly build small and medium projects.

Gin-vue-admin can’t grow without your support. If you’d like to contribute code or provide suggestions for gin-Vue-Admin, please read the following.

1.2.1 Issue specification

  • Issue can only be used to submit bugs or features and design-related content, other content may be turned off. If you’re in doubt, check out Slack or Gitter.

  • Before submitting an issue, search to see if it has already been submitted.

1.2.2 Pull Request specification

  • Please fork to your own project first, do not branch directly under the warehouse.

  • Commit information is in the format of [file name]: description information, for example, readme. md: fix XXX bug.

  • Make sure the PR is committed to the Develop branch, not the Master branch.

  • If it is to fix a bug, please give a description in the PR.

  • Two maintainers are required to merge the code: one reviews it and approves it; the other reviews it again and merges it after approval.

2. Instructions

- Node version > V12.18.3 - Golang version >= V1.16 - IDE See https://www.gin-vue-admin.com/docs/first_master - Replace the public key, private key, warehouse name and default URL address in the project to avoid test file data errorsCopy the code

2.1 server project

Use an editing tool such as Goland to open the server directory. Do not open the gin-vue-admin root directory

# cloning project git clone https://github.com/flipped-aurora/gin-vue-admin.git # # into the server folder CD server using the go mod and install the go depend on the go Generate build -o server main.go (Windows build -o server.exe main.go server.exe)Copy the code

2.2 the web project

# # into the web folder CD web installation depend on CNPM install | | NPM install # start web project NPM run serveCopy the code

2.3 Swagger Automation API documentation

2.3.1 installation swagger

(1) Access to foreign websites
go get -u github.com/swaggo/swag/cmd/swag
Copy the code
(2) No access to foreign websites

Goproxy. cn or goproxy. IO is recommended because you can’t install go.org/x in China

GO111MODULE=on if you are using the Go version 1.13-1.15, you need to manually set GO111MODULE=on. Go env -w GO111MODULE=on # Configure the GOPROXY environment variable Go env -w GOPROXY = https://goproxy.cn, https://goproxy.io, direct # if abandon trouble, you can use the go generate compiled before executing code automatically, CD server go generation-run "go env -w.*?" # use the following command to download swag go get -u github.com/swaggo/swag/cmd/swagCopy the code

2.3.2 Generating API Documents

cd server
swag init
Copy the code

Go, swagger. Json, swagger. Yaml files in the docs folder will be updated in the server directory. Start go after service, in the browser type http://localhost:8888/swagger/index.html can see swagger documentation

3. Technical selection

  • Front end: Build the base page with vue-based Element.
  • Back end: Quickly build base restful apis with Gin, a Web framework written in go.
  • Database: usingMySql(5.6.44), usedgormTo achieve the basic operation of the database.
  • Cache: useRedisImplement the recording of current active usersjwtToken and implement multi-point login restrictions.
  • API documentation: useSwaggerBuild automated documents.
  • Configuration file: Usedfsnotify 和 viperimplementationyamlFormat of a configuration file.
  • Logging: Use ZAP for logging.

4. Project architecture

4.1 System architecture diagram

4.2 Front-end detailed Design diagram (Provider: Baobeisuper)

4.3 Directory Structure

├ ─ ─ server ├ ─ ─ API (API) │ └ ─ ─ v1 (v1 version interface) ├ ─ ─ the config (configuration) ├ ─ ─ the core (the core file) ├ ─ ─ docs (swagger document directory) ├ ─ ─ the global object (global) ├ ─ ─ the initialize () to initialize │ └ ─ ─ internal (initializes the internal function) ├ ─ ─ middleware (middleware layer) ├ ─ ─ model (model) │ ├ ─ ─ the request (and structure) │ └ ─ ─ the response (the parameter structure) ├ ─ ─ packfile (static file package) ├ ─ ─ the resource (static resource folder) │ ├ ─ ─ excel (excel import and export the default path) │ ├ ─ ─ page (form generator) │ └ ─ ─ the template (template) ├ ─ ─ the router (routing layer) ├ ─ ─ service (service) ├ ─ ─ the source (source layer) └ ─ ─ utils (kit) ├ ─ ─ the timer (timer interface encapsulation) └ ─ ─ the upload (oss interface encapsulation) ├─ Web │ ├─ SRC │ ├─ API │ ├─ Assets │ ├─ Router │ ├─store │ ├─ web │ ├─ SRC │ ├─ API │ ├─ Assets │ ├─ Router │ ├─store ├─ ├─ General Exercises ├─ General Exercises │ ├─ General Exercises │ ├─ General Exercises │ ├─ General ExercisesCopy the code

5. Main functions

  • Permission management: Based onjwtandcasbinThe realization of permission management.
  • File upload and download: implementation based onSeven NiuYun.Ali cloud.Tencent cloudThe file upload operation (please develop your own application corresponding to each platformtokenOr the correspondingkey).
  • Paging encapsulation: front-end usemixinsEncapsulate paging, paging method callsmixinsCan.
  • User management: The system administrator assigns user roles and role permissions.
  • Role management: The main object for creating permission control. You can assign different API and menu permissions to roles.
  • Menu management: Realize dynamic menu configuration for users and realize different menus for different roles.
  • API management: Different users have different permissions on API interfaces.
  • Configuration management: Configuration files can be modified in the foreground (this function is not available in the online experience site).
  • Conditional search: Added conditional search examples.
  • Restful Example: You can see the example apis in the user management module.
    • Front end file reference: web/SRC/view/superAdmin/API/API. Vue
    • Background file reference: server/router/sys_api.go
  • Multi-point login restriction: requires theconfig.yamlIn thesystemIn theuse-multipointChange to true(Redis parameters in Redis and Config need to be configured by yourself. During the test phase, please feedback any bugs in time).
  • Fragment long Transmission: provides an example for uploading file fragments and large file fragments.
  • Form Generator: Form generator uses @form-generator.
  • Code generator: Code generator for background base logic and simple CURD.

6. The knowledge base

6.1 Team Blog

www.yuque.com/flipped-aur…

There are front-end framework teaching videos. If you feel that the project is helpful to you, you can add my personal wechat account: SHOUzi_1994. Welcome to put forward your valuable requirements.

6.2 Teaching Video

(1) Hand in hand teaching video

www.bilibili.com/video/BV1Rg…

(2) Back-end directory structure adjustment and usage

www.bilibili.com/video/BV1x4…

(3) Golang basic teaching video

Bilibili:space.bilibili.com/322210472/c…

(4) Gin framework basic teaching

Bilibili:space.bilibili.com/322210472/c…

(5) Introduction video for gin-vue-admin version update

Bilibili:space.bilibili.com/322210472/c…