YCode.Blog - Full Stack Blog System

A full-stack blog system with .NET backend and Vue.js frontend.

Project Structure

• backend/ - .NET 6 Web API with Entity Framework Core, JWT authentication
• frontend/ - Vue.js 3 frontend application

Prerequisites

• .NET 6 SDK
• Node.js 16+ and npm
• MySQL database
• Redis (optional, for caching)

Backend Setup

1. Navigate to backend/ directory:

   cd backend

2. Configure database connection in backend/Study.Net.MyBlog/appsettings.json:

   "ConnectionStrings": {
     "MySql": "Server=localhost;Database=myblog;Uid=root;Pwd=your_password;"
   }

3. Apply database migrations:

   dotnet ef database update --project backend/Study.Net.EFCoreEnvironment

4. Run the backend API:

   dotnet run --project backend/Study.Net.MyBlog

   The API will be available at https://localhost:7000

Frontend Setup

1. Navigate to frontend/ directory:

   cd frontend

2. Install dependencies:

   npm install

3. Configure API endpoint in frontend/src/config.js (if needed):

   const API_BASE_URL = 'https://localhost:7000/api';

4. Run the development server:

   npm run serve

   The frontend will be available at http://localhost:8080

Docker Deployment (Optional)

# docker-compose.yml example
version: '3.8'
services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: myblog
    volumes:
      - mysql_data:/var/lib/mysql
  
  backend:
    build: ./backend
    depends_on:
      - mysql
    environment:
      ConnectionStrings__MySql: "Server=mysql;Database=myblog;Uid=root;Pwd=password;"
    ports:
      - "7000:80"
  
  frontend:
    build: ./frontend
    ports:
      - "8080:80"

volumes:
  mysql_data:

Documentation

• .NET Backend Documentation: https://pitch-metacarpal-028.notion.site/MyBlog-dd54ee8bd54b44739119b3a9284911ee
• Vue Frontend Documentation: https://pitch-metacarpal-028.notion.site/MyBLog-Vue-68e7f4ccbb4e4fae9901791e0489e417

Features

• User authentication with JWT
• Article management (CRUD)
• Article categorization
• Responsive Vue.js frontend
• RESTful API design

License

Open source