vue前端开发笔记4 - 组件按需引入 按需引入的优势：缩小打包之后的文件体积安装插件npm install babel-plugin-component -D修改配置文件 ( babel.config.js )module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } 修改引入import {Button} from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(Button);如图：

vue前端开发笔记3 - 安装elementUI 此次安装基于vue2安装element-UInpm i element-ui -S在mian.js中引入UIimport ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);如图：使用element-ui组件<template> <div class="hello"> <h1>{{ msg }}</h1> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> </div> </template>如图：

vue前端开发笔记2 - 创建项目 创建项目1.在终端执行 vue create demo 2.选择vue版本 vue2 或 vue3 3.创建成功运行项目切换到项目的目录 cd demo 运行项目 npm run serve报错解决错误： error:0308010C:digital envelope routines::unsupported解决： export NODE_OPTIONS=--openssl-legacy-provider 或更换node版本产生原因： *V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响.在node.js V17以前一些可以正常运行的的应用程序,但是在 V17 版本可能会抛出异常*

vue前端开发笔记1 - 安装与配置 环境检查下载地址 https://nodejs.org/en/#download检查版本 node -v npm -v 重新安装 (安装到全局，从npm获取最新版本安装)npm install npm -g 卸载 npm uninstall查看/设置 当前仓库源npm config get registry 临时使用 npm --registry https://registry.npm.taobao.org install express 永久使用 npm config set registry https://registry.npm.taobao.org 或者 npm config set registry https://registry.npm.taobao.org -global 或者 npm use taobao 强制清理npm的缓存 npm cache clear --force安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org 查看版本 cpnm -v vue -V yarn

LayuiTable导出所有数据，无需修改后端代码 layui table自带的导出功能仅导出单页的数据，搜索一番之后发现大部分都是通过另外发送ajax请求，让后端进行处理，或是生成excel下载链接，或是后端返回所有数据然后用table.exportFile导出。其实可以利用render，设置limit为总数量实现数据重新加载并导出。方法可行，并不推荐。var tableDataCount = 0; table.render({ elem: '#datatab' ,url: '...数据接口' ,skin:'line' ,even:true ,method:'post' ,limit:20 ,title:'数据' ,height:'full-60' // ,size:'lg' ,cols: [[ {field:'id', width:80, title: 'ID', sort: true}, {field:'name',minWidth:'100', title: '姓名'}, ]] ,page: true , done: function(res, curr, count){ tableDataCount = count;//记录所有数据数量 } }); //在html中设置一个导出全部的按钮，事件： table.reload('datatab',{ page: 1, limit:tableDataCount //加载所有数据 ,where: {where} ,done:function (){ //导出所有数据 table.exportFile("datatab",false,"xls"); //恢复数据分页显示 table.reload('datatab',{ page: 1, limit:20 ,where: {where} ,done:function (res, curr, count){ tableDataCount = count; } }) } })

thinkphp6 异常处理Exception,自定义异常处理，错误页面 {mtitle title="自定义异常捕获"/}{ } 在 app 下创建 BaseException.php 文件，继承 Exception { } 在 app 下的 ExceptionHandle.php 文件中，添加该异常机制处理逻辑{ } 在控制器中抛出异常{ } 运行结果{dotted startColor="#ff6c6c" endColor="#1989fa"/}{mtitle title="异常处理接管"/}{ } 在 app/admin/ 下创建 exception 文件夹，并创建 Error.php 文件{ } 在 app/admin/ 下创建 provider.php 文件，绑定自定义异常处理handle类{ } 在 admin 应用下的异常都有 Error.php 处理{ } 测试结果{dotted startColor="#ff6c6c" endColor="#1989fa"/}{mtitle title="自定义错误页面"/}{ } 在 app/tpl 下创建模版文件 think_exception_error.tpl { } 在 config/app.php 中配置模版文件路径{ } 在 Base.php 中创建 error() 方法{ } 在 Index.php 控制器中继承 Base 并使用 error() 方法{ } 执行结果

thinkphp6 前置/后置中间件以及使用 在下方的执行结果中可以看到，前置中间件和后置中间件的执行顺序： 前置中间件 - 控制器方法代码 - 后置中间件 - 控制器方法return { } 在 admin/Index/index 方法中写入： { } 在中间件 Check 中写入： { } 执行结果：{dotted startColor="#ff6c6c" endColor="#1989fa"/}1.前置中间件中的 $request 不能获取控制器和方法名，但是可以通过 pathinfo 获取2.后置中间件可以通过 $request->controller(); 获取控制器名称， $request->action(); 获取方法名称

thinkphp6 中间件的介绍与基本使用 中间件是什么？中间件主要用于拦截或过滤应用的HTTP请求，并进行必要的业务处理可以看成是 数据访问过程中的拦截器 。比如可以在控制器处理之前，先验证token是否过期，是否正确等。1.创建中间件可以手动创建，也可以使用命令创建中间件php think make:middleware Check2.注册全局中间件全局中间件在 app 目录下面 middleware.php 文件中定义访问任何一个控制器都会先执行这个中间件3.在控制器中单独注册中间件只有访问 Index 控制器时，才会执行这个中间件。访问 其他 控制器不会执行{message type="warning" content="如果在全局中间件中注册了这个控制器，又在控制器中注册了，那么中间件会执行2次"/}4.在路由中注册中间件在 route/app.php 中编辑路由，注册中间件那么在访问这个路由时，会执行此中间件

thinkphp6 安装以及常用命令 开发手册：https://www.kancloud.cn/manual/thinkphp6_0/1037481安装TP6( 稳定版 )composer create-project topthink/think tp运行安装后测试运行php think run浏览器输入，即可访问首页http://localhost:8000/或者指定端口php think run -p 80安装多应用模式扩展composer require topthink/think-multi-app使用命令创建一个应用php think build news在app下创建一个news应用

composer 镜像操作以及采用命令 全局配置更换到 阿里镜像 composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/ 取消配置 composer config -g --unset repos.packagist项目配置将当前项目更换到阿里云镜像 composer config repo.packagist composer https://mirrors.aliyun.com/composer/ 取消配置 composer config --unset repos.packagist其他操作更新到最新版本 composer self-update 执行诊断命令 composer diagnose 清除缓存 composer clear 若项目之前已通过其他源安装，则需要更新 composer.lock 文件，执行命令 composer update --lock composer 命令增加 -vvv 可输出详细的信息 composer -vvv require alibabacloud/sdk 查看已安装的包 composer show composer show -t 查找相关的包 composer show 'symfony/*' symfony 为要查找的关键字