这几天我在研究前台框架和后台框架融合的问题,进行了一些尝试;

我前台选择的是 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 projectName

npm 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:

<?php

namespace 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;

10.21更新,关于跨域的方案已经有了更好的办法,就是  webpack 的代理proxyTable,能解决大部分问题;

后续说明:

本框架里使用的页面是 php 文件,若能直接引用 html 文件,那就可以直接引用项目 build 之后的 index.html 就可以部署项目了

关于vue 框架与后台框架的混合使用的尝试的更多相关文章

  1. 关于vue 框架与后台框架的混合使用的尝试------转载

    这几天我在研究前台框架和后台框架融合的问题,进行了一些尝试; 我前台选择的是 vue,当然也可以选择 react 等其他 mvvm 框架,不过 vue 对于我来说是最熟悉的; 后台话,我选择的是 ph ...

  2. 神奇！这款 Vue 后台框架居然不用手动配置路由

    前言 做 Vue 开发脱离不了路由,尤其是中大型项目,页面多且杂,在配置路由的时候总是会变得逐渐暴躁,因为费时,并且又没有什么太多技术含量,总觉得是在浪费时间. 另外如果接手了别人的项目,当业务有变更 ...

  3. VUE：渐进式JavaScript框架（小白自学）

    VUE:渐进式JavaScript框架 一.官网 英文 https://vuejs.org/ 中文 https://cn.vuejs.org/ 二:渐进式 即有一个核心库,在需要的时候再逐渐添加插件的 ...

  4. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  5. 基于vite2+electron12后台管理模板|Electron后台框架系统

    前一溜时间有给大家分享一个 electron+vite跨端短视频 项目.这次分享的是vite2.x和electron实现跨平台后台框架,支持国际化多语言配置.导航菜单+树形菜单两种路由菜单模式.展开/ ...

  6. 爆款预订，2022 年最值得关注的后台框架 —— Fantastic-admin

    前言 如果 2021 年你还没有听说过 Fantastic-admin ,那即将到来的 2022 年可不要再错过了. Fantastic-admin 做为一款开箱即用的 Vue 中后台管理系统框架,距 ...

  7. EasyUI+MVC-搭建后台框架

    一.EasyUI简介: jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面. 官方网站:h ...

  8. 推荐10个bootstrap及其他框架的后台管理模板

    相对于网站前台炫目多彩的设计,网址后台的设计模板貌似有点少,在这里推荐10个可以免费下载的~ 1.自适应超酷整站 win8风格的Bootstrap响应式网站后台管理模板-Apricot 2.boots ...

  9. jquery easyui+layer后台框架

    最近使用jquery easyui搭建了一个后台框架,以方便以后使用 上图先: 下载地址:CSDN下载

随机推荐

  1. EasyUI Dialog 窗体 布局记要

    通常在窗体里放置的都是表单,或者使用分栏(Tab)来陈列信息也是非常的好用.在这里特别记录一下在窗体里同时放置表单和表格的设计思路. 仅放置一个表单 通常 Dialog 里只放一个表单,而且表单的行数 ...

  2. Github Page--CSDN新人的第二选择

    我也是个CSDN新人,使用的CSDN的初衷应该和众人类似,就是想总结下平时的学习成果,或者一些想法. CSDN好的地方: 书写界面简洁,支持markdown语法 人还算多,也比较年轻 相对较活跃 内容 ...

  3. 【转载】quickLayout.css-快速构建结构兼容的web页面

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=4 ...

  4. JavaScript中的面向对象程序设计

    本文内容目录顺序: 1.Object概念讲述: 2.面向对象程序设计特点: 3.JavaScript中类和实例对象的创建: 4.原型概念: 5.原型API: 6.原型对象的具体使用:7.深入理解使用原 ...

  5. Git 工作流的正确打开方式

    前言 一直在使用git做版本控制,也一直工作很顺利,直到和别人发生冲突的时候.这才注意到git 工作流并不是那么简单.比如,之前遇到的清理历史.百度到的资料很多,重复性也很多,但实践性操作很少,我很难 ...

  6. php 守护进程类

    最近个人项目中需要后台运行任务,之前一直是用nouhp & + 重定向输出 来后台跑任务,后来觉得不好维护原始数据,同时可能也没有直接操作进程那么稳吧(没验证).废话少说,来看分析. 首先,我 ...

  7. Loadrunner Webservice接口性能测试脚本编写优化总结

    本文主要介绍使用Loadrunner Webservice接口性能测试脚本编写及优化总结. 1.Webservice协议脚本编写流程 下面介绍使用Loadrunner 11调用Webservice接口 ...

  8. 高性能 Java 缓存库 — Caffeine

    http://www.baeldung.com/java-caching-caffeine 作者:baeldung 译者:oopsguy.com 1.介绍 在本文中,我们来看看 Caffeine - ...

  9. RabbitMQ 笔记-工作队列

    工作队列的主要思想是不用等待资源密集型的任务处理完成, 为了确保消息或者任务不会丢失,rabbitmq 支持消息确信 ACK.ACK机制是消费者端从rabbitmq收到消息并处理完成后,反馈给rabb ...

  10. LeetCode 661. Image Smoother （图像平滑器）

    Given a 2D integer matrix M representing the gray scale of an image, you need to design a smoother t ...