Laravel--入门篇（开发团队任务管理系统，实战入门，项目分

添加创建项目的模态框（bootstarp 里的 Modal ）

扩展知识：

模态框 Modal

Fontawesome

一、 修改首页，welcome 通过路由来获知解析的是那个模板视图文件

welcomeBlade.png

创建 projects 文件目录，创建_createProjectModal.blade.php 视图模板文件，减轻页面代码量，而且这个添加按钮可以多处调用。

_createProjectModal.png

** 修改完后，效果 **

效果.png

二、 前端资源的管理与调用 （Elixir）

• 1、安装 Elixir 需要安装nodejs环境
• 2、安装 Gulp 自动化构建工具

安装NodeJS环境 NodeJS

NodeJS

• 1、本地下载好 nodejs 源码文件后，利用 winSCP 软件上传到 ubuntu系统
• 2、ubuntu 系统利用 wget https://nodejs.org/dist/v4.5.0/node-v4.5.0.tar.gz 直接下载，因为下载源在国外，所以可能要翻墙出去下载 或者 网速可以！

这里我使用的是 方法一；

• 上传到 /home/user/ 目录下， 解压到当前目录 tar -zxvf node-v4.5.0.tar.gz
• 这里使用的是编译安装，所以需要用到 g++

sudo apt-get install g++
cd node-v4.5.0
./configure   // 配置下
make && make install

• 在执行，make && make instal 时可能会遇到一些 依赖库版本过低，依依更新，然后重新编译安装

警告：

npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.

依依更新：

root@ServerTwo:/var/www/taskmanager# npm install minimatch
root@ServerTwo:/var/www/taskmanager# npm install lodash
root@ServerTwo:/var/www/taskmanager# npm install graceful-fs

make && make install

安装 Gulp 自动化构建工具

全局安装： Gulp

root@ServerTwo:/var/www/taskmanager# npm install --global gulp-cli
/usr/local/bin/gulp -> /usr/local/lib/node_modules/gulp-cli/bin/gulp.js
gulp-cli@1.2.2 /usr/local/lib/node_modules/gulp-cli
├── lodash.isstring@4.0.1
├── mute-stdout@1.0.0
├── lodash.isfunction@3.0.8
├── lodash.isplainobject@4.0.6
├── lodash.sortby@4.7.0
├── interpret@1.0.1
├── pretty-hrtime@1.0.2
├── archy@1.0.0
├── tildify@1.2.0 (os-homedir@1.0.1)
├── fancy-log@1.2.0 (time-stamp@1.0.1)
├── v8flags@2.0.11 (user-home@1.1.1)
├── semver-greatest-satisfied-range@1.0.0 (semver-regex@1.0.0, semver@4.3.6)
├── wreck@6.3.0 (boom@2.10.1, hoek@2.16.3)
├── gulplog@1.0.0 (glogg@1.0.0)
├── chalk@1.1.3 (escape-string-regexp@1.0.5, ansi-styles@2.2.1, supports-color@2.0.0, strip-ansi@3.0.1, has-ansi@2.0.0)
├── yargs@3.32.0 (decamelize@1.2.0, camelcase@2.1.1, y18n@3.2.1, window-size@0.1.4, cliui@3.2.0, os-locale@1.4.0, string-width@1.0.2)
├── matchdep@1.0.1 (stack-trace@0.0.9, resolve@1.1.7, findup-sync@0.3.0, micromatch@2.3.11)
└── liftoff@2.3.0 (lodash.mapvalues@4.6.0, rechoir@0.6.2, extend@3.0.0, flagged-respawn@0.3.2, resolve@1.1.7, fined@1.0.1, findup-sync@0.4.2)

然后进入项目跟目录，执行 npm install 根据 package.json 依赖包详情文件 安装

root@ServerTwo:/var/www/taskmanager# npm install

开启sass.png

将app.sass 文件里的注释给去掉!在进行编译! (项目根目录 gulp 下)
最后 一步 我来编译 下

root@ServerTwo:/var/www/taskmanager# gulp
[20:03:25] Using gulpfile /var/www/taskmanager/gulpfile.js
[20:03:25] Starting 'default'...
[20:03:25] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/app.scss
   

• composer.json php 依赖包详情
• package.json nodejs 依赖包详情

修改完后，我们来修改下我们的页面！更换掉css、js 、font这些国外的前端资源 cdn！

修改Gulp配置文件

gulpfile.php

修改layout文件目录下 app.blade.php 视图模板

app.blade.php

视图模板下，修改所有 有关外国的cdn！修改好后，因为需要加载 js目录下的js文件进来，需要在项目跟目录下 执行下 Glup ，执行完 就可以提高访问速度！

使用 Laravel Colletive form 新建项目表单

Laravel 资源集合 第三方组件

Laravel Collective

注意：
由于 Html 表单元素写起来比较麻烦复杂，这里 Laravel 提供简便地写法，使用第三方组件 laravelcollective/html（原本这个组件是laravel自带的，随着laravel功能的不断增多，就划分给第三方维护去了）

• 首先，根据上方 Laravel 资源集合网站上 找到这个组件

FormHtml.png

• 根据 文档 来添加、安装组件 和 配置组件 使其生效

configApp.png

** 配置完 composer.json 文件后 执行以下代码 **

项目根目录下

twitch@ServerTwo:/var/www/taskmanager$ composer update
Loading composer repositories with package information
Updating dependencies (including require-dev)
  - Removing psr/log (1.0.0)
  - Installing psr/log (1.0.1)
    Downloading: 100%         

  - Installing laravelcollective/html (v5.2.4)
    Downloading: 100%         

Writing lock file
Generating autoload files
> Illuminate\Foundation\ComposerScripts::postUpdate
> php artisan optimize
Generating optimized class loader

** 安装完组件后，需要通知laravel安装了该组件，需要加载进来 **

configApp1.png configApp2.png

** 最后我们来编写下 _createProjectModal.blade.php 模态框 公共文件**

laravelcollective/html

注册项目分类路由（route resource）并完善新建项目表单路由

Route

因为，新建项目是需要该网站的用户才允许新建的，这里我们使用了Laravel自带的Auth，所以在访问网站welcome欢迎页的时候，使用HomeController控制器，该控制进入的时候，首先需要进入构造函数来判定是否登录！

HomeController

这个时候我再次访问，就会跳转到登录页了，登录才允许看到项目发布页！

我们再次修改下提交表单

Form

定义表单提交地址，使用 route 方式以后更改域名也无需修改这里，带有文件上传，需要添加 'files' => 'true';

Projects控制器

ProjectsControler

根据ORM映射关系，相互之间的关系！

问题

这个时候你提交下，会报些错误，因为ORM的关系，传递的数据会带着很多过来，所以在Model里需要指定接收的数据，其他的过滤，也是防止了别人带数据直接过来操作！

Project Model

注意：因为之前设计表的时候缩略图也是必须上传的，所以你这边保存会报错，因此我们来修改下表迁移文件，使用 nullable() 允许为null！

Project migration

然后使用命令:

php artisan migrate:refresh

migrate:refresh命令将会先回滚所有数据库迁移，然后运行migrate命令。这个命令可以有效的重建整个数据库.