雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码
分享到：

前端之旅 第9页

去分类设置中添加分类描述吧

js 如何获取input框选择视频的首帧图

2019-09-22admin阅读(2200)评论(0)

这个功能经常用到, 代码逻辑记录一下:

首选我们在change事件之后操作:

1
2
3
4
5
6
7
8
let files = file.target.files;
if (files.length > 0) {
  let img = new Image();
  this.thumbUrl = img.src = URL.createObjectURL(files[0]);
  setTimeout(()=> {
    this.viedoFirst(files[0]);
  })
}

viedoFirst 方法:

1
2
3
4
5
6
7
8
9
10
11
viedoFirst (files) {
  var scale = 0.8;
  var video = document.getElementById("videoHide");
  video.addEventListener('loadeddata', () => {
    var canvas = document.createElement("canvas");
    canvas.width = video.videoWidth * scale;
    canvas.height = video.videoHeight * scale;
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    this.firstBaseData = canvas.toDataURL("image/png");
  });
},

最终视频的首帧图已经保存在我们 this.firstBaseData 里面了, 简单效果如下:

Snipaste_2019-09-22_00-00-19

这是刚从视频获取到的首帧图!

Electron和React结合开发代理IP获取及检测工具

2019-08-05admin阅读(1794)评论(0)

近期, 为了学习React相关知识,简单开发了一个小工具, 使用的技术栈是:

Electron + React + PHP, UI框架使用了element, 大概长这样!

Snipaste_2019-08-05_11-46-34

具体的开发思路如下

首先我使用react启动服务, 然后使用 Electron 打开服务URL,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 1237,
    height: 760,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      javascript: true,
      plugins: true,
      nodeIntegration: true, // 是否集成 Nodejs
      webSecurity: false,
    }
  })
  // and load the index.html of the app.
  // mainWindow.loadFile('index.html')
  if (isModel) {
    mainWindow.loadURL(url.format({
      pathname: path.join(__dirname, './build/index.html'),
      protocol: 'file:',
      slashes: true
    }))
  } else {
    mainWindow.loadURL('http://localhost:3000/')
  }
  // TODO 打开控制台
  mainWindow.webContents.openDevTools()
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
  winApp.init(mainWindow, app)
}
app.on('ready', createWindow)

当借口请求完成之后, 循环代理IP, 使用 Electron 的 remote 来动态调用 Electron 里面定义的检测服务! 检测完成之后, 挨个更新 数据, 显示结果

1
2
3
4
5
6
7
8
9
10
checkProxyFun (val, index) {
const remote = window.electron.remote;
let testUrl = 'https://www.baidu.com/';
remote.app.proxyTest(testUrl,'http://'+val.proxy)
.then((res,body,head)=> {
this.setProxy(index,'check_result', 1)
}).catch(e =>{
this.setProxy(index,'check_result',2)
});
}

remote 方法定义如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/**
* Created by PhpStorm.
* User:  iyahe@qq.com (天明)
* Date: 2019/8/1 0001
* Time: 下午 18:10
* Description:
*/
var request = require('superagent');
var agents = require('./config/ua')
require('superagent-proxy')(request);
let proxy = {
init (web, app) {
// TODO 挂载方法到 app 模块上，供 remote 模块使用
app.proxyTest = function (
$url, $proxy = '', $option = {
timeout: {
response: 3000,
deadline: 6000
}
}) {
// TODO 随机获取一个ua
let userAgent = agents[parseInt(Math.random() * agents.length)];
return new Promise((resolve, reject) => {
request
.get($url)
.timeout($option.timeout)
.set({ 'User-Agent': userAgent })
.proxy($proxy)
.end(function (err, res) {
if (err) {
reject(err)
} else {
resolve(res.status, res.body, res.headers)
}
});
})
}
}
}
 
 
exports.default = proxy

目前项目只完成一半功能, 后面有时间, 再完善其他

项目地址: https://gitee.com/shala/Electron-React

react 项目初始化及路由嵌套

2019-06-12admin阅读(1619)评论(0)

我们使用 react脚手架create-react-app 来构建 react 项目;

一、安装 npm install -g create-react-app

