(1) Aufbau der Front-End-Umgebung --- Basierend auf SpringBoot + MySQL + Vue + ElementUI + Mybatis werden Front-End und Back-End getrennt, um ein Verwaltungssystem für Anfänger aufzubauen

Was ich vorher geschrieben habe:

Hier ist ein laufend aktualisierter Blog zur Fertigstellung eines Managementsystems (hauptsächlich des Backends) für den Jahrgang 2023. Die Dauer beträgt 20 Tage und die tägliche Übungszeit beträgt etwa 2-3 Stunden. Standardmäßig verfügen Sie bereits über Grundkenntnisse in der Systementwicklung wie SpringBoot, Datenbank, HTML, CSS, JavaScript usw. Während des Serialisierungsprozesses können Sie sich auch beraten lassen, wenn detaillierte Probleme auftreten. QQ-Gruppe: 1140508453. Das Video wird auf Station B gestartet.
Link zu Station B:
https://www.bilibili.com/video/BV1sC4y1J7KS/?spm_id_from=333.999.0.0&vd_source=cccb198db3b03d71b117484ed9dab175

Grundlegende Werkzeugvorbereitung

• Knoten 14.16.0+
• jdk 1.8
• MySQL 5.7+
• Navicat Premium 15
• Idee2021.1+
• Visual Studio-Code
• Hinweis: Mit Ausnahme von JDK empfehlen wir die Verwendung der stabileren Version 1.8, der Rest kann entsprechend der tatsächlichen Situation verwendet werden. Wenn Sie die entsprechende Software bereits befolgt haben, ist es nicht erforderlich, dieselbe Version vorzubereiten.

Aufgabe 1: Aufbau einer VUE+Element-UI-Umgebung

Vue hat jetzt Vue2 und Vue3 und Element hat Element und Element plus eingeführt. Aus Erfahrung empfehlen wir die Verwendung von Vue2. Dies kann während der Projekterstellung ausgewählt werden und hat nichts mit der Installation zu tun. Die offizielle Website lautet:

Link: https://v2.cn.vuejs.org/

Die offizielle Website von Element basierend auf Vue2 ist:

Link: https://element.eleme.io/#/zh-CN/component/installation

1. Erstellen Sie ein neues Vue2-Projekt

1. Installieren Sie das Vue-Gerüst, geben Sie npm install -g @vue/cli in das Terminal ein und drücken Sie die Eingabetaste.

npm install -g @vue/cli

2. Starten Sie ein neues Vue-Projekt

(1) Öffnen Sie VS-Code und gehen Sie zum neuen Ordner im Terminal.

(2) Terminaleingabe: vue erstellt den Vue-Projektnamen. Wenn Sie beispielsweise einen Schlafsaal erstellen (erstellen Sie ein Projekt mit dem Namen Schlafsaal), drücken Sie die Eingabetaste.

vue create dormitory

(3) Wählen Sie „Manuelle Konfiguration“

(4) Konfigurieren Sie wie unten gezeigt und verwenden Sie die Leertaste zur Auswahl.





(5) Das neue Projekt ist abgeschlossen.

(6) Öffnen Sie das Projekt im VS-Code, Datei – öffnen Sie den Ordner.

3. Ausgangsstruktur des Projekts

4. Mehrere wichtige Anfangsdateien (nur als Referenz, derzeit sind keine Änderungen erforderlich).

(1) Routing index.js

// An highlighted block
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    
    
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    
    
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
    
    
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

(2)main.js

// An highlighted block
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
    
    
  router,
  render: h => h(App)
}).$mount('#app')

5. Führen Sie das Projekt aus

Geben Sie im Terminal npm run servo ein und drücken Sie die Eingabetaste.

npm run serve

Hinweis: Wenn es sich nicht im aktuellen Ordner befindet, können Sie mit dem Befehl cd zum aktuellen Projektverzeichnis wechseln und es dann ausführen.
(6) Klicken Sie auf: http://localhost:8081/ oder geben Sie die aktuelle Adresse in den Browser ein. Wenn Sie die folgende Seite sehen, zeigt binggo!!! an, dass die Gerüstumgebung erfolgreich erstellt wurde. Blumen manuell bestreuen.

2. Installieren Sie die Element-Benutzeroberfläche

1.Installieren Sie ElementUI

 npm i element-ui -S

2. Führen Sie die Element-Benutzeroberfläche in main.js ein.

// An highlighted block
import Vue from 'vue'
import ElementUI from 'element-ui';// 添加
import 'element-ui/lib/theme-chalk/index.css'; // 添加
import App from './App.vue'
import router from './router'
import './assets/gloable.css'

Vue.config.productionTip = false 
Vue.use(ElementUI);// 添加

new Vue({
    
    
 router,
 render: h => h(App)
}).$mount('#app')

3. Testen Sie, ob das Element erfolgreich eingeführt wurde.

(1) Öffnen Sie die offizielle Element-Website, wählen Sie die Schaltflächenkomponente aus, zeigen Sie den Code an und kopieren Sie dann einen bestimmten Code. Es dient hauptsächlich der Testumgebung, daher spielt es keine Rolle, welchen Code Sie kopieren.

(2) Ändern Sie die Datei home.vue und führen Sie die Elementschaltflächenkomponente ein.

// An highlighted block
<template>
  <div class="home">
   <el-row>
      <el-button plain>朴素按钮</el-button>
      <el-button type="primary" plain>主要按钮</el-button>
      <el-button type="success" plain>成功按钮</el-button>
      <el-button type="info" plain>信息按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button>
    </el-row>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

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

4. Öffnen Sie die Webseite erneut und sehen Sie sich die Startseite an.

(1) Wenn dies passiert:

Überprüfen Sie, ob die gerade geänderten Dateien gespeichert sind, hauptsächlich main.js.
(2) Wenn Sie den laufenden Dienst gestoppt haben, um Element zu folgen (die Methode zum Stoppen des laufenden Dienstes ist STRG+C und dann Y auswählen). Führen Sie es erneut im Terminal aus: npm run dienen.
(3) Das Ergebnis des normalen Betriebs sollte wie in der folgenden Abbildung dargestellt aussehen:

Die Umgebung ist eingerichtet.