Giter Club home page Giter Club logo

kingstudy's Introduction

KingStudy

This is a personal homepage website system that does not require a server, including a blog system, project display, course display, photo wall display and other functions. The website is built based on T1 Backend Cloud Serverless technology and uses Web technologies (Vue3 / Vite5 / TypeScript / MongoDB / Element Plus).

alt Preview

Use

Before use, you should go to T1 Backend Cloud to register an account and create an application. Then create a .env file in the project root directory and replace the following content:

# Your Application ID
VITE_APP_APP_ID = '1001'
# Your API Key
VITE_APP_API_KEY = '***************'
# Your Secret Key
VITE_APP_SECRET_KEY = '***************'
# Your T1 backend cloud domain name (In a production environment, I recommend that you replace the domain name with your own domain name)
VITE_APP_T1Y_API = 'https://api.t1y.net'

share Cloud Function

On the T1 Backend Cloud Cloud Function page, create a cloud function named share to verify the post.

function main() {
    ctx.setHeader('Content-Type', 'application/json')
    if (ctx.query('token') != tool.md5('123456')) {
        // Admin password -> 123456
        return JSON.stringify({
            code: 400,
            message: 'Invalid password',
            data: null,
        })
    }
    let objectId = db
        .collection('archives')
        .createOne(JSON.parse(ctx.getBody()))
    if (objectId == null) {
        return JSON.stringify({
            code: 500,
            message: 'Internal server error',
            data: null,
        })
    }
    return JSON.stringify({ code: 200, message: 'Share Success', data: null })
}

Archives

To publish a post you only need to add the following types of data to the T1 backend cloud archives collection (you can also publish by accessing /archives/add):

  • title article title
  • preview preview image address
  • tag tag
  • description summary
  • content body content
  • views number of views
{
    "content": "Welcome to KingStudy! This is your very first post. Check documentation to learn how to use.",
    "description": "Welcome to KingStudy! This is your very first post. Check documentation to learn how to use.",
    "preview": "https://api.t1y.net/storage/1500/photos/archives/hello-world.png",
    "tag": ["Web", "Server", "Developer"],
    "title": "Hello, World!",
    "views": 73
}

Projects

To publish a project, you only need to add the following types of data to the T1 backend cloud projects collection:

  • title project name
  • preview preview image address
  • tag label
  • description introduction
  • url project address
{
    "description": "A simple and powerful web server application written in Go language! This is another JS Runtime project besides Node.js and Deno. ",
    "preview": "https://api.t1y.net/storage/1500/photos/screenshot/jsxpress.png",
    "tag": ["Web", "Server", "Developer"],
    "title": "JSXpress",
    "url": "/pages/jsxpress"
}

Courses

interface Course {
    preview: string
    title: string
    tag: string[]
    url: string
    description: string
}

Photos

To publish a photo, you only need to add the following types of data to the T1 backend cloud photos collection:

  • location shooting location
  • preview image address
  • title title
{
    "location": "Yunnan",
    "preview": "https://api.t1y.net/storage/1500/photos/camera/sky.jpg",
    "title": "Sky"
}

Run

npm run dev

Packaging & Building

npm run build

Nginx pseudo-static

location / {
	try_files $uri $uri/ /index.html;
}

Buy me a coffee

alt QR-Code

kingstudy's People

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.