二、创建react应用

create-react-app是全局命令来创建react项目

create-react-app 项目名称

创建成功后

Snipaste_2019-06-12_14-00-18

 

今天我们主要看看 路由及路由嵌套

我们新建一个router.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
* Created by PhpStorm.
* User:  iyahe@qq.com (天明)
* Date: 2019/6/11 0011
* Time: 下午 16:55
* Description:
*/
import React from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';
import Home from './views/home';
import Detail from './views/detail';
import Index from './views/index'
 
const BasicRoute = () => (
<HashRouter>
<Switch>
<Route exact path="/" component = {Index} />
<Route path="/home" component = {Home} />
<Route exact path="/detail/:id" component = {Detail} />
</Switch>
</HashRouter>
);
export default BasicRoute;

路由嵌套, 我们主要给Home路由嵌套子页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/**
* Created by PhpStorm.
* User:  iyahe@qq.com (天明)
* Date: 2019/6/11 0011
* Time: 下午 16:54
* Description:
*/
import React from 'react';
import { Route } from 'react-router-dom';
export const DetailsDef = (props) => {
return (
<div>
我在 home/abc/def 里
</div>
)
}
export const Details = (props) => {
return (
<div>
<p>详情内容子路由</p>
<a href='#/home/abc/def'>去->home/abc/def</a>
</div>
)
}
export default class Home extends React.Component {
render() {
return (
<div>
<a href='#/detail/30'>去detail</a>
<button onClick={() => this.props.history.push({
pathname: '/detail',
state: {
id: 3
}
})}>通过函数跳转</button>
<br/>
<a href='#/home/abc'>去home的子路由里面</a>
<div className="ids">
<Route path="/home/abc" component={Details}></Route>
<Route path="/home/abc/def" component={DetailsDef}></Route>
</div>
</div>
)
}
}

这样, 我们访问到: #/home/abc 时候, 加载 omponent={Details} 组件

访问到: home/abc/def, 加载 component={DetailsDef} 组件

c1b995420c2d3fe43768e95326bd5e9f722cb611

php 操作/使用 sqLite 数据库心路历程

2019-06-10admin阅读(2107)评论(0)

因为有些小的数据, 不想存在mysql太乱了, 所以想到了用 sqLite ,

查了一下, php连接sqLite 很简单, 而且 liunx 就内置了 sqLite  数据库,

直接在liunx输入 sqLite3 即可进入交互;

注意, 退出时候,需要先按.quit 才能退出…

新建数据库: sqlite3 tm.db;

然后使用php操作数据库!

首先我想到了万能的conmposer, 找到了一个php的ORM类!

轻量级的PHP数据库框架, 提高开发效率！

so easy 啊

1
2
3
4
5
6
7
8
9
$database = new medoo([
    'database_type' => 'sqlite',
    'database_file' => 'my/database/path/database.db'
]);
$database->insert("account", [
    "user_name" => "tianming",
    "email" => "iyahe@qq.com"
]);

注意: 这里因为命名空间的问题, 我是直接下载了文件, 没有使用composer, 类里面的 PDO 要改为 \PDO, 否则会找不到 PDO 扩展而报错

但是后来, 无意间看到

ThinkPHP内置了抽象数据库访问层，把不同的数据库操作封装起来，我们只需要使用公共的Db类进行操作，而无需针对不同的数据库写不同的代码和底层实现，Db类会自动调用相应的数据库驱动来处理。数据库抽象访问层基于PDO方式，目前内置包含了Mysql、SqlServer、PgSQL、Sqlite等数据库的支持。

…. 原来thinkphp早已经支持了.

那就查文档吧!

1
2
3
4
5
6
7
8
// 多个数据库配置
'db_speak' => [
// 数据库类型
'type'        => 'sqlite',
'database'       => APP_ROOT .'/public/db/speak.db', // 相对于入口文件的数据库文件路径
'prefix'         => '',
'debug'          => true
],

在database.php 里面新增一条数据库配置!

使用的时候 Db::connect(‘db_speak’) ->table($table)->xxx();

接下来的操作就是thinkphp内置orm的使用习惯了,

但是

