Springboot+VUE zur Realisierung von Anmeldung und Registrierung

Paket springbootmybatis.controller;

importiere org.springframework.web.bind.annotation.CrossOrigin;
importiere org.springframework.web.bind.annotation.PostMapping;
importiere org.springframework.web.bind.annotation.RequestBody;
importiere org.springframework.web.bind.annotation.RestController;
importiere springbootmybatis.pojo.User;
importiere springbootmybatis.service.UserService;

importiere javax.annotation.Resource;


@RestController
öffentliche Klasse UserController {
    @Ressource
    Benutzerdienst Benutzerdienst;

    @PostMapping("/registrieren/")
    @CrossOrigin("*")
    String-Register (@RequestBody Benutzer Benutzer) {
        System.out.println("Jemand hat eine Registrierung angefordert!");
        int res = userService.register(user.getAccount(), user.getPassword());
        wenn(res==1) {
            Rückgabewert "Registrierung erfolgreich";
        } anders {
            Rückgabewert: „Registrierung fehlgeschlagen“;
        }
    }

    @PostMapping("/login/")
    @CrossOrigin("*")
    String login(@RequestBody Benutzer Benutzer) {
        int res = userService.login(user.getAccount(), user.getPassword());
        wenn(res==1) {
            Rückgabewert: „Anmeldung erfolgreich“;
        } anders {
            Rückgabewert: „Anmeldung fehlgeschlagen“;
        }
    }
}

Paket springbootmybatis.service;

importiere org.springframework.stereotype.Service;
importiere springbootmybatis.dao.UserMapper;

importiere javax.annotation.Resource;

@Service
öffentliche Klasse UserService {
    @Ressource
    UserMapper BenutzerMapper;

    öffentliche int register(String Konto, String Passwort) {
        returniere userMapper.register(Konto, Passwort);
    }

    public int login(String Konto, String Passwort) {
        returniere userMapper.login(Konto, Passwort);
    }
}

Paket springbootmybatis.pojo;

importiere lombok.Data;

@Daten
öffentliche Klasse Benutzer {
    privates String-Konto;
    privates String-Passwort;
}

Paket springbootmybatis.dao;

importiere org.apache.ibatis.annotations.Mapper;

