若依uniapp版本的代码现在还只是一个框架,还需要大神搭建。本章节介绍登录实现
一、uniapp运行效果
1、登录页面
2、首页
3、工作台
4、个人中心
2、登录代码拆解
使用hbuilderx导入工程并看到代码目录结构。
2.1、代码目录结构
如上图,是uniapp程序的代码目录结构。如下详细介绍目录定义。
api:存放所有与后端数据交互接口相关目录。
components:引入的第三方组件。
page:页面目录,例如登录页面,首页,个人中心页面。
plugins:插件代码目录。
static:静态资源文件目录,包含图片,文字,样式等。
store:本地存储封装。
uni_modules:第三方模块引入。
utils:工具类。
2.2、api接口url配置
配置文件是在根目录的config.js文件,其中baseUrl是接口服务器的ip和端口。
// 应用全局配置module.exports = { // baseUrl: 'https://vue.ruoyi.vip/prod-api',
baseUrl: 'http://localhost:8680', // 应用信息
appInfo: { // 应用名称
name: "ruoyi-app", // 应用版本
version: "1.1.0", // 应用logo
logo: "/static/logo.png", // 官方网站
site_url: "http://ruoyi.vip", // 政策协议
agreements: [{
title: "隐私政策",
url: "https://ruoyi.vip/protocol.html"
},
{
title: "用户服务协议",
url: "https://ruoyi.vip/protocol.html"
}
]
}
}2.3、uniapp的页面定义,只有在page.json配置了,页面才生效
如上图,配置在page.json里面的第一个页面就是默认展示页面。
"pages": [{ "path": "pages/login", "style": { "navigationBarTitleText": "登录"
}
}如上述代码,每一个页面是一个json配置,其中path对应页面所在再位置,login对应pages目录下面的login.vue.
其中style详细说明可以参考官方网站
https://uniapp.dcloud.net.cn/collocation/pages.html#style
3、登录页面代码
如上图,uniapp开发的小程序,app,界面的渲染跟vue的开发是一样的。
上面的样式布局拆分为三部分,第一部分是顶部标题,第二部分是输入框,第三方部分是提交按钮。
3.1、下面拆解验证码实现机制
import { getCodeImg } from '@/api/login'跟vue一样,通过import方法引入,其中getCodeImg是一个接口函数,从后端服务器获取验证码图片数据。
created() { this.getCode()
},页面创建的时候调用this.getCode()函数
// 获取图形验证码
getCode() {
getCodeImg().then(res => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
if (this.captchaEnabled) {
this.codeUrl = 'data:image/gif;base64,' + res.img
this.loginForm.uuid = res.uuid
}
})
},getCode函数处理逻辑是调用后端api接口获取图像数据,并显示图片
如下图是api接口的文件路径
// 获取验证码
export function getCodeImg() {
return request({
'url': '/captchaImage',
headers: {
isToken: false
},
method: 'get',
timeout: 20000
})
}上述函数实现通过http+get 请求api接口获取数据,其中url地址是/captchaImage
如下代码片段图是后端服务的api接口代码
未来计划
1、ruoyi非分离版本拆解
2、ruoyi-vue-pro:讲解工作流
3、ruoyi-vue-pro:支付模块,电商模块
4、基于ruoyi-vue-pro项目开发
5、JEECG低代码开发平台
请关注我,本星球会持续推出更多的开源项目代码解析,如有更好的意见请留言回复或者私信。
来源：
互联网
本文观点不代表源码解析立场，不承担法律责任，文章及观点也不构成任何投资意见。
评论列表