SQLSTATE[HY000]: General error: 8 attempt to write a readonly database

 

报错了, 原来是数据库没有读写权限, 给speak.db给777权限!

又报错

 General error: 14 unable to open database file

 

因为 打开数据库文件时，还会自动生成一个临时文件。服务器不仅需要对数据库文件可写，而且要对包含该数据库文件的文件夹可写。

所以要给放置数据库的db目录给777权限!

然后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
namespace app\index\controller;
 
use app\action;
use think\Db;
 
class Index extends action
{
    public function index(){
        $this->redirect('http://blog.he29.com?come=api');
    }
    public static function db ($table) {
     return Db::connect('db_speak')
    ->table($table);
    }
    public function welcome(){
    //$list = self::db('list')->find();
    //p($list);
    for ($i = 0; $i < 110; $i++) {
    $result = self::db('list')->insertGetId([
    'text' => rand(0,9),
    'time'=> getStrtime()
    ]);
    p($result);
    }
    //$list = self::db('list')->paginate(10);
    //p($list);
    }
}

100 条数据顺利插入成功了, 分页数据也加载出来了!

以后就可以无忧无虑的使用sqlite数据库了!

 

jQuery插件pjax使用记录

2019-06-06admin阅读(1468)评论(0)

几年前就试用过pjax 这个插件, 当时折腾了一会儿没弄明白也就抛弃了, 这几天突然想起来, 查了一下文档突然就开朗了!刚才部署到了博客上,实际很简单, 目前就几行代码在生效!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(function() {
console.log('pjax init');
$(document).pjax('a[target!=_blank]', '.content-wrap', {
fragment:'.content-wrap', timeout:8000
});
$(document).on('submit', 'form', function(event) {
$.pjax.submit(event, '.content-wrap', {
fragment: '.content-wrap',
timeout: 6000
})
});
$(document).on('pjax:send', function() {
//pjax链接点击后显示加载动画；
$(".pjax_loading").css("display", "block");});
$(document).on('pjax:complete', function() {
//pjax链接加载完成后隐藏加载动画；
$(".pjax_loading").css("display", "none");
});
});

网上一堆的教程, 在说前端怎么怎么处理怎么处理, 服务端怎么怎么处理, 实际上不需要了!

我当时的思路是, 我拦截所有的a链接请求, 点击a链接时候获取url, 然后使用ajax 获取整个目标页面的html内容,

然后插入到整个页面里(前提条件是所有的css和js都是全局引入,每个页面都相同);

这样就实现了不刷新打开下一页的问题, 但是后来想想, 不管能不能实现, 应该还要处理,浏览器的前进后端等等…

刚好pjax 就帮我们处理好了这些!

pjax 结合 pushState 和 ajax 技术， 不需要重新加载整个页面就能从服务器加载 Html 到你当前页面，这个 ajax 请求会有永久链接、title 并支持浏览器的回退/前进按钮。

pjax 项目地址在 https://github.com/defunkt/jquery-pjax 。
具体效果可以查看本博客~
pjax 的中文文档地址 http://bsify.admui.com/jquery-pjax/
具体的事件和参数都可以直接查看此文档!

html滚动穿透问题详解

2019-05-17admin阅读(2165)评论(0)

3034

臭名昭著的前端滚动穿透问题,今天也遇到了,网上找来的大概有三种解决方案!

1. css之overflow:hidden

1
2
3
4
html, body {  
    overflow: auto;  
    height: 100%;  
}

当弹出蒙层时，禁用了html和body的滚动条，滚动列表的滚动位置会丢失, 需要使用js来还原,

document.scrollingElement.scrollTop 获取滚动条的距离, 然后还原!

但是我需要一打开弹窗就固定背景的位置, 所以直接pass!!!

2. touchmove + preventDefault

在弹出的提示框中阻止浏览器的默认行为以及冒泡行为，在可以滑动的dom元素中取消浏览器的默认行为以及冒泡行为

