UI基础-实现页面跳转和输入值的传递

完成下面输入值传递的功能: 创建一个根视图控制器,加载在window上。并且添加一个lable标签和button按钮。单击button时,弹出一个模态视图。模态视图中包含一个返回按钮和textField输入框。修改textField的值并点击返回按钮返回到根视图时,将textField的值显示到label标签上。

下面用代理实现:

首先要清楚谁需要委托,Modal想要去修改label的值,但是他自己做不了这件事情,所以Modal需要找一个具备这样能力的一个委托人。

先来创建根视图控制器和模态视图控制器并设置label、button、textField:

RootViewController:

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //背景颜色
    self.view.backgroundColor = [UIColor grayColor];
    
    //设置Label
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(100, 100, 150, 50)];
    label.tag = 101;
    label.textAlignment = NSTextAlignmentCenter;
    label.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:[label autorelease]];
    
    //设置Button
    UIButton *goButton = [UIButton buttonWithType:UIButtonTypeCustom];
    goButton.frame = CGRectMake(100, 200, 150, 50);
    goButton.backgroundColor = [UIColor orangeColor];
    [goButton setTitle:@"跳转" forState:UIControlStateNormal];
    [goButton addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:goButton];
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-Element-Admin是一个基于Vue.js和Element UI的后台管理系统模板,主要包括用户管理、权限管理、菜单管理、角色管理、日志管理等功能模块。其中,登录功能是系统的核心功能之一,下面详细介绍Vue-Element-Admin登录功能的具体实现。 1. 登录页面 登录页面是用户登录系统的入口,需要提供用户名和密码输入框、验证码输入框和登录按钮。在Vue-Element-Admin中,登录页面的实现主要包括以下几个部分: (1)路由配置:在路由配置文件(router/index.js)中添加登录页面的路由配置。 (2)页面布局:使用Element UI中的布局组件实现登录页面的布局。 (3)表单验证:使用Vue.js中的表单验证功能验证用户名、密码和验证码的输入合法性。 (4)登录请求:使用axios库向后台发送登录请求,验证用户的登录信息是否正确。 (5)登录状态保存:将登录成功后返回的token保存在本地,供后续请求时使用。 2. 登录请求 在Vue-Element-Admin中,登录请求是通过axios库发送的。axios是一个基于Promise的HTTP库,可以用于浏览器和Node.js平台。在发送登录请求时,需要设置请求的URL、请求方法、请求头和请求体等参数。 以下是发送登录请求的代码示例: ```javascript import axios from 'axios' export function login(username, password, code, uuid) { const data = { username, password, code, uuid } return axios({ url: '/auth/login', method: 'post', headers: { 'Content-Type': 'application/json;charset=UTF-8' }, data }) } ``` 在上述代码中,login函数接收四个参数,分别是用户名、密码、验证码和UUID。其中,UUID是用于生成验证码的唯一标识符。login函数返回一个Promise对象,该对象的then方法用于处理登录成功后的逻辑,catch方法用于处理登录失败后的逻辑。 3. 登录状态保存 在Vue-Element-Admin中,登录状态是通过Vuex库保存的。Vuex是一个专为Vue.js应用程序开发的状态管理模式,可以用于集中管理应用程序中的所有组件的状态。 在登录成功后,后台会返回一个token,该token需要保存在本地,以便后续请求时使用。以下是保存登录状态的代码示例: ```javascript import { login } from '@/api/user' import { setToken } from '@/utils/auth' const state = { token: '' } const mutations = { SET_TOKEN: (state, token) => { state.token = token } } const actions = { login({ commit }, userInfo) { const { username, password, code, uuid } = userInfo return new Promise((resolve, reject) => { login(username, password, code, uuid).then(response => { const { data } = response commit('SET_TOKEN', data.token) setToken(data.token) resolve() }).catch(error => { reject(error) }) }) } } ``` 在上述代码中,login函数接收一个userInfo对象作为参数,该对象包含用户名、密码、验证码和UUID等信息。login函数返回一个Promise对象,该对象的then方法用于处理登录成功后的逻辑,catch方法用于处理登录失败后的逻辑。 4. 登录状态验证 在Vue-Element-Admin中,登录状态验证是通过路由拦截实现的。路由拦截是Vue.js中的一种权限控制方式,可以在路由跳转前对用户的登录状态进行验证,从而实现页面的权限控制。 以下是路由拦截的代码示例: ```javascript import router from './router' import { getToken } from '@/utils/auth' const whiteList = ['/login'] router.beforeEach(async(to, from, next) => { const hasToken = getToken() if (hasToken) { if (to.path === '/login') { next({ path: '/' }) } else { next() } } else { if (whiteList.indexOf(to.path) !== -1) { next() } else { next(`/login?redirect=${to.path}`) } } }) ``` 在上述代码中,beforeEach函数用于路由拦截,该函数接收三个参数,分别是要跳转的路由对象、当前路由对象和next函数。在beforeEach函数中,首先获取本地的token,如果token存在,则跳转到要访问的路由页面,否则跳转到登录页面。如果要访问的路由页面在白名单中,则直接跳转到该页面,否则跳转到登录页面,并将要访问的页面作为参数传递给登录页面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值