Python图像处理-把一个方形图片以圆形图的样式贴到另一张图上面的指定位置
使用 PIL 模块, 在生成个人的海报页面, 或者其他页面, 需要在这张海报上面贴上一个圆形的图片, 就好比圆形的个人头像什么的.两张底图这个是准备转换为圆形的图片head_image.jpg底图(820*512)1608690598-1238475.jpg效果图(成品图)吧head_image.jpg贴到底图的右上角, 并显示为圆形大小150*150实现代码# 导入需要的包from PIL import Image, ImageDraw# 底图base_image =
组件通信中间人模式、bus模式及组件的属性和状态
中间人模式在vue中 , 每一个vue实例就是一个根组件,在根组件中创建的全局组件都是属于这个根组件中的子组件.中间人模式就是两个组件通过子传父, 把数据传送给根组件, 然后根组件在把数据通过父传子传送给需要的子组件就是 组件A和组件B通信, 组件A把数据对象data传送给根组件, 根组件接收到后, 再把数据data 传送给组件B, 根组件在这个通信过程中就叫中间人.这种方式主要就是用来熟悉组件的父传子和子传父bus 模式跟中间人模式类似, 不过比较方便, 这种模式的中间人bus, 不用刻
组件通信的黑魔法v-model和动态组件component以及组件插槽slot
组件通信 v-modelv-model 是form表单dom专用的, 用来实现双向绑定数据, 可以分成一个@input和一个:value在组件中使用v-model 然后在组件的props中定义一个value属性用来接收,传递出去的时候, 就是一个 子传父的案例, 使用this.$emit分发给一个叫input的, 这个input是与value配对的, 这样组件上的v-model就可以接收到input中的值代码示例:<body> <div id="box">
vue.js:634 [Vue warn]: Duplicate keys detected: ‘1‘. This may cause an update error.问题所在
vue.js:634 [Vue warn]: Duplicate keys detected: ‘1’. This may cause an update error.上面报错信息是由于使用v-for时, key值出现一样的, 上面报错的'1'就是重复的key值
vue中使用transition加入过度动画(载入enter-active离开leave-active)
使用<transition></transition>给vue中dom原始加入css过渡动画enter-active和leave-activeenter-active是控制载入时的样式名的后缀leave-active 是控制消失时的样式名的后缀 <style> .animation-enter-active{ animation: aaa 1.5s; } /* 动画样式 animati
使用vue-cli脚手架创建一个项目
安装npm install @vue/cli查看成功安装后的版本vue --version创建一个项目并定制vue create 项目名创建项目的时候可以自定义需要的东西选择自己需要的东西 空格进行选中选择vue的版本选择存放配置文件的位置保存这次 diy 并取一个名字,方便下次直接使用...
vue-cli创建的项目目录结构以及单文件组件的基本使用
初始项目结构在pubic文件里存在入口文件, pubic是这个项目的静态资源存放的地方,在src文件夹下, main.js 实例了这个项目的最大的根组件APP.vue,当写一个单文件组件时, 如果这个组件会被复用, 可以吧它放在components 文件夹中, 没有复用的放在views文件夹中, 当然放在哪里都可, 只要使用的时候导对路径就可以.单文件组件在components文件下创建一个 Sidebar.vue 文件,template标签里面只允许存在一个父节点, 这个就是和之前创建
vue中路由router使用1-路由容器router-view-声明式导航router-link-重定向-路由嵌套
在项目目录下, router文件夹下的index.js是编写路由配置的一级路由在views文件夹下创建好单文件组件然后在router文件夹下的index.js中进行配置先导入单文件组件 import Film from '../views/Film.vue' // Film.vue是自己创建的然后在数组routes中加入路由import Film from '../views/Film.vue' // 路由数组 coutesconst coutes = [ { //
vue中路由router使用2编程式导航和两种路由模式
编程式导航声明式导航是通过a链接的herf属性进行跳转,在vue中使用<router-link>进行跳转而编程式导航是通过js进行跳转,在vue中是this.$router进行跳转在开发中有一种情况是从列表到详情, 这之间需要传递数据, 这时就可使用编程式导航创建一个列表页的组件Comingsoon.vue和详情页的组件Detail.vueDetail.vue中用来接收列表页的传过来的数据方式一: 路径传参–动态路由Comingsoon.vue 列表组件<tem
vue-中路由router使用3-路由拦截beforeEach和路由懒加载
路由拦截在一些页面需要验证是否登录的时候, 就可以使用路由拦截beforeEach创建一个Login.vue组件用来拦截后跳转到login页面Login.vue 内容如下<template> <div> login <!-- localStorage.setItem('token',JSON.stringify({username:"lanxiaobai"})) 向浏览器内添加一个token --> <button>
vue计算属性computed与过滤器filter
computed使用计算属性的方法和使用状态是一样的优点(特点): 逻辑计算, 防止模板过重, 有缓存(就是在同一个页面使用多次时, 只需计算一次)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
vue项目中使用axios请求数据遇到跨域和请求头
安装npm install --save axios在项目内安装包时, 如果使用npm就一直使用, 不要cnpm和npm进行混用情况一: 无阻拦直接拿到数据<script>import axios from 'axios'export default { mounted () { // ajax 请求 情况一: 某力惠 // 没有跨域, 没有请求头 都可以访问 axios.get('http://www.mei.com/appapi/home/eve
vue项目中axios模块封装和axios拦截器interceptors使用
axiosGitHub地址: https://github.com/axios/axios中文网: http://www.axios-js.com/zh-cn/docs/axios 封装在项目代码中创建一个 util 文件夹, 在创建一个http.js文件用来封装axiosimport axios from 'axios'// 把axios 封装为一个叫 http 的对象, 把请求的公共部分写入const http = axios.create({ baseURL: 'https:
better-scroll在vue项目中使用以及部分问题解决如在pc端鼠标滚轮无法滚动问题
better-scrollbetter-scroll的GitHub地址: https://github.com/ustbhuangyi/better-scroll安装npm install better-scroll -S使用dom结构, 这个就是一个ul标签 列表结构 注意这个div的class名为 cinema 等会要把 better-scroll `挂载`到这个dom上 <div class="cinema"> <ul class="cinema-l
Hexo 创建文章生成的链接因为有中文而访问不到问题解决
Hexo 创建文章生成的链接因为有中文而访问不到问题解决Hexo 默认文章链接生成规则是按照年、月、日、标题来生成的。而我生成的链接访问不到文章,不知道你们有没有遇到这个问题.接下来介绍一个插件 hexo-abbrlink，该插件会为每篇生成一个唯一字符串，并不受文章标题和发布时间的影响hexo-abbrlink的源码链接安装这个插件npm install hexo-abbrlink --save修改博客根目录配置文件_config.yml 的 permalink# permalink:
vue项目中使用vuex管理公共状态1-vuex同步(state和mutations)
vuex 网站: https://vuex.vuejs.org/zh/guide/在使用vue-cli创建项目时选中Vuex的话就不用在进行安装了项目目录里的 store 目录就是编写vuex的地方state定义store目录下的index.js中:import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ // stire 定义 '全局 状态' state:
vue项目中使用vuex管理公共状态2-vuex异步(actions)
当多个页面使用同一个异步请求得到的数据, 就可以使用actions可以理解为缓存, 减少ajax请求次数, 减少使用流量定义 actions定义一个叫 getCinemaList 的异步方法store目录下的index.js中:import Vue from 'vue'import Vuex from 'vuex'import http from '@/util/http'Vue.use(Vuex)export default new Vuex.Store({ state:.
vue项目中使用vuex管理公共状态3-vuex模块拆分(modules)
模块拆分, 就是解决当项目的公共状态太多, 或者多人开发时, 吧部分公共状态拆开, 放到各个模块内,拆分吧store目录下的 index.js文件进行拆分创建 cinemaModule.js 文件内容为import http from '@/util/http'const module = { namespaced: true, // 命名空间 // 公共全局状态 state: { cinemaList: [] }, // 集中式修改状态的方法 mutati.
vue项目中使用vuex管理公共状态4-持久化vuex-persistedstate
持久化不是vuex自带的, 需要安装一个插件来完成(vuex-persistedstate)vuex-persistedstateGithub: https://github.com/robinvdvleuten/vuex-persistedstate安装npm install --save vuex-persistedstate简单使用在 项目目录中的 store 目录下的index.js 文件中就是在创建 Store对象时, 在里面配置import Vue from 'vue'i.
绞尽胆汁的MySQL语法总结
MySQL语法总结查询相关:查看数据库：show databases;查看数据库信息：show create database 数据库名;查看表信息：show create table 表名;查看当前数据库版本号：select version();查看系统当前时间：select new();查看当前用户：select user();查看当前所在的数据库：select database();查看MySQL数据库状态：status;查看表的结构：desc 表名;查询数据库中所有的表名称：
今日推荐
周排行