Echarts开发小技巧
格式化数字,三个数字一个逗号12345678export function parseNumber(num) { try { let newNum = parseInt(num) return newNum.toLocaleString() } catch (error) { return 0 }}
环形图添加百分比显示在 series 中添加如下代码表示在页面上会显示百分比
123456label: { formatter(val) { return `${val.name} ${parseNumber(val.value)} (${val.percent}%)` }}
在 tooltip 中添加如下代码,会在鼠标悬浮上去时显示百分比,其中 val.marker 表示每个颜色小圆点
1234formatter(val){ ...
form-create 使用
form-create 使用官网:http://www.form-create.com/v2/element-ui/
安装1npm i @form-create/element-ui
引入在 main.js 中导入并注册
功能演示123456789101112131415161718192021222324252627282930313233343536373839404142<template> <div> <form-create v-model="fApi" :rule="rule" :option="option" :value.sync="value" ></form-create> </div></template><script>export default { data() { return { //实 ...
实现国际化
实现国际化安装依赖,限制在 8.0 版本内,最新的 9.0 版本会报错导致页面显示空白(本人已踩坑)
1npm install express@8.26.8 --save
然后再根目录新建 I18n 文件夹,分别创建 index.js , config/zh.js,config/en.js。目录结构如下
分别往 zh.js 和 en.js 文件中定义一些内容
zh.js
123export default { language: "中文"}
en.js
123export default { language: "English"}
然后在 index.js 中引入,同时和 elementUI 的国际化做兼容处理
12345678910111213141516171819202122232425262728import Vue from 'vue'import VueI18n from 'vue-i18n'import zh from ' ...
click.stop 阻止事件冒泡
@click.stop 阻止事件冒泡首先来看一段代码
1234567<div> <div @click="tap1"> box1 <div @click="tap2">box2</div> </div></div>
12345678methods: { tap1() { console.log('tap1') }, tap2() { console.log('tap2') }}
当我们点击 box2 时会同时打印 tap1 和 tap2。这就是所谓的事件冒泡。
然后我们如下修改,使用 @click.stop
123456<div> <div @click="tap1"> box1 <div @cli ...
el-popover 组件使用
el-popover 组件使用引入 elementUI 后可以使用 el-popover
el-popover 可以让我们在一个页面中使用弹框的方式显示另外一个页面,使用方法如下:
123456789<el-popover placement="bottom" trigger="click" width="500px"> <span slot="reference">点击在底部显示内容</span> <ul> <li>12121</li> <li>12121</li> <li>12121</li> <li>12121</li> </ul></el-popover> ...
env配置文件的使用
.env配置文件的使用命名方式首先关于文件名,必须是固定的文件名,不可修改,并且要在项目根目录创建。如下:
.env 通用配置文件
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件
文件内容属性名必须以 VUE_APP_ 开头,例如:VUE_APP_URL
文件加载当我们按照固定的格式创建好文件后,无需手动配置,在我们每次启动或者打包项目时会自动加载我们配置好的配置文件
我们可以直接通过打印 process.env 来查看配置信息
例如我们通过 npm run serve 启动项目后,系统自动加载的是 .env 和 .env.development ,通过打印 process.env 得到如下结果
我们发现除了我们手动配置的属性外,还有两个额外的固定属性:BASE_URL ,NODE_ENV 。
其中 NODE_ENV 指明了当前的运行环境
然后我们输入 npm run build 打包项目,点击生成的 index.html。打开控制台查看打印的 process.env
我们可以利用此特性来针对不同运行环境作出不同 ...
Vuex 使用和进阶
Vuex 使用和进阶安装1npm install vuex -S
在根目录添加 store/index.js
1234import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)
在 main.js 中引入
12345678import Vue from 'vue'import App from './App.vue'import store from './store'new Vue({ store, render: h => h(App)}).$mount('#app')
运行原理首先来看一下vuex的运行原理图
Vue Components 使我们的组件,组件会触发(dispatch)一些事件或动作(Actions)
我们在组件中触发动作肯定是想获取Vuex中数据或者改变Vuex中的数据,但是数据是集中管理的,不能直接被修改。所以我们把这个动作提交(Commit)到Mu ...
JDBC核心技术
JDBC概述
JDBC(Java database Connectivity)是一个独立于特定数据管理系统、通用的 SQL 数据库存取和操作的公共接口
JDBC为访问不同的数据库提供了一种统一的途径,为开发者屏蔽了一些细节问题。
JDBC的目标是使Java程序员使用JDBC可以连接任何提供了JDBC驱动程序的数据库系统,这样就使得程序员无需对特定的数据库系统的特点有过多的了解,从而大大简化和加快了开发过程。
驱动下载和引用首先进入官方地址
https://dev.mysql.com/downloads/connector/j/
打开 idea 在项目目录新建一个文件夹,并起名为 lib
然后将上面复制的 jar 包粘贴到该文件夹下,点击OK
然后再 jar 包上右键选择 Add as Libary
点击OK完成驱动导入
连接数据库方式一1234567891011121314151617181920@Test// 数据库链接方式一public void test1() throws SQLException { Driver driver = new ...
04 约束和视图
约束什么是约束约束是表级的强制规定
为什么需要约束添加数据可以保证数据的完整性,精准性,可靠性。它是防止数据库中存在不符合语义规定的数据和防止因错误信息的输入造成无效操作或者错误信息而提出的。
约束的分类
根据约束的列的限制,约束可分为
单列约束。每个约束只能约束一类列
多列约束。每个约束可以约束多列
根据约束的作用范围,约束可分为
列级约束。只能作用一个列上,跟在列的定义后面
表级约束。可以作用在多个列上,不与列一起,而是单独定义
约束的类型
定义
含义
NOT NULL
非空约束,规定某个字段不能为空
UNQUE
唯一约束,规定某个字段在整个表中是唯一的
PAOMARY KEY
主键约束(非空,唯一)
FOREIGN KEY
外键约束
CHECK
检查约束
DEFAULT
默认值约束
查看表约束123#information_schema数据库名(系统库) #table_constraints表名称(专门存储各个表的约束) SELECT * FROM information_schema.table_constraints WHERE t ...
03 数据增删改
MySQL中的标识符命名规则
数据库名,表明不得超过30个字符,变量名限制为29个
必须只能包含A-Z,a-z,0-9,_ 共63个字符
数据库名,表名,字段名等对象名中间不要包含空格
同一个MySQL软件中,数据库不能同名,表明不能重复,同一个表中列名不能重复
必须保证字段名不和保留关键字冲突
保持字段名和类型的一致性
MySQL中的数据类型
类型
类型举例
整数类型
INT、TINYINT、SMALLINT、MEDIUMINT、BIGINT
浮点累心
FLOAT, DOUBLE
定点数类型
DECLMAL
位类型
BIT
日期时间类型
YEAR, TIME, DATE, DATETIME, TIMESTAMP
文本字符串类型
CHAR, VARCHAR, TINYEXT, TEXT, MEDIUMTEXT, LONGTEXT
枚举类型
ENUM
集合类型
SET
二进制字符串类型
BINARY, VARBINARY, TINYBLOB, BLOB, MEDIUMBLOB, LONGBLOB
JSON类型
JSON对象,JSON数组
...