1
2
3
4
5
6
7
8
9
10
let stop = document.querySelector("#tm");  
stop.addEventListener("touchmove", (event) => {  
    event.preventDefault();  //阻止默认行为                
    event.stopPropagation(); //阻止冒泡  
}, false)  
let cancelStop = document.querySelector(".allReason");  
cancelStop.addEventListener("touchmove", (event) => {  
    event.returnValue = true;   //取消阻止默认行为                              
    event.cancelBubble = true;  //取消阻止冒泡                          
}, false)

使用这种方法会有一个缺点，那就是滑动其它地方，底部页面不会滚动，但是在可以滑动的页面中，将其滑动到底部或者顶部后继续滑动，底部页面任然可以滚动!

而且经过测试, ios11以上版本均无效!!! 还是可以滑动!!!

3. css 之 position: fixed + js 滚动条的位置

在弹出遮罩层的时候给body添加样式以及获取滚动条的位置，

在关闭遮罩层的时候移除body的样式以及设置滚动条的位置

1
2
3
4
.scroll {  
    position: fixed;  
    width: 100%;  
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var scroll = (function (className) {  
    var scrollTop;  
    return {  
        afterOpen: function () {  
            scrollTop = document.scrollingElement.scrollTop || document.body.scrollTop;  
            document.body.classList.add(className);  
            document.body.style.top = -scrollTop + 'px';  
        },  
        beforeClose: function () {  
            document.body.classList.remove(className);  
            document.scrollingElement.scrollTop = scrollTop;  
            document.body.scrollTop = scrollTop;  
        }  
    };  
})('scroll');

最终结果如下:

Snipaste_2019-05-17_14-04-20

最终完美解决!

 

微信图片_20190513112058

累累累!!!

js中最常用的 test exec match search replace split 6个方法学习

2019-04-23admin阅读(1495)评论(0)

 

1. test  检查指定的字符串是否存在

1
2
3
4
var data = "13879144915";
var reCat = /\d{11}/gi;
console.log(reCat.test(data));  //true
//检查字符是否存在  g 继续往下走  i 不区分大小写

2. exec 和 match 返回查询值

1
2
3
4
5
var data = '123123,213,12312,312,3,Cat,cat,dsfsdfs';
var reCat = /\d/i;
console.log(reCat.exec(data));  //Cat
var arrMactches = data.match(reCat)
console.log(arrMactches)

这两个方法返回内容相似,具体的区分请查看 这里

3. search  返回搜索位置  类似于indexof

1
2
3
var data = '天明哈哈哈哈微笑哈哈哈';
var reCat = /微笑/gi;
console.log(data.search(reCat));

4. replace  替换字符, 可利用正则替换

详细解释方法: http://blog.he29.com/v2/know/content?id=211#h1

5. split   利用正则分割数组

1
2
3
4
var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs";
var reCat = /,/;
var arrdata = data.split(reCat);
console.log(arrdata)

nuxt.js 初体验及服务端部署全部流程

2018-12-28admin阅读(5782)评论(0)

安装流程

第一步安装: npx create-nuxt-app <项目名>,

确保安装了npx（npx在NPM版本5.2.0默认安装了）：

然后一路回车,安装完成之后执行 npm run dev

我们主要记录部署的流程

首先, 我们先把本地项目编译一次, 执行 npm run build, 打包之后的文件在 .nuxt 目录里(注意: 如果是在mac下, .文件默认是隐藏的)

编译之后选择 文件夹打包,上传到服务器,文件夹及文件依次是:

1
2
3
4
nuxt.config.js
package.json
server
static

打包成为 nuxt.tar.gz文件, 然后通过ftp等工具上传到liunx服务器,

在服务器执行: tar -zxvf nuxt.tar.gz 解压

解压完成之后, 安装依赖, npm install

安装完成之后, 我们启动项目, 执行 npm run start,

接下来我们先配置一下nginx, 使用反向代理来实现直接使用域名访问

我们新建一个nginx配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
upstream nuxtserver1 {
    server 0.0.0.0:3000; // 这里是代理的地址, 默认vue启动的是127.0.0.1:3000
}
server
{
    // 我们需要监听80端口, 不然需要在域名后面带上端口号才能访问, 默认的80端口不需要写端口号,
    listen 80;
    server_name nuxt.he29.com; //我们的域名,. 需要先把域名解析到本机器,
location / {
proxy_pass   http://nuxtserver1; 这里是我们的反向代理
        index  index.html index.htm;
}
    access_log  /www/wwwlogs/nuxt.he29.com.log; //记录log
}

然后在nginx 主配置文件里引入, 重启nginx, 注意不能关闭之前启动的 npm run start

然后使用 nuxt.he29.com 应该就可以访问到了

20181228161354

 

但是, 做完这些, 我们还需要使用 pm2 来让我们的项目在后台一直运行, 不然我们关闭了终端, 我们的服务停了也就无法访问了

首先我们全局安装pm2, 安装完成之后使用pm2, 编写配置文件,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "apps": {
    "name": "myidea",
    "script": "npm run start",
    "watch": [
      ".nuxt"
    ],
    "ignore_watch": [
      "node_modules"
    ],
    "watch_options": {
      "persistent"    : true,
      "ignoreInitial" : true
    }
  }
}

