VUE part

1. Install Node

1. Baidu nodejs, the first entry on official website https://nodejs.org/en/
   
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 
or
yarn global add @vue/cli`

1. View Version
   vue --version
   

3.VUE3.0 Introduction and Advantages

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;

@RestController
public class HelloWorld {
    @RequestMapping("/hello")
    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({
  router,
  render: h => h(App)
}).$mount('#app')

1. Foreground code

<template>
  <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="loginForm.name" auto-complete="off" placeholder="Account number"></el-input>
    </el-form-item>
    <el-form-item prop="checkPass">
      <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="Password"></el-input>
    </el-form-item>
    <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>
    </el-form-item>
  </el-form>
</template>
<script>

  export default{
    data(){
      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;
        this.$axios({
                        method:'post',

                        url:'/api/login?name='+this.loginForm.name+'&password='+this.loginForm.password,

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

            } else {
              _this.$alert('Logon Failure!', 'fail!');
            }
          } else {
            //fail
            _this.$alert('Logon Failure!', 'fail!');
          }
        });
      }
    }
  }
</script>
<style>
  .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;
  }
</style>

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 = {
    devServer:{
    //All requests invoked through'api'are forwarded below'http://localhost:8090/'
        proxy:{
            '/api':{
                target:'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) {
        this.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;

@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
        if("user".equals(user.getName())&&"user".equals(user.getPassword())){
            return true;
        }else{
            return false;
        }
    }
}

5. Effects

If the input is incorrect

Success