wallpaper-app

Введение

Это приложение для обоев (wallpaper) полного цикла разработки, использующее uniapp для фронтенда и Koa2 на базе NodeJS для бэкенда. Данные хранятся в MySQL, а интерфейс развёрнут на моём сервере. Приложение можно упаковать как APP или как мини-программу для WeChat, другие мини-программы не тестировались.

Предварительный просмотр

Рисунок 1.

Рисунок 2.

Архитектура программного обеспечения

Фронтенд-фреймворк: uniapp. UI-компонентная библиотека: uView (https://uviewui.com/). Бэкенд-технологии: NodeJS + Koa2 + MySQL. Фотобанк: «Встреча с фотобанком» (https://www.hualigs.cn/).

Инструкция по установке

1. Установите NodeJS. Откройте терминал, перейдите в папку server и выполните команду:

npm install

2. Uniapp устанавливать не нужно, используйте редактор HBuilder X.
3. Создайте новую базу данных MySQL и импортируйте предоставленный SQL-файл с помощью Navicat.

Инструкции по использованию

1. Запуск бэкенда NodeJS: После установки зависимостей с помощью команды npm install перейдите в корневую папку сервера и запустите команду npm start. Если база данных настроена неправильно, сервис не будет работать корректно.

2. Запуск uniapp: Откройте папку uniapp с помощью HBuilder X и нажмите «Выполнить», выбрав нужную платформу.

3. Ресурсы обоев и загрузка: В приложении используются обои из онлайн-API, и ссылки на них не сохраняются в базе данных. Для загрузки собственных обоев пользователь может использовать функцию приложения. Обратите внимание, что используется сторонний бесплатный API от фотобанка «Встреча с фотобанком», который позволяет хранить загруженные обои на своём сервере. Это делается для того, чтобы: — не занимать место на сервере большим количеством обоев; — использовать CDN фотобанка для ускорения доступа к обоям; — обеспечить резервное копирование обоев на нескольких серверах, чтобы избежать потери данных.

Структура проекта

|-- server // node-сервер проекта | |-- src // основная программа | | |-- app // настройка порта и базы данных | | |-- constants // определённые константы | | |-- controller // слой управления | | |-- middleware // промежуточный слой управления | | |-- router // конфигурация маршрутов | | |-- service // операции с базой данных | | |-- utils // методы инструментов | | |-- main.js // главный вход | |-- uploads // файлы для хранения загруженных файлов | |-- .env // файл конфигурации бэкенда | |--package.json | |--package-lock.json
|-- uniapp // проект uniapp | |-- components // общие компоненты | |-- pages // страницы | | |-- classify // страница классификации | | |-- demotantan // страница, имитирующая Zhihu | | |-- demozhihu // страница, имитирующая Tantan | | |-- detail // страница деталей | | |-- index // главная страница | | |-- more // дополнительная страница | | |-- my // моя страница | | |-- turnImg // страница перелистывания | | |-- uploadImg //страница загрузки обоев | |-- static // статические ресурсы | |-- util // методы инструментов | |-- uview-ui // компоненты uView | |-- App.vue // корневая страница | |-- main.js // входной файл | |-- manifest.json // конфигурация при упаковке и публикации | |-- pages.json // конфигурация страниц | |-- uni.scss
|-- coderhub.sql // файл базы данных

Скриншоты проекта

<Рисунок 3.>

<Рисунок 4.>

<Рисунок 5.>

<Рисунок 6.>

<Рисунок 7.>

<Рисунок 8.>

<Рисунок 9.>

<Рисунок 10.>

<Рисунок 11.>

<Рисунок 12.>

<Рисунок 13.>

<Рисунок 14.>

<Рисунок 15.> ```

```<img src="https://www.hualigs.cn/image/6013cfa9c3d0c.jpg">```