01 . Go Gin+Vue develops an online takeout application

Project introduction

We will start to develop an api project using the Gin framework, which we call cloud restaurant. Like hungry, meituan takeout and other life service applications, cloud restaurant is an online takeout application. Users of the application can browse merchants, goods and place orders online.

The project is divided into client and server programs.

  • 1. The client program obtains data from the server through the interface, and displays the data after obtaining the results.
  • 2. The server program provides the access function of Api interface, performs database operation, and organizes data return.

Client introduction

The Cloud Restaurant client is developed using Vue, ES6, Webpack and other technologies. The project development requires front-end development skills. We focus on the development of back-end Api functions.

Environmental preparation

To run the client projects developed by vue and other technologies, you need to install node JS environment

download

You can go to the download page of nodejs: http://nodejs.cn/download/ Download the corresponding installation package

1.Windows computer installation Nodejs environment

  • 1. Select under windows environment msi installation files. Then double-click node msi, select the installation path.
  • 2. Configure environment variables. Right click Properties - > advanced system settings - > environment variables on the computer (or my computer) to configure. New node_ Set the path variable of node directory and install JS.

Installing Nodejs in macOS system

Use the brew command to install nodejs in the terminal. Detailed command:

brew install nodejs

Installing Nodejs on Linux system

On the download page of nodejs, select the 64 bit file under the linux category, and the download file is tar Compressed file in XZ format. Then execute the commands of decompressing and establishing soft connection in turn:

tar -xvf   node-v10.15.3-linux-x64.tar.xz
vi /etc/profile
export NODEJS=/opt/node/node-v10.15.3-linux-x64
export PATH=$NODEJS/bin:$PATH

// After saving the / etc/profile file
node -v 
// See version

Server introduction

We focus on back-end project development

Create project

In the src directory of gopath, create the OnlineRestaurant directory as the server project.

mkdir CloudRestaurant
Create profile directory
mkdir config

In the config directory, configure app JSON configuration file

{
  "app_name": "youmen",
  "app_mode": "debug",
  "app_host": "localhost",
  "app_port": "8090"
}

Create a tool directory

Create config Go file, used to parse project configuration information, config Go as follows

type Config struct {
	AppName  string         `json:"app_name"`
	AppMode  string         `json:"app_mode"`
	AppHost  string         `json:"app_host"`
	AppPort  string         `json:"app_port"`
}
var _cfg *Config = nil
func GetConfig() *Config {
	return _cfg
}

func ParseConfig(path string) (*Config, error) {
	file, err := os.Open(path)
	if err != nil {
		panic(err)
	}
	defer file.Close()

	reader := bufio.NewReader(file)
	decoder := json.NewDecoder(reader)
	if err := decoder.Decode(&_cfg); err != nil {
		return nil, err
	}
	return _cfg, nil
}
Write main go
func main() {
    //Read configuration file
	cfg, err := toolbox.ParseConfig("./config/app.json")
	if err != nil {
		toolbox.Error(err.Error())
		return
	}
	app := gin.Default()
	app.Run(cfg.AppHost + ":" + cfg.AppPort)
}

Write hello world

Write controller: create controller and create HelloController.

package controller

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

type HelloController struct {
}

func (hello *HelloController) Router(engine *gin.Engine) {
	engine.GET("/hello", hello.Hello)
}

func (hello *HelloController) Hello(context *gin.Context) {
	context.JSON(200, map[string]interface{}{
		"message": "hello world",
	})
}
Add route

In main Add routing settings in Go program

func registerRouter(router *gin.Engine) {
     new(controller.HelloController).Router(router)
}

Project front end use and commissioning

Front end project catalog description

The front-end project of this project is developed using the vue framework of nodejs. The name is shop client. The source code of the project is shown in the figure below:

The above figure shows the shop client front end project The front-end project framework is explained as follows:

  • Build: the build directory is the specified project compilation directory. All operations related to the compilation configuration of the project are configured and specified in this directory.
  • Config: the config directory is mainly used to configure the global project and test or release versions.
  • dist: all The compiled js files of vue pages will be output to this directory.
  • node_modules: this directory is the code directory of the dependent third-party library required by nodejs project. Due to the large volume of this directory, it can be deleted during project migration or project copy. Executing npm install command in the root directory of the project will regenerate and download the required third-party code base.
  • src: this directory is the source directory of front-end engineering projects.
  • Static: this directory is used to store static files, such as js and css files.
  • package.json: executing the npm init command will generate this file, which is the configuration file of the node project, including the compilation of the project and the dependency information of the third-party dependency library.
Run front end project

After the nodejs environment is installed, you can use commands to operate the front-end projects

Enter the project

cd shop-client

Common commands

...
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
}
...

According to the above script command configuration, many command functions can be realized

For example, you can run the compiled project with the following command:

npm run build

Because the start command is configured in the scripts script, only the start command can ignore run. Of course, the specific command that npm start will execute is npm run dev, so you can run the project through the npm run dev command

Request interface API

In the api directory under the src directory of the shop client front-end project, there are two js files, ajax.js JS file and index js file.

  • ajax.js file: this file encapsulates Ajax, the method of asynchronous network request by the front-end project. The function contains three parameters: url, data and type, indicating the request path, request parameters and request method.
  • index.js file: in this file, ajax.js is introduced JS file and its ajax method define the basic request path BASE_URL constant. The request port in this project is 8090, which is consistent with the port monitored by the background server. If you want to modify the server listening port yourself, remember to base the front-end code_ The port in the URL constant should also be modified. In addition, in index JS file defines the interfaces required for the functional development of the project for reference vue file.
Front end page vue source file

In the pages directory under the src directory of the shop client front-end project, the page source file of the project is stored, and the page source file is vue is a file with an extension.

In this project, it is divided into more detailed directories according to the project functions and modules: Login, Msite, Order, Profile, Search, Shop and so on.

Routing file

There is a router directory under the src directory, which contains an index JS file, which is the routing page of the front-end page. The vue source file of the corresponding front-end page is displayed through the routing configuration of this page.

The routing module uses a third-party routing Library: Vue router. The configuration dependency of the third-party Vue router can be found in package Found in the dependencies configuration module in the JSON file:

...
"dependencies": {
    "axios": "^0.18.0",
    "better-scroll": "^1.12.6",
    "date-fns": "^1.29.0",
    "fastclick": "^1.0.6",
    "mint-ui": "^2.2.13",
    "mockjs": "^1.0.1-beta3",
    "swiper": "^4.3.3",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
}
...
Project entrance

In the src directory under the root directory of the shop client project, there are two files representing the entry of the project, namely js file and vue file. main.js is the general entry of project operation, which is in main js file, introduced and used app vue file and router routing file are introduced at the same time.

App.vue is the layout of the main page of the project and introduces the page style file.

Project operation

When you need to run the front-end project for debugging, perform the following steps

/*
		cd shop-client
		npm run dev
*/

Then access port 8080 in the browser: http://localhost:8080 You can access the front page, as shown in the following figure:

Tags: Go Vue gin

Posted by hilltopper06 on Mon, 09 May 2022 15:43:08 +0300