จีนตัวย่อ
ปัจจุบันรถยนต์ไฟฟ้าเป็นวิธีการขนส่งที่ประหยัดพลังงาน เป็นมิตรต่อสิ่งแวดล้อม และเป็นมิตรต่อสิ่งแวดล้อม สถานีชาร์จ เช่น ปั๊มน้ำมัน สามารถติดตั้งได้บนถนน ชุมชน โรงจอดรถ ลานจอดรถ ฯลฯ ด้วยความนิยมของสถานีชาร์จ คุณไม่ต้องกังวลว่าไฟฟ้าจะหมดกลางทางอีกต่อไป และไม่ต้องเดินทางไกลอีกต่อไปเนื่องจากพลังงานไม่เพียงพอ
เวอร์ชัน vue-vant-charger: เป็นเทมเพลตแบ็กเอนด์การจัดการแบบผสานรวมและโซลูชันโทรศัพท์มือถือ โปรเจ็กต์นี้ใช้ภาษาสคริปต์ TS และใช้ Vue 3.2+/Vue-cli 5.0+/Vue-router 4.0+, Axios0.2.7+ Vant 3.5+, Pinia 2.0+ รวมกับ Mockjs ฯลฯ โปรเจ็กต์นี้อิงตามองค์ประกอบ เขียนในรูปแบบ API และใช้สองโหมด: อินเทอร์เฟซ API ระยะไกลและอินเทอร์เฟซคู่ Mock ภายในเพื่อเลือกโหลดข้อมูลได้อย่างอิสระ
ที่อยู่สาธิตเวอร์ชันพื้นฐานของ Vue-vant-charger (vue3.2+ รองรับแท็บเล็ตและโทรศัพท์มือถือ)
เคล็ดลับ: ใช้เบราว์เซอร์มือถือของคุณเพื่อเปิดประสบการณ์
# โคลนโครงการ git clone -b https://github.com/todoadmin/vue-vant-charger.git# ติดตั้งการพึ่งพาการติดตั้งเส้นด้าย # การพัฒนาท้องถิ่น เริ่มโครงการ npm run ให้บริการหรือให้บริการเส้นด้าย
# โคลนโครงการ git clone -b https://gitee.com/todoadmin/vue-vant-charger.git# ติดตั้งการพึ่งพาการติดตั้งเส้นด้าย # การพัฒนาท้องถิ่น เริ่มโครงการ npm run เสิร์ฟหรือให้บริการเส้นด้าย
ต่อไปนี้เป็นข้อมูลเบื้องต้นเกี่ยวกับเวอร์ชันสถานีชาร์จแบบ vant-charger
ชื่อหัวเรื่อง | เวอร์ชัน | อธิบาย |
---|---|---|
วิว | กรอบการทำงานที่ก้าวหน้าสำหรับการสร้างส่วนต่อประสานกับผู้ใช้ | |
vue-เราเตอร์ | การกำหนดเส้นทางแอปพลิเคชันหน้าเดียว | |
vue-cli | โครงการนั่งร้าน | |
axios | ไลบรารีคำขอเครือข่ายตามสัญญา | |
รถตู้ | ไลบรารีส่วนประกอบที่ใช้เทอร์มินัลมือถือ Vant | |
ปิเนีย | การจัดการสถานะ | |
js-md5 | การเข้ารหัส MD5 |
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
ส่วนหน้า
CDN เผยแพร่การแนะนำ JS/สไตล์/รูปภาพ
ใช้อินเทอร์เฟซข้อมูลแบบเรียลไทม์ API ระยะไกลและอินเทอร์เฟซคู่ข้อมูลจำลองภายในเครื่องโดยเฉพาะ และสามารถเปลี่ยน API หรือจำลองได้อย่างอิสระ
หน้าส่วนประกอบมือถือคุณภาพสูงหลายหน้า
พื้นหลังการจัดการใช้การส่งข้อมูลอินเทอร์เฟซแบบเรียลไทม์
การสร้างแผนภูมิไดนามิกบนหน้าจอขนาดใหญ่แบบเรียลไทม์สำหรับข้อมูลภาพ
ข้อมูลแบบเรียลไทม์ใช้การโต้ตอบของ Websocket
ใช้รูปแบบ Composition API
ใช้การรับรองความถูกต้อง JWT
ระบบตรวจสอบแบบเรียลไทม์และการใช้ทรัพยากรเซิร์ฟเวอร์
สถานีชาร์จเวอร์ชันโอเพ่นซอร์สของโทรศัพท์มือถือนั้นให้บริการฟรีสำหรับใช้ในเชิงพาณิชย์
ข้ามแพลตฟอร์มที่เข้ากันได้กับโทรศัพท์มือถือ แท็บเล็ต และเทอร์มินัลมือถืออื่นๆ
การรับรองความถูกต้องเมนูเส้นทางแบบไดนามิก
รองรับข้อมูลจำลองจำลองในพื้นที่และข้อมูลจำลองระยะไกล
ปุ่มสนับสนุนการควบคุมการอนุญาตระดับฟังก์ชั่น
รองรับการเรียกข้อมูลรายการสถานีชาร์จตามลำดับความสำคัญของระยะทาง ลำดับความสำคัญของการรีวิวที่ดี ราคา ฯลฯ
รองรับการเปิดใช้งานสมาชิกวีไอพี
รองรับการเชื่อมต่อกับห้างสรรพสินค้าลดราคา
รองรับการรับรองยานพาหนะ
รองรับการสแกนรหัสสำหรับการชาร์จ
รองรับการกระจายแผนที่สถานีชาร์จและกองชาร์จ
รองรับการเติมเงินบุคคลที่สาม
สนับสนุนการติดตามบันทึกการเติมเงิน
รองรับการติดตามบันทึกการชาร์จ
รองรับการใช้บัตรกำนัล แพ็คเกจส่วนลด ฯลฯ ร่วมกัน
รองรับฟังก์ชั่นคืนเงินคะแนน
สามารถรองรับการพัฒนาโมเดลธุรกิจ เช่น ตัวแทนและผู้จัดจำหน่าย
ด้านหลัง
เวอร์ชันภาษาอินเทอร์เฟซ (เฟรมเวิร์ก): SpringBoot (2.7.1)
รองรับ SpringSecurity + JWT และการรับรองความถูกต้องอื่น ๆ
สามารถรองรับการสลับฐานข้อมูลเชิงสัมพันธ์โอเพ่นซอร์สได้หลายตัว: MySQL, MariaDB, PostgreSQL
สามารถรองรับการสลับฐานข้อมูลหน่วยความจำหลายรายการ: Redis, Memcached
คลัสเตอร์ที่สามารถรองรับฐานข้อมูลเชิงสัมพันธ์
คลัสเตอร์ที่สามารถรองรับฐานข้อมูลในหน่วยความจำ
สามารถรองรับที่เก็บข้อมูลบนคลาวด์และการกระจายไฟล์คงที่ของ CDN (รูปภาพ วิดีโอ เอกสาร ฯลฯ)
ที่อยู่สาธิตสถานีชาร์จ Vue-vant-charger รุ่นพื้นฐาน (vue3.2+ รองรับแท็บเล็ตและโทรศัพท์มือถือ)
ที่อยู่ GitHub
ที่อยู่คลาวด์รหัส Gitee
เคล็ดลับ: โปรดใช้เบราว์เซอร์มือถือของคุณเพื่อเปิด
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开源协议即可免费商用
หากคุณมีคำถามใด ๆ คุณสามารถถามพวกเขาได้ แล้วผู้เขียนจะจัดการกับพวกเขาอย่างรวดเร็ว
หากมีปัญหาหรือข้อบกพร่องใดๆ ในโครงการ คุณสามารถส่งปัญหาได้
เบราว์เซอร์มือถือกระแสหลัก
IE/ขอบ | ไฟร์ฟอกซ์ | โครเมียม | ซาฟารี |
---|---|---|---|
IE10/IE11/ขอบ | 2 เวอร์ชั่นล่าสุด | 2 เวอร์ชั่นล่าสุด | 2 เวอร์ชั่นล่าสุด |