Полный стек проекта Vue, Node ~ система блогов для Xiaobai ~

внешний интерфейс

система личного блога

Всем привет, меня зовут Черный Клык.

Я не знаю, красивый младший брат или красивая младшая сестра сделали мне комплимент~

Благодаря платформе Nuggets, обмену знаниями между большими парнями, я многому научился!

предисловие

❝

Если у вас есть какие-либо вопросы о качестве кода, пожалуйста, нажмите на спрей (внешний интерфейс, который я изучил в прошлом году). Если у вас есть какие-либо предложения, пожалуйста, не стесняйтесь обращаться ко мне. См. контактную информацию внизу. Спасибо!

Если на странице есть какие-либо ошибки, вы также можете написать мне, спасибо! Это персональная система блогов, которая включает в себя интерфейсный и внутренний код. Вы можете вносить предложения. Изначально я планировал использовать nuxt, чтобы написать его, но я хочу использовать next, чтобы написать его после изучения реакции, а затем я будет использовать reactSSR для рефакторинга позже!

❞

Блог имеет все функции, которые должен иметь блог, вы можете писать статьи, комментировать, оставлять сообщения и даже играть в игры (хотя это еще не идеально) и т. д. для вашего открытия.

Это небольшой полноценный проект, в основном предназначенный для тестирования и записи ваших собственных результатов обучения.

Технологии используются Vue, Vue-CLI, элемент-интерфейс, UI, Back-End Nodejs, база данных MySQL и другие технологии

Увидев это, пожалуйста, не занимайтесь проституцией даром, нажмитезвезда (О (∩_∩) О)

Титульная страница

  • Рисунок дизайна страницы в проектах с открытым исходным кодом"белый чай"

"Поддержка ПК и мобильных терминалов, адаптивных страниц и других фестивалей страниц, которые вы можете изучить"

1. Главная

2. Список статей

3. Слушайте дождь

4. Demo

5. О себе

6. Доска объявлений

См. сведения о страницездесь

фоновая страница

  1. Дома
  2. опубликовать статью
  3. обо мне
  4. список комментариев
  5. настраивать

Другие, такие как списки статей и т. д. Я не буду добавлять их позже,"В основном я хочу, чтобы вы досконально изучили код и написали его сами, потому что это действительно просто (ручная собачья голова)"

См. сведения о страницездесь

Связанный с серверной частью

  1. использование операции с базой данныхsequelize
  2. Использование бэкэнд-фреймворкаkoa

"sequelize"а также"koa"Я напишу соответствующую статью, когда у меня будет возможность использовать ее в этом проекте.

❝

структура таблицы базы данных

❞

"В этом блоге изначально планировалось реализовать функцию классификации статей, но потом она мне не понадобилась, поэтому я не использовал эту таблицу."

  1. Идентификатор таблицы пользователей Имя пользователя Учетная запись пользователя Пароль пользователя День рождения Время создания аватара
  2. Идентификатор таблицы статей Идентификатор пользователя Название статьи Изображение статьи Музыка статьи Содержание статьи Идентификатор категории (внешний ключ) Аннотация статьи Время публикации Зрители Нравится Комментарии (проверьте через доску объявлений статьи) Идентификатор категории
  3. Отправить сообщение Идентификатор формы Сообщение Сообщение Идентификатор сообщения Идентификатор пользователя Содержимое сообщения Время сообщения
  4. Идентификатор таблицы классификации Название классификации
  5. Идентификатор формы сообщения Идентификатор пользователя сообщения Содержимое сообщения
  6. Нравится ли пользователю идентификатор таблицы статей, идентификатор пользователя, идентификатор статьи (созданный отношением «многие ко многим»)
❝

отношение таблицы

❞
  1. В категории несколько статей (один ко многим)
  2. Статья может иметь несколько комментариев (один ко многим)
  3. Один пользователь может комментировать несколько статей (один ко многим)
  4. Пользователь может оставить сообщение несколько раз (один ко многим)
  5. Статья может понравиться нескольким пользователям, а пользователю может понравиться несколько статей (многие ко многим).

Кодовое каталог Введение и эксплуатация Введение

