六面体-大师的网站

 2.ICP备案管理（VUE+ Thinkphp+mysql）线上项目：http://icp.liumianti.top/

  账户：张三   密码：123456

设计的初衷：备案资质多达20个项目，有时查看信息时，要翻阅资料，时间浪费很多，因此 制作一个可视化 备案中心页面
开源项目：http://caijt.com/it/#/
前端：
 1. 采用的是vue-cli3.0脚手架开发
 2. elementui 做UI框架
 3. 引入 normalize.css -- 解决不同浏览器 样式的一致性
 4. 引入 NProgress -- 页面打开 进度条提醒
后端：
 数据处理： Thinkphp(增删改查) 难点：联表查询 输出不同表里的指定字段
 数据库：MYSQL
难点：vue-cli3.0 打包后,js多达几十个 怎么解决？
解决方案： 安装 webpack压缩插件-----compression-webpack-plugin，并在vue.config.js 配置
特色：
 1.添加了 微信公众号测试号 扫码登陆功能
 2.对涉及身份证、手机号、邮箱 采用了掩码处理
 3.备案首页--采用城市拼音首字母规则 排序

原文转载：javascript设计模式系列 : https://www.cnblogs.com/webFrontDev/p/3553402.html

question1: el-table 中 根据数据不同 动态添加 class

 要注意的是： scope.row.变量   ，不是  scope.变量 ，  多了 一个 row

<el-table>
        <el-table-column
          prop="subject_state"
          label="备案状态"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <span
              :class="[
                scope.row.subject_state == '未核实' ? 'orange' : '',
                scope.row.subject_state == '进行中' ? 'blue' : '',
                scope.row.subject_state == '已完成' ? 'green' : '',
                scope.row.subject_state == '未整改' ? 'red' : '',
                scope.row.subject_state == '已注销' ? 'pink' : '',
              ]"
            >
              {{ scope.row.subject_state }}
            </span>
          </template>
        </el-table-column>
</el-table>

参考链接：

webpack Vue前端项目打包后生成的chunk-vendors文件过大，导致加载太慢,生成的js文件过多，http请求太频繁问题解决

https://blog.csdn.net/sunshu123456/article/details/108255608

解决！！前端项目打包后生成的chunk-vendors文件过大，导致加载太慢

https://blog.csdn.net/weixin_43850586/article/details/103915473

使用compression-webpack-plugin版本问题报错,查阅资料才知道是因为在执行npm install时安装了最新的版本,

只需要 安装低版本就行

npm install --save-dev compression-webpack-plugin@1.1.12​

图标库

Iconfont-阿里巴巴矢量图标库： https://www.iconfont.cn/

Font Awesome图标：http://www.fontawesome.com.cn/faicons/

两种形式：一种Json数据：{}， 一种Array数据：[]

1） Array篇

export function citysfil (citys) {
  const FristPin = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
  const cityArray = []
  const cityJson = {}
  for (let i = 0; i < FristPin.length; i++) {
    cityJson[FristPin[i]] = citys.filter(function (value) {
      return value.firstletter === FristPin[i]
    })
    cityArray[i] = {
      pinyin: FristPin[i],
      item: cityJson[FristPin[i]]
    }
   
  }
 
  return cityArray
}

2） Json篇

export function citysfil (citys) {
  const FristPin = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
  const cityArray = []
  const cityJson = {}
  for (let i = 0; i < FristPin.length; i++) {
    cityJson[FristPin[i]] = citys.filter(function (value) {
      return value.firstletter === FristPin[i]
    })
    cityArray[i] = {
      pinyin: FristPin[i],
      item: cityJson[FristPin[i]]
    }   
  }
  return cityArray
}

var str = str.replace(/@@/g,"\n");​​

其中“@@”为要替换的字符

添加样式  

 white-space: pre-wrap;​

.el-drawer.rtl {
  overflow: scroll;
}

原文转载： https://blog.csdn.net/qq_33189961/article/details/107167139

优点：

1.节省了输入步骤，采用一个微信号绑定一个账号的方式

2. 防止他人登陆窃取数据

具体的步骤可分为以下：

1.前端点击微信扫码 => 向后端请求二维码 => 后端向微信公众号发送 请求 （获取二维码【带参数 “key” ----后端随机自定义的变量】）

2. 后端返回给前端 带参数的二维码， 前端展现二维码 => 开始轮询（向后端发送请求，验证是否扫码成功【账户的密钥‘key’】）

3. 手机扫描二维码 => 触发微信 扫码事件=>  向数据库 账户添加密钥‘key’

4. 前端轮询 发现 账户存在 密钥'key'   => 验证扫码成功 =>登陆成功

参考链接：微信扫码关注公众号并登录网站