然后 启动我们的项目

1
2
3
4
5
6
7
8
9
10
[PM2] Applying action restartProcessId on app [npm](ids: 0)
[PM2] [npm](0) ✓
[PM2] Process successfully started
┌──────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬──────────┬──────┬──────────┐
│ App name │ id │ mode │ pid   │ status │ restart │ uptime │ cpu │ mem      │ user │ watching │
├──────────┼────┼──────┼───────┼────────┼─────────┼────────┼─────┼──────────┼──────┼──────────┤
│ npm      │ 0  │ fork │ 27326 │ online │ 16      │ 0s     │ 49% │ 9.9 MB   │ root │ disabled │
└──────────┴────┴──────┴───────┴────────┴─────────┴────────┴─────┴──────────┴──────┴──────────┘
Use `pm2 show <id|name>` to get more details about an app
[root@instance_439b09 server]#

这样, 我们的项目也就全部启动起来了

两种方式实现一个好看的滑块控制音乐播放进度或者声音

2018-11-12admin阅读(2089)评论(0)

最近在写一个音乐播放器,目前实现的两种方式简单做个记录,最终效果都一样!

1112174631

第一种, 使用传统页面布局,使用js控制

具体实现方式是:

首先我们做一个布局,做成如图的样子, 包含一个轨道和一个滑块!

然后使用js的一系列事件来控制滑块,具体如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var isDown = false;
  var $progress = $(".progress");
  $progress.click(function (e) {
var progressWidth = $progress.width(),
progressOffsetLeft = $progress.offset().left;
volume = (e.clientX - progressOffsetLeft) / progressWidth;
config.audio.volume = volume;
  });
  $(".drag", $progress).mousedown(function () {
isDown = true;
$(".volume-on", $progress).removeClass("ts5")
  });
  $(window).on({
mousemove: function (e) {
  if (isDown) {
var progressWidth = $progress.width(),
progressOffsetLeft = $progress.offset().left,
eClientX = e.clientX;
if (eClientX >= progressOffsetLeft && eClientX <= progressOffsetLeft + progressWidth) {
  $(".volume-on", $progress).width((eClientX - progressOffsetLeft) / progressWidth * 0x64 + "%");
  volume = (eClientX - progressOffsetLeft) / progressWidth;
  config.audio.volume = volume;
  var vol = window.parseInt(config.audio.volume * 100);
  tips.show("音量：" + vol + "%")
}
  }
},
mouseup: function () {
  isDown = false;
  $(".volume-on", $progress).addClass("ts5")
}
  });

第二种方式, 使用html5 的 “type=”range”, 使用CSS样式来美化一下按钮及效果就行, 取值的话直接取表单的value

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
}
.progress input {
    width: 99%;
    -webkit-appearance: none;
    border-radius: 5px;
    outline: none;
    background: rgba(129, 195, 0, 0.2);
    height: 2px;
    padding-left: 1%;
    transition:all 0.5s ease-in-out 0.1s;
    cursor: pointer;
    position: absolute;
    top: 0;
 
}
.progress input:hover{
    background: rgba(129, 195, 0, 0.2);
}
.progress input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 10px;
    width: 10px;
    background: #ffffff;
    border-radius: 50%; /*外观设置为圆形*/
    border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
    box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
    cursor: pointer;
    margin-top: -2px;
}

