xzzblog

Preface

This project was mainly written for learning. I happened to learn node, and then I always wanted to write my own blog system, which can make it easier to record my learning knowledge system.
The front-end and back-end codes of this project are all placed in this warehouse, including the back-end management admin, server-side server, PC front-end web, mobile terminal and mini-program front-end uniapp.
It is deployed on Tencent Student Cloud Service. I bought the student cloud server and domain name for several years when I was studying on my own in college. I usually mess around with it, learning Linux, running scripts, building websites, and setting up blogs. It is very cool. Being able to deploy the website by myself also makes me interested in learning front-end. Higher.

Main technology stack

• Backend management system: vue + elementui + vuex + vue-router + mavon-editor
• Server: koa + mysql + sequelize + jsonwebtoken
• PC front desk: vue + elementui + vuex + vue-router
• Mobile terminal and mini program: uniapp

Video demonstration

• Detailed video demonstration of station b: https://www.bilibili.com/video/BV1Ur4y1v7ko/

Project preview

• PC front desk: http://blog.jzzz66.cn
• Mobile H5: http://mblog.jzzz66.cn
• WeChat Mini Program: Zhuzhu Blog
  

Modification of operating environment configuration

• Create the database myblog and import xzzblog.sql in the project root directory
  It is recommended to use the software Navicat to create and manage the database. Initial background account: admin Initial background password: 123456

Note that the database character encoding is: utf8mb4 and the sorting rule is: utf8mb4_unicode_ci

• Change configuration 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 login process

1. Register an OAuth APP application
2. Save client_id client_secret
3. Visit GET: https://github.com/login/oauth/authorize?client_id=280ef327e24a011a6f05=user
4. Jump to http://localhost:3000/auth?code=8b309c4c403f95 and save the code field.
5. https://github.com/login/oauth/access_token POST request body:{client_id,client_secret,code} to obtain token
6. https://api/github.com/user POST request: body:{client_id,client_secret} header: {Authorization: token token}

Final note

• This project will be continuously updated and maintained. If you have any questions, please feel free to contact me at any time. If you like it, don’t forget to star it. Thank you for your attention.