vue3项目-实践

1.使用Vite创建vue项目

  1. 创建项目
npm create vite@latest app --template vue
  1. 进入项目目录并安装依赖
cd app
npm install -registry=https://registry.npmmirror.com

清华大学镜像源全局设置
npm config set registry https://registry.npmmirror.com

3.启动项目

npm run dev

1.1 安装额外依赖

进入项目根目录后，执行一下命令来安装axios、vue和element-plus

npm install axios vuex element-plus vue-router

1.2 导入和初始化vuex和ELement Plus 以及路由vue-router

1.设置Vuex:

  • 在src文件夹下创建 store/index.js
import { createStore } from 'vuex';

const store=createStore({
state:{},
mutations:{},
actions:{},
});
export default store;
  • 在src/main.js中引入并使用：
import store from './store'
app.use(store)
  1. 设置Element Plus
  • 在 src/main.js中引入
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

app.use(ElementPlus);
  1. 设置路由
  • 在 src文件夹下创建router\index.js
import {createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Login from '../views/Login.vue';
import Register from '../views/Register.vue';

const routes= [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/login',
        name: 'Login',
        component: Login
    },
    {
        path: '/register',
        name: 'Register',
        component: Register
    }
];
const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router;
  • 在src/main.js中引入router并添加到vue实例中：
import router from './router'
app.use(router)
  • 在应用中使用 和

在 src/App.vue 中添加 以显示路由对应的组件，并用 添加导航链接。

<template>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/login">login</router-link> |
      <router-link to="/register">register</router-link> |
    </nav>
    <router-view></router-view>
</template>

crud通用api:

import axios from 'axios'

//创建axios实例
const api = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 5000 // 请求超时时间
})

 // 获取token
 const getToken = () => {
  return localStorage.getItem('token')
}
//添加请求拦截器，在每一个请求中添加Authorrization 头
api.interceptors.request.use(
    config=>{
        const token =getToken;
        if(token){
            config.headers[Authorization]=`Token ${token}`
        }
        return config;
    },
    error=>{
        return Promise.reject(error);
    }
);

//通用的api请求方法
export const fetchData = async (endpoint) => {
    const response = await api.get(endpoint);
    return response.data;
  };
  
  export const createData = async (endpoint, data) => {
    const response = await api.post(endpoint, data);
    return response.data;
  };
  
  export const updateData = async (endpoint, data) => {
    const response = await api.put(endpoint, data);
    return response.data;
  };
  
  export const deleteData = async (endpoint) => {
    const response = await api.delete(endpoint);
    return response.data;
  };


 export default api

crud操作模块

// store/modules/crud.js
import { fetchData, createData, updateData, deleteData } from '../../services/api';

export default {
  namespaced: true,
  state: {
    data: [],
  },
  mutations: {
    setData(state, data) {
      state.data = data;
    },
    addItem(state, item) {
      state.data.push(item);
    },
    updateItem(state, updatedItem) {
      const index = state.data.findIndex(item => item.id === updatedItem.id);
      if (index !== -1) {
        state.data[index] = updatedItem;
      }
    },
    deleteItem(state, id) {
      state.data = state.data.filter(item => item.id !== id);
    },
  },
  actions: {
    async fetchItems({ commit }, endpoint) {
      try {
        const data = await fetchData(endpoint);
        commit('setData', data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    },
    async addItem({ commit }, { endpoint, item }) {
      try {
        const newItem = await createData(endpoint, item);
        commit('addItem', newItem);
      } catch (error) {
        console.error('Error adding item:', error);
      }
    },
    async updateItem({ commit }, { endpoint, item }) {
      try {
        const updatedItem = await updateData(endpoint, item);
        commit('updateItem', updatedItem);
      } catch (error) {
        console.error('Error updating item:', error);
      }
    },
    async deleteItem({ commit }, { endpoint, id }) {
      try {
        await deleteData(`${endpoint}/${id}`);
        commit('deleteItem', id);
      } catch (error) {
        console.error('Error deleting item:', error);
      }
    },
  },
};

创建一个通用的CrudTable组件，能够根据传递的配置动态渲染不同的表格和操作按钮。

用户认证模块

import axios from 'axios';

// 创建 axios 实例
const api = axios.create({
 baseURL: 'http://your-api-url', // 替换为你的 API URL
 timeout: 10000,
});

// 获取 token
const getToken = () => localStorage.getItem('token'); 

// 设置请求拦截器，自动携带 token
api.interceptors.request.use(
 config => {
   const token = getToken();
   if (token) {
     config.headers['Authorization'] = `Bearer ${token}`;
   }
   return config;
 },
 error => {
   return Promise.reject(error);
 }
);

// 登录方法
export const login = async (credentials) => {
 const response = await api.post('/auth/login', credentials);
 const token = response.data.token;
 localStorage.setItem('token', token);  // 存储 token
 return token;
};

// 登出方法
export const logout = () => {
 localStorage.removeItem('token'); // 删除 token
 // 你也可以在这里调用 API 执行登出操作，例如清除服务器端会话等
};

// 获取当前用户信息
export const getCurrentUser = async () => {
 const response = await api.get('/auth/me');  // 获取当前登录用户信息
 return response.data;
};

// 刷新 token
export const refreshToken = async () => {
 const response = await api.post('/auth/refresh-token');
 const token = response.data.token;
 localStorage.setItem('token', token);
 return token;
};

创建vuex认证模块
为了方便管理认证状态，可以创建一个vuex模块，更好的处理认证信息的存储、更新和清楚。(这里去调services下的api)
store/modules/auth.js

import { login,logout,getCurrentUser,refreshToken} from '../../services/auth'

export default {
    namespaced: true,
    state: {
        user: null,
        token:localStorage.getItem('token') || ''
    },
    mutations: {
        setUser(state, user) {
            state.user = user
        },
        setToken(state, token) {
            state.token = token
        },
        clearUser(state) {
            state.user = null
            state.token = ''
        },
    },
    actions: {
        //登录
        async login({ commit }, credentials) {
            try {
                const token = await login(credentials)
                commit('setToken', token)
                const user=await getCurrentUser()
                commit('setUser', user)
            } catch (error) {
                console.log('登录失败',error);
            }
        },
        aysnc logout({commit }){
            try {
                logout()
                commit('clearUser');
            } catch (error) {
                console.log('退出失败',error);
            }
        },
        async getCurrentUser({commit}){
            try {
                const user=await getCurrentUser()
                commit('setUser', user)
            } catch (error) {
                console.log('获取用户信息失败',error);
            }
        },
        async refreshToken({commit}){
            try {
                const token=await refreshToken()
                commit('setToken', token)
            } catch (error) {
                console.log('token刷新失败',error);
            }
        },
        //
    }
}

如何使用vuex呢？
通过dispatch方法就可以执行。
const store = useStore();
await store.dispatch('auth/login', credentials.value);

posted @ 2024-11-13 14:20  林汉州win  阅读(7)  评论(0)  编辑  收藏  举报