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

使用 Bootstrap3 框架实现穿梭框代码

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
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap3 穿梭框</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1 class="text-center">Bootstrap3 穿梭框</h1>
    <fieldset>
        <table class="table table-bordered dchannel-table">
            <tbody>
            <tr class="item-default">
                <td style="width: 50%;">
                    <select id="sel_all_area" multiple="multiple" size="10" style="width:100%;">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                </td>
                <td style="width: 50px;">
                    <button type="button" class="btn btn-default btn-small" id="btn_select_all_area"><span class="glyphicon glyphicon-forward"></span></button>
                    <button type="button" class="btn btn-default btn-small" id="btn_choose_selected_area"><span class="glyphicon glyphicon-chevron-right"></span></button>
                    <button type="button" class="btn btn-default btn-small" id="btn_remove_selected_area"><span class="glyphicon glyphicon-chevron-left"></span></button>
                    <button type="button" class="btn btn-default btn-small" id="btn_remove_all_area"><span class="glyphicon glyphicon-backward"></span></button>
                </td>
                <td style="width: 50%;">
                    <select id="sel_selected_areas"  multiple="multiple" size="10" style="width:100%;">
                    
                    </select>
                </td>
            </tr>
            </tbody>
        </table>
    </fieldset>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    <script>
        $(function(){
            var all_area = $("#sel_all_area"), selected_areas = $("#sel_selected_areas");
            $("#btn_select_all_area").click(function(){
                var selectedAreaArray = [];
                all_area.find("option").each(function(i){
                    selectedAreaArray[i] = $(this).val();
                    $(this).appendTo(selected_areas);
                });
                doSubmit('add', selectedAreaArray.toString());
                return false;
            });
            $("#btn_choose_selected_area").click(function(){
                var selectedAreaArray = [];
                all_area.find("option:selected").each(function(i){
                    selectedAreaArray[i] = $(this).val();
                    $(this).appendTo(selected_areas);
                });
                doSubmit('add', selectedAreaArray.toString());
                return false;
            });
            $("#btn_remove_selected_area").click(function(){
                var selectedAreaArray = [];
                selected_areas.find("option:selected").each(function(i){
                    selectedAreaArray[i] = $(this).val();
                     $(this).appendTo(all_area);
                });
                doSubmit('del', selectedAreaArray.toString());
                return false;
            });
            $("#btn_remove_all_area").click(function(){
                var selectedAreaArray = [];
                selected_areas.find("option").each(function(i){
                    selectedAreaArray[i] = $(this).val();
                     $(this).appendTo(all_area);
                });
                doSubmit('del', selectedAreaArray.toString());
                return false;
            });
        })
    
        function doSubmit(select_type, key){
            console.log(`更新 类型: ${select_type}, KEY: ${key}`);
        }
    
    </script>
  </body>
</html>

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

Laravel为不同的缓存系统封装了统一的API，缓存配置文件./config/cache.php

主要的缓存类型(驱动)

  • file - 文件，默认使用
  • memcached - memcached
  • redis - redis
  • database - 数据库

默认laravel支持缓存介质：apc, array, database, file, memcached, redis

在配置文件.env中修改驱动类型

阅读全文 »

发表于 | 分类于 ， |
字数统计: 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

0%