Vue引入静态资源

Vue引入静态资源<a href="https://cli.vuejs.org/zh/guide/html-and-static-assets.html#%E5%A4%84%E7%90%86%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90">官方文档</a>&nbsp;

1、在js被导入或者在vue的template以及css中通过相对路径引入的,这样会被webpack处理

 2、放在public通过绝对路径引入,这类资源将会直接被拷贝 

引入图片示例 

1、相对路径引入

  

<img src="../assets/img/logo.png" />
//经过编译之后
<img src="data:image......." /> 

2、使用v-bind指令  

<img :src="require('../assets/img/logo.png')" />
<img :src="imgUrl" />
//在js定义imgUrl属性
imgUrl:'http://blog.phpfs.com/xxxx.png'

使用:src是v-bind:src的缩写,这样的是后面是可以写变量,注意如果变量是相对路径引入的图片,这样的也不会编译

3、使用绝对路径引入 

<img src="/static/img/icon.png" />
编译后
<img src="/static/img/icon.png" />

用绝对路径引入图片资源都会简单复制到编译后的目录中,不经过webpack处理。

Vue配置多模块

修改build/utils.js

const glob = require('glob')
const modulesPath = path.resolve(__dirname, "../src/modules")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const merge = require('webpack-merge')

// 多入口配置
exports.entries = function () {
  // 获取modules文件夹下所有目录下的main.js文件--入口文件
  var entryFiles = glob.sync(modulesPath + '/*/*.js')
  var map = {}
  // 遍历入口文件
  entryFiles.forEach((filepath) => {
    var filename = filepath.substring(filepath.lastIndexOf('/') + 1, filepath.lastIndexOf('.'))
    map[filename] = filepath
  })
  return map
}
// 多入口页面输出
exports.htmlPlugin = function () {
  var entryHtml = glob.sync(modulesPath + '/*/*.html')
  var arr = []
  entryHtml.forEach((filepath) => {
    var filename = filepath.substring(filepath.lastIndexOf('/') + 1, filepath.lastIndexOf('.'))
    var conf = {
      template: filepath,
      filename: filename + '.html',
      inject: true,
      chunks: ['manifest', 'vendor', filename]
    }
    // 生产环境特殊配置
    if (process.env.NODE_ENV === 'production') {
      conf = merge(conf, {
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotos: true
        },
        chunksSortMode: 'dependency'
      })
    }
    arr.push(new HtmlWebpackPlugin(conf))
  })
  return arr
}

修改webpack.base.conf.js 

只修改entry配置

 // 配置多入口
 entry: utils.entries(),

修改webpack.dev.conf.js 

屏蔽原有的HtmlWebpackPlugin

添加如下代码

修改wenpack.prod.conf.js(参考webpakc.dev.conf.js修改)

【代码下载】

demo

使用步骤:

1、打开目录执行yarn install

2、执行yarn run dev

Session回收机制

文件存储
session.save_handler = files
session.save_path= “/var/lib/php/sessions”
session.gc_probability = 0
session.gc_divisor = 1000
session.gc_maxlifetime = 1800
文件存储清理的方案:
session.gc_divisor 与 session.gc_probability 合起来定义了在每个会话初始化时启动 gc(garbage collection 垃圾回收)进程的概率。此概率用 gc_probability/gc_divisor 计算得来。例如 1/100 意味着在每个请求中有 1% 的概率启动 gc 进程

Redis存储
session.save_handler = redis
session.save_path=”tcp://127.0.0.1:6379″

session.gc_maxlifetime = 1800

Redis存储清理的方案是按照gc_maxlifetime配置的时间来设定session 的ttl

Vue自定义组件-动态组件

