app开发定制系列文章目录
文章目录
前言
最近，学习vue3，对比vue2来说，app开发定制对于我多多少少有点难上手。
app开发定制身为一个前端程序员，app开发定制自然不能直接躺平了，于是奋发努力开始充实自己。
GitHub上找了一个比较好的框架，开始摸索学习。
采用element-plus-admin进行开发学习，
该框架使用技术： ES2015+、vue-next、typescript、、postcss 和 element-plus
本人还在学习摸索中，如有哪里不妥，请各位见谅。
话不多说开搞。
提示：以下是本篇文章正文内容
一、代理
element-plus-admin使用的vite，vite我也是第一次搞，查阅了不少资料。由于本次学习是好朋友用自己服务器给我搭了一个服务，我本地访问的他的接口需要进行下跨域代理。
直接在vite.config.ts文件中，把server下的proxy注释掉，修改一下，详细如下
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' },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
然后在.env.production文件里，修改VITE_PROXY为自己的
VITE_PROXY = [["/api","http://xxx.xxx.xx.xx:8011"]]- 1
二、获取验证码
这里登录时需要输入用户名、密码，然后自己添加了一个图形验证码。
用户的登录的逻辑是这样：
1.用户打开登录页面要先发起请求，获取图形验证码，后台会返回一个image地址和uuid。
2.用户登录时要传递四个参数到登录接口，userName、passWord、captchaCode、uuid。
3.登录成功后会返回用户信息以及token。
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
第二，在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' })}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
第三，在store-modules-layout.ts里进行调用，引入getCaptchaCodeImg
import { login, loginParam, getRouterList, getUser , getCaptchaCodeImg } from '/@/api/layout/index'- 1
在下方添加
async getCaptchaCodeImg() { const res = await getCaptchaCodeImg() const CaptchaCode = res.data.data return CaptchaCode },- 1
- 2
- 3
- 4
- 5
这样子就实现了