Проект начального уровня с разделением интерфейсной и серверной части, включая подпроекты клиентской и серверной части. Фронтенд — это многостраничное приложение на базе корзины семейства Vue (сейчас добавлена одностраничная версия React), а бэкенд — на Koa2+Sequelize, который в основном предоставляет API-интерфейсы.
онлайн предварительный просмотр
Исходный код внешнего интерфейса
Исходный код серверной части
Дисплей проекта
Особенности проекта
- внешний интерфейс
- Vue-cli3 создает многостраничные приложения
- разработка компонента
- Управляйте состоянием с помощью Vuex
- Адаптивные страницы, подходящие для мобильных терминалов
- задняя часть
- Использование фреймворка Koa2
- Поддержка аутентификации по токену
стек технологий
- Внешний интерфейс: Vue + Vuex + Vue-Router
- Серверная часть: Node + Koa2 + Sequelize
- Сторонние библиотеки: axios, tweenjs, leancloud
- Промежуточное ПО: jsonwebtoken, koa-jwt, koa-static и т. д.
структура основного каталога
- внешний интерфейс
.
├─ dist/ # build 生成的代码
├─ src/ # 源码目录
│ ├─ assets/ # 公用资源，主要是 SCSS
│ ├─ components/ # 公用组件
│ ├─ http/ # http 请求相关
│ ├─ mixin/ # mixin
│ ├─ pages/ # 页面
│ │ ├─ cart/ # 购物车
│ │ ├─ home/ # 首页
│ │ ├─ member/ # 用户页
│ │ ├─ product/ # 商品详情页
│ ├─ utils/ # 工具库
├── vue.config.js # 配置多页面入口
├── .babelrc
├── package.json
- задняя часть
.
├─ database/ # 数据库目录
├─ middleware/ # 中间件
├─ public/ # 发布的代码（静态资源）
├─ routes/ # 服务端路由
├── app.js # 启动文件
Запустите серверный проект локально
Интерфейсный код упакован в общую папку в удаленной библиотеке, поэтому вы можете просмотреть полный эффект, запустив серверный проект.
- клонировать удаленный репозиторий
git clone git@github.com:BlameDeng/sun-server-demo.git
- Установить зависимости
yarn
- Стартовый проект
node app
браузер открытhttp://localhost:8000/home.htmlПредварительный просмотр.
Запуск внешнего интерфейса локально
Внешним проектам требуется внутренняя поддержка данных, поэтому для локального запуска внешних проектов требуется одновременное выполнение проектов на стороне сервера, а также требуется дополнительная работа по настройке.
- клонировать удаленный репозиторий
git clone git@github.com:BlameDeng/sun-client-demo.git
- Установить зависимости
yarn
- Так как используется функция графического кода проверки Leancloud, необходимо настроить appId и appKey приложения Leancloud.
- существуетleancloudСоздайте новое или откройте существующее приложение
- Откройте сервис графического проверочного кода (бесплатно)
- Создайте новый файл key.js в корневом каталоге проекта и напишите идентификатор своего приложения и ключ:
export default {
appId: '你的appId',
appKey: '你的appKey'
}
- Запустите проект (убедитесь, что сервер запущен)
yarn serve
браузер открытhttp://localhost:8080/home.htmlПредварительный просмотр.
PS
Сервер настроен для междоменного взаимодействия, поэтому, когда внешний и внутренний проекты выполняются одновременно, внешний проект на порту 8080 может получать данные из внутреннего проекта на порту 8000. Если вам нужно изменить порт внутреннего проекта, выполните следующие действия:
- Измените корневой каталог бэкэнд-проекта app.js.
- Измените интерфейсный проект sun-client-demo > src > url.js в каталоге http.
Измените префикс на порт, указанный серверным проектом, например 'http://localhost:3000'. Обратите внимание, что изменен порт, на котором работает серверный проект, и порт, на котором интерфейсный проект получает данные.Сам внешний проект по-прежнему работает на порту, указанном Vue-cli.