vue3相关使用

引入Element中文

在vue框架main.ts里面添加

import zhlocale from 'element-plus/es/locale/lang/zh-cn'
app.use(ElementPlus,{
    locale: zhlocale,
})

封装Axios统一接口

1、新建utils工具包，在包里新建request.ts脚本

import axios from "axios";
import {ElMessage} from "element-plus";
import {usetokenStore} from "@/stores/token";
import router from "@/router";
// const baseURL='http://localhost:8080';
const baseURL='/api';  //需要处理
const instance = axios.create({baseURL});
//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        if (result.data.code===0)
        {
            return result.data;
        }else
        {
            ElMessage.success(result.data.message?result.data.message:"服务器异常");
            return result.data;
            // return Promise.reject(result.data)
        }
    },
    error => {
        //未登陆同统一处理
       if (error.response.status===401)
        {
            ElMessage.error("请先登陆")
            router.push("/login")
        }else
        {
            ElMessage.success("服务器异常")
        }
    }
)

//添加请求拦截器
instance.interceptors.request.use(
    (config)=>
    {
        let tokenStore=usetokenStore();
        if (tokenStore.token)
        {
            config.headers.Authorization=tokenStore.token;
        }
        return config;

    },(err)=>
    {
          Promise.reject(err);
    }
)
export default instance;

2、前端跨域处理：在vier.config,ts里面添加代码

server:{
  proxy:{
    '/api':{
      target:'http://localhost:8080',
      changeOrigin:true,
      rewrite:(path)=>path.replace(/^\/api/,'')
    }
  }
}

Axios 使用

1、新建api包，以后的接口都放里面，在里面新建对应的接口脚本 user.ts

import request from "@/utils/request";

import {usetokenStore} from "@/stores/token";
export const getDataMethod=function()
{
    return request.get('/user/demo');
}

export const loginMethod=function (username:string,password:string)
{
    const params = new URLSearchParams();
    params.append('name',username)
    params.append('password',password)
    return request.post('/user/login',params);
}

2、相关调用使用 注意加相关关键字

async function GetToken()
{
  let getData= await getDataMethod();
  console.log(getData.data);
}

全局守卫

1、在router里面新建permission.ts

import router  from "@/router/index";
import {useTokenStore} from "@/stores/token";
const witheList=['/login']
router.beforeEach((to,from,next)=>
{
    const token=useTokenStore().token;
    if (token)
    {   
        next();    
    }else {
        if (witheList.includes(to.path))
        {   
            next();
        }else
        {
            next('/login')
        }
    }
})

2、在main里面全局引用

import '@/router/permission'

pinia持久化插件

1、安装插件

npm install pinia-plugin-persistedstate

2、引入插件在main.ts

import { createPersistedState } from 'pinia-plugin-persistedstate'
const persist=createPersistedState();
const pinia = createPinia()
pinia.use(persist)
app.use(pinia)

3、在 pinia里面加个参数 persist:true

export const usetokenStore = defineStore('token', () => {
    const token = ref("")
    return { token}
},{
    persist:true
})

4、pinia应用

	import {usetokenStore} from "@/stores/token";
     let tokenStore= usetokenStore();
     tokenStore.token=getData.data;

路由

1、设置路由

import { createRouter, createWebHistory } from 'vue-router'


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      name: 'login',
      component: ()=>import('../views/LoginPage.vue')
    },  {
      path: '/main',
      name: 'main',
      component: ()=>import('../views/MainPage.vue'),
      children:[
        {
          path: '/main/list',
          component: ()=>import('../views/Page/ListPage.vue')
        },
        {
          path: '/main/',
          component: ()=>import('../views/Page/HomePage.vue')
        },
        {
          path: '/main/user',
          component: ()=>import('../views/Page/UserPage.vue')
        }
      ]
    },{
    path:'/',
      redirect:'/login'
    }
  ]
})
export default router

2、应用路由跳转

<el-menu
    default-active="this.$route.path" router //设置状态
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
>
  <el-menu-item index="/main/">  //跳转名字
    <el-icon><setting /></el-icon>
    <span>开始页面</span>
  </el-menu-item>
  <el-menu-item index="/main/list">
    <el-icon><setting /></el-icon>
    <span>文章分类</span>
  </el-menu-item>
  <el-menu-item index="/main/user">
    <el-icon><setting /></el-icon>
    <span>文章管理</span>
  </el-menu-item>
</el-menu>

Element 选择当前行里的信息

在刚上添加:#default="{row}

<el-table-column prop="address" label="操作"  #default="{row}">
  <el-button circle  type="primary" @click="EditMethod(row)"> <el-icon><Edit/></el-icon></el-button>
  <el-button circle  type="danger" @click="DelectMethod(row)" > <el-icon><Delete /></el-icon></el-button>
</el-table-column>