Внутренний код использует трехуровневый архитектурный шаблон.

❝

модели - это уровень представления

сервисы — это уровень бизнес-логики

маршруты - это уровень доступа к данным

❞
  1. "backstage"система фонового управления
  2. "client"это передняя часть

"После извлечения кода сначала выполните npm install в корневом каталоге, папке клиента и за кулисами, чтобы установить зависимости."

"После этого сначала создайте общедоступные и зашифрованные папки в следующем каталоге."

"Папка загрузки должна быть создана в общей папке, и код внешнего интерфейса также упакован в этот каталог."

"Создайте dbEncrypt.js и ossEncrypt.js в шифровании"

可随时在models/tables/db.js里面切换
本地开发就用localDbInfo里面的，注意要在db.js切换

——————————数据库请自行安装————————————

dbEncrypt.js
    module.exports = {
    localDbInfo: {
        dbName: 'XXX', // 数据库名称
        userName: 'XXX', // 数据库用户名
        password: 'XXX', // 数据库密码
        host: {
            host: 'localhost',
            dialect: 'mysql'
        }
    },
    aliDbInfo: { // 服务器上的数据库信息,同上
        dbName: 'XXX',
        userName: 'XXX',
        password: 'XXX',
        host: {
            host: 'XXX',
            dialect: 'mysql'
        }
    }
}

如果没有服务器，本地开发的话就不需要这个了
我写了两个上传文件的接口，/upload和/ossUpload，没有服务器就切换成/upload就行了
ossEncrypt.js
    module.exports = {
        region: 'XXX', // OSS region
        accessKeyId: 'XXXXXX', OSS accessKeyId
        accessKeySecret: 'XXXXXX', OSS accessKeySecret
        bucket: 'XXXX', // OSS bucket名
    }

Тогда вы можете повеселиться

"Убедившись, что информация о базе данных заполнена правильно, войдите в корневой каталог для синхронизации базы данных в npm run sync, и синхронизация будет завершена." "Затем введите npm start, чтобы запустить службу, чтобы локальная служба запустилась." "Далее просто запускаем интерфейс как обычно, заходим в клиент или бекстейдж и вводим npm run dev для входа в режим разработки"

развертывать

Во-первых, у вас должен быть свой сервер, я использую Alibaba Cloud.

Вот серверный инструмент, который я рекомендуюхшелл и хфтп

Затем нажмите справа"Страница бесплатной лицензии"Заполните соответствующую информацию для загрузки

  1. Сначала нужно установить"nodeJs", Существует множество способов установки Baidu, выберите один из них.После завершения установки node -v может распечатать версию, что означает, что установка завершена.После завершения установки установите зеркало Taobao:"npm config set registry https://registry.npm.taobao.org"

    ❝

    Необязательный["nvm"(инструмент управления узлами),"git"]

    ❞

  2. "nginx"Установку можно увидеть здесь, или есть много туториалов Baidu.

  3. "mysql"Baidu, вы знаете ~~

  4. "navicat"(инструмент для работы с базой данных), вы можете использовать"регистрационная машина navicat"трескаться

  5. "Откройте navicat для подключения к базе данных сервера, и подключение будет успешным."

  6. "pm2"(PM2 — это инструмент управления процессами узла, который можно использовать для упрощения многих утомительных задач управления приложениями узла, таких как мониторинг производительности, автоматический перезапуск, балансировка нагрузки и т. д., и он очень прост в использовании)

    ❝

    Команда установки: npm install pm2@latest -g

    ❞
    ❝

    Версия для печати pm2 -v успешно установлена

    ❞

  7. Откройте соответствующие порты на сервере и в облаке Alibaba (3306, 5008, 80)

  8. "конфигурация nginx"

    Почему 5008, коа потому что я слушал порт 5008

    ❝

    Вот моя конфигурация nginx

    ❞ 
    user  root root;
worker_processes auto;
error_log  /www/logs/nginx_error.log  crit;
pid        /www/server/nginx/logs/nginx.pid;
worker_rlimit_nofile 51200;
events
    {
        use epoll;
        worker_connections 51200;
        multi_accept on;
    }

