Слияние кода завершено, страница обновится автоматически
Используйте Nuxt2 в качестве сервера рендеринга Vue, подходит для студентов, которые только начинают работать или готовятся к изучению SSR-реализации Vue. Этот проект включает регистрацию, вход в систему, отображение товаров, управление адресами и т. д., от внешнего интерфейса до внутреннего и окончательного развёртывания на сервере, позволяя вам испытать разработку полного стека.
Примечание: Проект смоделирован по образцу Hungry H5 версии, обратитесь к последнему пользовательскому интерфейсу 2018 года, пожалуйста, выберите hungry для обычного заказа. Официальный клиент.
Если сеть не очень хорошая, перейдите на узел ускорения зеркала Domestic.
Пожалуйста, проверьте демонстрацию здесь (пожалуйста, предварительно просмотрите с помощью режима телефона Chrome).
Адрес документа интерфейса (на основе apidoc).
Nuxt2 + Vue + Vuex + Vue-Router + Mint-UI.
git clone git@github.com:EasyTuan/nuxt-elm.git
# Узел ускорения зеркала Domestic: git@gitee.com: easytuan / node-elm-api.git
cd nuxt-elm
npm install
npm run dev
# Генерация шаблона
npm run tep `имя файла`
# Развёртывание pm2
npm run start
У этого проекта есть поддерживающая бэкенд-система. Если вы хотите испытать разработку переднего и заднего плана, вы можете загрузить соответствующую бэкенд-систему: адрес передачи фонового проекта.
Если вы занимаетесь только фронтенд-разработкой, пожалуйста, проигнорируйте это предложение.
Структура каталогов
├── assets
│ ├── images
│ ├── services
│ ├── styles
│ └── utils
├── components
├── config
│ └── index.js
├── layouts
├── middleware
├── pages
├── plugins
├── static
└── store
.
.
.
.
.
Если это поможет, вы можете нажать «Star» в правом верхнем углу. Спасибо! ^_^
Или вы можете «следить» за ним, я буду продолжать открывать более интересные проекты.
Если у вас есть какие-либо вопросы, пожалуйста, сделайте это непосредственно в Issues, или вы найдёте проблему и у вас будет очень хорошее решение, добро пожаловать PR 👍
Здесь о проекте инициализации, я напрямую использую create-nuxt-app, предоставленный официальным веб-сайтом Nuxt.
npx create-nuxt-app <название проекта>
Это позволит вам сделать несколько выборов:
Выберите между интегрированными серверными фреймворками:
Выберите свой любимый UI-фреймворк:
Выберите нужный режим Nuxt (Universal или SPA)
Добавьте модуль axios, чтобы легко отправлять HTTP. Запросы к вашему приложению
Добавьте ESLint, чтобы проверять код на соответствие спецификациям и выявлять ошибки при сохранении.
Добавьте Prettier, чтобы форматировать/украшать код при сохранении.
npm run dev
access http://localhost:3000, теперь давайте посмотрим на инициализированный каталог проекта.
Примечание: Nuxt будет читать файл Vue по умолчанию в страницах и автоматически генерировать маршруты. Если вам нужно настроить маршрут, вы можете настроить соответствующие параметры в nuxt.config.js.
### Инкапсуляция запросов
Необходима изоляция данных и презентационных слоёв, поэтому фронтенд поддерживает шаблон проектирования MV*, и инкапсуляция запроса является нашим первым шагом. Здесь я выбрал axios в качестве клиента HTTP-запросов. Axios совместим с браузером и узлом. Он также обеспечивает перехват запросов, перехват ответов и т. д., так что мы можем разрабатывать более полезные функции.
Написано в `config/index.js`:
```javascript
module.exports = {
IS_RELEASE: true,
BASE_URL: `http://localhost:3000/api`,
// BASE_URL: `https://elm.caibowen.net/api`,
// IMG_URL: 'http://localhost:9000/',
IMG_URL: 'https://easytuan.gitee.io/node-elm-api/public/',
HEADERS: {
'Content-Type': 'application/json;charset=UTF-8'
},
TIMEOUT: 12000
};
Написано в assets/utils/request.js:
import axios from 'axios';
import config from '~/config';
import { Toast } from 'mint-ui';
axios.defaults.baseURL = config.BASE_URL;
axios.defaults.timeout = config.TIMEOUT;
axios.defaults.headers = config.HEADERS;
axios.interceptors.request.use(request => {
if (!config.IS_RELEASE) {
console.log(
`${new Date().toLocaleString()}【 M=${request.url} 】P=`,
request.params || request.data
);
}
return request;
}, error => {
return Promise.reject(error);
});
export default async (options = { method: 'GET'}) => {
let isdata = true;
if (
options.method.toUpperCase() !== 'POST' &&
options.method.toUpperCase() !== 'PUT' &&
options.method.toUpperCase() !== 'PATCH'
) {
isdata = false;
}
const res = await axios({
method: options.method,
url: options.url,
data: isdata ? options.data : null,
params: !isdata ? options.data : null
});
if (res.status >= 200 && res.status < 300) {
if (!config.IS_RELEASE) {
console.log(
`${new Date().toLocaleString()}【接口响应：】`,
res.data
);
}
// 浏览器环境弹出报错信息
if(typeof window !== "undefined" && res.data.code !== 0) {
Toast(res.data.msg);
}
return res.data;
} else {
if(typeof window !== "undefined" && res.data.code !== 0) {
Toast('请求错误');
}
}
};
Наконец, все запросы API записываются в файл server.js для упрощённого унифицированного управления.
Студенты, которые использовали vue, наверняка знают, что для междоменного взаимодействия в проекте vue-cli инкапсулирует опцию proxy в webpack. Она предоставляет опцию под названием proxyTable, которая представляет собой интеграцию proxy в webpack и стороннего плагина http-proxy-middleware.
К сожалению, в Nuxt нет конфигурационного элемента proxyTable для настройки междоменной конфигурации. К счастью, в Nuxt вы можете напрямую обрабатывать междоменные запросы, настраивая http-proxy-middleware. К счастью, Nuxt официально предоставляет два пакета для обработки проблемы междоменных запросов с помощью axios.
Сначала установите его:
npm i @nuxtjs/axios @nuxtjs/proxy -D
Затем настройте его в файле nuxt.config.js:
modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy'
],
proxy: [
[
'/api',{
// target: 'http://localhost:9000',
target: 'https://elm-api.caibowen.net',
changeOrigin: true,
pathRewrite: { '^/api' : '/' }
}
]
],
После этого вы сможете спокойно использовать свой axios для междоменных запросов.
На этом этапе вы должны сначала убедиться, что у вас есть собственный сервер. Если нет, поспешите купить.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )