Vorwort
Dieses Projekt wurde hauptsächlich zum Lernen geschrieben, und dann wollte ich immer mein eigenes Blog-System schreiben, das die Aufzeichnung meines Lernwissenssystems erleichtern kann.
Die Front-End- und Back-End-Codes dieses Projekts werden alle in diesem Lager abgelegt, einschließlich des Back-End-Verwaltungsadministrators, des serverseitigen Servers, des PC-Front-End-Webs, des mobilen Terminals und der Miniprogramm-Front-End-Uniapp.
Es wird auf dem Tencent Student Cloud Service bereitgestellt. Ich habe den Studenten-Cloud-Server und den Domänennamen mehrere Jahre lang gekauft, als ich im College alleine damit herumgespielt habe, Linux gelernt, Skripte ausgeführt, Websites erstellt und eingerichtet habe Blogs. Es ist sehr cool, die Website selbst bereitstellen zu können.
Haupttechnologie-Stack
- Backend-Managementsystem: Vue + Elementui + Vuex + Vue-Router + Mavon-Editor
- Server: koa + mysql + sequelize + jsonwebtoken
- PC-Rezeption: Vue + Elementui + Vuex + Vue-Router
- Mobiles Endgerät und Miniprogramm: uniapp
Videodemonstration
- Detaillierte Videodemonstration von Station B: https://www.bilibili.com/video/BV1Ur4y1v7ko/
Projektvorschau
- PC-Rezeption: http://blog.jzzz66.cn
- Mobil H5: http://mblog.jzzz66.cn
- WeChat Mini-Programm: Zhuzhu Blog
Änderung der Konfiguration der Betriebsumgebung
- Erstellen Sie die Datenbank myblog und importieren Sie xzzblog.sql in das Projektstammverzeichnis
Es wird empfohlen, die Software Navicat zum Erstellen und Verwalten der Datenbank zu verwenden. Ursprüngliches Hintergrundkonto: admin. Ursprüngliches Hintergrundkennwort: 123456
Beachten Sie, dass die Zeichenkodierung der Datenbank utf8mb4 und die Sortierregel utf8mb4_unicode_ci lautet
- Ändern Sie die Konfiguration xzzblog-serve/config/index.js
// 发送邮件配置
NODEMAILER: {
email: "[email protected]",
pass: "",
IMAP: "", // qq邮箱授权码
POP3: "", // qq邮箱授权码
},
// 数据库配置
MYSQL: {
HOST: "127.0.0.1", // 数据库地址
DATABASE: "myblog", // 数据库名
USER: "root", // 数据库用户名
PASSWORD: "123456", // 数据库 密码
},
// 阿里云上传图片配置
oss: {
region: "oss-cn-guangzhou",
accessKeyId: "",
accessKeySecret: "",
bucket: "",
},
// github登录授权配置
client_secret: "f81479d7b37785afec4072e9783d1337a89e5c79",
client_id: "280ef327e24a011a6f05",
Github OAuth-Anmeldevorgang
- Registrieren Sie eine OAuth-APP-Anwendung
- Speichern Sie client_id client_secret
- Besuchen Sie GET: https://github.com/login/oauth/authorize?client_id=280ef327e24a011a6f05=user
- Gehen Sie zu http://localhost:3000/auth?code=8b309c4c403f95 und speichern Sie das Codefeld.
- https://github.com/login/oauth/access_token POST-Anfragetext:{client_id,client_secret,code}, um das Token zu erhalten
- https://api/github.com/user POST-Anfrage: body:{client_id,client_secret} header: {Authorization: token token}
Schlussbemerkung
- Dieses Projekt wird kontinuierlich aktualisiert und gepflegt. Wenn Sie Fragen haben, können Sie mich jederzeit kontaktieren. Vergessen Sie nicht, es zu markieren.