Эта статья участвовала в "Проект «Звезда раскопок»”, чтобы выиграть творческий подарочный пакет и бросить вызов творческим поощрительным деньгам.
предисловие
Я недавно изучаю Vue3, сейчас расскажу о своем опыте обучения и поделюсь небольшими знаниями.
Может быть, эти точки знаний не относятся к категории знаний Vue3, но это то, с чем я столкнулся и записал в процессе обучения.Для меня именно Vue3 заставил меня столкнуться с этими знаниями, хахахаха, я классифицирую это так круто!
впечатление
На этот раз я использовал Vite. Раньше я использовал vue-cli. Vite — это просто слово, которое нужно использовать, быстро!
Серьезно сделайте свой собственный проект с полным стеком, поэтому постарайтесь запечатать места, которые можно инкапсулировать и использовать для уменьшения объема кода в будущем.
Бэкэнд использует koa, и я впервые пытаюсь написать бэкенд самостоятельно. Когда этот проект будет завершен, я продолжу делиться некоторыми советами, как ступить на яму.
Начало, странное маленькое знание
Инкапсулируйте две привычки для использования запроса
Когда мы обычно инкапсулируем запросы, мы обычно инкапсулируем их по своим привычкам.Когда мы вдруг меняем инкапсуляцию, то пользоваться очень неудобно.Я спрашивал у своих друзей,большинство из них привыкли к следующим двум методам,поэтому я инкапсулирую axios, чтобы он соответствовал нашим привычкам использования.
this.$request({ obj })
Деконструирует параметр как объект.
this.$request({
methods: 'get',
url: '/login',
data:{
name:'Ned'
}
}).then((res)=>{
console.log(res)
})
Пакет выглядит следующим образом
/**
* axios二次封装
*/
import axios from 'axios'
import config from './../config'
import router from './../router';
import { ElMessage } from 'element-plus'
const TOKEN_INVALID = 'Token认证失败，请从新登陆'
const NETWORK_ERROR = '网络请求异常，请稍后重试'
// 创建axios实例对象，添加全局配置
const service = axios.create({
baseURL:config.baseApi,
timeout:8000
})
// 请求拦截器
service.interceptors.request.use((req) => {
// to do
const headers = req.headers
if(!headers.Authorization) headers.Authorization = 'Bear token'
return req
})
// 响应拦截器
service.interceptors.response.use((res) => {
// to do
/**
* 注意状态码一共有两个
* 一为http状态码
* 二为接口返回状态码
*/
const { code, data, msg } = res.data
if(code === 200){
return data
}else if(code === 40001){
ElMessage.error(TOKEN_INVALID)
setTimeout(() => {
router.push('/login')
}, 15000);
return Promise.reject(TOKEN_INVALID)
}else{
ElMessage.error(msg || NETWORK_ERROR)
return Promise.reject(msg || NETWORK_ERROR)
}
})
/**
* 请求核心函数
* @param {*} options 请求配置
*/
function request(options){
// 判断get/post
options.method = options.method || 'get'
// 防止有时候写了GET
if(options.method.toLowerCase() === 'get'){
// 如果是get就将data直接赋值给params
// 类型转换
options.params = options.data;
}
if(config.env === 'prod'){
service.defaults.baseURL = config.baseApi
}else{
service.defaults.baseURL = config.mock ? config.mockApi:config.baseApi
}
return service(options)
}
export default request
this.$request.get/post('/api',{ obj })
Возьмите get/post в виде ., один параметр — это путь к интерфейсу, а другой параметр — объект данных.
this.$request.get('/login',{name:Ned}).then((res)=>{
console.log(res)
})
На упаковке предыдущего шага поддержите эту привычку
Увеличение следующим образом:
['get','post','put','delete','patch'].forEach((item)=>{
request[item] = (url,data,options) =>{
return request({
url,
data,
method:item,
...options
})
}
})
Три способа маршрутизации прыжка
Я знал обоих до этого,Composition APIТаким образом, я не знаю, до знаний!
router-link
<router-link to"/login">去登陆</router-link>
Традиционный прыжок (API опций)
<template>
<el-button @click="goLogin">去登陆</el-button>
</template>
<script>
export default{
name:'home',
methods:{
goLogin(){
this.$router.push('/login')
}
}
}
</script>
Переход API композиции
<script setup>
import { useRouter } from 'vue-router'
let router = userRouter()
const goLogin = ()=>{
router.push('/login')
}
</script>
Примечание: настройка является функцией-ловушкой.Если она написана как в третьем примере, то все функции в ней относятся к категории ловушек.Как и во втором методе, настройка аналогична методам, и должна быть возможность возврата после завершения .
Ниже приведен код реализации метода из примечания выше.
В общем, это все еще способ написания API опций, но идея настройки относится к категории составного API, который должен принадлежать способу написания в процессе миграции фреймворка.
<template>
<el-button @click="goLogin">去登陆</el-button>
</template>
<script>
import { useRouter } from 'vue-router'
export default{
setup(){
let router = useRouter()
function goLogin(){
router.push('./login')
}
return { goLogin }
}
}
</script>
настроить конфигурацию
Адреса наших запросов, как правило, должны иметь три типа: в случае разделения фронтенда и бэкенда первый — мок-адрес, на котором нам удобно вести фронтенд-разработку без бэкенда, и второй - тестовый адрес, то есть пишется бэкенд.После этого то, что мы запросили, изменилось с мок-адреса на служебный адрес, который был записан и смонтирован бэкэндом. Наконец, когда тест был в порядке и развернут онлайн, то, что мы запросили, было развернутым онлайн-адресом.
Таким образом, три среды в файле такие же, какСреда разработки, тестовая среда и среда развертыванияСоответствующий.
Важность моков, я думаю, что mock очень важен, он может помочь нам разработать и протестировать фронтенд в соответствии с документом интерфейса, когда нет бэкенда.
Ниже приводится введение в программу:По умолчанию используется производственная среда prod.Если есть значение, оно будет присвоено переменной env в качестве текущей переменной среды. Наконец, EnvConfig экспортируется в деконструированном виде, что удобно для прямого вызова двух API в соответствии с текущей средой.
const env = import.meta.env.MODE || 'prod'
const EnvConfig = {
dev:{
baseApi:'',
mockApi:''
},
test:{
baseApi:'',
mockApi:''
},
prod:{
baseApi:'',
mockApi:''
}
}
export default {
env:env,
mock:true,
...EnvConfig[env]
}
О хранилище
Все должны быть знакомы с ним.Он может быть связан с токеном jwt для выполнения некоторых операций с разрешениями, или он также будет использоваться, когда наши данные должны быть разделены между компонентами.
Обмен данными между компонентами:Vuex используется во Vue, но есть проблема, потому что в это время данные хранятся в памяти js, и данные будут потеряны после обновления страницы, поэтому мы используем Vuex и хранилище, чтобы улучшить эту функцию.
Далее следует инкапсулировать хранилище для собственного использования:
Его собственный апи вроде не поддерживает очистку отдельных данных, его можно только почистить, поэтому я специально инкапсулировал отдельный емм, надеюсь не заметил, что он идет вместе с ним, тогда я плакал.
- setItem()
- getItem()
- clearItem()
- clearAll()
import config from './../config'
export default {
setItem(key,val){
let storage = this.getStorage()
storage[key] = val
window.localStorage.setItem(config.namespace,JSON.stringify(storage))
},
getItem(key){
return this.getStorage()[key]
},
getStorage(){
return JSON.parse(window.localStorage.getItem(config.namespace)) || "{}"
},
clearItem(key){
let storage = this.getStorage()
delete storage[key]
window.localStorage.setItem(config.namespace,JSON.stringify(storage))
},
clearAll(){
window.localStorage.clear()
}
}
напиши в конце
Держись в пути! Ну давай же!
Ставьте лайк, давайте работать вместе ♥