@Mapper
öffentliche Schnittstelle UserMapper {
    int register(String-Konto, String-Passwort);

    int login(String-Konto, String-Passwort);
}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE-Mapper
        ÖFFENTLICH "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="springbootmybatis.dao.UserMapper">

    <insert id="registrieren">
       in Benutzer (Konto, Passwort) Werte einfügen (#{Konto}, #{Passwort});
    </einfügen>

    <select id="login" resultType="Integer">
        Wählen Sie count(*) vom Benutzer, wobei Konto=#{Konto} und Passwort=#{Passwort};
    </Auswählen>
</mapper>

Server-Port: 8000
Frühling:
  Datenquelle:
    Benutzername: root
    Passwort: 123456
    URL: jdbc:mysql://localhost:3306/community?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
    Treiberklassenname: com.mysql.cj.jdbc.Driver
mybatis:
    Typ-Alias-Paket: springbootmybatis.pojo
    Mapper-Standorte: Klassenpfad:mybatis/mapper/*.xml
    Konfiguration:
      Map-Unterstrich-zu-Camel-Case: wahr

CREATE TABLE `Benutzer` (
  `Konto` varchar(255) COLLATE utf8_bin DEFAULT NULL,
  `Passwort` varchar(255) COLLATE utf8_bin DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

npm i -g cnpm --registry=https://registry.npm.taobao.org

npm i -g vue-cli

vue init webpack-Projekt

# Wechseln Sie in das Projektverzeichnis cd vue-01
# Kompilieren Sie npm install
# Starten Sie npm run dev

<Vorlage>
  <div id="app">
    <Router-Ansicht/>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "App"
}
</Skript>

<Stil>

</Stil>

<Vorlage>
  <div>
    <el-input v-model="account" placeholder="Bitte geben Sie Ihre Kontonummer ein"></el-input>
    <el-input v-model="password" placeholder="Bitte geben Sie Ihr Passwort ein" show-password></el-input>
    <el-button type="primary" @click="login">Anmelden</el-button>
    <el-button type="primary" @click="register">Registrieren</el-button>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Willkommen",
  Daten () {
    zurückkehren {
      Konto: '',
      Passwort: ''
    }
  },
  Methoden: {
    registrieren: Funktion () {
      dies.axios.post('/api/register/', {
        Konto: dieses.Konto,
        Passwort: dieses.Passwort
      }).dann(Funktion (Antwort) {
        console.log(Antwort);
      }).catch(Funktion (Fehler) {
        konsole.log(Fehler);
      });
      // dies.$router.push({Pfad:'/registry'});
    },
    login: Funktion () {
      dies.axios.post('/api/login/', {
        Konto: dieses.Konto,
        Passwort: dieses.Passwort
      }).dann(Funktion () {
        alert('Anmeldung erfolgreich');
      }).fangen(Funktion (e) {
        Warnung(en)
      })
      // dies.$router.push({Pfad: '/board'});
    }
  }
}
</Skript>

<Stilbereich>

</Stil>

// Die Vue-Build-Version, die mit dem Befehl „import“ geladen werden soll
// (nur Laufzeit oder Standalone) wurde in webpack.base.conf mit einem Alias ​​festgelegt.
Vue von „vue“ importieren
App aus „./App“ importieren
Router aus „./router“ importieren
importiere ElementUI von „element-ui“
importiere 'element-ui/lib/theme-chalk/index.css'
Axios von „Axios“ importieren
Importieren Sie VueAxios von „vue-axios“.

Vue.use(VueAxios, axios)
Vue.use(ElementUI)
Vue.config.productionTip = falsch

/* eslint-deaktivieren Sie no-new */
neuer Vue({
  el: '#app',
  Router,
  Komponenten: {App},
  Vorlage: '<App/>'
})

Vue von „vue“ importieren
Router von „vue-router“ importieren
Willkommen aus '@/components/welcome' importieren

Vue.use(Router)

exportiere standardmäßig einen neuen Router({
  Routen: [
    {
      Weg: '/',
      Name: "Willkommen",
      Komponente: Willkommen
    }
  ]
})

„streng verwenden“
// Vorlagenversion: 1.3.1
// siehe http://vuejs-templates.github.io/webpack für Dokumentation.

const Pfad = require('Pfad')

modul.exporte = {
  Entwickler: {

    // Pfade
    AssetsSubDirectory: "statisch",
    assetPublicPath: '/',
    Proxy-Tabelle: {
      '/api': {
        target: 'http://localhost:8000', //Domänenname der Backend-Schnittstelle// secure: false, //Wenn es sich um eine https-Schnittstelle handelt, müssen Sie diesen Parameter konfigurieren changeOrigin: true, //Wenn die Schnittstelle domänenübergreifend ist, müssen Sie diesen Parameter konfigurieren pathRewrite: {
          '^/api': '' //Pfad neu schreiben, wenn Ihre URL das API-Feld enthält, wie /api/v1/tenant,
          //Sie können den Pfad mit demselben Namen wie die Regel umschreiben, was bedeutet, dass Sie die API während der Entwicklung nicht hinzufügen müssen.}
      }
    },

    // Verschiedene Dev Server Einstellungen
    Host: 'localhost', // kann von process.env.HOST überschrieben werden
    Port: 8080, // kann durch process.env.PORT überschrieben werden, falls Port belegt ist, wird ein freier ermittelt
    autoOpenBrowser: false,
    errorOverlay: wahr,
    Benachrichtigung bei Fehlern: true,
    Umfrage: falsch, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    // Eslint Loader verwenden?
    // Wenn dies zutrifft, wird Ihr Code während der Bündelung linted und
    // Lint-Fehler und Warnungen werden in der Konsole angezeigt.
    useEslint: wahr,
    // Wenn wahr, werden Eslint-Fehler und -Warnungen auch im Fehler-Overlay angezeigt
    // im Browser.
    showEslintErrorsInOverlay: false,

    /**
     * Quellkarten
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: "billiges-Modul-Eval-Source-Map",

    // Wenn Sie Probleme beim Debuggen von Vue-Dateien in Devtools haben,
    // setze dies auf „false“ – es *könnte* helfen
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: wahr,

    cssSourceMap: wahr
  },

  bauen: {
    // Vorlage für index.html
    index: Pfad.auflösen(__dirname, '../dist/index.html'),

    // Pfade
    assetRoot: Pfad.resolve(__dirname, '../dist'),
    AssetsSubDirectory: "statisch",
    assetPublicPath: '/',

    /**
     * Quellkarten
     */

    productionSourceMap: wahr,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: "#Quellkarte",

    // Gzip ist standardmäßig deaktiviert, da viele beliebte statische Hosts wie
    // Surge oder Netlify haben alle statischen Assets bereits für Sie mit GZIP gepackt.
    // Bevor Sie den Wert auf „true“ setzen, stellen Sie Folgendes sicher:
    // npm install --save-dev Komprimierungs-Webpack-Plugin
    ProduktionGzip: false,
    Produktions-Gzip-Erweiterungen: ['js', 'css'],

    // Führen Sie den Build-Befehl mit einem zusätzlichen Argument aus, um
    // Zeigen Sie den Bundle-Analyzer-Bericht an, nachdem der Build abgeschlossen ist:
    // `npm run build --report`
    // Auf „true“ oder „false“ setzen, um es immer ein- oder auszuschalten
    bundleAnalyzerReport: process.env.npm_config_report
  }
}