月度归档： 2018年2月

vue-cli+webpack项目修改项目名称的问题

vue-cli+webpack项目修改项目名称问题：

使用vue-cli+webpack创建的项目，修改文件名称或者更改文件的位置，运营时会报错，是因为npm项目，在安装依赖（node_nodules）时，会记录当前的文件路径，当修改之后就无法正常启动。

解决办法：

1 删除 node_modules 文件夹（如果修改项目名称，需要在在package.json中修改对应的name）

2 重新安装依赖 npm install

3 启动项目 npm run dev

[Laravel5.4+自身集成Vue2初体验–续]laravel5.4的laravel-mix踩坑记

Laravel5.4 其实坑不少、这里说明一下

第一坑:cross-env目录不对

编译的时候会报错:node_modules/cross-env/bin/cross-env.js: No such file or directory

修改方案是修改package.json下面的node_modules/cross-env/bin/cross-env.js为node_modules/cross-env/dist/bin/cross-env.js  目录名称写错了

第二坑:laravel-mix版本太低

fallbackLoader option has been deprecated – replace with “fallback”
loader option has been deprecated – replace with “use”
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
– configuration.output.path: The provided value “public” is not an absolute path!

要把package.json里面laravel-mix版本改成

“laravel-mix”: “^0.10.0”,

然后再执行 npm install

第三坑:X-CSRF-TOKEN问题

第一次使用，通常会遇到一个X-CSRF-TOKEN的错误，编译完成，前端页面启动过程抛异常

Uncaught TypeError: Cannot read property ‘csrfToken’ of undefined
at Object.<anonymous> (app.js:40921)
at __webpack_require__ (app.js:20)
at Object.<anonymous> (app.js:11198)
at __webpack_require__ (app.js:20)
at Object.<anonymous> (app.js:40943)
at __webpack_require__ (app.js:20)
at app.js:66
at app.js:69

查看编译后的app.js，发现有一段对X-CSRF-TOKEN的处理，默认是从window.Laravel中获取

window.axios.defaults.headers.common = {
 'X-CSRF-TOKEN': window.Laravel.csrfToken,
 // 'X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
 'X-Requested-With': 'XMLHttpRequest'
};

这个变量没有设置，因此报错。

顺藤摸瓜，查源头，入口文件app.js 引用了一个资源文件 resources/assets/js/bootstrap.js，其中对X-CSRF-TOKEN有定义

window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

解决方案:

因为很多时候中间件也会检查CSRF-TOKEN，所以通常我们都习惯在模板文件中设置meta标记来保存CSRF-TOKEN，因此从这里统一获取，处理方式一致

<meta name=“csrf-token“ content=“{{ csrf_token() }}“>

因此，修改bootstrap.js对应代码为：

window.axios = require('axios'); window.axios.defaults.headers.common = {
 'X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]').getAttribute('content'), 
 'X-Requested-With': 'XMLHttpRequest' };

Laravel5.4+自身集成Vue2初体验

Laravel 本身对前端开发就提供了很多支持，5.3 更是直接引入了 Vue 这个目前最流行的轻量级前端框架,这篇文章使用一个简单的例子说明一下怎么在laravel中直接使用vue，从而让让前端开发和后端无缝。

首先声明: 在测试这个5.4版本的时候遇到过很多坑，将集中在这一篇文章中说明

[Laravel5.4+自身集成Vue2初体验–续]laravel5.4的laravel-mix踩坑记

1.新建Laravel5.4项目，安装依赖包，配置虚拟主机

我这里下载laravel包直接是在网页下的，当然你也可以使用Compose来下载新建项目

composer create-project --prefer-dist laravel/laravel Laravel54 // 新项目名为 Laravel54
cd Laravel54 //切换项目目录
npm install // 速度慢的请自行切换淘宝镜像 cnpm安装

安装完前端依赖之后目录大致如下:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

配置虚拟主机这里不作过多介绍，入口目录为public

2.修改路由文件，新建hello.vue组件

修改 routes/web.php 文件为:

Route::get('/', function () {
    return view('index');
});

在 resources/assets/js/components 目录下新建 Hello.vue 文件:

<template>
    <div>
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: 'Hello World'
        }
    }
}
</script>

3.修改 app.js 文件，渲染组件，新建 Laravel 视图文件，加入vue组件

//Vue.component('example', require('./components/Example.vue'));//注释掉原来的默认组件
Vue.component('hello', require('./components/Hello.vue'));//引入hello组件

在 resources/views 目录下新建 index.blade.php 文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div id="app">
    <!--这里加入hello组件-->
    <hello></hello>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

说明：你可能在其他教程中看到有的在使用 assets 函数，这两个函数的主要区别就是 assets 函数会直接使用所填路径去 public 文件夹下找文件，而 mix 函数会自动加载带 hash 值的前端资源。这是和 Laravel 前端资源的缓存刷新相关的

4.编译运行

npm run dev

thinkphp5、php使用redis实现session共享替代session(分布式)

原生写法

方法一：
找到配置文件php.ini，修改为下面内容，保存并重启服务

session.save_handler = redis
session.save_path = "tcp://127.0.0.1:6379"

方法二：
直接在代码中加入以下内容：

ini_set("session.save_handler", "redis");
ini_set("session.save_path", "tcp://127.0.0.1:6379");

注：如果配置文件redis.conf里设置了连接密码requirepass，save_path需要这样写tcp://127.0.0.1:6379?auth=authpwd ，否则保存session的时候会报错。

示例代码：

//ini_set("session.save_handler", "redis");
//ini_set("session.save_path", "tcp://127.0.0.1:6379");
session_start();
//存入session
$_SESSION['class'] = array('name' => 'toefl', 'num' => 8);
//连接redis
$redis = new redis();
$redis->connect('127.0.0.1', 6379);
//检查session_id
echo 'session_id:' . session_id() . ';
//redis存入的session（redis用session_id作为key,以string的形式存储）
echo 'redis_session:' . $redis->get('PHPREDIS_SESSION:' . session_id()) . ';

//php获取session值
echo 'php_session:' . json_encode($_SESSION['class']);

thinkphp5框架

'session' => [
    'prefix'     => 'module',
    'type'       => 'redis',
    'auto_start' => true,
     // redis主机
    'host'       => '127.0.0.1',
     // redis端口
    'port'       => 6379,
     // 密码
    'password'   => '',
]