vue.js中子组件向父组件传值

最近在写vue.js的时候感觉有好多可以分享的东西,但是一直没时间,今天来分享一点点小技巧。

先说父组件里面的写法,引入子组件

import userInfo from './components/userInfo'

然后在使用的使用用监听子组件中的updateUserStatus,并传值给父组件中的updateData方法

<user-info v-on:updateUserStatus="updateData"></user-info>

这是父组件中的updateData方法

    updateData: function(msg) {
        // 关闭弹出页
        this.dialogFormVisible = false
        // 如果禁用成功
        if (msg === 200) {
          // 循环列表找到被禁用的数据移出数组
          for (const v of this.list) {
            if (v.user_guid === this.temp.user_guid) {
              const index = this.list.indexOf(v)
              this.list.splice(index, 1)
              break
            }
          }
        }
      }

父组件介绍完了,咱们看看子组件的写法

当点击禁用的时候出发一个函数updateUserStatus

<el-button style="width: 100%" type="danger" @click="updateUserStatus()">禁用</el-button>

updateUserStatus()的内容是

  methods: {
    update() {
      // 开启loading
      this.listLoading = true
      // 封装好的请求接口
      updateUser(this.listQuery).then(response => {
        if (response && (response.ServerNo === 200)) {
          this.$notify({
            title: '成功',
            message: '禁用成功',
            type: 'success',
            duration: 2000
          })
          // 【重点】向updateUserStatus发送一个参数,值为200,父组件一直在监听这里,后面的200就是需要向父组件传送的值
          this.$emit('updateUserStatus', 200)
        } else {
          this.$notify({
            title: '失败',
            message: '禁用失败',
            type: 'error',
            duration: 2000
          })
          this.$emit('updateUserStatus', 400)
        }
        this.listLoading = false
      })
    },
    updateUserStatus() {
      // 获取用户的guid
      this.listQuery.member_id = this.userInfo.user_guid
      this.update()
    }
  }

就这样就简单的实现了子组件向父组件传值了

引入CSS和JS用//双斜杠引入分析

0x01 缘起
在写前端页面的时候,我们都需要引入大量的css和js文件,但是我们常见的引入方式是:

<link href="http://cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>

这种是最常见的引入方式,可是这样也有一个问题,当我们整站从http升级为https或者https降为http的时候,都将无法使用。

0x02 缘灭

对于这种情况,现在应该怎么处理呢?推荐使用下面的引入方式:

<script src="//cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>
<link href="//cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet">

//在这里表示同协议,一般现在用在https跨域名地址情况下。用//就不用很麻烦地区分https还是http,也不用担心https下降到http出问题

Laravel框架实现404页面500页面友好提示

0x01 背景

  程序开发的时候,我们开发者都会开启debug,来调试程序,以及打印我们想看到的数据。但是当项目上线的时候,如果再开启debug,那就是在给广大的黑客们开启属于他们的机会了。虽然Laravel框架关闭debug后就不会将报错信息显示在页面上,但是也并不美观。而且纯英文的提示在国内来看也并不太好。所以这个时候就需要做友好的提示页面了

0x02 正文

  1. 要实现友好提示其实就是抓取每个页面的状态码,如果不是200,那么就根据状态码进行区分返回404或者500页面
  2. Laravel框架中有一个默认抓取并返回报错信息的文件,

appExceptionsHandler.php

  1. 我们来修改一下这个文件的render方法
    public function render($request, Exception $e)
    {
        if ($e instanceof ModelNotFoundException) {
            $e = new NotFoundHttpException($e->getMessage(), $e);
        }

        $debug = config('app.debug', false);  // 判断debug是否开启
        if (empty($debug)) {  // 如果debug关闭
            $result = method_exists($e, 'getStatusCode');
            if (!empty($result)) {
                // 404友情提示
                $statusCode = $e->getStatusCode();
                if ($statusCode == 404) {
                    return response()->view('error', [
                        'info' => '抱歉,指定的页面不存在.',
                        'url' => '/',
                        'code' => 404,
                        'msg' => 'Sorry, page not found.'
                    ]);
                }
            } else {
                // 出现错误提示
                return response()->view('error', [
                    'info' => '抱歉,好像出错了.',
                    'url'  => '/',
                    'code' => 503,
                    'msg'  => 'Error,It have been wrong.'
                ]);
            }
        } else {
            // 如果开启debug模式
            return parent::render($request, $e);
        }

    }

