シリーズ記事ディレクトリ
記事ディレクトリ
序文
最近、vue2 に比べて vue3 を学習するのが多かれ少なかれ難しくなってきています。
フロントエンドプログラマなので、当然、横になっているわけにはいかないので、頑張って自分を豊かにしていきました。
GitHub でより優れたフレームワークを見つけて、探索して学習を始めました。
開発と学習には element-plus-admin を使用してください。GitHubアドレス
このフレームワークでは、ES2015+、vue-next、typescript、vite、postcss、element-plus のテクノロジーを使用しています
。まだ学習と探索中です。何か間違っている場合は、ご容赦ください。
あまり話さないで、始めましょう。
提示：以下是本篇文章正文内容
1.クロスドメインプロキシを解決する
element-plus-admin が使用する vite は初めての vite であり、多くの情報を参考にしました。この研究者は私のためにサービスをセットアップするために自分のサーバーを使用した友人なので、私がローカルでアクセスする彼のインターフェイスはクロスドメイン プロキシである必要があります。
vite.config.ts ファイルで直接、サーバー下のプロキシをコメントアウトして変更します。詳細は次のとおりです。
server: {
// proxy: env.VITE_PROXY ? proxy(JSON.parse(env.VITE_PROXY)) : {},
proxy:{
'/api':{
target:env.VITE_PROXY,
changeOrigin:true,
rewrite:(path) => path.replace(/^\/api/,'')
}
},
port: env.VITE_PORT,
host: '0.0.0.0'
},
次に、.env.production ファイルで、VITE_PROXY を独自のものに変更します。
VITE_PROXY = [["/api","http://xxx.xxx.xx.xx:8011"]]
2. 認証コードを取得する
ここにログインするときは、ユーザー名とパスワードを入力し、グラフィック確認コードを自分で追加する必要があります。
ユーザーのログインのロジックは次のとおりです。
1. ユーザーがログイン ページを開くと、まずグラフィック検証コードを取得するリクエストを開始する必要があり、背景からイメージ アドレスと UUID が返されます。
2. ユーザーがログインするとき、userName、passWord、captchaCode、および uuid の 4 つのパラメータをログイン インターフェイスに渡す必要があります。
3. ログインに成功すると、ユーザー情報とトークンが返されます。
4. 次に、ルーティング インターフェイスを呼び出し、メニューに戻り、レンダリング後にホームページに入ります。
まず、views-user-login.vue ファイルにグラフィック検証コードを追加します。詳細なコードは次のとおりです。
<template>
<div class='w-screen h-screen bg-gray-800'>
<div class='layout-login' @keyup='enterSubmit'>
<h3 class='text-2xl font-semibold text-gray-100 text-center mb-6'>系统登陆</h3>
<el-form ref='ruleForm' label-position='right' label-width='80px' :model='form' :rules='rules'>
<el-form-item class='mb-6 -ml-20' prop='name'>
<el-input v-model='form.name' placeholder='请输入用户名' prefix-icon='el-icon-user' />
</el-form-item>
<el-form-item class='mb-6 -ml-20' prop='pwd'>
<el-input v-model='form.pwd' placeholder='请输入密码' prefix-icon='el-icon-lock' show-password />
</el-form-item>
<el-form-item class='mb-6 -ml-20' prop='captchaCode'>
<el-input v-model='form.captchaCode' placeholder='请输入验证码' prefix-icon='el-icon-lock' style='width:260px' />
<el-image class='captchaCodeImg' style='width: 130px; height: 50px;margin-left:10px;border-radius:5px;' :src='captchaCodeImg' @click='getCaptchaCodeImg' />
</el-form-item>
<el-form-item class='mb-6 -ml-20'>
<el-button type='primary' class='w-full' @click='onSubmit'>登录</el-button>
</el-form-item>
<div class='flex justify-between'>
<div class='text-gray-300'>
<p class='leading-6 text-sm'><span class='w-24 inline-block'>账号: admin</span> 密码: 123456</p>
<p class='leading-6 text-sm'><span class='w-24 inline-block'>账号: dev</span> 密码: dev</p>
<p class='leading-6 text-sm'><span class='w-24 inline-block'>账号: test</span> 密码: test</p>
</div>
<div><el-button type='primary'>第三方登录</el-button></div>
</div>
</el-form>
</div>
</div>
</template>
<script lang="ts">
import {
computed, defineComponent, reactive, ref } from 'vue'
import {
useLayoutStore } from '/@/store/modules/layout'
import {
ElNotification } from 'element-plus'
import {
validate } from '/@/utils/formExtend'
export default defineComponent({
name: 'Login',
setup() {
const {
login } = useLayoutStore()
let form = reactive({
name: 'admin',
pwd: '123456',
captchaCode: '',
uid: ''
})
const ruleForm = ref(null)
const enterSubmit = (e:KeyboardEvent) => {
if(e.key === 'Enter') {
onSubmit()
}
}
const onSubmit = async() => {
let {
name, pwd ,captchaCode ,uid } = form
if(!await validate(ruleForm)) return
await login({
username: name, password: pwd , captchaCode: captchaCode , uid: uid })
ElNotification({
title: '欢迎',
message: '欢迎回来',
type: 'success'
})
}
const rules = reactive({
name: [
{
validator: (rule: any, value: any, callback: (arg0?: Error|undefined) => void) => {
if (!value) {
return callback(new Error('用户名不能为空'))
}
callback()
}, trigger: 'blur'
}
],
pwd: [
{
validator: (rule: any, value: any, callback: (arg0?: Error|undefined) => void) => {
if (!value) {
return callback(new Error('密码不能为空'))
}
callback()
}, trigger: 'blur'
}
]
})
const captchaCodeImg = ref('')
// getCaptchaCodeImg为请求图形校验码地址
function getCaptchaCodeImg() {
useLayoutStore().getCaptchaCodeImg()
.then(res => {
console.log(res)
captchaCodeImg.value = res.image
form.uid = res.uid
})
}
return {
labelCol: {
span: 4 },
wrapperCol: {
span: 14 },
form,
onSubmit,
enterSubmit,
rules,
ruleForm,
captchaCodeImg,
getCaptchaCodeImg
}
},
mounted() {
this.getCaptchaCodeImg()
}
})
</script>
<style lang='postcss' scoped>
.layout-login {
padding-top: 200px;
width: 400px;
margin: 0 auto;
::v-deep(.el-input__inner) {
height: 50px;
border: 1px solid hsla(0, 0%, 100%, 0.1);
border-radius: 5px;
color: #ddd;
}
}
</style>
次に、グラフィック検証コードを取得するためのインターフェイスを api-layout-index.ts ファイルに追加します。詳細なコードは次のとおりです。
import request from '/@/utils/request'
import {
AxiosResponse } from 'axios'
import {
IMenubarList } from '/@/type/store/layout'
const api = {
login: '/api/auth/login',
getUser: '/api/auth/getUserInfo',
getRouterList: '/api/auth/ownMenu',
publickey: '/api/User/Publickey',
getCaptchaCodeImg: '/api/auth/captcha' //获取图形验证码接口
}
export interface loginParam {
username: string,
password: string,
captchaCode: string,
uid: string
}
export function login(param: loginParam):Promise<AxiosResponse<IResponse<string>>> {
return request({
url: api.login,
method: 'post',
data: param
})
}
export function publickey():Promise<AxiosResponse<IResponse<string>>> {
return request({
url: api.publickey,
method: 'get'
})
}
interface IGetuserRes {
name: string
role: Array<string>
}
interface ImgGetRes {
image: string
uuid: string
}
export function getUser(): Promise<AxiosResponse<IResponse<IGetuserRes>>> {
return request({
url: api.getUser,
method: 'get'
})
}
export function getRouterList(): Promise<AxiosResponse<IResponse<Array<IMenubarList>>>> {
return request({
url: api.getRouterList,
method: 'get'
})
}
export function getCaptchaCodeImg() {
return request({
url: api.getCaptchaCodeImg,
method: 'get'
})
}
3 番目に、store-modules-layout.ts を呼び出して getCaptchaCodeImg を導入します。
import {
login, loginParam, getRouterList, getUser , getCaptchaCodeImg } from '/@/api/layout/index'
以下に追加
async getCaptchaCodeImg() {
const res = await getCaptchaCodeImg()
const CaptchaCode = res.data.data
return CaptchaCode
},
それでおしまい
