使用Laravel实现知乎注册功能

2018年6月3日17:12:18 实习第五周 XXM

Begin

通过整整两天的学习,基本把Laravel框架的基础部分过了一遍,终于有点熟悉的感觉了。

下面通过一个小案例来演示两天的学习成果.

首先需要一个前端模板,在网上随便下了一个.

样子是这样的.

1.png

注册用户功能分析

2.png

Mysql

建立对应的数据库以及数据表

Create database blog;

use blog;

Create table userInfo ( id int primary key autoincrement, userAccount varchar(16), userPass varchar(16), mail varchar(30), updatedat timestamp, createdat timestamp )

PHP

首先我们需要更改Laravel中的env配置文件

DBCONNECTION=mysql
DBHOST=127.0.0.1
DBPORT=3306
DBDATABASE=blog
DBUSERNAME=root
DB_PASSWORD=

然后在App目录下建立对应的模型文件

Blog.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Blog extends Model { //指定表名 protected $table = 'userinfo'; //指定模型字段 protected $primaryKey = 'id'; //是否开启自动维护时间戳 protected $timestamp = true; }

编写Controller

BlogController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request; use Illuminate\Http\Response; use App\Blog;

class BlogController extends Controller { public function __invoke() { return view('Blog/login/register'); }

public function register(Request $request)
{
    $mail=$request-&gt;has('mail');
    $user=$request-&gt;has('user');
    $pass=$request-&gt;has('pass');
    $verifyCode=$request-&gt;has('code');
    if($mail&amp;&amp;$user&amp;&amp;$pass&amp;&amp;$verifyCode)
    {
        $verifyCode=$request-&gt;input('code');
        $mail=$request-&gt;input('mail');
        $user=$request-&gt;input('user');
        $pass=$request-&gt;input('pass');
        $code=$request-&gt;session()-&gt;get('code');
        if($code == $verifyCode)
        {
            $blog=new Blog();
            $blog-&gt;userAccount=$user;
            $blog-&gt;userPass=$pass;
            $blog-&gt;mail=$mail;
            $blog-&gt;save();
            echo '注册成功';
            return;
        }
        echo '验证码错误';
    }
    else
    {
        echo '操作异常,请稍后再试';
    }

}

public function verifyCode($width = 100 , $height = 40 , $num = 4 ,$x = 15,Request $request)
{
    //1 创建画布

    $image = imagecreatetruecolor($width , $height);         //2 创建字符 数字大小写字母的混合    $str = "23456789abcdefghjklmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVWXYZ";    $string = substr(strshuffle($str) , 0 , $num);    //3.创建Session    $request->session()->put('code',$string);    //4.设置验证码的背景色    imagefilledrectangle($image , 0 , 0 , $width , $height , imagecolorallocate($image , 251, 252, 253));    //5. 往画布上写入字符    for($i = 0; $i<$num; $i++) {  //因为我们设定的是输出4 个字符,所以$i是小于的$num        $x+=10;        $y = mtrand(10 , $height - 20);        imagechar ($image , 5 , $x , 15 , $string[$i] , imagecolorallocate($image , 0,119,230));    }    obstart(); //打开输出控制缓冲    imagepng($image);//生成图片    $content = obgetcontents();//返回输出缓冲区的内容    imagedestroy($image);//销毁       obend_clean();//缓冲区并关闭输出缓冲       return response($content, 200, [         'Content-Type' => 'image/png',     ]); } }

实现路由部分

Route::get('/','BlogController');

Route::group(['middleware'=>['web']],function(){ Route::post('/userregister','BlogController@register'); // Route::get('/userregister','BlogController@register'); Route::get('/verifyCode','BlogController@verifyCode'); });

Javascript

<script>
    $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});

$(".login-btn").click(function(){
    var email = $("#email").val();
    var password1 = $("#password").val();
    var password2 = $("#password1").val();
    var verify = $("#verify").val();
    var user =$("#user").val();
    if(email!=""&amp;&amp;password1!=""&amp;&amp;password2!=""&amp;&amp;verify!=""&amp;&amp;user!="")
    {
        if(password1==password2)
        {
            $.ajax({
                type: 'post',
                url: '/public/user_register',
                data: {
                    mail:email,
                    user:user,
                    pass:password2,
                    code:verify,
                },
                dataType: 'text',
                success: function(data) {
                    if(data=='注册成功'){
                        layer.alert('注册成功');
                    }
                    else if(data=='验证码错误'){

                                                        layer.alert('验证码错误'); var rand = parseInt(Math.random() * (9999 - 0 + 1) + 0); $(".imgcode").attr('src','http://localhost:8080/public/verifyCode?id='+rand); }else{ layer.alert(data); }

                },
                error: function() {
                    layer.msg('请求错误,请稍后再试')
                },
            });

        }
        else{
            layer.alert('两次密码不一致');
        }

    }

})

</script>

Laravel 419错误 -ajax请求 错误解决办法(CSRF验证)

1.在页面上添加 

<meta name="csrf-token" content="{{ csrf_token() }}"> 

2.然后在页面的script标签中添加 

$.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});

最后就完成了简单的注册功能;

基本数据验证

3.png

4.png

注册成功

5.png

6.png

以上就实现了简单的注册功能.

End

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容