vue3.x：vue-next-admin 登录页验证码，之前台代码

原始页面里面，使用的一个Button展示文字

按以前的理解，验证码展示为图片，才能发挥其作用。

上一篇文章：

https://www.144d.com/post-979.html

已经描述了，后台生成验证码的过程，以json格式返回的base64的代码，因此在前端展示即可。

改造展示：

let imgCodeSrc = ref<any>();
const loginApi = useLoginApi();
//获取验证码
onMounted(async ()=>{
  const imgCode = await loginApi.getCode();
  imgCodeSrc = imgCode.data.image;
})

接口代码：

getCode: (data?: object) =>{
			return request({
				url: '/api/login/getCode',
				method: 'get',
				data,
			});
		},

html代码

<el-col :span="8">
				<img :src="imgCodeSrc" style="height: 20px;width: 100px;" />
			</el-col>

这些改造还涉及一个框架跨域的问题。本地测试时的跨域解决。

可以参见：

https://cn.vitejs.dev/config/server-options#server-proxy

https://lyt-top.gitee.io/vue-next-admin-doc-preview/config/server/

这两篇官方的文章

我的解决办法是在vite.config.ts中添加了一段内容：

server: {
			host: '0.0.0.0',
			port: env.VITE_PORT as unknown as number,
			open: JSON.parse(env.VITE_OPEN),
			hmr: true,
			proxy: {
				'/gitee': {
					target: 'https://gitee.com',
					ws: true,
					changeOrigin: true,
					rewrite: (path) => path.replace(/^/gitee/, ''),
				},
				'/api': {
					target: 'http://localhost:6062/admin',
					ws: true,
					changeOrigin: true,
					rewrite: (path) => path.replace(/^/api/, ''),
				},
			},
		},

api这部分。

以上内容，属于入门级的简单内容，记录一下。很多知识看了视频，以为会了，写代码的时候，才发现实际都忘记了。只有文字的记录才是真实的。查找容易。

------------正文已结束，感谢您的阅读（折雨的天空）--------------------

转载请注明本文标题和链接：《vue3.x：vue-next-admin 登录页验证码，之前台代码》

取消回复发表评论