Vereinfachtes Chinesisch
Elektrofahrzeuge sind derzeit ein beliebtes energiesparendes, umweltfreundliches und grünes Fortbewegungsmittel. Ladestationen können wie Tankstellen an Straßen, Gemeinden, Garagen, Parkplätzen usw. errichtet werden. Mit der Beliebtheit von Ladestationen müssen Sie sich keine Sorgen mehr machen, dass Ihnen auf halber Strecke der Strom ausgeht, und Sie müssen nicht mehr wegen unzureichender Energie weite Strecken zurücklegen.
vue-vant-charger-Version: Es handelt sich um eine integrierte Management-Backend-Vorlage und eine Mobiltelefonlösung. Das Projekt verwendet die TS-Skriptsprache und basiert auf Vue 3.2+/Vue-cli 5.0+/Vue-router 4.0+, Axios0.2.7+. Vant 3.5+, Pinia 2.0+ kombiniert mit Mockjs usw., das Projekt basiert auf Composition Es ist im API-Stil geschrieben und verwendet zwei Modi: Remote-API-Schnittstelle und lokale Mock-Dual-Schnittstelle, um das Laden von Daten frei zu wählen.
Demoadresse der Vue-vant-charger-Basis-Basisversion (vue3.2+ unterstützt Tablets und Mobiltelefone)
Tipp: Verwenden Sie Ihren mobilen Browser, um das Erlebnis zu öffnen
# Klonen Sie das Projekt git clone -b https://github.com/todoadmin/vue-vant-charger.git# Installieren Sie Abhängigkeiten Yarn Install# Lokale Entwicklung Starten Sie das Projekt NPM Run Serve oder Yarn Serve
# Klonen Sie das Projekt git clone -b https://gitee.com/todoadmin/vue-vant-charger.git# Installieren Sie Abhängigkeiten Yarn Install# Lokale Entwicklung Starten Sie das Projekt NPM Run Serve oder Yarn Serve
Im Folgenden finden Sie eine Einführung in die Ladestationsversion von vant-charger
Titelname | Version | beschreiben |
---|---|---|
vue | Ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen | |
Vue-Router | Routing von Einzelseitenanwendungen | |
vue-cli | Projektgerüst | |
Axios | Versprechenbasierte Netzwerkanforderungsbibliothek | |
vant | Komponentenbibliothek basierend auf dem Vant-Mobilterminal | |
pinia | Statusverwaltung | |
js-md5 | MD5-Verschlüsselung |
yarn install
yarn serve
yarn build
npm run lint
#config目录下 /src/config #项目主体配置import模块 /src/config/index.ts #项目启动环境配置引入模块 /src/config/config.ts #项目启动环境(生产环境/Dev环境)基本配置引入模块 /src/config/module/base.ts #项目启动环境(生产环境/Dev环境)CDN配置引入模块 /src/config/module/cdn.ts #项目主体全局常量import模块 /src/config/module/global.ts #项目主体HTTP/HTTPS Restful请求接口地址常量import模块 /src/config/module/HUrl.ts
Frontend
CDN verteilte Einführung von JS/styles/images
Verwendet ausschließlich die API-Remote-Echtzeit-Datenschnittstelle und die Mock-Dual-Schnittstelle für lokale Daten und kann API oder Mock frei wechseln
Mehrere hochwertige mobile Komponentenseiten
Der Managementhintergrund nutzt die Echtzeit-Schnittstellendatenübertragung
Erstellen Sie in Echtzeit dynamische Diagramme mit visuellen Daten auf einem großen Bildschirm
Echtzeitdaten nutzen Websocket-Interaktion
Übernehmen Sie das Kompositions-API-Muster
Verwenden Sie die JWT-Authentifizierung
Echtzeitüberwachungssystem und Serverressourcennutzung
Die Open-Source-Version der Handy-Ladestation ist für die kommerzielle Nutzung kostenlos
Plattformübergreifend kompatibel mit Mobiltelefonen, Tablets und anderen mobilen Endgeräten
Dynamische Routing-Menüauthentifizierung
Unterstützt simulierte lokale Simulationsdaten und Remote-Simulationsdaten
Berechtigungssteuerung auf Funktionsebene der Unterstützungstaste
Unterstützt das Abrufen der Ladestationsliste basierend auf Entfernungspriorität, Priorität guter Bewertungen, Preis usw.
Unterstützen Sie die Aktivierung der VIP-Mitgliedschaft
Unterstützen Sie die Verbindung zum Discount-Einkaufszentrum
Unterstützen Sie die Fahrzeugzertifizierung
Unterstützt das Scannen des Codes zum Laden
Unterstützen Sie die Kartenverteilung von Ladestationen und Ladesäulen
Unterstützt das Aufladen von Zahlungen durch Dritte
Unterstützt die Nachverfolgung von Aufladedatensätzen
Unterstützt die Protokollverfolgung von Ladeaufzeichnungen
Unterstützt die gemeinsame Nutzung von Gutscheinen, Rabattpaketen etc.
Unterstützungspunkte-Cashback-Funktion
Kann die Entwicklung von Geschäftsmodellen wie Agenten und Distributoren unterstützen
hinteres Ende
Version der Schnittstellensprache (Framework): SpringBoot (2.7.1)
Unterstützt SpringSecurity + JWT und andere Authentifizierungen
Kann mehrere relationale Open-Source-Datenbankwechsel unterstützen: MySQL, MariaDB, PostgreSQL
Kann das Umschalten mehrerer Speicherdatenbanken unterstützen: Redis, Memcached
Cluster, die relationale Datenbanken unterstützen können
Cluster, die In-Memory-Datenbanken unterstützen können
Kann Cloud-Speicher und CDN-Verteilung statischer Dateien (Bilder, Videos, Dokumente usw.) unterstützen.
Demoadresse der Basisversion der Vue-vant-charger-Ladestation (vue3.2+ unterstützt Tablets und Mobiltelefone)
Github-Adresse
Gitee-Code-Cloud-Adresse
Tipp: Bitte nutzen Sie zum Öffnen Ihren mobilen Browser
Vue-vant-charger充电桩开源项目有如下优势: 1. 独家采用API远程实时数据接口和Mock本地数据双接口调试(可自由切换数据接口模式) 2. 支持前后端路由菜单权限和功能按钮权限控制 3. 采用实时接口传输数据,让你事半功倍 4. 偏好数据、主题切换、账号切换等配置 5. 支持原生css和less 自动排序,eslint 自动修复 6. axios 二次封装,支持多种模式和参数方式 7. websocket 封装,支持实时数据传输方式 8. 支持MD5/RSA加密登录 9. 支持https数据加密传输 10. 使用CDN分发项目样式css和js、图片,让速度飞起来 11. 支持手机端、平板等操作 使用注意事项: 1. 项目默认使用Chrome浏览器,Vue Devtools 插件调试 2. 项目默认使用VSCode + Eslint校验规范,需要配置vscode编辑器 3. 项目也可以使用IntelliJ IDEA + 相关插件开发 4. 项目使用MIT开源协议,请保留MIT开源协议即可免费商用
Wenn Sie Fragen haben, können Sie diese stellen und der Autor wird sich schnell darum kümmern
Wenn es Probleme oder Fehler im Projekt gibt, können Sie ein Problem einreichen
Mainstream-Mobilbrowser
IE/Edge | Firefox | Chrom | Safari |
---|---|---|---|
IE10/IE11/Edge | letzten 2 Versionen | letzten 2 Versionen | letzten 2 Versionen |