关于vue 框架与后台框架的混合使用的尝试

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

我前台选择的是 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 ExecCGIOrder allow,denyAllow from allAllowOverride 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:

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

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

后续说明:

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

转载于:https://www.cnblogs.com/Grewer/p/7441733.html

关于vue 框架与后台框架的混合使用的尝试相关推荐

基于 SpringBoot + jpa + Erupt 后台框架开发的综合签到打卡系统【100010425】
基于 SpringBoot + jpa + Erupt 后台框架开发的综合签到打卡系统一 .项目背景及需求分析用户在可靠验证下实现简化身份确认在已有用户数据库基础上传统校验方式: 直接选择 = ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
vue后端框架mysql_vue框架之前后台交互、element-ui
vue框架之前后台交互.element-ui vuex(了解) 注:可以完成任意间组件信息交互(移动端) vuex是实现任何组件间的信息交互,可以理解为全局的一个单例,为任何一个组件共享vue仓库里的 ...
.net vue漂亮登录界面_6个宝藏级Vue管理后台框架必须收藏
10月5号00:45尤小右在微博公布尚处于pre-alpha状态的Vue 3源码,主要的架构改进.优化和新功能均已完成,剩下的便是Vue 2现有功能的移植了-- 一经发布网友纷纷表示"扶我起 ...
2020最受欢迎的7个vue管理后台框架
说到使用vue做一个管理后台系统,大部分人都会使用饿了么的框架vue-element-admin,因为很方便,很快就能够搭建出来一个漂亮的系统,但是有的时候,会不满足自己的业务需求的样式,这个时候,我 ...
admi后台 vue_推荐五款Vue管理后台框架
要说目前比较流行的框架,那一定要首选Vue.js.今天给大家来推荐几个基于Vue后端管理的框架.使用这些框架能够发现我们常用的路由.状态,交互等等.这样我们只需要反复用这个代码,再加上自己少量逻辑能轻 ...
Golang Vue 后台框架 go-admin 从零开始企业级实战视频教程（33 个视频）
Golang Vue 后台框架 go-admin 从零开始企业级实战视频教程(33 个视频) Golang 作为后端应该会成为未来几年的主要趋势之一,Vue 又是用得最多的框架,go-admin 是一 ...
GitHub上的7个超棒Vue管理后台框架
说到使用vue做一个管理后台系统,大部分人都会使用饿了么的框架vue-element-admin,因为很方便,很快就能够搭建出来一个漂亮的系统,但是有的时候,会不满足自己的业务需求的样式,这个时候,我 ...

关于vue 框架与后台框架的混合使用的尝试

关于vue 框架与后台框架的混合使用的尝试相关推荐

最新文章

热门文章