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

这里的技术是共享的

You are here

首页

laravel5+angularjs使用教程

星期四, 2019-08-08 09:31 — adminshiping1

最近在看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

普通分类: 
laravel
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2