To quickly build a front-end and back-end separation project for VUE+SpringBoot, look at one (Windows)

Posted by phpsir on Fri, 13 Mar 2020 02:48:08 +0100

VUE part

About old versions
The package name of the Vue CLI was changed from vue-cli to @vue/cli.If you have a global installation of an older version of vue-cli (1.x or 2.x), you need to uninstall it first through NPM uninstall vue-cli-g or yarn global remove vue-cli.

The Node version requires that the Vue CLI require Node.js 8.9 or later (recommended 8.11.0+).You can use NVM or nvm-windows to manage multiple versions of Node on the same computer.

1. Install Node
  1. Baidu nodejs, the first entry on official website
  2. The first is the stable version, the second is the latest, usually downloading the stable version, so click the first download, and then run the installation by double-clicking once the download is complete
  3. Just go ahead and click on this Add to PATH at the end, so you don't have to configure the environment variables yourself, or you have to configure the environment variables yourself. It's not difficult to configure them. There are many Baidu tutorials.Finally, Install waits for the installation to complete, then Finish and NODE is installed.Verify that it is available, open the command window, enter node --version, verify that npm is available, and enter npm --version in the command window. A version number indicates that the installation was successful.
2. Install VUE scaffolding
  1. cmd run
npm install -g @vue/cli 
yarn global add @vue/cli`
  1. View Version
    vue --version
3.VUE3.0 Introduction and Advantages

vue3.0 adds a UI interface that allows you to quickly create projects and add plug-ins without typing on the command line. Beginners are recommended to use versions above 3.0

4. Create a project
  1. Execute vue ui from the command line, if no problem pops up the operation interface directly, if no popup, you can enter it yourself http://localhost:8000/
  2. Click Project Manager in the upper left corner
  3. Can create or import, we create a new project this time
  4. Add the project name and click Next
  5. Select the default configuration and click Create to finish

    6. After a while the project will be created
5. How to install plug-ins quickly
  1. Select Plugin Navigation Bar
  2. Click Add Plug-ins to search for the desired plug-ins in the search box
  3. Click Install
6. How to start a project
  1. Click Task, select the first server, click Run to start the project
  2. Click to start the app and the vue interface will pop up automatically

SpringBoot section

  1. File------>New------>Project

  2. Spring Assistant------>Select JDK Version----->Next

  3. Fill in Package Name----->Project Name--------->Next

  4. Select a web project------>Next

  5. Change project save path

  6. Step 5 completes to create the project successfully

  7. Label src as sources

  8. Write related Controller, Service

package com.example.demo;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

public class HelloWorld {
    public String hello(){
        return "hello world !";

  1. Start main program

  2. Visit localhost:8080/hello, as shown below

How to Separate Front and Back End Development

Explain how to develop with a simple user authentication

1. Develop a simple front-end interface

For ease of development, did we introduce hungry UI

  1. Introducing element ui
  2. Introducing Axios dependencies

    Reference axios in main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import axios from 'axios'
Vue.prototype.$axios = axios    //Global registration using this.$axios
Vue.config.productionTip = false

new Vue({
  render: h => h(App)
  1. Foreground code
  <el-form :rules="rules" class="login-container" label-position="left"
           label-width="0px" v-loading="loading">
    <h3 class="login_title">System Logon</h3>
    <el-form-item prop="account">
      <el-input type="text" v-model="" auto-complete="off" placeholder="Account number"></el-input>
    <el-form-item prop="checkPass">
      <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="Password"></el-input>
    <el-checkbox class="login_remember" v-model="checked" label-position="left">Remember password</el-checkbox>
    <el-form-item style="width: 100%">
      <el-button type="primary" @click.native.prevent="submitClick" style="width: 100%">Sign in</el-button>

  export default{
      return {
        rules: {
          account: [{required: true, message: 'enter one user name', trigger: 'blur'}],
          checkPass: [{required: true, message: 'Please input a password', trigger: 'blur'}]
        checked: true,
        loginForm: {
          name: 'Zhang San',
          password: '666666'
        loading: false
    methods: {
      submitClick: function () {

        var _this = this;
        this.loading = true;


                    }).then(resp=> {
          _this.loading = false;
          var data =;
          if (resp.status == 200) {
          // eslint-disable-next-line no-debugger
            var code = data;
            if (code == true) {
              _this.$alert('Login Successful!', 'Success!');

            } else {
              _this.$alert('Logon Failure!', 'fail!');
          } else {
            _this.$alert('Logon Failure!', 'fail!');
  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;

  .login_remember {
    margin: 0px 0px 35px 0px;
    text-align: left;

  1. Design sketch
2. Solving cross-domain issues

vue3.0 differs from 1.0 and 2.0 in that you need to create your own configuration file, create vue.config.js in the root directory, and automatically load the configuration file at startup

module.exports = {
    //All requests invoked through'api'are forwarded below'http://localhost:8090/'
                changeOrigin: true,
                 pathRewrite: {
                                    "^/api": ""
3. Call back-end interface through Ajax

4. Background interface development

Create User VO

package com.example.demo;

public class user {
    private String name;
    private String password;

    public String getName() {
        return name;

    public void setName(String name) { = name;

    public String getPassword() {
        return password;

    public void setPassword(String password) {
        this.password = password;

Create Controller

package com.example.demo;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

public class login {
    @PostMapping(value = "/login")
    //@ApiImplicitParam (name = id, value = ID value, paramType = path, required = true, dataType = Integer)
    public boolean login(user user) {
        System.out.println("name :"+user.getName()+"password :"+user.getPassword());
        //Simple demo, write username and password to death
            return true;
            return false;

5. Effects

If the input is incorrect


23 original articles published. 1. Visits 243
Private letter follow

Topics: Vue axios npm Windows