关于vue 框架与后台框架的混合使用的尝试
来源:互联网 发布:网络电视遥控器失灵 编辑:程序博客网 时间:2024/06/05 14:12
这几天我在研究前台框架和后台框架融合的问题,进行了一些尝试;
我前台选择的是 vue,当然也可以选择 react 等其他 mvvm 框架,不过 vue 对于我来说是最熟悉的;
后台话,我选择的是 php 的 lumen 框架,他是laravel 的简化版,因为比较轻量,所以这也是我的选择;
先说下我这边的环境:
系统:Mac os 10.12;
服务器:apache 2.2;
php:7.0;
lumen:5.4;
vue:2.0以上;
这是 lumen 的官网 https://lumen.laravel-china.org/docs/5.3
lumen 的下载和配置,官网里已经有了,我简单说下,首先要下载 composer, 可以用命令下载最新的版本,也可以直接取 github 上下载其他版本,不过这种方法下载完后要使用命令:
composer update //下载依赖
composer update
直接用命令下载的话不需要;
记得 apache 开启重写
我这边的虚拟目录指向:
<virtualhost *:83> DocumentRoot "/Users/apple/Sites/lumen/blog/public" ServerName 127.0.0.1:80 <directory "/Users/apple/Sites/lumen/blog/public"> Options Indexes FollowSymLinks ExecCGI Order allow,deny Allow from all AllowOverride All </directory></virtualhost>
配置好 lumen 之后;
cd 到 public文件夹;
下载 vue;
这边创建 vue 项目的时候有2种选择:
1.vue init webpack-simple projectName
这是没有 router的简化版; 在在路由文件或者控制器或视图中指向对映的html 资源;
2.vue init webpack projectName
这是完整的;
在资源指向的时候通过路由来调到对应的页面
我选择的是第二种
再就是三连发
cd projectNamenpm install npm run dev
可以看到浏览器跳出了一个页面正是 vue 成功的页面;
现在东西都已经下载好了
再就是配置;
那么在 apache 中该怎么访问 vue 的项目呢;
我在网络上找了很多方案,最终还是选择了生成静态文件来进行访问,也就是:
npm run build
不过问题又来了, build 之后的修改并没有热加载;
那么在 apache 上能实现么?
我搜索了大半天,并没有发现什么能够实现的(也许是我还没发现);
现在解决的方案我想了一下 webpack 是 node 的,也只能在 npm 上热加载了(也许有其他的轮子能实现);
这里放下我的解决方案:
lumen 目录下的 /routes/web.php:
$app->get('index/{id}', 'UserController@show');
这里我添加了一个路由指向user 控制器下的 show 方法;
lumen 目录下的 /app/http/controllers/
新建的 UserController.php:
<?phpnamespace App\Http\Controllers;use App\User;use Illuminate\Http\Response;class UserController extends Controller{ public function show($id) { $content = view('hello',['message'=>'Hello LaravelAcademy']); $status = 200; $value = 'text/html;charset=utf-8'; return (new Response($content, $status)) ->header('Content-Type', $value); }}
lumen目录下的/resources/views/
新建文件hello.blade.php:
<!DOCTYPE html><html><head><title>demo</title></head><body><div>视图</div>{{$message}}{{include('Grewer/dist/index.html')}}</body></html>
开启 apache;
在浏览器上输入 http://127.0.0.1:83/index/1
但是你会发现vue 的首页静态资源加载成功了
,其他文件加载缺失败了
这个时候需要对 vue 的 /config/index.js文件进行配置:
我这边是这样修改的
assetsPublicPath: '/Grewer/dist/'
第一个路径为你的项目名称;
修改完后需要重新生成资源:
使用:
npm run build
这样打开http://127.0.0.1:83/index/1
发现已经成功了;
在就是热加载的问题;
开发的话只能在 npm run dev 上的服务器进行(也许其他的也可以,请告诉我);
使用 npm run dev 启动页面:
在该页面上进行调试;
关于跨域的问题:
在 npm 上进行的ajax 调用的借口都是apache 服务器的所以在 vue 的 index.html 上先定义好路径,比如说:
var app = { root:'http://127.0.0.1:83/' }
在 vue 页面调用接口的时候前缀就是 app.root+"index/1";
在 lumen 目录下的 /routes/web.php添加:
header("Access-Control-Allow-Origin:*");
我认为这是最简单的跨域解决跨域的方法;
现在的借口都能进行调用获得数据了,然后页面的话通过 vue 的router;
比如我在vue 项目中的/src/router/index.js 文件中新添加了一个路径
{ path: '/test', name: 'Hello', component: Hello },
与根目录指向同一个文件;
需要跳转的时候就跳转到这里:http://127.0.0.1:83/index/1#/test
在需要上线的时候就把 vue 目录下的 app.root 修改一下,再把路由中的允许跨域关掉;
再就是 npm run build;
lumen 框架的根目录可以直接指向 vue 的 index.html;
好了,这就是前台框架和后台的混合了;
写得不好或者粗浅还请见谅;
如果你有更好的方案或者轮子,可以告诉我;
我看到了 laravel 有 mix 可以使用 webpack,下次可以尝试一下
end;
- 关于vue 框架与后台框架的混合使用的尝试
- 关于vue 框架与后台框架的混合使用的尝试
- vue前端框架的使用
- 关于webpack和vue系列框架(vue-cli),后台返回本地图片的url在本地显示不出来
- 后台管理框架vue
- android 一个混合框架的使用
- 关于rails的 后台执行的框架
- 关于ORM框架的认识与使用
- 使用struts2框架来实现前台与后台的交互
- Vue框架的使用-v-model
- 服务管理框架的尝试
- 服务管理框架的尝试
- 服务管理框架的尝试
- 服务管理框架的尝试
- 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架iview
- 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element
- 前端框架vue.js系列(9):vue构造、vue组件与vue实例的关系
- Java后台SSM框架的简单使用
- TCP断点续传
- dom4j读取一个xml文件,以原格式输出
- spring-boot入门Demo
- javascript判断元素存在和判断元素存在于实时的dom中的方法
- [DP] POJ1050
- 关于vue 框架与后台框架的混合使用的尝试
- ios 多线程间通信
- 字符串split切割"."
- python实现求解列表中元素的排列和组合问题
- 2017多校联合第四场1011/hdu6181(次短路)
- 简单讲解SQL的注入以及防御
- php小tips
- 网站 博客
- 论STM32标准库程序修改为HAL库