欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

laravel5+angularjs使用教程

最近在看laravel+angularjs,看到一篇感觉很好的老外的文章,翻译一下,略有改动,废话不多讲直接开始

①创建Laravel 5的应用

  1. composer create-project laravel/laravel jiagou

composer 安装被墙怎么办
可以解决了composer安装不上的问题

②创建migrations数据库

应用根目录下有.env的文件,打开这个文件

  1. DB_HOST=localhost

  2. DB_DATABASE=jiagou

  3. DB_USERNAME=root

  4. DB_PASSWORD=

修改数据库配置项
然后创建jiagou的数据库,我是phpmyadmin的创建

打开DOS进入项目的目录,执行

  1. php artisan migrate:install

会看到

  1. Migration table created successfully

在执行

  1. php artisan make:migration create_employees_table

会看到

  1. Created migration: 2015_12_31_054623_create_employees_table

打开文件
/database/migrations/2015_12_31_054623_create_employees_table.php
修改代码

  1. <?php

  2.  

  3. use Illuminate\Database\Schema\Blueprint;

  4. use Illuminate\Database\Migrations\Migration;

  5.  

  6. class CreateEmployeesTable extends Migration

  7. {

  8.    /**

  9.     * Run the migrations.

  10.     *

  11.     * @return void

  12.     */

  13.    public function up()

  14.    {

  15.        Schema::create('employees', function (Blueprint $table) {

  16.            $table->increments('id');

  17.            $table->string('name')->unique();

  18.            $table->string('email')->unique();

  19.            $table->string('contact_number');

  20.            $table->string('position');

  21.            $table->timestamps();

  22.        });

  23.    }

  24.  

  25.    /**

  26.     * Reverse the migrations.

  27.     *

  28.     * @return void

  29.     */

  30.    public function down()

  31.    {

  32.        Schema::drop('employees');

  33.    }

  34. }

然后在DOS执行

  1. php artisan migrate

然后看见

  1. Migrated: 2014_10_12_000000_create_users_table

  2. Migrated: 2014_10_12_100000_create_password_resets_table

  3. Migrated: 2015_12_31_054623_create_employees_table

③REST API

在DOS执行

  1. php artisan make:controller Employees

看到

  1. Controller created successfully.

执行

  1. php artisan make:model Employee

看到

  1. Model created successfully.

打开文件/app/Employee.php,这个Model文件,文件放这里感觉不好,可以移动这个文件

  1. <?php

  2.  

  3. namespace App;

  4.  

  5. use Illuminate\Database\Eloquent\Model;

  6.  

  7. class Employee extends Model

  8. {

  9.    protected $fillable = array('id', 'name', 'email','contact_number','position');

  10. }

打开文件/app/Http/Controllers/Employees.php,这个是控制器

  1. <?php

  2.  

  3. namespace App\Http\Controllers;

  4.  

  5. use Illuminate\Http\Request;

  6.  

  7. use App\Employee;

  8. use App\Http\Requests;

  9. use App\Http\Controllers\Controller;

  10.  

  11. class Employees extends Controller

  12. {

  13.    /**

  14.     * Display a listing of the resource.

  15.     *

  16.     * @return Response

  17.     */

  18.    public function index($id = null) {

  19.        if ($id == null) {

  20.            return Employee::orderBy('id', 'asc')->get();

  21.        } else {

  22.            return $this->show($id);

  23.        }

  24.    }

  25.  

  26.    /**

  27.     * Store a newly created resource in storage.

  28.     *

  29.     * @param  Request  $request

  30.     * @return Response

  31.     */

  32.    public function store(Request $request) {

  33.        $employee = new Employee;

  34.  

  35.        $employee->name = $request->input('name');

  36.        $employee->email = $request->input('email');

  37.        $employee->contact_number = $request->input('contact_number');

  38.        $employee->position = $request->input('position');

  39.        $employee->save();

  40.  

  41.        return 'Employee record successfully created with id ' . $employee->id;

  42.    }

  43.  

  44.    /**

  45.     * Display the specified resource.

  46.     *

  47.     * @param  int  $id

  48.     * @return Response

  49.     */

  50.    public function show($id) {

  51.        return Employee::find($id);

  52.    }

  53.  

  54.    /**

  55.     * Update the specified resource in storage.

  56.     *

  57.     * @param  Request  $request

  58.     * @param  int  $id

  59.     * @return Response

  60.     */

  61.    public function update(Request $request, $id) {

  62.        $employee = Employee::find($id);

  63.  

  64.        $employee->name = $request->input('name');

  65.        $employee->email = $request->input('email');

  66.        $employee->contact_number = $request->input('contact_number');

  67.        $employee->position = $request->input('position');

  68.        $employee->save();

  69.  

  70.        return "Sucess updating user #" . $employee->id;

  71.    }

  72.  

  73.    /**

  74.     * Remove the specified resource from storage.

  75.     *

  76.     * @param  int  $id

  77.     * @return Response

  78.     */

  79.    public function destroy($id) {

  80.       $employee = Employee::find($id);

  81.  

  82.       $employee->delete();

  83.  

  84.       return "Employee record successfully deleted #" . $request->input('id');

  85.   }

  86. }

