серия статей
- [nuggets.capable/post/684490…] vue-admin подробные примечания, вы должны выполнить одну из серий проектов (1) вручную
- [nuggets.capable/post/684490…] vue-admin подробные комментарии, вы должны выполнить серию проектов (3) вручную на сервере, чтобы решить ошибку
- Хоть воробей и маленький, но все внутренние органы у него есть: [адрес проектаGitHub.com/почему Лиза/vUE…)
предисловие
- В последние два дня проект запущен, и главный толчок — быть занятым, бороться с продуктом, обсуждать с бэкстейджем, как справиться с чередой проблем, и успокоить эмоции членов команды. , обновление относительно медленное, надеюсь, все извините. ------- После этого место уменьшится и скорость обновления ускорится
- Во второй серии я познакомлю вас с тем, как быстро написать данные интерфейса самостоятельно, когда мы не можем уследить за прогрессом нашего интерфейса в фоновом режиме, выполнить некоторые простые добавления, удаления, модификации и проверки, а также local vue-cli 2.0 и vue-cli 3.0 Конфигурация прокси, в этой серии используется vue-cli 2.0, конфигурация перехватчика axios и некоторые меры предосторожности при установке токена
- Во-вторых, некоторые одноклассники спрашивали, почему бы не использовать vuex, здесь я хочу сказать старую поговорку, не используйте vuex ради использования vuex, не паникуйте, нужно понимать его роль и какое удобство он может принести наш проект., чтобы использовать снова.
использовать json-сервер
-
Для выбора json-сервера для данных моделирования арендодатель просто чувствует, что это очень быстро и стоимость обучения относительно невелика.Он может моделировать простые операторы SQL и выполнять простые операции добавления, удаления и запроса.(ps) В то же время время, когда наш фронтенд продвигается относительно быстро, вам не нужно моделировать все данные, возвращаемые реальным интерфейсом, что очень трудоемко, а иногда в нашем проекте, когда требования не ясны, вы можете смоделируйте некоторые из основных операций, сначала решите основную, а затем зависит от избытка времени для решения второстепенной задачи.Некоторые люди говорят, почему бы не использовать mock.Это зависит от личных предпочтений.
-
установить json-сервер npm i --сохранить json-сервер
-
Затем создайте файл db.js в корневом каталоге проекта для имитации данных json.
-
Записать данные в формате json
{
"login":[
{
"username": "why",
"password": 123456
}
],
"table":[
{
"date": "why",
"name": 123456,
"address": "上海市虹口区"
}
]
}
Затем нам нужно протестировать данные, подготовка тестовых данных:
- Мок-сервер: используйте узел для запуска простой службы
// json-server
const jsonServer = require('json-server')
/*搭建一个server*/
const apiJsonServer = jsonServer.create()
/*将db.json关联到server*/
const apiRouter = jsonServer.router('db.json')
const jsonWares = jsonServer.defaults()
//全局使用
apiJsonServer.use(jsonWares)
apiJsonServer.use(apiRouter)
/*监听端口*/
apiJsonServer.listen(8888, () => {
console.log('JSON Server is running')
console.log('localhost:8888')
})
Настроить локальный прокси в vue (разница между vue-cli 2.0 и 3.0),
В vue-cli 2.0
В vue-cli 3.0 необходимо создать новый файл vue.config.js в каталоге обновления проекта. ##Используйте postman для проверки данных интерфейса Перейдите на официальный сайт для загрузки:www.getpostman.com/apps, выберите подходящий вам телефон…
Запустите json-сервер, если вы вытащите код лендлорда, напрямую npm run dev ваш проект и ваш json-сервер запустится одновременно
Или введите путь, по которому создается json, Используйте команду: json-server имя файла json (-g при установке, установите его глобально)
После успешного запуска используйте postman для проверки данных и введите определенный вами номер localhost:port/имя определенного массива json.
- json-server имитирует операторы sql для добавления, удаления, изменения и проверки
http://localhost:8888/dbДоступ ко всему содержимому файла db.json осуществляется;
http://localhost:8888/table/idПолучить данные указанного идентификатора
Используйте метод post для добавления данных
Используйте put для обновления данных указанного объекта id
Используйте delete для удаления данных с указанным идентификатором
Параметры запроса пейджинга: _start, _end, _limit и другие условия фильтрации параметров. Например: от 1 до 5 и запрашивать только три данных
Параметры сортировки: _sort, _order
Сотрудничайте с axios для запроса данных интерфейса
>使用axios :npm i --save axios
>引入axios
```js
import axios from 'axios'
// 把axios对象绑定到Vue原型中全局使用
Vue.prototype.axios = axios ```
Не используйте локальный прокси, настраивайте перехватчики и общие операции перехватчиков (ps: смотрите, что вам нужно в проекте, настраивайте под свои нужды)
// 添加请求拦截器,拦截器的作用：
// 在拦截器中可以获取到axios的配置，在config中修改东西
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
// console.log('哈哈，我拦截到了请求', config)
// 只需要给config配置baseURL 以及 headers
config.baseURL = 'http://localhost:8888/'
// 给每个http header都加上token，
config.headers.Authorization = localStorage.getItem('myToken')
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
// 配置axios的通过配置
// axios.defaults.baseURL = 'http://localhost:8888/'
// axios.defaults.headers.common['Authorization'] = localStorage.getItem('myToken')
Настройки токена и вопросы, требующие внимания
>在系列一中，有详细的代码注释，在导航钩子中配置，
>主要会涉及到，每次发送请求带上token，和给token设置过期时间
-
7. Обработка совместимости
В нашей фоновой системе управления атрибуты и методы h5c3 следует использовать с осторожностью, чтобы избежать проблем с совместимостью.
Почему у vue проблемы с совместимостью, You Da сказал, что это очень ясно, поэтому я не буду вводить это здесь, ла-ла-ла
Установите babel-polyfill (cnpm install babel-polyfill --save-dev) Введите import «babel-polyfill» или require («babel-polyfill») в файле ввода. Конфигурация в webpack.base.conf.js
entry: { app: ["babel-polyfill","./src/main.js"], }То есть используя cdn ресурсы, добавляя js файлы на html страницы: например:
<script src="https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"></script>