一个 Yii + vue 项目(5)vue路由、yii验证码
2017-08-24 23:27
337 查看
有了一个简单的验证方法,于是需要写一个前端页面,首先在 vue src/ 建一个单页面 login.vue
修改 app.vue
将login.vue 加入默认路由:
router/default.js
打开页面看到:
验证码没有出来,所以还要配置一下,这里解释一下,yii控制器中以驼峰 action 开头格式写的方法称为动作,动作又分内联动作和独立动作,我们之前写的 actionTest 便是内联动作,动作id是 test,而验证码属于独立动作,需要在 actions 方法中注册下:
在 home/controllers/TestController.php 添加如下方法
实际的执行是 yii\captcha\CaptchaAction 这个类,他一般在 yii vendor/yiisoft/yii2/captcha/CaptchaAction.php 中。
刷新,可以看到验证码:
这里也建议去看一下 CaptchaAction.php ,里面写的也挺简单的,注释虽然是英文的,但猜也猜得出那些参数是干嘛用的。而前端写的刷新的方法其实就是一个带参请求。
<template> <div id="app"> <form> <div> <label>账号:</label> <input type="text" name=""> </div> <div> <label>密码:</label> <input type="password" name=""> <div> <img :src="captcha" @click="refresh"> </div> </div> <button>登陆</button> </form> </div> </template> <script> import {$get, $post} from './assets/js/public' export default { name: 'login', data: () => { return { captcha : 'http://yii.com/index.php/home/site/captcha' }}, methods: { refresh: function(){ let url = 'http://yii.com/index.php/home/site/captcha?refresh' $get(url).then((res)=>{ this.captcha = 'http://yii.com/index.php' + res.url }) } } } </script>
修改 app.vue
<template> <div id="app"> <router-view></router-view> </div> </template>
将login.vue 加入默认路由:
router/default.js
import Vue from 'vue' import Router from 'vue-router' import login from '../src/login.vue' Vue.use(Router) export default new Router({ routes: [ {path: '/login', name: 'login', component: login }, ] })
打开页面看到:
验证码没有出来,所以还要配置一下,这里解释一下,yii控制器中以驼峰 action 开头格式写的方法称为动作,动作又分内联动作和独立动作,我们之前写的 actionTest 便是内联动作,动作id是 test,而验证码属于独立动作,需要在 actions 方法中注册下:
在 home/controllers/TestController.php 添加如下方法
public function actions(){ return [ 'captcha' => [ 'class' => 'yii\captcha\CaptchaAction', 'width' => 60, 'height' => 40, 'padding' => 0, 'maxLength' => 4, 'minLength' => 4, ] ]; }
实际的执行是 yii\captcha\CaptchaAction 这个类,他一般在 yii vendor/yiisoft/yii2/captcha/CaptchaAction.php 中。
刷新,可以看到验证码:
这里也建议去看一下 CaptchaAction.php ,里面写的也挺简单的,注释虽然是英文的,但猜也猜得出那些参数是干嘛用的。而前端写的刷新的方法其实就是一个带参请求。
相关文章推荐
- 一个 Yii + vue 项目(6)yii模型、多模块登陆
- 一个 Yii + vue 项目(4)AR类简单操作
- 一个 Yii + vue 项目(3) 解决跨域、数据库配置
- 一个 Yii + vue 项目(1)
- 一个 Yii + vue 项目(0)
- 一个 Yii + vue 项目(2)
- 记 Vue 大型表单项目的一个性能问题
- vue-router路由懒加载的实现(解决vue项目首次加载慢)
- 最详细的安装一个vue项目,利用了vue-cli脚手架
- 关于vue项目中全局引入一个 .scss文件的问题解决
- 在vue-cli脚手架中配置一个vue-router前端路由
- 通过vue-cli创建一个项目
- 使用命令行工具npm新创建一个vue项目的方法
- vue项目经验:图形验证码接口get请求处理
- Vue2项目架构搭建(八)—— vue-router2路由配置和调用
- vue vuex vue-router vue-resource 简单的搭建一个 vue 小项目
- Vue项目实战(四)调整 App.vue 和 router 路由
- 基于vue-cli的vue项目之路由6--重定向4-----path带参重定向
- 如何创建一个 vue.js 的项目
- 命令行创建一个vue项目