这个月都没写博客,不是懒,居然加班了一个月,学习angularJs  然后做项目    每天早9晚12  居然习惯了(还戒掉了每天早上6点起床的坏毛病,点赞)

 

感谢各位新同事的帮助,还有其他朋友的帮助,就不一一点名了~~~

 

以后争取前后端框架通杀~

介绍下项目需求

前端:angularJs   后端 php(yii2)  提供接口

前后端 域名(端口一致)

开发的时候保证前后端完全分离,上线的时候前后端物理地址合并,yii2路由控制angular地址访问  

比如 我现在有静态地址是

http://www.xxx.com/views/views/xxx/index.html  (这个是angular的访问路径)

这个时候 我需要 这个地址能走yii的一个通用的路由  用来控制访问权限

 

实现思路:

1.angularJs 原项目地址 放到和 yii  web同级的目录下 然后执行 gulp  build 生成解析之后的 源文件

生成的源文件时

将js,css等文件放在web/views下面(稍后解释为什么放这里)

将html代码放在yii的视图文件下面 也就是 和web同级的 views 下  具体地址是 views/views   

这里要分2次放 

index.html 根文件 放在 views/ 下

其他html放在 views/views下

然后在yii的controller里面新建一个 ViewsController.php文件  

这里就解析下 刚才 js文件和html文件  为什么要放在 一个views的目录下面

用过yii的人应该知道 yii的访问模式是根据控制器调用 如果我有个views的控制器 那么默认访问的是 viwes/views的模板文件

 

 

好了 需求和实现已经介绍完毕 下面 是实现代码

环境 phpstudy   nginx+php6.5

首先nginx配置 

server {

    listen       80;

    server_name  rbacapi.game.ksyun.com;

    index index.html index.htm index.php;

    root   D:/work/rabc_ksyun.com/trunk/cpbackend/web;

 

    if (!-e $request_filename) {

        rewrite ^(.*)$ /index.php?r=$1 last;

#rewrite ^(.*)\.html$ /views/index last;

        break;

    }

 

 

#if ($request_filename ~* (.*)\.html ){

# rewrite ^/ /view/index last;

#}

 

#location ~ .*\.(html|htm)$ {

# rewrite ^(.*).html$ /views/index last;

#}

    location ~ .*\.(php|php5)?$ {

fastcgi_pass   127.0.0.1:9000;

fastcgi_index  index.php;

fastcgi_split_path_info  ^((?U).+\.php)(/?.+)$;

fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;

fastcgi_param  PATH_INFO  $fastcgi_path_info;

fastcgi_param  PATH_TRANSLATED  $document_root$fastcgi_path_info;

include        fastcgi_params;

    }

 

    access_log  logs/access_rbacapi.game.ksyun.com.log;

    error_log   logs/error_rbacapi.game.ksyun.com.log;

}


yii 配置文件 
配置路由匹配
        'urlManager' => [ 
'enablePrettyUrl' => true,
'showScriptName' => false,
//                 'enableStrictParsing' => true,
//   'suffix' => '.html',
// 路由管理
'rules' => [
                'views/<name:.*>' => 'views/index',
                '<controller:\w+>/' => '<controller>',
//                 '<controller:\w+>/<id:\d+>' => '<controller>/view',
                '<controller:\w+>/<action:\w+>/<id:\d+>' => '<controller>/<action>',
                '<controller:\w+>/<action:\w+>' => '<controller>/<action>',
//                'view/(?P<$name>.*?)'=>'views/index',
                /* [
                    'class' => 'yii\rest\UrlRule',
                    'controller' => 'gameengine'
                ] */
            ]
],
    ],

ViewController.php
    public function actionIndex()
    {
        //这里大家自己写逻辑来判断 比如用户权限之类的 我就不详细写了
        $str = "/views/views/rbacModules/priv/list.html";
        if($_SERVER["REQUEST_URI"] == $str){
            echo 404;die;
        }
        
//         return $this->renderPartial("index"); 
//这里是加载文件   用url地址当文件物理地址加载
        return  $this-> renderFile("@app".$_SERVER["REQUEST_URI"]) ;
    }

 

 

最后是 gulp的配置文件  这个文件我测试修改了好多次 才弄到上面的规划的路径生成

 

var gulp = require('gulp'),

stylus = require('gulp-stylus'),

imerge = require('gulp-imerge'),

promise = require('bluebird'),

tap = require('gulp-tap'),

rimraf = promise.promisify(require('rimraf')),

uglify = require('gulp-uglify'),

minifyCss = require('gulp-minify-css'),

nobone = require('nobone'),

path = require('path'),

_ = require('lodash'),

nocache = require('gulp-nocache'),

port = 5002;

 

process.env.NODE_ENV = 'development'//'product' //'development'

 

var basePath = './src',

paths = {

css: basePath + '/styles/**/*.@(css|styl)',

js: basePath + '/scripts/**/*.js',

images: basePath + '/images/**/*',

tpl: basePath + '/views/**/*.html',

index: basePath + '/index.html',

staticDest: './web/views'

},

nocacheConf = {

sourceContext: 'src',

outputContext: './web/views'

};

 

gulp.task('clean', function(){

return promise.all([

//rimraf(paths.staticDest)

rimraf(paths.staticDest+"/styles"),

rimraf(paths.staticDest+"/scripts"),

rimraf(paths.staticDest+"/../../views/views"),

//rimraf(paths.staticDest + "/../wiews")

]);

});

 