<template>
  <div class="page-list">
    <span class="list-txt">{{ title }}</span>
    <!-- <ex-btn
      v-if="current == 'ex-btn'"
      v-on:myClick="myClick"
      :msg="msg"
    ></ex-btn>
    <ex-btn2 v-else v-on:myClick="myClick" :msg="msg">
      <img slot="icon" src="xxx.png" />
    </ex-btn2> -->
    <component
      keep-alive
      :is="current"
      v-on:myClick="myClick"
      :msg="msg"
    ></component>
  </div>
</template>
<script>
import btn from './button.vue'
import btn2 from './but2.vue'

export default {
  props: {
    title: { default: '标题' },
    msg: { default: '按钮' },
    current: { default: 'ex-btn' }
  },
  components: {
    'ex-btn': btn,
    'ex-btn2': btn2
  },
  methods: {
    myClick: function () {
      console.log('按钮被点击')
      this.$emit('myClick')
    }
  }
}
</script>

//使用
<template>
  <div id="list">
    <ex-list current="ex-btn2" title="标题1" msg="按钮1"></ex-list>
    <ex-list current="ex-btn" title="标题2" msg="按钮2"></ex-list>
    <ex-list
      current="ex-btn"
      title="标题3"
      msg="按钮3"
      v-on:myClick="test"
    ></ex-list>
    <ex-list
      ref="btnlist"
      current="ex-btn"
      title="标题4"
      msg="按钮4"
      v-on:myClick="test"
    ></ex-list>
  </div>
</template>
<script>
import myList from '../../components/demo/list.vue'
export default {
  name: 'list',
  components: {
    'ex-list': myList
  },
  methods: {
    test: function () {
      console.log('自定义')
      console.log('属性', this.$children)
      console.log('属性', this.$refs.btnlist.title)
    }
  },
  beforeCreate: function () {
    console.log('beforeCreate')
  }, // 组件实例化之前
  created: function () {
    console.log('created')
  }, // 组件实例化了
  beforeMount: function () {
    console.log('beforeMount')
  }, // 组件写入dom结构之前
  mounted: function () { // 组件写入dom结构了
    console.log('mounted')
    console.log(this.$children)
    console.log(this.$refs)
  },
  beforeUpdate: function () {
    console.log('beforeUpdate')
  }, // 组件更新前
  updated: function () {
    console.log('updated')
  }, // 组件更新比如修改了文案
  beforeDestroy: function () {
    console.log('beforeDestroy')
  }, // 组件销毁之前
  destroyed: function () {
    console.log('destroyed')
  }// 组件已经销毁
}
</script>

Vue自定义组件-事件使用

<!-- 组件 -->
<template>
  <button @click="btnClickEvent">
    <!-- 插件属性 -->
    <slot name="icon"></slot>
    <span>{{ msg }}</span>
  </button>
</template>

<script>
export default {
  props: {
    msg: {
      default: '下载'
    }
  },
  methods: {
    btnClickEvent: function () {
      // 执行统一事件
      console.log(this.msg)
      // 触发父组件自定义事件
      this.$emit('myClick')
    }
  }
}
</script>
组件使用
<template>
  <div id="myButton">
    <ex-btn v-on:myClick="doSth1" v-bind:msg="msg1"></ex-btn>
    <ex-btn v-on:myClick="doSth2" v-bind:msg="msg2"></ex-btn>
    <ex-btn v-on:myClick="doSth3" v-bind:msg="msg3">
      <img slot="icon" class="ico" src="@/assets/img/setting.png" />
    </ex-btn>
  </div>
</template>
<script>
import btn from '../../components/demo/button.vue'
export default {
  name: 'myButton',
  components: {
    'ex-btn': btn
  },
  data: function () {
    return { msg1: '变量1', msg2: '变量2', msg3: '变量3' }
  },
  methods: {
    doSth1: function () {
      console.log('方法1')
    },
    doSth2: function () {
      console.log('方法2')
    },
    doSth3: function () {
      console.log('方法3')
    }
  }
}
</script>

Vue自定义组件-属性使用

自定义组件Button

<template>
  <button>
    <span>{{ msg }}</span>
  </button>