http
    {
        include       mime.types;
        #include luawaf.conf;

    # 设置缓存路径并且使用一块最大100M的共享内存，用于硬盘上的文件索引，包括文件名和请求次数，每个文件在1天内若不活跃（无请求）则从硬盘上淘汰，硬盘缓存最大10G，满了则根据LRU算法自动清除缓存。
    proxy_cache_path /var/cache/nginx/cache levels=1:2 keys_zone=imgcache:100m inactive=1d max_size=10g;

 include proxy.conf;

    default_type  application/octet-stream;
    
    server_names_hash_bucket_size 512;
    client_header_buffer_size 32k;
    large_client_header_buffers 4 32k;
    client_max_body_size 100m;

    sendfile   on;
    tcp_nopush on;

    keepalive_timeout 60;

    tcp_nodelay on;

    fastcgi_connect_timeout 300;
    fastcgi_send_timeout 300;
    fastcgi_read_timeout 300;
    fastcgi_buffer_size 64k;
    fastcgi_buffers 4 64k;
    fastcgi_busy_buffers_size 128k;
    fastcgi_temp_file_write_size 256k;
 fastcgi_intercept_errors on;
    
    #开启和关闭gzip模式
    gzip on;
    #gizp压缩起点，文件大于1k才进行压缩
    gzip_min_length  1k;
    # 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区 
    gzip_buffers     4 16k;
    #nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
    gzip_static on;
    # 识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码
    gzip_http_version 1.1;
    # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
    gzip_comp_level 1;
    # 进行压缩的文件类型。
    gzip_types     text/plain application/json application/javascript application/x-javascript text/javascript text/css application/xml image/jpeg image/gif image/png video/mpeg audio/x-pn-realaudio audio/x-midi audio/basic audio/mpeg audio/ogg audio/* video/mp4;
    # 启用应答头"Vary: Accept-Encoding"
    gzip_vary on;
    # nginx做为反向代理时启用,off(关闭所有代理结果的数据的压缩),expired(启用压缩,如果header头中包括"Expires"头信息),no-cache(启用压缩,header头中包含"Cache-Control:no-cache"),no-store(启用压缩,header头中包含"Cache-Control:no-store"),private(启用压缩,header头中包含"Cache-Control:private"),no_last_modefied(启用压缩,header头中不包含"Last-Modified"),no_etag(启用压缩,如果header头中不包含"Etag"头信息),auth(启用压缩,如果header头中包含"Authorization"头信息)
    gzip_proxied   expired no-cache no-store private auth;
    # (IE5.5和IE6 SP1使用msie6参数来禁止gzip压缩 )指定哪些不需要gzip压缩的浏览器(将和User-Agents进行匹配),依赖于PCRE库
    gzip_disable   "MSIE [1-6]\.";

    limit_conn_zone $binary_remote_addr zone=perip:10m;
 limit_conn_zone $server_name zone=perserver:10m;

    server_tokens off;
    access_log off;

    # 是否启用在on-the-fly方式压缩文件，启用后，将会在响应时对文件进行压缩并返回。
    brotli on;
    # 启用后将会检查是否存在带有br扩展的预先压缩过的文件。如果值为always，则总是使用压缩过的文件，而不判断浏览器是否支持。
    brotli_static always;
    # 设置压缩质量等级。取值范围是0到11.
    brotli_comp_level 6;
    # 设置缓冲的数量和大小。大小默认为一个内存页的大小，也就是4k或者8k。
    brotli_buffers 16 8k;
    # 设置需要进行压缩的最小响应大小。
    brotli_min_length 20;
    # 指定对哪些内容编码类型进行压缩。text/html内容总是会被进行压缩
    brotli_types text/plain application/json application/javascript application/x-javascript text/javascript text/css application/xml image/jpeg image/gif image/png video/mpeg audio/x-pn-realaudio audio/x-midi audio/basic audio/mpeg audio/ogg audio/* video/mp4;
server {
    listen    80;
    # 您的域名
    server_name xxxxxx.xxx; 
    location ^~ / {
        proxy_cache imgcache;
        proxy_cache_key $scheme$proxy_host$uri$is_args$args;
        proxy_cache_valid  200 304 302 24h;   
        proxy_pass http://www.域名:5008;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;    
        proxy_set_header Host $http_host; 
        proxy_set_header X-Nginx-Proxy true;
        proxy_redirect off;
        rewrite ^.+(?<!js|css|png|map)$ /index.html break;
        autoindex on;
        index index.htm index.html;
        set $fallback_uri /index.html;
        if ($http_accept !~ text/html) {
            set $fallback_uri /null;
        }
        try_files $uri $uri/ $fallback_uri = 404;
    }
    location ^~ /pc {
        proxy_pass http://www.域名:5008/back;
        index index.htm index.html;
    }
}
include /www/server/panel/vhost/nginx/*.conf;
}

Все приготовления на месте, можно разворачивать проект на сервер

"Выполнение команды Build NPM Build упаковывают передний план и фон"Структура после выполнения пакета такая

Затем поместите проект (кроме client и backstage и node_modules) в папку dist сервера (а затем нажмите каталог для выполнения"npm i"скачать зависимости)

Так как я не знаком с nginx, мне нужно внести некоторые изменения в публичный файл здесь, а те, кто знаком, могут настроить его сами (научите меня, кстати..)

То есть разместить размещение в папке ПК на одном уровне

Затем введите dist и запустите программу с помощью pm2. воплощать в жизнь"pm2 start index.js"Только что

Все довольны, вот и все. Затем используйте доменное имя для доступа к нему.

например мой блог

Ведение журнала

После размещения на сервере, если что-то пойдет не так, это точно не так удобно, как локальная разработка и отладка, поэтому нужно"Ведение журнала", чтобы найти проблему

Библиотека, которую я использую,log4jsЕсли вы не можете открыть его, вам придется перелезть через стену.Я записал только записи вызовов интерфейса.Если вам нужны записи вызовов sql, вы можете добавить их самостоятельно. npm и коа-log4

const log4js = require('koa-log4')
const path = require('path')

log4js.configure({
    appenders: {
        api: {
            type: 'dateFile',
            filename: path.resolve(__dirname, 'logs', 'api', 'logging.log'),
            maxLogSize: 1024 * 1024, // 配置文件的最大字节数
            keepFileExt: 3, // 最多保存3天
            layout: {
                type: 'pattern',
                pattern: '%c [%d{yyyy-MM-dd hh:mm:ss}] [%p]：%m%n'
            }
        },
        default: {
            type: 'stdout'
        }
    },
    categories: {
        api: {
            appenders: ['api'],
            level: 'all'
        },
        default: {
            appenders: ['default'],
            level: 'all'
        }
    }
})

process.on("exit", () => {
    log4js.shutdown()
})

const apiLogger = log4js.getLogger("api")

exports.apiLogger = apiLogger

Затем создайте промежуточное ПО

// apiLoggerMiddleware.js
const { apiLogger } = require('../logger') 

// 处理错误的中间件
module.exports = async (ctx, next) => {
    try {
        await next();
    }
    finally {
        apiLogger.debug(`${ctx.method} ${ctx.path} ${JSON.stringify(ctx.body)}`)
    }

};

//init.js
app.use(require('./apiLoggerMiddleware')) // API请求日志

Оптимизация скорости загрузки главной страницы

Из-за ограничения количества символов в Nuggets, пожалуйста, перейдите наgithubПроверить

"Полную конфигурацию см. в vue.config.js в клиенте самостоятельно."

До оптимизации: пропускная способность 1M загружается только на первом экране."более 10 секунд"

После оптимизации: загрузка выше сгиба при нормальных обстоятельствах"1, 2 секунды"

наконец

Я не знаю слишком много.

В проекте нет шаблона, чистый почерк

Поделитесь своим простым full-stack проектом со всеми.Если у вас есть какие-либо предложения/ошибки/оптимизации, вы можете упомянуть их, спасибо! ! .

Если вы видите это, помогите нажать [звездочка](https://github.com/qiheizhiya/myBlog)! !

Если вам нравятся технологии, вы также можете добавить меня и вместе продвигаться вперед.

Контактный адрес электронной почты: 953136447@qq.com

В этой статье используетсяmdniceнабор текста

Категории