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

前端之旅

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

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

2019-08-05admin阅读(19)评论(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阅读(63)评论(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阅读(74)评论(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阅读(76)评论(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阅读(254)评论(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阅读(225)评论(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阅读(1083)评论(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阅读(591)评论(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阅读(1621)评论(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>

大致就是这样!

获取上传文件实时进度条的尝试

2018-03-12admin阅读(893)评论(0)

之前每次写项目, 一遇到这种需要获取进度条的, 大多数时间都是直接去找各种插件, 如果实在没有找到合适的, 就做一个假的进度条!

今天有点时间, 查了点资料, 做了一个使用jquery 上传文件获取进度的小例子!

首先,做一个简单的小表单

1
2
3
4
<form method="post" enctype="multipart/form-data" action="index.php">
    <input type="file" name="" placeholder="">
    <input type="button" name="" placeholder="" value="提交">
</form>

然后做点击事件处理及ajax处理,

其中有两个参数需要特别注意

1, processData用于对data参数进行序列化处理，默认值是true。默认情况下发送的数据将被转换为对象，如果不希望把File转换，需要设置为false,

2, 默认值为contentType = "application/x-www-form-urlencoded", 如果不设置这里, 我们的 后端 php 收不到文件数据, 查了一下资料:

因为对于上传文件，我们没有在使用原有的 http 协议，所以 multipart/form-data 请求是基于 http 原有的请求方式 post 而来的.那么来说说这个全新的请求方式与 post 的区别

  1. 请求头的不同，对于上传文件的请求，contentType = multipart/form-data是必须的，而 post 则不是，毕竟 post 又不是只上传文件～。
  2. 请求体不同。这里的不同也就是指前者在发送的每个字段内容之间必须要使用分界符来隔开，比如文件的内容和文本的内容就需要分隔开，不然服务器就没有办法正常的解析文件，而后者 post 当然就没有分界符直接以 name = “value”的形似发送。

contentType 必须false才会自动加上正确的Content-Type,

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
$('input[type="button"]').click(function () {
        var formData = new FormData();
        formData.append("catname", "我是一只喵");
        formData.append("age", 1);
        formData.append("userfile", $('input[type="file"]')[0].files[0]);
        console.log(formData)
        $.ajax({
            url: 'index.php',
            type: 'POST',
            processData: false,
            //必须false才会自动加上正确的Content-Type
            contentType : false ,
            data: formData,
            xhr: function(){
                var xhr = $.ajaxSettings.xhr();
                if(onprogress && xhr.upload) {
                    xhr.upload.addEventListener("progress" , onprogress, false);
                    return xhr;
                }
            },
            success:function (res) {
                console.log(res)
            },
        })
    })
    function onprogress(evt){
        var loaded = evt.loaded;     //已经上传大小情况
        var tot = evt.total;      //附件总大小
        var per = Math.floor(100*loaded/tot);  //已经上传的百分比
        $('#press').html(per+'%')
    }

然后我们选择一个较大的文件,查看上传进度!

webapp

至于php文件,简单的接收了一下上海传的数据!

1
2
3
4
5
6
7
8
9
10
11
12
<?php
/**
* Created by PhpStorm.
* User: iyahe@qq.com (天明)
* Date: 2018/3/12
* Time: 14:20
*/
 
print_r($_REQUEST['catname']);
print_r($_REQUEST['age']);
print_r($_REQUEST['userfile']);
print_r($_FILES);

 

  • 1
  • 2
  • 3
  • 4
  • ...
  • 下一页
  • 共 8 页
关于我

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

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

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • git 操作那些小事-雅荷心语博客git 操作那些小事2017-03-04评论(2)
  • call_user_func_array 这个函数什么时候用-雅荷心语博客call_user_func_array 这个函数什么时候用2016-09-02评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
2019年九月
一 二 三 四 五 六 日
« 八    
 1
2345678
9101112131415
16171819202122
23242526272829
30  

最新评论

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

左邻右舍

  • Brian's Blog
  • Dawniii
  • 无名小站
  • 易水寒
  • 楼教主
  • 贤心
  • 阿米龙

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

联系我们关于我们

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

emlogdux_heademlogdux_footer