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

前端之旅 第10页

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

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

2018-12-28admin阅读(5952)评论(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阅读(2224)评论(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阅读(3291)评论(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阅读(3413)评论(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);

 

在H5网页里判断是否在Wifi环境

2018-03-08admin阅读(13432)评论(0)

之前一直以为H5网页里肯定是无法判断网络环境的, 但是查了一下, 发现其实html5已结有了新的东西去判断,但是兼容性很差!

经过测试发现, 如果实在微信浏览器中, 高版本的微信内置浏览器, 直接在UA里面就能看到网络状态!

我们简单写了一个页面弹出当前的Ua,发现!

微信图片_20180308105053

这里的NetType/WIFI 就是当前的网络状态了. 切换到4G, 重新进入页面, 就是4G!!

注意这里是重新进入页面, 而不是直接在当前页面切换到4G然后刷新,

因为经过简单测试, 直接切换到4G,刷新页面, 弹出来的Ua是不会变化的, 还是之前的Ua!

如果换其他浏览器, 比如 UC, QQ浏览器等等,那就直接可以用  window.navigator.connection 来判断了!

最终版本就是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function isWifi() {
        try {
            let wifi = true
            let ua = window.navigator.userAgent
            let con = window.navigator.connection
            // 如果是微信
            if (/MicroMessenger/.test(ua)) {
                if (ua.indexOf('WIFI') >= 0) {
                    return true;
                }else{
                    wifi = false
                }
                // 如果支持navigator.connection
            } else if (con) {
                let network = con.type
                if (network !== 'wifi' && network !== '2' && network !== 'unknown') {
                    wifi = false
                }
            }
            return wifi
        } catch (e) {
            return false
        }
    }

 

微信小程序中rpx与rem单位转换

2018-01-29admin阅读(7122)评论(0)

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。
规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px
设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5      1rpx = 0.42px 　　    1px = 2.34px
iPhone6      1rpx = 0.5px 　　　　1px = 2rpx
iPhone6s    1rpx = 0.552px 　　  1px = 1.81rpx
微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx =37.5rpx;
注：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准,单位换算相对简单!

rpx的使用

1）小程序中rpx与px的转换
例如：设计稿750px宽度
那么恭喜您，你ps上量出宽度是多少，那么你就定义多少rpx，也就是 1px = 1rpx
例如：设计稿640px宽度
那么很遗憾，你需要转换一下 1px = 750/640 rpx
小程序中rpx和px的转换
2）小程序中如何继续使用rem
例如：设计稿750px宽度
此时1rem = （750/20）rpx = 37.5px
例如：设计稿640px宽度
此时1rem = （750/20）rpx = 32px
小程序中rem的使用
注意：无论设计稿多少，rem与rpx换算总是一样的，但是rem与px在小程序中换算是 rem =
设计稿宽/20，这一点与我们平时使用的rem完全不一样。

JS输出格式化的json字符串

2018-01-05admin阅读(4481)评论(0)

最近几天在写后台管理, 太多的表单数据要处理,但是仔细一想!~~~

这个后台是我自己用的,收集表单多麻烦,直接写json不就行了,

~~于是开始想办法找一个可以直接格式化json的方法, 防止json写错了~

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
//格式化代码函数,已经用原生方式写好了不需要改动,直接引用就好
    var formatJson = function (json, options) {
        var reg = null,
                formatted = '',
                pad = 0,
                PADDING = '    ';
        options = options || {};
        options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
        options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
        if (typeof json !== 'string') {
            json = JSON.stringify(json);
        } else {
            json = JSON.parse(json);
            json = JSON.stringify(json);
        }
        reg = /([\{\}])/g;
        json = json.replace(reg, '\r\n$1\r\n');
        reg = /([\[\]])/g;
        json = json.replace(reg, '\r\n$1\r\n');
        reg = /(\,)/g;
        json = json.replace(reg, '$1\r\n');
        reg = /(\r\n\r\n)/g;
        json = json.replace(reg, '\r\n');
        reg = /\r\n\,/g;
        json = json.replace(reg, ',');
        if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
            reg = /\:\r\n\{/g;
            json = json.replace(reg, ':{');
            reg = /\:\r\n\[/g;
            json = json.replace(reg, ':[');
        }
        if (options.spaceAfterColon) {
            reg = /\:/g;
            json = json.replace(reg, ':');
        }
        (json.split('\r\n')).forEach(function (node, index) {
                    var i = 0,
                            indent = 0,
                            padding = '';
 
                    if (node.match(/\{$/) || node.match(/\[$/)) {
                        indent = 1;
                    } else if (node.match(/\}/) || node.match(/\]/)) {
                        if (pad !== 0) {
                            pad -= 1;
                        }
                    } else {
                        indent = 0;
                    }
 
                    for (i = 0; i < pad; i++) {
                        padding += PADDING;
                    }
 
                    formatted += padding + node + '\r\n';
                    pad += indent;
                }
        );
        return formatted;
    };
    //引用示例部分
    //(1)创建json格式或者从后台拿到对应的json格式
    var originalJson = {"name": "天明", "sex": "男", "age": "25"};
    //(2)调用formatJson函数,将json格式进行格式化
    var resultJson = formatJson(originalJson);
    //(3)将格式化好后的json写入页面中
    document.getElementById("writePlace").innerHTML =  resultJson;

原本是黏在一起的一行json,  {“name”: “天明”, “sex”: “男”, “age”: “25”};

转完了就是

{
“name”:”天明”,
“sex”:”男”,
“age”:”25″
}

这种格式~~

收工~

 

关于微信小程序Websocket的一些小坑

2018-01-02admin阅读(7212)评论(0)

最近几天做微信小程序的Websocket来处理一些聊天消息!期间遇到了一些比较坑的地方,记录一下

第一: 微信小程序不支持设置端口, 而我们做socket一般都会自己定义端口号来访问

这里,由于微信小程序不支持设置端口号,

那我在本地发起socket请求,则填写:

1
2
3
wx.connectSocket({
     url: 'wss://play.he29.com/websocket'
});

这样的话,我们就可以在nginx里设置规则来获取

设置nginx的代理到我们socket服务指定的端口!

1
2
3
4
5
6
7
8
9
10
location /websocket {
        proxy_pass http://127.0.0.1:4006;
        proxy_http_version 1.1;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header X-Real-IP $remote_addr;
}

由于我的后端socket是php的woekman写的,

workman自己可以设置ssl, 所以如果在nginx里配置了ssl,

则一定不要在php的socket里设置ssl,不然会出错!

8326cffc1e178a82f0fbfa6aff03738da877e831

cents6.4安装nodejs问题记录

2017-11-02admin阅读(2492)评论(0)

使用源码编译方式安装了多次都失败了,报了很多错,理不清

后来找到一个可行方法! 使用yum安装nodejs

官方文档：
https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager

1
2
3
curl -sL https://rpm.nodesource.com/setup | bash -
Then install, as root:
yum install -y nodejs

安装完成后, 查看结果

[root@instance_439b09 bin]# node
> 1+1
2
>

正常,但是npm确报错了, /usr/local/bin/npm: line 1: ../lib/node_modules/npm/bin/npm-cli.js: No such file or directory

首先我们找到 npm-cli.js 在哪

find / -name “npm-cli.js”

找到后,查看  /usr/local/bin/npm

vim  /usr/local/bin/npm

然后看到里面的文件地址, 修改成刚find找到的 npm-cli.js 绝对地址

npm -v

npm: relocation error: npm: symbol SSL_set_cert_cb, version libssl.so.10 not defined in file libssl.so.10 with link time reference

解决办法：

   yum -y install openssl  

如果已经安装，就更新一下

  yum -y update openssl

然后就OK啦

 

使用 nodeJs 写个简单的小小爬虫

2017-10-30admin阅读(2659)评论(0)

最近开始想好好看看nodeJs, 写点东西练习一下!

首先了解一下使用了那些东西!

1, express ,npm地址 https://www.npmjs.com/package/express

这个主要是用来启动一个本地服务器,

2, supervisor , npm地址 https://www.npmjs.com/package/supervisor

主要用来负责重启node进程

3, request , npm地址: https://www.npmjs.com/package/request

这个模块主要用来 发起http请求,

4. cheerio, npm地址: https://www.npmjs.com/package/cheerio

这个模块主要用来提供像jquery一样来选择html元素的方法,

代码很简单,会写javascript的看一眼就能懂!

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
var express = require('express');
var app = express();
var request = require('request');
const cheerio = require('cheerio');
const fs = require('fs');
 
app.get('/', function (req, res) {
    request('https://gitee.com/explore/starred?lang=PHP', function (error, response, body) {
        console.log(response.statusCode);
        const $ = cheerio.load(body);
        let arr = [];
        $('#git-discover-list').find('.item').each(function (k,v) {
            let starFork = $(v).find('.watch-star-fork');
            let json = {
                name:$(v).find('.project-namespace-path').text(),
                desc:$(v).find('.project-desc').text(),
                watch:starFork.find('a').eq(0).find('span').text(),
                star:starFork.find('a').eq(1).find('span').text(),
                fork:starFork.find('a').eq(2).find('span').text(),
            };
            arr.push(json)
        });
        let jsonstr = JSON.stringify(arr,null,2);
        console.dir(arr);
        fs.appendFile('list.json', jsonstr, (err) => {
            if (err) throw err;
        });
        res.send(jsonstr)
    });
})
app.listen(3000);

主要启动了一个服务监听 3000 端口,

然后 请求 码云 的php项目列表,

请求完成,获取所需的数据,写入到数组,

最后一步,把数组写入到本地的json文件里!

最终得到结果如下:

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
[
  {
    "name": "暗夜在火星/PhalApi",
    "desc": "简称π框架，一个轻量级PHP开源接口框架，专注于接口服务开发，支持HTTP/SOAP/RPC协议，拥有自动生成的在线文档、多种开发语言的客户端SDK包以及可重用的扩展类库，可用于快速搭建微服务、RESTful接口或Web Services。",
    "watch": "438",
    "star": "1.1k",
    "fork": "365"
  },
  {
    "name": "IBOS开源OA协同办公管理/IBOS",
    "desc": "基于Yii和bootstrap的开源OA/协同办公平台，连接全平台覆盖的酷办公客户端（Win，IOS，Android,Mac,Linux），支撑您的企业管理二次开发－－作为国内首家开源OA，有的不只是颜值",
    "watch": "439",
    "star": "910",
    "fork": "550"
  },
  {
    "name": "白俊遥/thinkphp-bjyadmin",
    "desc": "thinkphp整合Auth权限管理、支付宝、微信支付、阿里oss、友盟推送、融云即时通讯、云通讯短信、Email、Excel、PDF等等",
    "watch": "390",
    "star": "822",
    "fork": "330"
  },
  {
    "name": "einsqing/wemall",
    "desc": "wemall微信商城云平台 快速创建您的微信商城",
    "watch": "388",
    "star": "763",
    "fork": "425"
  },
  {
    "name": "ycchen/iWshop",
    "desc": "微信开源商城，基于高性能框架Phalcon，自主开发微信Sdk, 基于腾讯Weui开发店铺页面。",
    "watch": "366",
    "star": "742",
    "fork": "355"
  },
  {
    "name": "雾渺/KODExplorer",
    "desc": "KodExplorer是一款快捷高效的私有云和在线文档管理系统，为个人网站、企业私有云部署、网络存储、在线文档管理、在线办公等提供安全可控，简便易用、可高度定制的私有云产品。采用windows风格界面、操作习惯，无需适应即可快速上手，支持几百种常用文件格式的在线预览，可扩展易定制。GPL v3开源协议.",
    "watch": "317",
    "star": "741",
    "fork": "275"
  },
  {
    "name": "CRM8000/PSI",
    "desc": "PSI是一款基于SaaS模式(Software as a Service软件即服务)的企业管理软件。PSI以商贸企业的核心业务：采购、销售、库存（进销存）为切入点，最终目标是行业化的ERP解决方案。",
    "watch": "342",
    "star": "739",
    "fork": "344"
  },
  {
    "name": "奕潇/OpenCenter",
    "desc": "通用性强的开源用户及后台管理系统，非常适合全新系统的开发。\n基于ThinkPHP开发，遵循与ThinkPHP相同的开源协议。\n2016年最新更新，加入了新的功能。修复了以前一些老的Bug。\n欢迎关注我的另一个项目：http://git.oschina.net/yhtt2020/OpenSNS-V2\n基于Apache2.0 开源通用 用户及后台管理框架，提供了注册登录、头像裁剪、单点登录、权限管理、扩展资料管理、等级头衔、自定义积分管理、用户行为日志机制、模块装卸、插件机制，提供建议的安装程序。...",
    "watch": "356",
    "star": "726",
    "fork": "347"
  },
  {
    "name": "rainfer/YFCMF",
    "desc": "YFCMF是采用ThinkPHP5.0.10+国外ACE1.40的UI模板的后台内容管理框架。演示网站：http://www.rainfer.cn/admin.php  用户名：demo密码：123456  交流：http://www.yfcmf.net QQ群：213321650",
    "watch": "262",
    "star": "691",
    "fork": "230"
  },
  {
    "name": "Karson/fastadmin",
    "desc": "基于ThinkPHP5和Bootstrap的极速后台开发框架",
    "watch": "271",
    "star": "681",
    "fork": "281"
  },
  {
    "name": "thinkcmf/ThinkCMFX",
    "desc": "ThinkCMF 是一款高速PHP内容管理框架，扩展性良好可高程度的提高开发者的开发效率，节省开发成本。",
    "watch": "282",
    "star": "654",
    "fork": "336"
  },
  {
    "name": "Lane/LaneWeChat",
    "desc": "微信PHP快速开发框架。封装微信公众号接口，简单调用，快速上线。详尽的文档和示例，让开发者快速上手。",
    "watch": "321",
    "star": "606",
    "fork": "263"
  },
  {
    "name": "风一样的世界/laravel5_backend",
    "desc": "基于laravel 5 框架的后台基础系统。包括登录验证、用户管理，修改密码，用户权限，用户组权限，功能管理，系统日志，文件上传、工作流。目前还附加了简单的blog功能。可以快速基于此系统进行laravel5的快速开发，免去每次都写一次后台基础的痛苦。",
    "watch": "255",
    "star": "582",
    "fork": "276"
  },
  {
    "name": "小微OA/smeoa",
    "desc": "基于ThinkPHP开发的PHP开源OA办公系统\n\n新版地址：https://git.oschina.net/smeoa/xiaowei",
    "watch": "340",
    "star": "582",
    "fork": "304"
  },
  {
    "name": "Discuz!/DiscuzX",
    "desc": "Discuz! X 官方 Git/SVN SC_UTF8 版本，最新版本 X3.4 R20171001+",
    "watch": "236",
    "star": "581",
    "fork": "341"
  },
  {
    "name": "ApiAdmin/ApiAdmin",
    "desc": "基于ThinkPHP V3.2开发的面向API的后台管理系统！",
    "watch": "206",
    "star": "538",
    "fork": "192"
  },
  {
    "name": "微擎团队/pros",
    "desc": "微擎是一款免费开源的微信公众号管理系统，基于目前最流行的WEB2.0架构（php+mysql），支持在线升级和安装模块及模板，拥有良好的开发框架、成熟稳定的技术解决方案、活跃的第三方开发者及开发团队，依托微擎开放的生态系统，提供丰富的扩展功能。除了Master外其它分支皆为不稳定的开发版。欢迎大家Fork",
    "watch": "213",
    "star": "492",
    "fork": "224"
  },
  {
    "name": "easysoft/zentaopms",
    "desc": "禅道是第一款国产的开源项目管理软件。它集产品管理、项目管理、质量管理、文档管理、组织管理和事务管理于一体，是一款专业的研发项目管理软件，完整地覆盖了项目管理的核心流程。注重实效，合软件架构合理，操作简洁高效，扩展灵活，多语言支持，多风格支持，搜索功能，统计功能——这一切，您通过禅道，都可以拥有！",
    "watch": "211",
    "star": "483",
    "fork": "228"
  },
  {
    "name": "祺爸PiscDong/sns_PHP",
    "desc": "网易微博、百度、Google、微软、Instagram、Facebook、360、GitHub、淘宝等平台的账号登录及api操作，使用oauth 2.0。官方提供的sdk都太过庞大，这是我自己简化的，提供简单的账号登录、获取个人信息、发布微博等功能，如果需要其他功能可以根据官方的api文档自行添加。\n",
    "watch": "202",
    "star": "474",
    "fork": "228"
  },
  {
    "name": "大愚/payment",
    "desc": "Payment是一个php版本的支付聚合第三方sdk，集成了微信支付、支付宝支付、招商一网通支付。提供统一的调用接口，方便快速接入各种支付、查询、退款、转账能力。",
    "watch": "239",
    "star": "472",
    "fork": "133"
  },
  {
    "name": "ThinkPHP/thinkphp",
    "desc": "开源PHP框架",
    "watch": "237",
    "star": "464",
    "fork": "203"
  },
  {
    "name": "JAE/QueryList",
    "desc": "QueryList是一个基于phpQuery的简洁、优雅的PHP采集工具，具有高扩展性。",
    "watch": "186",
    "star": "444",
    "fork": "154"
  },
  {
    "name": "jry/lyadmin",
    "desc": "lyadmin(lysite分支全新发布)是一套轻量级通用后台，采用ThinkPHP+Bootstrap3制作，内置系统设置、上传管理、权限管理、模块管理、插件管理等功能，独有的Builder页面自动生成技术节省50%开发成本，先进的模块化开发的支持让开发成本一降再降，致力于为个人和中小型企业打造全方位的PHP企业级开发解决方案。另外提供整套企业开发解决方案，集PC、手机、微信、App、小程序五端于一体，更有用户中心模块、门户模块、钱包支付中心模块、商城模块、OAuth2统一登陆、内部Git模块、Do...",
    "watch": "177",
    "star": "386",
    "fork": "131"
  },
  {
    "name": "奕潇/OpenSNS-V5开源版",
    "desc": "2017年9月29日更新，全面升级到V5\n产品介绍：www.opensns.cn\n业界最强大的开源SNS系统，最受社交创业项目欢迎的开源项目。",
    "watch": "173",
    "star": "353",
    "fork": "206"
  },
  {
    "name": "B_fox/ke361",
    "desc": "淘宝客程序 —— 突破了传统淘宝客程序对自动采集商品收费的模式，该程序的自动 采集模块对于所有人开放，代码不加密，方便大家修改。集成淘点金组件，自动转换淘宝链接为淘宝客推广链接。",
    "watch": "171",
    "star": "351",
    "fork": "150"
  }
]

这次项目主要是简单的练习一下模块的使用,以及几个npm包,看了node文档,还有很多东西需要看~~

  • 上一页
  • 1
  • ···
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • ...
  • 下一页
  • 共 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)
2025年7月
一 二 三 四 五 六 日
« 六    
 123456
78910111213
14151617181920
21222324252627
28293031  

最新评论

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

其他类型

  • 芊云全景
  • 配音兔AI配音神器

博客类型

  • 芊云全景
  • 配音兔AI配音神器

左邻右舍

  • 易水寒
  • 楼教主
  • 芊云全景
  • 贤心
  • 配音兔AI配音神器

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

联系我们关于我们

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