打开文件/app/Http/routes.php,这个是路由文件

  1. Route::get('/', function () {

  2.    return view('index');

  3. });

  4. Route::get('/api/v1/employees/{id?}', 'Employees@index');

  5. Route::post('/api/v1/employees', 'Employees@store');

  6. Route::post('/api/v1/employees/{id}', 'Employees@update');

  7. Route::delete('/api/v1/employees/{id}', 'Employees@destroy');

④使用AngularJS

创建/public/app/app.js
添加代码

  1. var app = angular.module('employeeRecords', [])

  2.        .constant('API_URL', 'http://jiagou.com/api/v1/');

我的jiagou.com指向的是项目里根目录下的public文件夹

创建/public/app/controllers/employees.js,这个文件是AngularJS控制器

  1. app.controller('employeesController', function($scope, $http, API_URL) {

  2.    //retrieve employees listing from API

  3.    $http.get(API_URL + "employees")

  4.            .success(function(response) {

  5.                $scope.employees = response;

  6.            });

  7.    

  8.    //show modal form

  9.    $scope.toggle = function(modalstate, id) {

  10.        $scope.modalstate = modalstate;

  11.  

  12.        switch (modalstate) {

  13.            case 'add':

  14.                $scope.form_title = "Add New Employee";

  15.                break;

  16.            case 'edit':

  17.                $scope.form_title = "Employee Detail";

  18.                $scope.id = id;

  19.                $http.get(API_URL + 'employees/' + id)

  20.                        .success(function(response) {

  21.                            console.log(response);

  22.                            $scope.employee = response;

  23.                        });

  24.                break;

  25.            default:

  26.                break;

  27.        }

  28.        console.log(id);

  29.        $('#myModal').modal('show');

  30.    }

  31.  

  32.    //save new record / update existing record

  33.    $scope.save = function(modalstate, id) {

  34.        var url = API_URL + "employees";

  35.        

  36.        //append employee id to the URL if the form is in edit mode

  37.        if (modalstate === 'edit'){

  38.            url += "/" + id;

  39.        }

  40.        

  41.        $http({

  42.            method: 'POST',

  43.            url: url,

  44.            data: $.param($scope.employee),

  45.            headers: {'Content-Type': 'application/x-www-form-urlencoded'}

  46.        }).success(function(response) {

  47.            console.log(response);

  48.            location.reload();

  49.        }).error(function(response) {

  50.            console.log(response);

  51.            alert('This is embarassing. An error has occured. Please check the log for details');

  52.        });

  53.    }

  54.  

  55.    //delete record

  56.    $scope.confirmDelete = function(id) {

  57.        var isConfirmDelete = confirm('Are you sure you want this record?');

  58.        if (isConfirmDelete) {

  59.            $http({

  60.                method: 'DELETE',

  61.                url: API_URL + 'employees/' + id

  62.            }).

  63.                    success(function(data) {

  64.                        console.log(data);

  65.                        location.reload();

  66.                    }).

  67.                    error(function(data) {

  68.                        console.log(data);

  69.                        alert('Unable to delete');

  70.                    });

  71.        } else {

  72.            return false;

  73.        }

  74.    }

  75. });

