Write at the beginning:A random record of a brick moving programmer

1, Construction of SpringBoot project

Portal for project construction: From scratch, the SpringBoot project is built quickly

2, Configuration of SpringBoot project

Overall project structure

The specific configuration codes are as follows:
The first is POM XML configuration
pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.3</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.cn</groupId>
    <artifactId>vue_demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>vue_demo</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <skipTests>true</skipTests>
        <druid.version>1.1.10</druid.version>
        <mysql-connector.version>8.0.16</mysql-connector.version>
        <mybatis-plus.version>3.3.2</mybatis-plus.version>
    </properties>

    <dependencies>
        <!--SpringBoot Generic dependency module-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-actuator</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-aop</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!--SpringBoot Verification framework-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-validation</artifactId>
        </dependency>
        <!--lombok rely on-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <!--SpringBoot Configuration processing-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

User entity class
User.Java

package com.cn.vuedemo.entity;


import lombok.Data;

/**
 * @author demo
 * @date 2021/8/12 16:47
 */
@Data
public class User {
    /**
     * id
     * */
    private Integer id;
    /**
     * account number
     * */
    private String username;
    /**
     * password
     * */
    private String password;
}

Data return
ResultBody.Java

package com.cn.vuedemo.entity;

/**
 * request
 *
 * @author demo
 */
public class ResultBody<T> {
    /**
     * Response code
     */
    private int code;
    /**
     * news
     */
    private String message;
    /**
     * data
     */
    private T data;


    public ResultBody(int code, String message, T data) {
        this.code = code;
        this.message = message;
        this.data = data;
    }

    public ResultBody(String message) {
        this.code = 200;
        this.message = message;
    }

    public ResultBody(T data) {
        this.code = 200;
        this.message = "Request succeeded";
        this.data = data;
    }

    public ResultBody(int code) {
        this.code = code;
        this.message = "Request succeeded";
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }
}

Controller class, a simple login method, does not request the database
LoginController.Java

package com.cn.vuedemo.controller;

import com.cn.vuedemo.entity.ResultBody;
import com.cn.vuedemo.entity.User;
import org.springframework.web.bind.annotation.*;

/**
 * @author demo
 * @date 2021/8/12 16:18
 */
@RestController
public class LoginController {

    /**
     * land
     *
     * @param user Input parameter
     * @return ResultBody
     */
    @CrossOrigin
    @PostMapping(value = "api/login")
    public ResultBody login(@RequestBody User user) {
        if ("admin".equals(user.getUsername()) && "123456".equals(user.getPassword())) {
            return new ResultBody(200);
        } else {
            return new ResultBody("Incorrect password");
        }
    }
}

Here, a simple login background interface is implemented.

3, Implementation of vue login page

vue project creation portal: Vue+SpringBoot project development: build Vue project
directory structure

To realize the landing page, first create the landing page in the src/components directory
Login.vue

<template>
  <div>
    user name:<label>
    <input type="text" v-model="loginForm.username" placeholder="enter one user name"/>
  </label>
    <br><br>
    password: <label>
    <input type="password" v-model="loginForm.password" placeholder="Please input a password"/>
  </label>
    <br><br>
    <button v-on:click="login">Sign in</button>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data () {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        responseResult: []
      }
    },
    methods: {
      login () {
        this.$axios
          .post('/login', {
            username: this.loginForm.username,
            password: this.loginForm.password
          })
          .then(successResponse => {
            if (successResponse.data.code === 200) {
              this.$router.replace({path: '/show'})
            }
          })
          .catch(failResponse => {
          })
      }
    }
  }
</script>

Simply write a login interface, two input input boxes, account and password. methods defines the click method of the login button, that is, send data to the back-end / login interface. After a successful response is obtained, the page jumps to / index.

Show.Vue
Then create the home page in the src/components directory. Now the home page is just a display of jump after login

<template>
    <div>
      Hello Word!
    </div>
</template>

<script>
  export default {
    name: 'Show'
  }
</script>

<style scoped>

</style>

Project related configuration
Set reverse proxy
Because axios is used, you need to enter the project folder and execute npm install --save axios to install this module.
Modify Src / main js
main.js

import Vue from 'vue'
import App from './App'
import router from './router'
var axios = require('axios')
// Set the reverse proxy, and the front-end request is sent to by default http://localhost:8080/api , the back-end port is 8080, and the Vue project port is 8081
axios.defaults.baseURL = 'http://localhost:8080/api'
// Global registration, and then you can use this in other components$ Axios send data
Vue.prototype.$axios = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Configure page routing
Modify SRC \ router \ index js
index.js

import Vue from 'vue'
import Router from 'vue-router'
//Landing and home page components
import Login from '@/components/Login'
import Show from '@/components/Show'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/show',
      name: 'Show',
      component: Show
    }
  ]
})

Cross domain support
In config \ index JS, find the proxyTable location, and modify the proxyTable to the following code:

proxyTable: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

Here, the basic configuration is over.
Run project

npm run dev

The following errors are encountered during startup.

This is eslint verification. Eslint is a JavaScript verification plug-in, which is usually used to verify the syntax or code writing style. With eslint checking, indents, spaces, blank lines, etc. in the code will be checked according to the specification

If you have patience, you can check one by one.
I did a direct shutdown test. The method is as follows:
Find build / webpack base. Conf.js file, with the following modifications:

Then start again and you will find that the startup is successful.
visit: http://localhost:8081/#/login

User name input: admin
Password input: 123456
Click login to see the jump to the home page

A separate login function of SpringBoot+Vue is realized.

Over