核心css代码如上,

抽时间研究一下Vuex的模块化操作

2018-03-14admin阅读(3178)评论(1)

之前一段时间一直没有留意Vuex也更新了.最近用到了, 突然发现,.,…

过了个年, Vuex几乎不会用了~

静下心来好好看文档, 收获不大, 然后公司同事写了个demo 给我, 算是研究出一点眉目,理解有误还请指出,非常感谢

首先模块化, 我的理解就是, 以前的时候, vuex的数据基本都是堆放在一起的, 现在, 可以配置一个路由所对应的页面一个 vuex数据源!

然后把所有的数据源文件引入到统一的store 文件里, 最后抛出给vue,

首先, 我们就一个路由一个vuex文件!

在src文件夹里面新建一个store文件夹, 然后里面新建一个module文件夹,用来存放路由对应的文件

QQ截图20180314153001

store 里面新建一个index.js 用来 new Vuex, loader.js 用来把module 里面所有的文件载入进来

loader.js

1
2
3
4
5
6
7
8
const files = require.context('./modules', true, /\.js$/)
const modules = {}
// store 二级目录资源
files.keys().forEach(key =&gt; {
  modules[key.replace(/(\.\/|\.js)/g, '')
    .replace(/(\/)/g, '_')] = files(key).default
});
export default modules

特别说明: loader.js 载入modules 后, 和 一个一个import进来的有区别, 因为 加载进来的目录里面的js文件, 我们需要给 吐出去的 modules 一个名字(vuex命名空间),

因此我使用的方法是, 例如 ./index/index.js, 则会变成 index_index, 如果是 ./index/abc/def.js, 则是 index_abc_def 以此类推! 具体请仔细分析如上正则

index.js

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import Vuex from 'vuex'
import modules from './loader'
 
Vue.use(Vuex)
 
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
  modules,
  strict: debug
})

然后我们看看module里面的文件,

我现在新建一个 index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
export default {
  //启用命名空间
  namespaced: true,
  state: {
    press: 0,
    tm: ''
  },
  mutations: {
    'press': (state, show) => {
      state.press = show;
    },
    'tm': (state, show) => {
      console.log(show)
      state.tm = show;
    }
  },
  actions: {
    start({commit, dispatch}, data) {
      dispatch('upload', data);
    },
    upload({commit, dispatch}, data) {
      commit('tm',666)
    },
  },
}

在我需要使用的页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script>
  //载入vuex 提供的内置方法
  import {mapActions,mapState,mapMutations} from 'vuex';
  export default {
    name: 'HelloWorld',
    data() {
      return {}
    },
    computed : {
      //<span class="com">映射 this.press 到 this.$store.state.index.press</span>
      ...mapState({
        press : (state)=>state.index.press,
        tm : (state)=>state.index.tm,
      })
    },
    methods:{
      // 这里寻找 index 模块里面的 upload, 然后注入到了 methods,
      // 如果需要调用 index 目录里面的abc.js, 则前面的name则为 index_abc
      ...mapActions("index",["upload"])
    },
    created() {
      console.log(this.press)
      //这里直接就可以 this,upload() 调用方法了
      this.upload()
    },
  }
</script>

大致就是这样!

  • 上一页
  • 1
  • ···
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • ...
  • 下一页
  • 共 16 页
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
2024年11月
一 二 三 四 五 六 日
« 十    
 123
45678910
11121314151617
18192021222324
252627282930  

最新评论

  • 前端小武 8年前 (2017-04-06)说：
    我看到了layer
  • 丁艳平 8年前 (2017-03-03)说：
  • Dawn 8年前 (2016-09-16)说：
    call_user_func_array最后的例子是错哦，你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 9年前 (2016-06-21)说：
    tp框架设置了全局捕获异常的，这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 9年前 (2016-05-17)说：
    构造函数里的判断 用异常机制可能更好一些

左邻右舍

  • Brian's Blog
  • 易水寒
  • 楼教主
  • 贤心
  • 阿米龙

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2024 雅荷心语博客   网站地图