0x03 结语

error是实现做好的模板,直接调用即可。

Laravel条形码/二维码生成实战实例

0x01 安装

使用composer直接拉取组件milon/barcode

laravel 5.0/5.1

composer require milon/barcode 5.1

laravel 5.2/5.3/5.4

composer require milon/barcode 5.3

然后在config/app.php增加

'providers' => [
    ...
    Milon\Barcode\BarcodeServiceProvider::class,
    ...
]

如果需要更改配置直接使用命令

php artisan vendor:publish

添加别名

'aliases' => [
    ...
    'DNS1D' => Milon\Barcode\Facades\DNS1DFacade::class,
    'DNS2D' => Milon\Barcode\Facades\DNS2DFacade::class,
]

该组件支持的条形码类型:
PDF417,C39,C39 +,C39E,C39E +,C93,S25,S25 +,I25,I25 +,C128,C128A,C128B,C128C等等

0x02 使用

laravel 5.2/5.3/5.4在use进DNS1D和DNS2D之后,直接就可以使用

echo DNS1D::getBarcodeSVG("4445645656", "PHARMA2T");
echo DNS1D::getBarcodeHTML("4445645656", "PHARMA2T");
echo '<img src="data:image/png,' . DNS1D::getBarcodePNG("4", "C39+") . '" alt="barcode"   />';
echo DNS1D::getBarcodePNGPath("4445645656", "PHARMA2T");
echo '<img src="data:image/png;base64,' . DNS1D::getBarcodePNG("4", "C39+") . '" alt="barcode"   />';
echo DNS1D::getBarcodeSVG("4445645656", "C39");

laravel 5.1需要进行单例引入才可以使用

 private static $DNS1D;

/**
 * PrintController constructor.
 * @param DNS1D $DNS1D
 */
public function __construct(DNS1D $DNS1D)
{
    self::$DNS1D = $DNS1D;
}

然后再使用

echo '<img src="data:image/png,' . self::$DNS1D->getBarcodePNG("425X5", "C128") . '" alt="barcode"   />';

现在就出现条形码了

jQuery获取input提交的数组的值

在我们开发中,input中name的名字,如果使用name="jQueryArray[]"的形式,最后取值的时候是一个数组。例如:

<input type="text" name="jQueryArray" value="1111"/><br/>  
<input type="text" name="jQueryArray" value="1221"/><br/>  
<input type="text" name="jQueryArray" value="1331"/><br/>  

这时候使用:

$("input[name='jQueryArray']");

可以将所有name为jQueryArray的input框的值取出来,并且可以for循环将所有的值取出来,但是对于习惯使用jQuery中的val()来取值的我们却发现,这里如果使用

$("input[name='jQueryArray']")[0].val();

来取值会报错。

这是因为这个时候取出来的是一个input对象,所以我们可以使用原生js来取值,也就是:

$("input[name='jQueryArray']")[0].value;

当然,如果您非要使用val()来取值也是可以的,但是这里就需要将input对象转换为jQuery对象:

$($("input[name='ajaxOrderId']")[0]).val();

当然还可以

$("input[name^='jQueryArray']").each(function(i){
    if(i == 2) {
         alert(this.value);
     }
});

利用jQuery的each()函数来进行循环,获取其中的值。注意的是这里的this是原生DOM对象。

最新文章

最近回复

  • 裤衩哥:这文章我转了,而且我还以我自己的名字发了。2333333,你来咬...
  • :怎么生成带logo的二维码呀????
  • zirmi:哎呀,你的域名爆破工具 输入的字符不够啊
  • 小余:二维码如何弄啊,哥
  • 裤衩哥:可以要你的菊花吗?
  • admin:楼上+1
  • admin:吃瓜群众 为 落魂 打call
  • :牛逼了..........
  • 帮帮:厉害!谢谢了朋友!解决了我的问题。
  • 落魂:好多小伙伴找我要这个CSS样式,其实这个是使用的一套模块!大家可...

分类

归档

友情链接