6月11日笔记
练习代码
import request from '../utils/request.js'
export const getNewsList = () => request.get('/news')
export const getNewsDetail = (id) => request.get(/news/${id})
export const publishNews = (data) => request.post('/news', data)
export const deleteNews = (id) => request.delete(/news/${id})
export const likeNews = (id, likes) => request.patch(/news/${id}, { likes })
import request from '../utils/request.js'
export const login = (data) => {
return request.get('/users', { params: { username: data.username } })
}
export const register = (data) => {
return request.post('/users', data)
}
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Register from '../views/Register.vue'
import Home from '../views/Home.vue'
import Detail from '../views/Detail.vue'
const routes = [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
{ path: '/register', component: Register },
{ path: '/home', component: Home },
{ path: '/detail/:id', component: Detail, name: 'detail' }
]
const router = createRouter({
history: createWebHistory(),
routes
})
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token')
if ((to.path === '/home' || to.path.startsWith('/detail')) && !token) {
next('/login')
} else {
next()
}
})
export default router
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
token: localStorage.getItem('token') || '',
username: localStorage.getItem('username') || ''
}),
actions: {
setUser(username, token) {
this.username = username
this.token = token
localStorage.setItem('username', username)
localStorage.setItem('token', token)
},
logout() {
this.username = ''
this.token = ''
localStorage.removeItem('username')
localStorage.removeItem('token')
}
}
})
import axios from 'axios'
const request = axios.create({
baseURL: 'http://localhost:3000',
timeout: 10000
})
// 请求拦截器：自动添加 token
request.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = Bearer ${token}
}
return config
})
// 响应拦截器：统一处理错误
request.interceptors.response.use(
response => response.data,
error => {
if (error.response?.status === 401) {
localStorage.removeItem('token')
window.location.href = '/login'
}
return Promise.reject(error)
}
)
export default request
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(router)
app.use(createPinia())
app.use(ElementPlus)
app.mount('#app')
{
"users": [
{
"id": "1",
"username": "张三",
"password": "123"
},
{
"id": "OGy67MjJPKw",
"username": "ye",
"password": "123"
},
{
"id": "oYty2ebrCqw",
"username": "ye",
"password": "123"
}
],
"news": [
{
"id": "1",
"title": "微头条1.0 正式发布",
"content": "微头条是一个轻量级信息平台，欢迎大家使用。",
"time": "2025-06-01 10:30:00",
"likes": 8,
"userId": 1
},
{
"id": "2",
"title": "Vue3 组合式 API 学习心得",
"content": "setup 语法糖非常简洁，ref和reactive让数据响应式变得容易。",
"time": "2025-06-02 15:20:00",
"likes": 11,
"userId": 1
},
{
"title": "123",
"content": "123",
"time": "2026/6/11 15:31:03",
"likes": 1,
"userId": 1,
"id": "can70FqF0ZU"
}
],
"$schema": "./node_modules/json-server/schema.json"
}
<!doctype html>
<title>weitoutiao-router</title> </head> </body>
浙公网安备 33010602011771号