</template>

<script>
export default {
  props: {
    msg: {
      default: '下载'
    }
  }
}
</script>

组件使用

<template>
  <div id="myButton">
    <ex-btn :msg="msg1"></ex-btn>
    <ex-btn v-bind:msg="msg2"></ex-btn>
    <ex-btn msg="按钮"></ex-btn>
  </div>
</template>
<script>
// 引入自定义组件
import btn from '@/components/demo/button.vue'
export default {
  name: 'myButton',
  components: {
    'ex-btn': btn
  },
  data: function () {
    return { msg1: '变量1', msg2: '变量2', msg3: '变量3' }
  }
}
</script>

Nginx配置Thinkphp

server {
    listen 80;
    root /data/web/html/blog.phpfs.com;
    index index.php index.html index.htm;
    server_name blog.phpfs.com;
    access_log /data/logs/nginx/blog.phpfs.com-access.log main;
    error_log /data/logs/nginx/blog.phpfs.com-error.log;

    location = /favicon.ico {
        log_not_found off;
        access_log off;
    }
    location = /robots.txt {
        allow all;
        log_not_found off;
        access_log off;
    }
    location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico)$ {
        #access_log off;
        expires 30d;
    }

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
    location ~ \.php$ {
        try_files $uri /index.php =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/dev/shm/php5.6-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

}

Laya发布模式区分

1内嵌模式

该模式导出时会将页面的配置信息导出为项目代码文件

 export class RuntimeTestUI extends Scene {
        public static  uiView:any ={"type":"Scene","props":{"width":640,"height":1136},"compId":2,"child":[{"type":"Image","props":{"y":0,"x":0,"width":206,"skin":"comp/image.png","name":"Image_Bg","height":170},"compId":5}],"loadList":["comp/image.png"],"loadList3D":[]};
        constructor(){ super()}
        createChildren():void {
            super.createChildren();
            this.createView(RuntimeTestUI.uiView);
        }
    }

2加载模式

会将所有页面的配置信息导出为json格式的一个文件

export class RuntimeTestUI extends Scene {
        constructor(){ super()}
        createChildren():void {
            super.createChildren();
            this.loadScene("demo1/RuntimeTest");
        }
    }

3分离模式

UI界面上所有组件的属性、界面布局等逻辑与界面内容分离开,分离模式也是导出为json格式,但有所区别的是分离模式会将每一个页面独立导出,会产生多个json文件。

4文件模式

不生成场景类,进一步减少文件大小,使用的时候用Scene.load方式加载。区别于前三种最大的的不同就是,文件模式不能直接调用场景内的变量,需要getchild获取之后进行操作。前三种的场景类里声明了变量,有代码提示直接可以操作内部的变量。

MySQL数据表生成Wiki格式数据字典

<?php
$dbms='mysql';     //数据库类型
$host='localhost'; //数据库主机名
$dbName='joyous';    //使用的数据库
$user='test';      //数据库连接用户名
$pass='123456';          //对应的密码
$dsn="$dbms:host=$host;dbname=$dbName";

$table = array(
    't_user' => '用户表',
    't_user_info' => '用户扩展信息表',
 
);
try {
    $dbh = new PDO($dsn, $user, $pass); //初始化一个PDO对象
    $dbh->query('set names utf8');
    foreach ($table as $k => $v) {
        echo "### {$k}({$v})\n\n";
        $res = $dbh->query("SHOW FULL FIELDS FROM {$k}");
        $res->execute();
        $result = $res->fetchAll();
        echo "| 参数名称 | 类型 | 非空约束 | 备注说明|\n| ------ | ------ | ------ | ------ |\n";
        foreach ($result as $row)
        {
            echo "|{$row[0]}|{$row[1]}|{$row[3]}|{$row[8]}|\n";
        }
        echo "\n\n";
    }
} catch (PDOException $e) {
    echo $e->getMessage();
}