vue项目实战-2登录页面美化

• 使用emementPlus图标

 npm install @element-plus/icons-vue

注册所有图标

您需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

 或者具体引入单个图标,导入后即可引用

improt {User} from '@element-plus/icons-vue'

<el-icon><User /></el-icon>

• 安装axios

npm install axios

 在vite.config.js文件中配置vite代理，可以解决跨域问题

export default defineConfig({
  server: {
    proxy: {
    
      // 选项写法
      '/api': {
        target: 'http://ceshi13.dishait.cn',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

 在src中新建axios.js文件，创建axios对象，暴露出去

import axios from "axios";

const service = axios.create({
    baseURL: '/api'
  });

export default service

新建api文件夹，其中新建manages.js文件

import axios from "~/axios";

export function login(username,password){
  return axios.post('/admin/login',{
    username,
    password
  })
}

之后登录按钮导入login函数,点击调用，引入router

import { useRouter} from 'vue-router'
 
const router = useRouter()

 安装vueuse组件，已使用cookie

npm i @vueuse/integrations

npm i universal-cookie


import { useCookies } from '@vueuse/integrations/useCookies'

const cookie = useCookies()

const submit = () => {
    formRef.value.validate((valid) => {
        if (!valid) {
            return
        }
        login(form.username, form.password)
            .then(res => {
                console.log(res);
                //todo 提示请求成功
                ElNotification({
                    message: '登录成功',
                    type: 'success'
                })
                //保存token
                cookie.et('token',res.data.data.token)
                //跳转用户首页
                router.push("/")

            })
            .catch(err => {
                console.log(err.response.data.msg);
                ElNotification({
                    message: err.response.data.msg || '请求失败',
                    type: 'error'
                })
            })
    })
}

简单的输入账号密码后，提示跳转完成。