创建模板文件
/resources/views/index.php

  1. <!DOCTYPE html>

  2. <html lang="en-US" ng-app="employeeRecords">

  3.    <head>

  4.        <title>Laravel 5 AngularJS CRUD Example</title>

  5.  

  6.        <!-- Load Bootstrap CSS -->

  7.        <link href="<?= asset('css/bootstrap.min.css') ?>" rel="stylesheet">

  8.    </head>

  9.    <body>

  10.        <h2>Employees Database</h2>

  11.        <div  ng-controller="employeesController">

  12.  

  13.            <!-- Table-to-load-the-data Part -->

  14.            <table class="table">

  15.                <thead>

  16.                    <tr>

  17.                        <th>ID</th>

  18.                        <th>Name</th>

  19.                        <th>Email</th>

  20.                        <th>Contact No</th>

  21.                        <th>Position</th>

  22.                        <th><button id="btn-add" class="btn btn-primary btn-xs" ng-click="toggle('add', 0)">Add New Employee</button></th>

  23.                    </tr>

  24.                </thead>

  25.                <tbody>

  26.                    <tr ng-repeat="employee in employees">

  27.                        <td>{{  employee.id }}</td>

  28.                        <td>{{ employee.name }}</td>

  29.                        <td>{{ employee.email }}</td>

  30.                        <td>{{ employee.contact_number }}</td>

  31.                        <td>{{ employee.position }}</td>

  32.                        <td>

  33.                            <button class="btn btn-default btn-xs btn-detail" ng-click="toggle('edit', employee.id)">Edit</button>

  34.                            <button class="btn btn-danger btn-xs btn-delete" ng-click="confirmDelete(employee.id)">Delete</button>

  35.                        </td>

  36.                    </tr>

  37.                </tbody>

  38.            </table>

  39.            <!-- End of Table-to-load-the-data Part -->

  40.            <!-- Modal (Pop up when detail button clicked) -->

  41.            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

  42.                <div class="modal-dialog">

  43.                    <div class="modal-content">

  44.                        <div class="modal-header">

  45.                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>

  46.                            <h4 class="modal-title" id="myModalLabel">{{form_title}}</h4>

  47.                        </div>

  48.                        <div class="modal-body">

  49.                            <form name="frmEmployees" class="form-horizontal" novalidate="">

  50.  

  51.                                <div class="form-group error">

  52.                                    <label for="inputEmail3" class="col-sm-3 control-label">Name</label>

  53.                                    <div class="col-sm-9">

  54.                                        <input type="text" class="form-control has-error" id="name" name="name" placeholder="Fullname" value="{{name}}"

  55.                                        ng-model="employee.name" ng-required="true">

  56.                                        <span class="help-inline"

  57.                                        ng-show="frmEmployees.name.$invalid && frmEmployees.name.$touched">Name field is required</span>

  58.                                    </div>

  59.                                </div>

  60.  

  61.                                <div class="form-group">

  62.                                    <label for="inputEmail3" class="col-sm-3 control-label">Email</label>

  63.                                    <div class="col-sm-9">

  64.                                        <input type="email" class="form-control" id="email" name="email" placeholder="Email Address" value="{{email}}"

  65.                                        ng-model="employee.email" ng-required="true">

  66.                                        <span class="help-inline"

  67.                                        ng-show="frmEmployees.email.$invalid && frmEmployees.email.$touched">Valid Email field is required</span>

  68.                                    </div>

  69.                                </div>

  70.  

  71.                                <div class="form-group">

  72.                                    <label for="inputEmail3" class="col-sm-3 control-label">Contact Number</label>

  73.                                    <div class="col-sm-9">

  74.                                        <input type="text" class="form-control" id="contact_number" name="contact_number" placeholder="Contact Number" value="{{contact_number}}"

  75.                                        ng-model="employee.contact_number" ng-required="true">

  76.                                    <span class="help-inline"

  77.                                        ng-show="frmEmployees.contact_number.$invalid && frmEmployees.contact_number.$touched">Contact number field is required</span>

  78.                                    </div>

  79.                                </div>

  80.  

  81.                                <div class="form-group">

  82.                                    <label for="inputEmail3" class="col-sm-3 control-label">Position</label>

  83.                                    <div class="col-sm-9">

  84.                                        <input type="text" class="form-control" id="position" name="position" placeholder="Position" value="{{position}}"

  85.                                        ng-model="employee.position" ng-required="true">

  86.                                    <span class="help-inline"

  87.                                        ng-show="frmEmployees.position.$invalid && frmEmployees.position.$touched">Position field is required</span>

  88.                                    </div>

  89.                                </div>

  90.  

  91.                            </form>

  92.                        </div>

  93.                        <div class="modal-footer">

  94.                            <button type="button" class="btn btn-primary" id="btn-save" ng-click="save(modalstate, id)" ng-disabled="frmEmployees.$invalid">Save changes</button>

  95.                        </div>

  96.                    </div>

  97.                </div>

  98.            </div>

  99.        </div>

  100.  

  101.        <!-- Load Javascript Libraries (AngularJS, JQuery, Bootstrap) -->

  102.        <script src="<?= asset('app/lib/angular/angular.min.js') ?>"></script>

  103.        <script src="<?= asset('js/jquery.min.js') ?>"></script>

  104.        <script src="<?= asset('js/bootstrap.min.js') ?>"></script>

  105.        

  106.        <!-- AngularJS Application Scripts -->

  107.        <script src="<?= asset('app/app.js') ?>"></script>

  108.        <script src="<?= asset('app/controllers/employees.js') ?>"></script>

  109.    </body>

  110. </html>

模板里要加载几个js和css,看一下截图

模板里要加载几个js和css

网上找一下bootstrap+jquery+angularjs,下载一下放到目录里

完成了,现在看一下效果图

列表

列表

添加

添加

修改

修改

QQ交流群:136351212(满) 455721967

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
转载保留版权:小松博客» laravel5+angularjs使用教程
本文链接地址:https://www.phpsong.com/1964.html


来自  https://www.phpsong.com/1964.html

普通分类: