这个月都没写博客,不是懒,居然加班了一个月,学习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;
}
最后是 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>
声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权