使用Quasar设计Material和IOS风格的响应式网站
本文转载自:https://segmentfault.com/a/1190000018332068,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。
Quasar
Quasar
是一款基于 Vue.js
开发的 UI
框架,可以让你轻松构建网站简洁明快的界面,更重要的是它还能让你轻松做好 RWD
(响应式网站设计),除此之外还能帮助你加上 PWA
,使你的网页变成手机上的 App
。
以下内容来自官网 Quasar Framework ,概括了 Quasar
的主要特点。
Quasar
是 MIT
许可的开源框架(基于 Vue ),可帮助 Web
开发人员创建:
响应式网站
PWA
通过 Apache Cordova
构建移动 App
多平台桌面应用程序(使用 Electron
)
选择Quasar的5个理由
内建了 Material
及 IOS
两种主题
组件均内建 RWD
快速响应
多样的基础 UI
组件库
自带了 Vuex
、 VueRouter
、 Vuei18n
(多国语系)
强大的部署工具
安装指南
首先安装 Node.js
和 vue-cli
,具体安装方法查看官网资料。
然后安装 Quasar
, npm install -g quasar-cli
。
最后搭建项目: quasar init
取代 main.js
的 quasar.config.js
设置文件:
引用Quasar内建的组件,可以不用在每个地方 import components
i18n
设置多国语系
icons
移除注释即可使用
开发模式
下的HTTPS以及 port
设置
CSS
动画设置
其他外部插件的设置
PWA
、 manifest
等设置
quasar.config.js
以前在 Vue
安装其他的 plugin
会在 main.js
里引入,而在 Quasar
就会取代 main.js
成为全部配置文件。
CSS的引入都会放在这个文件,默认的位置 /src/css
,所需的CSS库已经准备好,可以直接使用。
这里是设置是否引入 quasar-extras 的内容。
Package
name
说明
Roboto Font
roboto-font
Material主题的建议字体
Roboto Font Latin Extended
roboto-font-latin-ext
Material主题的建议字体
Material Icons
material-icons
Material风格的 icon
MDI (Material Design Icons)
mdi
Material风格的 icon
扩展
Font Awesome
fontawesome
自由选择 icon
Ionicons
ionicons
ionicons
的 icon
Animate.css
animations
网页组件动画
默认 true
,用来提升 webpack
运行时的性能
设置 Vue Router
的模式,有 history
、 hash
两种值。
包含两种Vue的编译模式 vue runtime
+ compiler
,默认只有 runtime-only
运行时编译
使网站支持 gzip
的格式。
在 build
时会运行 webpack-bundle-analyzer
工具。
提取CSS到文件中。 VueLoader
在 dev
模式中 服务器 的设置。
https
port
设置成指定的 port
,当quasar在运行 dev
模式时,遇到相同的 port
时会自己再 +1
。
是否在 dev
指令执行完成后,自动开启此网站的分页在浏览器上。
Layout
quasar dev
打开初始页面,页面的 header
和 drawer
都是在 layout/MyLayout.vue
里。
一些常用的属性:
属性
取值
说明
side
String
有两个值 left
, right
,决定要出现在左边还是右边
overlay
Boolean
设置侧边栏弹出时是挤压 q-page-container
还是直接盖在上面
content-style
Object
设置侧边栏的CSS
content-class
String/Object/Array
设置侧边栏的 class
mini
Boolean
把侧边栏缩小到只有 icon
这里的CSS要用 Object
的方式传入。
:content-style="{color: 'red'}"
旅游网站-Header
演示项目:
Toolbar
ToolbarTitle
Button
color="primary" text-color="primary" inverted> 好玩旅游网 slot="subtitle">WeFunWeb
class="gt-xs"> class="q-mr-md" flat>精选景点 class="q-mr-md" flat>美食地图 class="q-mr-md" flat>夜宿晓行 class="q-mr-md" flat>夜宿晓行 class="q-mr-md" flat>注册 class="q-mr-md" flat>登录
Toolbar
Quasar内建色: color-palette
在 /src/css/themes/common.variables.styl
里面增加调色板的颜色。
让 背景色 变成 白色 ,然后使原来白色的文字变成设置的 背景色 。
加上玻璃效果
QToolbarTitle
用来设置显示像素高于 576px
的页面样式。
mr
等于 margin-right
sm
就是 size
的值为 small
其他非外观的功能属性:
disable
, :disable="true"
时按钮禁用
label
设置按钮的文字
type
可以是 button
、 submit
、 reset
其中一种
loading
,值为 true
显示读取中
percentage
显示读取的圆圈,要跟 loading
一起使用
dark-percentage
用在亮色系的按钮上
List&ListItem
修改Drawer
v-model="rightDrawerOpen"
content-class="bg-grey-10"
side="right"
设置了 rightDrawerOpen
需要加到 data
里。
export default { name: 'MyLayout', data () { return { rightDrawerOpen: false } } }
手机端按钮
控制显示的 class
用 lt-sm
只要像素小于 sm(768px)
就会显示该区域。
设置List和 ListItem
使用Dark属性使得组件内容在暗色背景下更好显示
List中可用组件,这些组件需要自己去配置文件中自行引入。
QListHeader
QItemSeparator
QItem
QItemSide
QItemMain
QItemTitle
旅游网站-Carousel页面轮播
建立新的首页
在 src/pages/
下新建 Index
文件夹,并在此文件夹下新建 Index.vue
作为首页,删除原来的 Index.vue
文件。
修改Vue Router
在 src/router/routers.js
修改 Index.vue
的路径。
建立轮播的区块
在 src/pages/Index
下新建 SectionCarousel.vue
,并在 Index.vue
中引入。
然后再 template
下的 q-page
中加入 section-carousel
开始写轮播
官方Carousel
在设置文件 quasa.config.js
中引入:
framework: {
components: [ 'QCarousel', 'QCarouselSlide', 'QCarouselControl' ... ], }
加入轮播的图片/页面
color="white" infinite arrows autoplay height="400px" > img-src="statics/images/papercut1.jpg"/> img-src="statics/images/papercut2.jpg"/>
加入文字区块
Quasar在 carousel
中有个子组件 QCarouselControl
用来自定义按钮在页面上。
根据官方文档的范例, QCarouselControl
要放在 QCarousel
的最后面,也就是 QCarouselSlide
的后面。
position="center" slot="control-nav" slot-scope="carousel" class="carouselInput">
在 q-carousel-control
中加入内容:
class="main"> class="title">新锐旅游网站 class="subtitle">您身边的好玩专家
发现周边好玩的地方,玩得快乐,玩得精彩。
加上CSS
调整手机版CSS
@media (min-width: 768px) { .carouselInput .title { font-size 48px } .carouselInput .subtitle { font-size 24px } } @media (max-width: 768px) { .carouselInput .title { font-size 24px } .carouselInput .subtitle { font-size 16px } }
旅游网站-搜索框
加入搜索框
input
首先到 quasar.config.js
中引入 QInput
framework: {
components: ['QInput']
}
在
后面加入
q-input
内容:
inverted-light
color="white" placeholder="输入城市/景点 或是想去的地方" :after="[{icon:'fas fa-search-location'}]" v-model="search">
inverted
显示 背景
color
主题颜色
after
用来显示输入框前后 icon
最后绑定 v-model="search"
,此时需要在 data
中添加 value
值,否则会报错。
data() {
return {
search: ''
}
}
调整排版
使用 Flex CSS 调整组件长度。
class="row"> class="col-md-2 col-xs-1">
class="col-md-8 col-xs-10"> ...>
class="col-md-2 col-xs-1">
自动填入 autocomplete
引入 QAutocomplete
组件:
framework: {
components: ['QAutocomplete']
}
加入 q-autocomplete
:
...>
:static-data="{field: 'label', list: countries}"/>
设置静态数据
countries: [
{label: '广州市', icon: 'fas fa-map-marker-alt'}, {label: '深圳市', icon: 'fas fa-map-marker-alt'}, {label: '珠海市', icon: 'fas fa-map-marker-alt'}, {label: '[网美景点]香山公园,秋季赏枫胜地', stamp: '北京市'}, {label: '珠海长隆[海豚剧场]精彩不容错过!精彩变身演出抢先看', stamp: '珠海,长隆', rightTextColor: 'pink-13'} ]
自定义过滤器 filter
在 q-autocomplete
中加入 filter
:
:static-data="{field: 'label', list: countries}" :filter="advFilter" />
引入 lodash
处理 filter
。
旅游网站-Popover弹出框
加入Popover组件
在 quasar.config.js
中引入 QPopover
。 Popover
no-focus
fit
v-show="!search"
内容排版
使用 FlexCSS
来进行排版。
class="row viewList"> class="col-sm-4 col-xs-12">
class="col-sm-4 col-xs-12">
class="col-sm-4 col-xs-12">
设配手机端,在CSS底部加入:
@media (max-width: 576px) {
.viewList {
width: 280px
}
}
解决在手机像素下原来 Popover
不能自动 fix
的问。这里应该是小于Popover的 fix
的 最小宽度 。
设置内容(List&Item)
列表类直接用 list
做最快。
class="col-sm-4 col-xs-12"> 热门目的地 珠海
加入右侧Icon及文字
在 src/components
下新建 LIcon.vue
,提升组件复用。
主要使用了 q-icon
来引入 Font Awesome 的 icon
。
在原来的页面引入子组件
具体代码:
SectionCarousel.vue
src/components/LIcon.vue
旅游网站-Cards卡片
建立并引入第二个区块
在 src/pages/Index
下新建 SectionCards.vue
组件,用来作为卡片区块。
在 Index.vue
中引入 SectionCards.vue
。
区块内版面规划
class="row"> class="col-12">本月最精选 class="col-lg-3 col-sm-6 col-xs-12">卡片一 class="col-lg-3 col-sm-6 col-xs-12">卡片二 class="col-lg-3 col-sm-6 col-xs-12">卡片三 class="col-lg-3 col-sm-6 col-xs-12">卡片四
制作卡片
卡片内的内容都会大量重复,所以直接把卡片独立成一个组件。
在 src/components/
下新建一个 LCard.vue
。
在 quasar.config.js
中引入卡片组件 Cards
framework: {
components: [ 'QCard', 'QCardTitle', 'QCardMain', 'QCardMedia', 'QCardSeparator', 'QCardActions' ] }
卡片主要分成三个部分:
q-card-media
q-card-title
q-card-main
q-card-actions
q-card-separator
在 SectionCards.vue
中引入 LCard.vue
。
class="col-lg-3 col-sm-6 col-xs-12">
import LCard from 'src/components/LCard.vue' export default { components:{ LCard }, }
加上Icon
继续补上 评分 和 地标 的 Icon
。
让LCard的文字能从父组件引入
让 LCard.vue
能够动态获取数据:
inline> :src="image"/> {{title}} class="q-mt-sm" slot="subtitle"> :icon="'fas fa-star'" :text="rate" :color="'orange'" class="q-mr-md"/> class="q-mr-sm">{{comment}}个评价 {{view}}人浏览
:icon="'fas fa-map-marker-alt'" :text="locate" :color="'grey'" class="q-mr-md"/>
在SectionCards设置数据
新增一个 data
数据 monthBestList
,然后在 template
模板中使用 v-for
获取数据并显示。
v-for="(data,index) in monthBestList"> class="col-lg-3 col-sm-6 col-xs-12 q-pa-sm" :key="index"> :title="data.title" :rate="data.rate" :comment="data.comment" :view="data.view" :locate="data.locate" :image="data.image" />
调整CSS及layout
旅游网站-制作景点详情页
在 src/pages
下新建 place
文件夹,并在此文件夹下新建 Index.vue
作为文章的主要页面。
设置Vue Router
要进行页面导航/切换需要用到Vue Router。
在 router/routes.js
中加入导航:
const routes = [ { path: '/', component: () => import('layouts/MyLayout.vue'), children: [ {path: '', component: () => import('pages/Index')}, {path: 'Place', component: () => import('pages/Place')} ] } ];
在 http://localhost:8080/#/place
中查看效果。
加入视差(Parallax)组件
视差(Parallax)
在 quasar.config.js
中引入 QParallax
组件。
:src="localData.image" :height="400"> {{ localData.title }}
主题部分的页面排版
按照8格+4格进行排版:
class="row place-main"> class="col-8"> class="col-4">
CSS补上左右 margin 5%
让页面看起来不会太满。
.place-main {
margin-left 5%
margin-right 5%
}
设置左边画面
这里要用Quasar的面包屑 BreadCrumbs 组件。
在 quasar.config.js
中引入:
'QBreadcrumbs',
'QBreadcrumbsEl',
加上景点信息及评分的排版
这里按照 8格+4格
设定,左侧栏要设为文字靠右对齐。
加上景点信息
引入 LIcon.vue
图标组件:
class="col-8 info-left"> class="q-mt-sm" :text="'景点编号:' + localData.id" :icon="'fas fa-tag'" :color="'grey'"/> ...
加上评分
评分组件 Rating
表单组件-Field
表单字段(Field)
Field的组件有 QInput
、 QSeclet
、 QDatetime
、 QChipsInput
引入组件
在 quasar.config.js
中引入组件
基本范例
label="信箱"> suffix="@gmail.com" v-model="model"/>
label
设置标题文字
icon
设置标题的 icon
icon-color
设置标题 icon
的颜色
helper
组件地下的辅助文字
error
控制组件在错误时会变成红色警示
error-label
错误时会显示的文字
warning
控制组件是否为警告状态
warning-label
同 error-label
count
显示目前输入多少文字
inset
用来为没有 icon/label
的栏位留空
orientation
组件的排列方向(水平 horizontal
/垂直 vertical
)
label-width
文字区块的宽度(以 12
格宽度划分)假设文字的宽度要和输入一样长,则设定为 6
dark
是文字反白,适用在暗色背景下
表单组件-Chips Input
Chips Input
float-label="兴趣" v-model="model" />
export default {
data() {
return {
model: []
}
}
}
外观属性
chips-color
改变 chips
的颜色
chips-bg-color
改变 chips
的背景颜色
add-icon
替换输入时显示在右边的 enter
按钮 icon
基本属性
prefix
加入前缀文字(不影响 array
内的值)
suffix
加入后缀文字,可以跟前缀一起用
hide-underline
移除原本输入框的底线
no-parent-field
如果外面套有QField,可以避免跟QField的效果连结
upper-case
自动转大写
lower-case
自动转小写
大部分组件都会重复的基本属性
float-label
悬浮标题
stack-label
固定式标题
color
组件颜色
inverted
是否有背景色
inverted-light
改善亮色背景下组件的显示
dark
改善暗色背景下组件的显示
error
错误
warning
警告
disable
跟 readonly
类似,但是会有灰键效果
事件属性
@input(newVal)
@change(newVal) @clear(clearVal) @duplicate(val) @add(val) @remove({index, value})
方法属性(Vue Methods)
这里的用法通常都是在组件中加入 red
属性,然后再其他地方使用 this.$refs
来对这些组件进行操作。
add(value)
remove(index)
focus()
select()
clear()
addSomething() {
this.$refs.myChipInput.add('Hello Quasar')
}
表单组件-Radio
引入组件 QRadio
, 单选框(Radio)
与QField一起使用
label="黄金周去哪玩?" orientation="vertical"> v-model="model" label="去杭州" val="hangzhou"/> v-model="model" label="去北京" val="beijing"/> v-model="model" label="去成都" val="chengdu"/>
基本属性
val
存储绑定变量的值
label
组件上的文字
left-label
设定为 true
时,文字会改变显示在选项的左边
checked-icon
改变选取时的icon
unchecked-icon
改变未选取时的icon
color
改变组件的颜色
keep-color
没选取时也会有颜色(默认是灰色)
readonly
只读属性
disable
禁用
dark
在暗色背景时,凸显组件文字
no-focus
不会触发聚焦事件
基本事件
@input
@blur
@focus
表单组件-Checkbox
复选框(Checkbox)
引入组件
在 quasai.config.js
中引入 QCheckbox
。
复选框需要绑定数据类型为 Array
,也需要和 QField
一起使用。
基本属性
val
数值,加入到 v-model
绑定的变量中
true-value
如果 model
不是数组,在选取时会给 model
值 true
,用来取代 true
false-value
同上解析
indeterminate-value
用来替换 null
toggle-indeterminate
使点击可以让状态在以上三个中转换
表单组件-Toggle
切换键Toggle
引入组件
在 quasar.config.js
中引入 QToggle
基本属性
val
, v-model
是 Array
,会加在 Array
内
icon
如果底下两个( checke-icon
、 unchecked-icon
)icon 会被覆盖掉
表单组件-Option Group
选项组option-group
把选项写进一个 Array
中,然后直接用 v-for
全部渲染出来。
引入组件
每一步都是一样的,在 quasar.config.js
中引入 QOptionGroup
。
基本范例
CheckBox
orientation="vertical" label="要选购的商品"> type="checkbox" v-model="model" :options="optionList" /> >
toggle
、 radio
和 checkbox
类似,只需要修改 type
属性值即可
表单组件-Datetime
时间日期输入框Datetime,有Material和IOS两种风格。
引入组件
有两个组件需要引入,一个是输入时显示,一个是默认就是显示的。分别为:
日期时间输入 Datetime Input
framework: {
components: ['QDatetime']
}
日期时间选择器 Datetime Picker
framework: {
components: ['QDatetimePicker']
}
基本操作
// Datetime Input
<q-datetime v-model="model" type="date"/> // Datetime Picker <q-datetime-picker v-model="model" type="date"/>
基本属性
type
,一共有三个值,默认是 date
date
time
datetime
minimal
,不显示标题
min max
,设置能够选择的日期时间范围
v-model="model" type="datetime" max="2019/02/27 2:30"/>
基本方法
Input
show()
hide()
toggle()
clear()
Picker
setYear(val)
setMonth(val) setDay(val) setHour(val) setMinute(val) setView(val) clear()
表单组件-Editor
内建的文章编辑器Editor
编辑器(WYSIWYG)
在 quasar.config.js
中引入 QEditor
组件。
主要设置页面的属性有三个:
v-model="model" :toolbar="[ ['bold','italic','strike','underline'], ['hr','link'], ['fullscreen'], ['print'] ]" />
v-model="model" :toolbar="[ ['bold','italic','strike','underline'], ['hr','link'], ['fullscreen'], ['print'] ]" :definitions="{ bold:{label:'粗体',icon:null,tip:'这是粗体'} }" />
v-model="model" :toolbar="[ ['arial','arial_black','comic_sans'], ]" :fonts="{ arial:'Arial', arial_black:'Arial Black', comic_sans:'Comic Sans MS' }" />
基本事件
@input
@fullscreen(true/false)
表单组件-Knob旋转按钮
旋转按钮(Knob)
在 quasar.config.js
中引入 QKnob
组件。
v-model="model" :min="0" :max="25" > class="q-mr-xs" name="volume_up"/> {{model}}
属性
size
调整组件的大小,默认 120px
step
数值的间距
decimals
小数点显示的位数
min max
最小值和最大值
color
、 track-color
颜色、未到达的旋转轴颜色
line-width
线条的宽度,默认 6px
事件
@input(val)
@change(val)
@drag-value(val)
弹窗-Action Sheet
操作表(ActionSheet)
在 quasar.config.js
中引入 ActionSheet
组件,有Material和IOS两种风格。
pluginS
形式
framework: {
plugins: ['ActionSheet']
}
components
形式
framework: {
components: ['QActionSheet']
}
作为Plugins的使用方法
Vue内
this.$q.actionSheet(configObj)
Vue外
import { ActionSheet } from 'quasar';
ActionSheet.create(configObj)
this.$q.actionSheet({ title: '操作选择', grid: true, //使用格状排版(一排三个) dismissLabel: '取消', //取消按钮的文字 只有IOS主题下可用 默认是cancel actions: [ { label: '抓虫', color: 'green', icon: 'fas fa-bug', handler() { console.log('抓虫大师') } }, { label: '分享到微博', color: 'blue', icon: 'fas fa-weibo' }, { label: '请人帮忙', color: 'black', icon: 'fas fa-alipay' } ] }).then(action => {}).watch(() => {});
作为Component的使用方法
跟上面的操作基本上一样,只是能够多监听 @show
和 @hide
时间。
事件
@ok
@cancel
@show
@hide
@escape-key
弹窗-Dialog
基本跟上面的Action Sheet一样的操作方法。
this.$q.dialog({ title: '选择主菜', message: '主厨精心特制主餐请选择', color: 'red-13', ok: true, cancel: true, preventClose: true, //设置为true,除非按cancel或是ok,不然不会关闭窗口 noBackdropDismiss: false, //按空白的地方不会关闭窗口 noEscDismiss: false, //按Esc不会关闭窗口 stackButtons: false, //为true时会将ok/cancel按钮垂直排列 position: 'top', //设置窗口显示的位置 //使用input prompt: { mode: '顶级和牛帝王蟹', type: 'text' }, //使用option options:{ type:'radio', model:'beef', //默认的选项 items:[ {label:'绝对不加热生牛排',value:'beef'}, {label:'极地冰山沙漠鲔鱼',value:'tuna'}, {label:'超级漆黑山洞野猪肉',value:'pork'} ] } }).then(action => {}).watch(() => {});
作为Component的使用方法
在配置文件中引入 QDialog
组件。
slot="title">标题 slot="message">正文 slot="body">主体 slot="buttons">按钮
弹窗-Modal
模态框(Modal)
引入 QModal
组件,另外加入 directives
的 CloseOverlay
。
使用按钮或是 method
将 modal
设为 true
才能打开 modal
。
全页显示
@click="model=true">Open v-model="model" content-css="padding: 50px" maximized> 想去哪里玩? 自由行·出国度假
泰国、首尔、珠海、九寨沟
class="q-mt-lg" color="primary" @click="model=false" label="订购行程" />
最小窗口 minimized
设置 position
后会自动清除 content-css
定义的 css
,所以要在里面多一个 div
来做 padding
。
v-model="model" minimized> style="padding: 20px"> ...
基本属性
minimized
, maximized
设置窗口最小化或是最大化
no-route-dismiss
、 no-esc-dismiss
、 no-backdrop-dismiss
分别为控制换页、按下Esc、按黑色背景是否会触发开闭事件
content-css
, content-classes
,Modal内的CSS及class,在设置了 position
后会无效
position
设置弹窗出来的位置
position-classes
设置 position
后就要用这个来设 class
,默认是 items-center
, justify-center
transition
, enter-class
, leave-class
可以用自定义的CSS来做出场的动画
no-refocus
是否让关闭窗口时聚焦回到打开窗口前的最后一个组件
Vue方法
控制打开关闭窗口的一些方法,要搭配 this.$refs.窗口名称
来使用。
show
hide
toggle
弹窗-Notify
通知框(Notify)
this.$q.notify({ message: '已保存', timeout: 5000, // type:'positive', //自带选项 color: 'grey', textColor: 'blue', icon: 'fas fa-warning', avatar: 'statics/images', //这个跟icon二选一 detail: '', position: 'top', actions: [ { label: '', icon: '', noDismiss: true, handler() { console.log('hello world'); } } ], onDismiss() { console.log('warning'); } });
在Vue外使用
import {Notify} from 'quasar'; Notify.create('已保存'); //方式二 Notify.create({ message: '已保存' });
进度条-Ajax Bar&Loading Bar
Ajax栏(Ajax Bar)
在 quasar.config.js
中引入 QAjaxBar
组件。
基本使用
Ajax Bar
因为在每个页面都会用到,所以放在最上层 App.vue
。
position
设置组件位置
size
载入条的宽度,默认 4px
color
默认 red
reverse
使进度方向相反
基本事件
@start
@stop
基本方法
start()
stop()
Loading Bar
进度条-Inner Loading
内部加载(Inner Loading)
注意事项
使用InnerLoading时会作用在 relative-position
这个 class
下,如果没有添加这个会变成整页。
基本操作
index.vue
class="q-ma-lg"> @click="$refs.myField.show()">Open class="relative-position" ref="myField"/>
MyField.vue
label="跨年去哪玩?" orientation="vertical" > v-model="model" label="去日本" val="japan" checked-icon="far fa-check-circle" keep-color/> v-model="model" label="去韩国" val="korea" color="green" keep-color/> v-model="model" label="在家待着" val="home" color="red" keep-color/> :visible="visible"> size="50px" color="primary">
效果
CSS Helpers
空间排版CSS Spacing Classes
CSS间距类CSS Spacing Classes
基本范例
q-ma-xs
q
作为前缀
ma
:
xs
范围的大小跟 flex css
一致
语法
q-[类型][方向]-[大小]
类型
m
( margin
向外扩)
p
( padding
向内扩)
方法
总共有7种选择,除了基本的 t(top)
, r(right)
, l(left)
、 b(bottom)
, a(all)
之外,还有两种 x(left+right)
, y(top+bottom)
。
有 none
, auto
(只能用在 margin
), xs
, sm
, md
, lg
, xl
。
阴影CSS Shadows
CSS阴影(立面图)CSS Shadows
可视范围CSS Visibility
可视范围CSS Visibility
位置排版CSS Positioning Classes
CSS定位类CSS Positioning Classes
自定义颜色
调色板(Color Palette)
在 src/css/app.styl
文件中自定义全局CSS
新增颜色
.text-redsp
color: #D03F38
.bg-redsp
background: #D03F38
这里 text
和 bg
需要同时设定。
使用
Open
多国语系I18n
Quasar的I18n
多国语系(I18n)
在 quasar.config.js
中设置:
framework: {
i18n: 'zh-hans'
}
读取当前语系
let lang = this.#q.i18n.getLocal()
动态设置
Quasar的切换语系不像是传统的 vue-i18n
直接换就能用,必须重新载入新语系的语系档。
@click="setLang('zh-hans')">简体中文
Vue-I18n
Vue-I18n在 src/i18n
里面,参照已经设定的内容添加自己想要的语系。
应用
{{$t('apple')}}
@click="setLang()" :label="$t('setting')">
动态切换语系
methods: {
setLang() {
this.$i18m.local = 'zh-CN'
}
}
以上所述就是小编给大家介绍的《使用Quasar设计Material和IOS风格的响应式网站》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
你可能感兴趣的:(使用Quasar设计Material和IOS风格的响应式网站)
吲哚菁绿标记牛血清白蛋白|ICG-BSA
星贝爱科
吲哚菁绿标记牛血清白蛋白 ICG-BSA
吲哚菁绿标记牛血清白蛋白(ICG-BSA)是一种将吲哚菁绿(ICG)与牛血清白蛋白(BSA)结合形成的复合物,具有以下特点和应用:特点高荧光亮度:ICG具有较高的荧光亮度,使得ICG-BSA在荧光成像和检测中具有较高的信噪比和灵敏度。良好的生物相容性:ICG-BSA在生物体内具有良好的生物相容性,对细胞和组织无毒副作用,适用于生物医学研究和生物技术应用。稳定性好:ICG-BSA复合物在水溶液中稳定
HTML中 video标签样式铺满全屏
小华0000
css 前端
video标签默认不是铺满的,即使手动设置宽高100%也不会生效,所以当需要video铺满div时,需要加上一个css样式关键是这个“object-fit:fill”,这样就可以解决了!object-fit属性指定元素的内容应该如何去适应指定容器的高度与宽度。object-fit一般用于img和video标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。fill:默认,不保证
vue3中子组件调用父组件事件
小华0000
vue.js javascript 前端
在Vue3中,子组件调用父组件的事件(或方法)的方式与Vue2类似,但Vue3引入了CompositionAPI,这可能会改变你组织代码的方式。不过,基本的通信机制——通过自定义事件($emit)通知父组件——仍然保持不变。以下是如何在Vue3中使用OptionsAPI和CompositionAPI的示例:使用OptionsAPI父组件(ParentComponent.vue)父组件importC
js的some函数
小华0000
javascript 开发语言 ecmascript
在JavaScript中,some()是一个数组的方法,用于测试数组中是否至少有一个元素满足提供的函数。如果数组中有至少一个元素通过由提供的函数实现的测试,则它返回true;否则返回false。以下是some()函数的基本语法:javascript复制代码arr.some(function(currentValue,index,arr),thisArg);currentValue:必需。当前元素的
js的includes函数
小华0000
javascript 前端 开发语言
在JavaScript中,includes()是一个数组(Array)和字符串(String)对象的方法,用于确定一个数组是否包含一个特定的值,或者一个字符串是否包含一个特定的子串。如果找到该值或子串,则返回true;否则返回false。数组中的includes()对于数组,includes()方法用于判断一个数组是否包含一个指定的值,根据情况,如果需要,可以指定开始搜索的位置。语法:arr.in
跨境独立站搭建与运营全攻略
青舰海淘SaaS代购独立站
跨境独立站知识地图 科技
随着跨境电商的日益火爆,越来越多的商家开始寻求搭建自己的跨境独立站。然而,从选择商业模式到后端的收款结汇,每一个环节都充满了挑战。本文将为你详细解读跨境独立站搭建与运营的全流程,帮你在运营独立站的过程中少走弯路(文章还有详细的思维导图可供下载)。一、商业模式选择在搭建跨境独立站之前,首先需要明确自己的商业模式。无货源模式、有货源模式、虚拟产品、垂直细分领域以及仿牌与黑五类,每一种模式都有其独特的优
探秘 C++:从基础语法到复杂项目实践的全攻略(一)
小周不想卷
艾思科蓝学术会议投稿 java 开发语言
目录C++是什么搭建开发环境常见的IDE介绍安装步骤与简单配置创建和运行C++项目基础语法入门变量与数据类型运算符与表达式控制结构C++是什么C++是一种强大的编程语言,它的历史可以追溯到20世纪70年代末。当时,计算机科学家比雅尼・斯特劳斯特鲁普(BjarneStroustrup)在贝尔实验室工作,他希望扩展C语言以支持面向对象编程(OOP),最初的工作被称为“CwithClasses”,这是C
考研高数(洛必达法则的使用条件)
蓝桉802
考研
洛必达法则的使用条件主要包括以下几点:1.导函数存在且连续。这是使用洛必达法则的基本要求,只有在满足这一条件下,我们才能对分子和分母同时求导。2.洛必达仅适用于求解后极限存在的情形。如果在使用洛必达法则后得到的极限不存在,那么原极限可能存在也可能不存在,此时需要采用其他方法进行判断或计算。3.洛必达只能正用不能逆用。也就是说,我们只能由分子分母同时求导以后获得的极限来推断原极限的值,而不能反过来
运输层和应用层之间的接口和端口有什么关系
蓝桉802
计算机网络 考研
运输层和应用层之间的接口是通过端口实现的。运输层使用端口号作为应用层与运输层之间的接口,确保不同应用进程之间的数据传输和通信。运输层的主要功能包括复用和分用。复用是指多个应用层的进程可以共享同一个运输层的连接,而分用则是将运输层收到的数据正确地分发到正确的应用层进程。这些功能的实现都依赖于端口号。端口号的作用是为了解决不同操作系统中使用不同格式的进程标识符的问题。由于进程的创建和撤销是动态的,
当x趋于零时,零乘以无穷的极限等于多少
蓝桉802
考研
当x趋于零时,零乘以无穷的极限是未定义。在数学中,0乘以无穷大(0×∞)是一个未定义的表达式,因为它涉及到两个相互矛盾的概念:0乘以任何有限数都等于0,而无穷大乘以任何非零数都应该是无穷大。因此,我们不能确定0乘以无穷大应该是0还是无穷大,所以它被认为是未定义的。为了更好地理解这个问题,我们可以考虑一个极限的例子。假设我们有两个函数f(x)和g(x),其中f(x)趋于0,而g(x)趋于无穷大。
怎么设置腾讯云CDN缓存规则
幻影龙王
腾讯云 缓存 服务器 CDN缓存规则 CDN
CDN主要功能是在不同的地点缓存内容,通过负载均衡技术,将用户的请求定向到最合适的缓存服务器上去获取内容,比如说,是北京的用户,我们让他访问北京的节点,深圳的用户,我们让他访问深圳的节点。通过就近访问,加速用户对网站的访问。解决Internet网络拥堵状况,提高用户访问网络的响应速度。今天就把我设置的方法贡献出来,可能不是那么完美,但是的的确确起到了简单的防护和加速作用,而且新用户有免费半年的流量
分布式服务发现与注册中心 Consul
要加油呀
中间件 java-consul consul java
分布式服务发现与注册中心Consulgithub地址:https://github.com/consul/consul基础概念什么是注册中心随着微服务理论发展的成熟,越来越多互联网公司采用微服务架构来支持业务发展。各个微服务之间都需要通过注册中心来实现自动化的注册和发现。注册中心主要有三种角色:服务提供者(RPCServer):在启动时,向Registry注册自身服务,并向Registry定期发送
深入Android HandlerThread 使用及其源码完全解析
ThreadLocalForrest
android java ui
本篇我们将来给大家介绍HandlerThread这个类,以前我们在使用线程执行一个耗时任务时总会new一个Thread的线程去跑,当任务执行完后,线程就会自动被销毁掉,如果又由新的任务,我们又得新建线程.....我们假设这样的一个情景,我们通过listview去加载图文列表,当我们往下滑动时,这时需要不断去请求网络资源,也就是需要不断开线程去加载网络资源,如果每次都new一个Thread,这显然是
fastapi 大型应用_FastApi项目实战 - 爱投票管理系统(一)
赌徒梦
fastapi 大型应用
一、闲来无事,在工作之余自己研究了一下python的异步框架-fastapi,并写包括1、部门管理2、角色管理3、用户管理4、菜单管理5、登录日志6、操作日志7、添加反爬机制六个基础功能模块,演示链接:https://www.lovevote.cn,账号:admin,密码:admin由于我的电脑问题,下载的vue依赖包有几个发生了版本冲突,打包部署后偶尔会在点击菜单按钮时发生前端延时(这时表现为缓
python析构_【python 类的析构】
盐选科普
python析构
简介很多面向对象的语言都提供了new关键字,通过new可以创建类的实例。Python的方式更加简单,一旦定义了一个类,直接使用函数操作符,即可创建类的实例。本文主要结合一些实际的例子,介绍了Python类的构造,初始化和析构的原理。类的构造与初始化Python涉及类的构造与初始化,有两个重要的方法:__new__()和__init__()和方法。前者完成实例对象的创建,后者完成对创建的实例对象的初
ubuntu14.04 sqlite3 及可视化工具安装
Andre-S
linux工具 可视化工具 sqlite3 界面 数据库 ubuntu
1.安装sqlite3sudoapt-getinstallsqlite3检查版本:sqlite3-version2.使用方法查看帮助信息.help创建数据库sqlite3test.db查询数据库信息.database查看该数据库内的表信息.tables退出.exit3.安装图形化界面sudoapt-getinstallsqlitebrowser4.使用方法sqlitebrowsertest.db注
分布式系统架构设计原理与实战:理解分布式系统的基本概念
AI天才研究院
计算 大数据 人工智能 语言模型 AI LLM Java Python 架构设计 Agent RPA
1.背景介绍在当今的互联网时代,数据量的爆炸性增长和业务的快速发展,使得单一的计算机系统已经无法满足我们的需求。为了解决这个问题,分布式系统应运而生。分布式系统是一种能在多台计算机(也称为节点)上运行,并通过网络进行通信和协调的系统。它能够提供高可用性、高可靠性、高扩展性和高性能等特性,因此在云计算、大数据、微服务等领域得到了广泛的应用。然而,设计和实现一个分布式系统并不是一件容易的事情。它涉及到
RabbitMQ实战:构建可靠的异步消息系统
AI天才研究院
计算 DeepSeek R1 & 大数据AI人工智能大模型 计算科学 神经计算 深度学习 神经网络 大数据 人工智能 大型语言模型 AI AGI LLM Java Python 架构设计 Agent RPA
RabbitMQ实战:构建可靠的异步消息系统1.背景介绍1.1异步消息系统的重要性在现代软件系统中,各个组件和服务之间通常需要进行大量的通信和数据交换。同步通信会导致系统耦合度高,可扩展性差。异步消息系统应运而生,通过将消息发送者和接收者解耦,提高了系统的灵活性、可靠性和性能。1.2RabbitMQ的优势RabbitMQ是一个开源的消息队列系统,基于AMQP(AdvancedMessageQueu
通过vLLM部署LLM模型到生产环境中
MichaelIp
人工智能实验室 大语言模型 人工智能 python AIGC 自然语言处理 语言模型 prompt llama
文章目录1使用vLLM部署模型2部署过程2.1准备GPU环境2.2安装vLLM依赖项3使用vLLM部署模型并启动服务3.1部署开源模型3.2部署微调模型4测试服务是否正常运行5评估服务性能1使用vLLM部署模型本地部署模型主要包含下载模型、编写模型加载代码和发布为支持API访问的应用服务这三个步骤。这个过程通常伴随较高的人工部署成本,vLLM可以用来简化这一流程。它是一个专为大模型推理设计的开源框
Aspect执行时目标方法参数设置完成了吗?
阿湯哥
spring
在SpringAOP中,Aspect的通知(如@Before、@Around)确实是在方法入参设置完成之后执行的。以下是详细的解释:参数绑定的时机:当通过代理对象调用目标方法时,Spring会先解析方法的参数(例如,从请求、上下文或调用方传入的值),并将其正确绑定到方法的参数列表中。这一过程发生在Aspect的通知代码执行之前。不同通知类型的执行顺序:@Before通知:在目标方法执行前触发,但此
领域模型介绍
阿湯哥
架构
领域模型介绍领域模型(DomainModel)是软件系统中用于抽象和表达业务逻辑的核心结构,它将复杂的业务问题转化为代码中的对象、规则和交互关系,帮助开发者以业务语言构建系统。领域模型的核心目标是高内聚、低耦合,通过清晰的边界(BoundedContext)隔离不同业务模块,确保代码与业务需求高度一致。领域模型的核心元素及经典案例我们以电商系统的订单处理流程为例,说明领域模型的核心元素如何协作。1
Python 布尔类型深度剖析:与其他数据类型的对比及应用
tekin
Python 编程秘籍库 python 开发语言 Python 布尔类型深度剖析 数据类型的对比及应用
Python布尔类型深度剖析:与其他数据类型的对比及应用本文将深入探讨Python中的布尔类型,详细介绍布尔类型的定义、特性、运算规则以及使用场景。同时,将布尔类型与数字类型、字符串类型、列表等其他常见数据类型进行全面对比,帮助读者清晰地理解它们之间的差异和联系。此外,还会对相关联的知识点进行拓展深化,让读者能够更加灵活地运用布尔类型进行Python编程。文章目录Python布尔类型深度剖析:与其
对象存储
Mini' miss
python java c# php c++
对象存储(CloudObjectStorage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,具有高扩展性、低成本、可靠安全等优点。通过控制台、API、SDK和工具等多样化方式,用户可简单、快速地接入COS,进行多格式文件的上传、下载和管理,实现海量数据存储和管理。产品概述本页目录:对象存储(CloudObjectStorage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,用
Web开发架构--常见web后端框架介绍(python、java)
土豆尼尼酱
前端 架构 python
文章目录※Web开发介绍一、什么是Web框架?1.1核心流程1.2Web框架功能1.3Web框架的作用二、Python中的Web框架1.Django2.Flask3.FastAPI三、Java中的Web框架1.SpringBoot2.SpringMVC3.Struts24.PlayFramework四、Python与JavaWeb框架对比五、如何选择Web框架?※Web开发介绍Web开发流程需求分
IntersectionObserver API 使用,判断某个元素是否进入了“视口“
T-shmily
API 前端
一、APIIntersectionObserverAPI:可以自动"观察"元素是否可见,Chrome51+已经支持。其他支持Firefox:55+、Safari:12.1+、Edge:15+、Opera:44+由于可见(visible)的本质是,目标元素与视口产生一个交叉区,所以这个API叫做"交叉观察器"。用法:vario=newIntersectionObserver(callback,opt
Java语言特点及面试常考问题
土豆尼尼酱
java
未完待续…文章目录Java语言的特点面试常考问题及要点一、基础概念二、面向对象三、集合框架四、多线程五、JVM六、异常处理七、设计模式八、新特性(JDK8+)Java语言的特点跨平台性(一次编写,到处运行)通过JVM(Java虚拟机)实现,字节码可在任何安装JVM的设备上运行。面向对象(OOP)支持封装、继承、多态,所有代码必须定义在类中。自动内存管理(垃圾回收,GC)开发者无需手动释放内存,JV
MFC联合Halcon之窗口图片显示
逆风路途
MFC 视觉
MFC联合Halcon之窗口图片显示具体的方案是:使用一个PictureControl控件,调用Halcon中的OpenWindow函数,将其参数中的父窗口设为PictureControl的句柄,就可以在控件内显示我们的照片了,同时要注意缩放一下图片以适应控件大小。MFC程序还是新建一个对话框程序,然后添加一个按钮和一个PictureControl控件,控件的ID默认为IDC_STATIC。正如上
JS:IntersectionObserver(监听目标元素是否出现在窗口中)
一天只码五十行
javascript 开发语言 ecmascript
一、简介IntersectionObserver是JavaScript中的一个API,用于异步观察目标元素与其祖先元素或顶级文档视口的交叉状态。当目标元素的可见性发生变化时,你可以使用IntersectionObserver来执行某些操作,比如懒加载图片、无限滚动等。newIntersectionObserver()是用于创建一个新的IntersectionObserver实例的构造函数。当你调用
基于Pandas库封装Excel工具类
忆想不到的晖
python pandas github excel 工具类
引言Excel是一种广泛使用的电子表格软件,它提供了大量的数据处理和计算功能,被广泛应用于数据分析和报告中。在Python中,我们可以使用pandas库来读写和处理Excel文件。但是,为了更方便和快速地操作Excel文件,我们可以封装一个Excel工具类,提供常用的读写操作方法,以提高开发效率。本文将介绍如何使用Python封装Excel操作工具类,并提供相应的例子说明。1、列表转Excel文件
Python工厂模式封装Webhook群聊机器人
忆想不到的晖
python 机器人 开发语言 webhook 飞书 钉钉
引言企业存在给特定群组自动推送消息的需求,比如:监控报警推送、销售线索推送、运营内容推送等。你可以在群聊中添加一个自定义机器人,通过服务端调用webhook地址,即可将外部系统的通知消息即时推送到群聊中。飞书自定义机器人使用指南:https://open.feishu.cn/document/ukTMukTMukTM/ucTM5YjL3ETO24yNxkjN钉钉自定义机器人使用指南:https:/
springmvc 下 freemarker页面枚举的遍历输出
杨白白
enum freemarker
spring mvc freemarker 中遍历枚举
1枚举类型有一个本地方法叫values(),这个方法可以直接返回枚举数组。所以可以利用这个遍历。
enum
public enum BooleanEnum {
TRUE(Boolean.TRUE, "是"), FALSE(Boolean.FALSE, "否");
实习简要总结
byalias
工作
来白虹不知不觉中已经一个多月了,因为项目还在需求分析及项目架构阶段,自己在这段
时间都是在学习相关技术知识,现在对这段时间的工作及学习情况做一个总结:
(1)工作技能方面
大体分为两个阶段,Java Web 基础阶段和Java EE阶段
1)Java Web阶段
在这个阶段,自己主要着重学习了 JSP, Servlet, JDBC, MySQL,这些知识的核心点都过
了一遍,也
Quartz——DateIntervalTrigger触发器
eksliang
quartz
转载请出自出处:http://eksliang.iteye.com/blog/2208559 一.概述
simpleTrigger 内部实现机制是通过计算间隔时间来计算下次的执行时间,这就导致他有不适合调度的定时任务。例如我们想每天的 1:00AM 执行任务,如果使用 SimpleTrigger,间隔时间就是一天。注意这里就会有一个问题,即当有 misfired 的任务并且恢复执行时,该执行时间
Unix快捷键
18289753290
unix Unix;快捷键;
复制,删除,粘贴:
dd:删除光标所在的行 &nbs
获取Android设备屏幕的相关参数
酷的飞上天空
android
包含屏幕的分辨率 以及 屏幕宽度的最大dp 高度最大dp
TextView text = (TextView)findViewById(R.id.text);
DisplayMetrics dm = new DisplayMetrics();
text.append("getResources().ge
要做物联网?先保护好你的数据
蓝儿唯美
数据
根据Beecham Research的说法,那些在行业中希望利用物联网的关键领域需要提供更好的安全性。
在Beecham的物联网安全威胁图谱上,展示了那些可能产生内外部攻击并且需要通过快速发展的物联网行业加以解决的关键领域。
Beecham Research的技术主管Jon Howes说:“之所以我们目前还没有看到与物联网相关的严重安全事件,是因为目前还没有在大型客户和企业应用中进行部署,也就
Java取模(求余)运算
随便小屋
java
整数之间的取模求余运算很好求,但几乎没有遇到过对负数进行取模求余,直接看下面代码:
/**
*
* @author Logic
*
*/
public class Test {
public static void main(String[] args) {
// TODO A
SQL注入介绍
aijuans
sql注入
二、SQL注入范例
这里我们根据用户登录页面
<form action="" > 用户名:<input type="text" name="username"><br/> 密 码:<input type="password" name="passwor
优雅代码风格
aoyouzi
代码
总结了几点关于优雅代码风格的描述:
代码简单:不隐藏设计者的意图,抽象干净利落,控制语句直截了当。
接口清晰:类型接口表现力直白,字面表达含义,API 相互呼应以增强可测试性。
依赖项少:依赖关系越少越好,依赖少证明内聚程度高,低耦合利于自动测试,便于重构。
没有重复:重复代码意味着某些概念或想法没有在代码中良好的体现,及时重构消除重复。
战术分层:代码分层清晰,隔离明确,
布尔数组
百合不是茶
java 布尔数组
androi中提到了布尔数组;
布尔数组默认的是false, 并且只会打印false或者是true
布尔数组的例子; 根据字符数组创建布尔数组
char[] c = {'p','u','b','l','i','c'};
//根据字符数组的长度创建布尔数组的个数
boolean[] b = new bool
web.xml之welcome-file-list、error-page
bijian1013
java web.xml servlet error-page
welcome-file-list
1.定义:
<welcome-file-list>
<welcome-file>login.jsp</welcome>
</welcome-file-list>
2.作用:用来指定WEB应用首页名称。
error-page1.定义:
<error-page&g
richfaces 4 fileUpload组件删除上传的文件
sunjing
clear Richfaces 4 fileupload
页面代码
<h:form id="fileForm"> <rich:
技术文章备忘
bit1129
技术文章
Zookeeper
http://wenku.baidu.com/view/bab171ffaef8941ea76e05b8.html
http://wenku.baidu.com/link?url=8thAIwFTnPh2KL2b0p1V7XSgmF9ZEFgw4V_MkIpA9j8BX2rDQMPgK5l3wcs9oBTxeekOnm5P3BK8c6K2DWynq9nfUCkRlTt9uV
org.hibernate.hql.ast.QuerySyntaxException: unexpected token: on near line 1解决方案
白糖_
Hibernate
文章摘自:http://blog.csdn.net/yangwawa19870921/article/details/7553181
在编写HQL时,可能会出现这种代码:
select a.name,b.age from TableA a left join TableB b on a.id=b.id
如果这是HQL,那么这段代码就是错误的,因为HQL不支持
sqlserver按照字段内容进行排序
bozch
按照内容排序
在做项目的时候,遇到了这样的一个需求:
从数据库中取出的数据集,首先要将某个数据或者多个数据按照地段内容放到前面显示,例如:从学生表中取出姓李的放到数据集的前面;
select * fro
编程珠玑-第一章-位图排序
bylijinnan
java 编程珠玑
import java.io.BufferedWriter;
import java.io.File;
import java.io.FileWriter;
import java.io.IOException;
import java.io.Writer;
import java.util.Random;
public class BitMapSearch {
Java关于==和equals
chenbowen00
java
关于==和equals概念其实很简单,一个是比较内存地址是否相同,一个比较的是值内容是否相同。虽然理解上不难,但是有时存在一些理解误区,如下情况:
1、
String a = "aaa";
a=="aaa";
==> true
2、
new String("aaa")==new String("aaa
[IT与资本]软件行业需对外界投资热情保持警惕
comsci
it
我还是那个看法,软件行业需要增强内生动力,尽量依靠自有资金和营业收入来进行经营,避免在资本市场上经受各种不同类型的风险,为企业自主研发核心技术和产品提供稳定,温和的外部环境...
如果我们在自己尚未掌握核心技术之前,企图依靠上市来筹集资金,然后使劲往某个领域砸钱,然
oracle 数据块结构
daizj
oracle 块 数据块 块结构 行目录
oracle 数据块是数据库存储的最小单位,一般为操作系统块的N倍。其结构为:
块头--〉空行--〉数据,其实际为纵行结构。
块的标准大小由初始化参数DB_BLOCK_SIZE指定。具有标准大小的块称为标准块(Standard Block)。块的大小和标准块的大小不同的块叫非标准块(Nonstandard Block)。同一数据库中,Oracle9i及以上版本支持同一数据库中同时使用标
github上一些觉得对自己工作有用的项目收集
dengkane
github
github上一些觉得对自己工作有用的项目收集
技能类
markdown语法中文说明
回到顶部
全文检索
elasticsearch
bigdesk elasticsearch管理插件
回到顶部
nosql
mapdb 支持亿级别map, list, 支持事务. 可考虑做为缓存使用
C
初二上学期难记单词二
dcj3sjt126com
english word
dangerous 危险的
panda 熊猫
lion 狮子
elephant 象
monkey 猴子
tiger 老虎
deer 鹿
snake 蛇
rabbit 兔子
duck 鸭
horse 马
forest 森林
fall 跌倒;落下
climb 爬;攀登
finish 完成;结束
cinema 电影院;电影
seafood 海鲜;海产食品
bank 银行
8、mysql外键(FOREIGN KEY)的简单使用
dcj3sjt126com
mysql
一、基本概念
1、MySQL中“键”和“索引”的定义相同,所以外键和主键一样也是索引的一种。不同的是MySQL会自动为所有表的主键进行索引,但是外键字段必须由用户进行明确的索引。用于外键关系的字段必须在所有的参照表中进行明确地索引,InnoDB不能自动地创建索引。
2、外键可以是一对一的,一个表的记录只能与另一个表的一条记录连接,或者是一对多的,一个表的记录与另一个表的多条记录连接。
3、如
java循环标签 Foreach
shuizhaosi888
标签 java循环 foreach
1. 简单的for循环
public static void main(String[] args) {
for (int i = 1, y = i + 10; i < 5 && y < 12; i++, y = i * 2) {
System.err.println("i=" + i + " y="
Spring Security(05)——异常信息本地化
234390216
exception Spring Security 异常信息 本地化
异常信息本地化
Spring Security支持将展现给终端用户看的异常信息本地化,这些信息包括认证失败、访问被拒绝等。而对于展现给开发者看的异常信息和日志信息(如配置错误)则是不能够进行本地化的,它们是以英文硬编码在Spring Security的代码中的。在Spring-Security-core-x
DUBBO架构服务端告警Failed to send message Response
javamingtingzhao
架构 DUBBO
废话不多说,警告日志如下,不知道有哪位遇到过,此异常在服务端抛出(服务器启动第一次运行会有这个警告),后续运行没问题,找了好久真心不知道哪里错了。
WARN 2015-07-18 22:31:15,272 com.alibaba.dubbo.remoting.transport.dispatcher.ChannelEventRunnable.run(84)
JS中Date对象中几个用法
leeqq
JavaScript Date 最后一天
近来工作中遇到这样的两个需求
1. 给个Date对象,找出该时间所在月的第一天和最后一天
2. 给个Date对象,找出该时间所在周的第一天和最后一天
需求1中的找月第一天很简单,我记得api中有setDate方法可以使用
使用setDate方法前,先看看getDate
var date = new Date();
console.log(date);
// Sat J
MFC中使用ado技术操作数据库
你不认识的休道人
sql mfc
1.在stdafx.h中导入ado动态链接库
#import"C:\Program Files\Common Files\System\ado\msado15.dll" no_namespace rename("EOF","end")2.在CTestApp文件的InitInstance()函数中domodal之前写::CoIniti
Android Studio加速
rensanning
android studio
Android Studio慢、吃内存!启动时后会立即通过Gradle来sync & build工程。
(1)设置Android Studio
a) 禁用插件
File -> Settings... Plugins 去掉一些没有用的插件。
比如:Git Integration、GitHub、Google Cloud Testing、Google Cloud
各数据库的批量Update操作
tomcat_oracle
java oracle sql mysql sqlite
MyBatis的update元素的用法与insert元素基本相同,因此本篇不打算重复了。本篇仅记录批量update操作的
sql语句,懂得SQL语句,那么MyBatis部分的操作就简单了。 注意:下列批量更新语句都是作为一个事务整体执行,要不全部成功,要不全部回滚。
MSSQL的SQL语句
WITH R AS(
SELECT 'John' as name, 18 as
html禁止清除input文本输入缓存
xp9802
input
多数浏览器默认会缓存input的值,只有使用ctl+F5强制刷新的才可以清除缓存记录。如果不想让浏览器缓存input的值,有2种方法:
方法一: 在不想使用缓存的input中添加 autocomplete="off"; eg: <input type="text" autocomplete="off" name