发表于 | 分类于 ， |
字数统计: 215 | 阅读时长 ≈ 1

在数据查询中经常会使用条件查询，这些查询条件有些是相同的，scope可以实现这些相同条件查询的复用。

普通 scope

定义

方法名为 scope + 首字母大写单词 (这个可以随便定义)

1
2
3
4
public function scopeStatus($query)
{
    return $query->where('status',1);
}
阅读全文 »

发表于 | 分类于 ， |
字数统计: 376 | 阅读时长 ≈ 1

软删除就是逻辑删除，数据保留单标记上删除状态，一般我们会用删除时间来作为标记，这样标记状态有了，删除时间也有了。

用Laravel 自带的 Eloquent ORM 来实现软删除。

  1. 首先在数据迁移文件中添加删除时间字段

./database/migrations/2014_10_12_000000_create_users_table.php

阅读全文 »

发表于 | 分类于 ， |
字数统计: 181 | 阅读时长 ≈ 1

给大家介绍几种常用简单的MySQL导入数据命令

  1. MySQL命令导入

使用 mysql 命令导入语法格式为：

1
2
[root@localhost /]# mysql -u用户名 -p 表名 < /要导入的文件路径.sql 
Enter password: 输入密码

实例：

使用 mysql 命令导入语法格式为：

1
2
[root@localhost /]# mysql -uroot -p test < /usr/local/src/test.sql 
Enter password: 123123

以上命令将将备份的整个数据库 test.sql 导入。

  1. source 命令导入

source 命令导入数据库需要先登录到数库终端：

1
2
3
4
mysql> create database db1;      # 创建数据库
mysql> use db1;                  # 使用已创建的数据库 
mysql> set names utf8;           # 设置编码
mysql> source/usr/local/src/db1.sql  # 导入备份数据库

发表于 | 分类于 ， |
字数统计: 153 | 阅读时长 ≈ 1

使用 Antd Vue table 利用 rowClassName 自定义带斑马纹的表格，设置后并未生效

1
2
3
4
5
6
7
8
<a-table
    class="ant-table-striped"
    size="middle"
    :columns="columns"
    :dataSource="data"
    :rowClassName="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
    bordered
  />
1
2
3
4
5
<style scoped lang="less">
.ant-table-striped .table-striped td {
  background-color: #fafafa;
}
</style>

原因是这样的样式不能放在scoped中，应写在全局样式中

阅读全文 »

发表于 | 分类于 ， |
字数统计: 323 | 阅读时长 ≈ 1

Cookie介绍

主要用于存储访问过的网站数据，把浏览器的信息存储到本地电脑中，实现客户端和服务器端的通讯。

Cookie特点

  • 以文本形式保存(.txt)
  • Cookie存储信息不安全（不能存放重要的信息）
  • Cookie中有域（domain）和路径的概念,浏览器是一个比较安全的环境，所以不同的域之间不能直接访问（js的同源策略限制）
阅读全文 »

发表于 | 分类于 ， |
字数统计: 802 | 阅读时长 ≈ 3

我们本地开发调试一般是 npm run serve 或 yarn serve，然后打开 localhost:8080（本机的IP），此时如果调用后端接口，可能会产生跨域，那如何解决呢？

解决跨域的方案

  1. jsonp
    • 只支持GET请求，JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
  2. cors
    • CORS支持所有类型的HTTP请求，是跨域HTTP请求的根本解决方案
  3. Node中间件代理(两次跨域)
    • 通过同源策略对服务器不加限制。
  4. Nginx反向代理
    • 通过同源策略对服务器不加限制。

日常工作中，生产环境用得比较多的跨域方案是cors和nginx反向代理。
本地项目中调试用的最多的就是 node 代理，当然像 nginx、charles（抓包工具）做代理也可以，只要你会配置。

阅读全文 »

发表于 | 分类于 ， |
字数统计: 84 | 阅读时长 ≈ 1
  1. 修改文件 src\services\api.js
1
2
3
4
//跨域代理前缀
const API_PROXY_PREFIX='/adminapi'
const BASE_URL = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_API_BASE_URL : API_PROXY_PREFIX
//const BASE_URL = process.env.VUE_APP_API_BASE_URL
  1. 修改文件vue.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  devServer: {
    proxy: {
      '/adminapi': { //此处要与 /services/api.js 中的 API_PROXY_PREFIX 值保持一致
        target: process.env.VUE_APP_API_BASE_URL,
        changeOrigin: true,
        pathRewrite: {
          '^/adminapi': '/'
        }
      }
    }
  },
  ......
}

然后重启yarn serve

发表于 | 分类于 ， |
字数统计: 971 | 阅读时长 ≈ 3

Active Record 可以将相关数据集中进来， 使其可以通过原始数据轻松访问。 例如，客户数据与订单数据相关 因为一个客户可能已经存放了一个或多个订单。这种关系通过适当的声明， 你可以使用 $customer->orders 表达式访问客户的订单信息 这表达式将返回包含 Order Active Record 实例的客户订单信息的数组。

声明关联关系

你必须先在 Active Record 类中定义关联关系，才能使用 Active Record 的关联数据。 简单地为每个需要定义关联关系声明一个 关联方法 即可，如下所示，

阅读全文 »

发表于 | 分类于 ， |
字数统计: 97 | 阅读时长 ≈ 1

这样的问题出现，是因为MySQL的配置文件my.ini中sql_mode的值，逗号后面加上了空格导致的无法启动，需要手动删除空格就可以了。

my.ini原来部分代码：

1
2
3
4
5
6
7
tmp_table_size=64M
wait_timeout=120
sql_mode=STRICT_TRANS_TABLES, NO_ZERO_IN_DATE, NO_ZERO_DATE, ERROR_FOR_DIVISION_BY_ZERO, NO_AUTO_CREATE_USER, NO_ENGINE_SUBSTITUTION

[client]
port=3306
default-character-set=utf8

my.ini修改后代码：

1
2
3
4
5
6
7
tmp_table_size=64M
wait_timeout=120
sql_mode=STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION

[client]
port=3306
default-character-set=utf8

重启即可

发表于 | 分类于 ， |
字数统计: 208 | 阅读时长 ≈ 1

JS 60秒倒计时代码

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时定时器</title>
</head>

<style>
    .main {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    #timer {
        width: 100px;
    }
</style>

<body>
    <div class="main">
        <div id="timer"></div>
        <a href="javascript:;" id="startBtn">开始</a>
    </div>
    <script>
        let startBtn = document.getElementById('startBtn');
        let timerNode = document.getElementById('timer');
        let senond = 0
        function timer() {
            startBtn.style = "display:none";
            senond = 60;
            timerNode.innerText = senond;
            let promise = new Promise((resolve, reject) => {
                let setTimer = setInterval(() => {

                    senond--;
                    timerNode.innerText = senond;
                    console.log(senond);

                    if (senond <= 0) {
                        resolve(setTimer);
                        startBtn.style = "display:block";
                    }
                }, 1000);
            });
            promise.then((setTimer) => {
                clearInterval(setTimer);
            });
        }


        startBtn.addEventListener('click', timer, false);
    </script>
</body>

</html>
0%