Golang learning Web application development based on Vue.js

Golang is an open source programming language developed by Google. It was born not long ago, but it is highly sought after by developers because of its efficient concurrency performance, excellent performance and good development experience. At the same time, Vue.js is one of the most popular JavaScript frameworks currently and is widely used in the development of web applications. This article will explore how to develop a web-based application using Golang and Vue.js.

1. Environment setup

First, you need to install the environment required for Golang and Vue.js to run:

For Golang, you need to install the Golang development environment and add it to in the system path. The installation package can be downloaded from the [official website](https://golang.org/dl/) and installed according to the prompts.

For Vue.js, you need to install the node.js package manager npm globally and install Vue.js through npm. Relevant information can be obtained on the [official website](https://vuejs.org).

2. Create a new project

Create a new Golang and Vue.js project:

mkdir myproject
cd myproject

Create a new go.mod file using Golang:

module projectname

go 1.16

require (
    github.com/gin-gonic/gin v1.6.3
)

In this example, we use the Gin framework, you can also use other frameworks you are familiar with.

Next, use npm to create a new Vue.js application:

npm init @vue/cli

This command will prompt us to select the required configuration and enter the options. After the configuration is completed, we will do some initialization of the project:

cd frontend
npm install
npm run build

Note that these commands need to be run under the frontend directory of the Vue.js project.

3. Write back-end code

Next, we need to write back-end code. In this example, we use the Gin framework to write the simplest web application, and provide the HTML files produced by the Vue.js application to the browser for rendering.

In main.go, we introduce the gin framework package and create a Gin instance:

package main

import (
    "net/http"

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

func main() {
    router := gin.Default()
}

We use Gin's Default function to create a default router instance. Now we connect the router to the Vue.js generated HTML file:

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

    router.StaticFS("/", http.Dir("./frontend/dist"))
}

This code links all requests to the root directory "/" to the Vue.js generated HTML file. Finally, we run this web application:

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

    router.StaticFS("/", http.Dir("./frontend/dist"))

    router.Run(":8080")
}

Using this line of code, we can start the service on the local 8080 port.

4. Write the front-end code

After completing the writing of the back-end code, we need to write the front-end code in Vue.js.

First, in the App.vue file of the Vue.js application, we need to introduce the backend API:

<script>
export default {
  data() {
    return {
      data: [],
    };
  },

  async created() {
    const response = await fetch("/api/data");
    this.data = await response.json();
  },
};
</script>

This line of code will access the /data route we wrote in the backend, And will get the response in JSON format and fill it into the data array. Next, we need to use the template syntax of Vue.js to extract this data and render it:

<template>
  <ul>
    <li v-for="(title, index) in data" :key="index">
      {{ title }}
    </li>
  </ul>
</template>

This code uses the v-for instruction of Vue.js to traverse the data array and render the list items. Finally, we need to add a router to the entry file main.js of the Vue.js application, pointing to the /data path, and start the Vue.js application:

import { createApp } from "vue";
import App from "./App.vue";

import router from "./router";

createApp(App).use(router).mount("#app");

We used Vue.js in this example The official routing management plug-in, the content of the router.js file is as follows:

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import(/* webpackChunkName: "home" */ "./views/Home.vue"),
  },
];

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

export default router;

In this code, we define a basic router and navigate the root path to the Home.vue component.

5. Run

Now, we have completed all the code to develop the web application with Golang and Vue.js. You need to use the following command to start the application:

go run main.go

Open the browser and enter "http://localhost:8080" to access our web application.

6. Conclusion

In this article, we have shown how to develop web-based applications using Golang and Vue.js. By combining the advantages of these two frameworks, we can develop more efficient and faster web applications to meet the development needs of different needs. I hope this article can help developers and inspire more creativity and innovative thinking.

The above is the detailed content of Golang learning Web application development based on Vue.js. For more information, please follow other related articles on the PHP Chinese website!