gulp.task('build:css', ['clean'], function(){

var nocacheSprite = _.once(function(){

return gulp.src(paths.sprites)

.pipe(nocache(_.extend({

type: 'media',

dest: paths.staticDest + (process.env.NODE_ENV == 'development' ? '/images/sprites/[name].[hash:6].[ext]' : '/images/sprites/[name].[hash:8].[ext]')

}, nocacheConf)))

.pipe(gulp.dest(function(file){

return file.base;

}));

});

 

return gulp.src(paths.css)

.pipe(stylus())

.pipe(imerge({

spriteTo: basePath + '/images/sprites',

sourceContext: 'src',

outputContext: 'src',

defaults: {

padding: 5

}

}))

// .pipe(tap(nocacheSprite))

// .pipe(nocache(_.extend({

// type: 'css',

// dest: paths.staticDest + (process.env.NODE_ENV == 'development' ? '/styles/[name].[hash:6].[ext]' : '/styles/[name].[hash:8].[ext]')

// }, nocacheConf)))

.pipe(minifyCss({

compatibility: 'ie8'

}))

// .pipe(gulp.dest(function(file){

// return file.base;

// }));

.pipe(gulp.dest(paths.staticDest + '/styles'));

});

 

gulp.task('build:media', ['build:css'], function(){

return gulp.src(paths.images)

// .pipe(nocache(_.extend({

// type: 'media',

// dest: paths.staticDest + (process.env.NODE_ENV == 'development' ? '/images/[name].[hash:6].[ext]' : '/images/[name].[hash:8].[ext]')

// }, nocacheConf)))

// .pipe(gulp.dest(function(file){

// return file.base;

// }));

.pipe(gulp.dest(paths.staticDest + '/images'));

});

 

gulp.task('build:js', ['build:media'], function(){

return gulp.src(paths.js)

.pipe(uglify())

.pipe(gulp.dest(paths.staticDest + '/scripts'));

});

 

gulp.task('build:tpl', ['build:js'], function(){

gulp.src(paths.index)

.pipe(gulp.dest(paths.staticDest+'/../../views/'));

 

return gulp.src(paths.tpl)

.pipe(gulp.dest(paths.staticDest + '/../../views/views'));

});

 

gulp.task('build:kindeditor', function(){

return gulp.src(basePath + '/scripts/lib/kindeditor/**/**/*')

.pipe(gulp.dest(paths.staticDest + '/scripts/lib/kindeditor'));

});

 

gulp.task('build:uploadify', function(){

return gulp.src(basePath + '/scripts/lib/jquery-uploadify/*.swf')

.pipe(gulp.dest(paths.staticDest + '/scripts/lib/jquery-uploadify'));

});

 

gulp.task('watch', function(){

gulp.watch(paths.css, ['build:css']);

});

 

gulp.task('build', ['build:css', 'build:media', 'build:js', 'build:tpl']);

 

gulp.task('server', function(){

var nb = nobone({

proxy: {},

renderer: {},

service: {}

});

 

var staticDirectory = process.env.NODE_ENV == 'development' ? 'src' : 'web/views';

 

nb.service.use(nb.renderer.static(staticDirectory));

 

nb.service.use(function(req, res){

console.log('http://rbacapi.game.xx.com' + req.originalUrl)

nb.proxy.url(req, res, 'http://rbacapi.game.xx.com' + req.originalUrl);

});

 

nb.service.listen(port, function(){

nb.kit.log('server is listening port ' + port);

});

});

 

gulp.task('default', ['server']);

 

 

 

最后介绍下angular实现的功能  这里前端分内部路由访问 和外部 iframe访问 

在外部 iframe 访问的时候 写一个公共的angular路由 

点击导航的时候 将url传到 $roorScope  (这里不用$scope的原因是我每次点击 清除了缓存,因为模块相同 不清除缓存的话 栏目不能点击)

 

.state('main.iframeModules', iframeModulesRouter.modulesList)

.state('main.iframeModules.modulesList', iframeModulesRouter.modulesList)

 

 

define([], function(){

'use strict';

var ctrl = ['$scope', '$state', 'factory', 'mainService', '$cookies','$sce','$injector','$rootScope', function($scope, $state, factory, mainService, $cookies,$sce,$injector,$rootScope){

$injector.get('$templateCache').removeAll();

console.log("接收:"+$rootScope.navV);

$scope.myURL = $sce.trustAsResourceUrl($rootScope.navV);

// angular.forEach($scope.navList, function(v) {  

// angular.forEach(v.subNavList, function(vv) {

// if(vv.id ==$scope.navV){

// }

// });

// });

}];

 

var controller = {

module: 'iframeModules',

name: 'iframeModulesListController', 

ctrl: ctrl

};

 

return controller;

}

);

 

define([], function(){

'use strict';

 

var router = {};

 

router = {

modulesList: {

url: '/iframeModules',

templateUrl: 'views/iframeModules/modulesList/list.html',

controller: 'iframeModulesListController'

}

};

 

return router;

});

 

define([], function(){

'use strict';

 

var router = {};

 

router = {

rbacmodules: {

url: '/iframeModules',

templateUrl: 'views/iframeModules/list.html'

}

};

 

return router;

});

 

<iframe ng-src='{{myURL}}' marginheight="0" marginwidth="0" frameborder="0"   width=100% height=100%  id="iframepage" name="iframepage" onLoad="iFrameHeight()" ></iframe>

<script type="text/javascript" language="javascript">   

function iFrameHeight() {

    var ifm= document.getElementById("iframepage");

_windowHeight = $($(document)).height(),//获取当前窗口高度 

_windowWidth = $($(document)).width(),//获取当前窗口宽度 

    ifm.width = _windowWidth-300;

    ifm.height = _windowHeight-200;

}   

</script>

 

 

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权