小程序组件-父子组件之间的通信
小程序组件-父子组件之间的通信
属性绑定 用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容的数据 父组件的data data: { count: 99 }, 父组件的结构 <test4 ccount="{{count}}"></test4> <view> 数据:{{count}}</view> 子组件 /** * 组件的属性列表 */ properties: { ccount:Number }, 子组件的结构 <view>这是组件4</view> <view>父组件传递过来的数据:{{ccount}}</view> 事件绑定 用于子组件向父组件传递数据,可以传递任意数据 在父组件的 js 中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件 syncount(e){ console.log(e.detail.value); this.setData({ count1:e.detail.value }) }, 在父组件的 wxml 中,通过自定义事件的形式,将步骤 1 中定义的函数引用,传递给子组件 {{count1}} <test5 bind:sync="syncount"></test5> 在子组件的 js 中,通过调用 this.triggerEvent('自定义事件名称', { / 参数对象 / }) ,将数据发送到父组件 addcount(){ this.setData({ count:this.data.count+1 }) // 调用父组件的sync函数 this.triggerEvent('sync',{value:this.data.count}) } 在父组件的 js 中,通过 e.detail 获取到子组件传递过来的数据 syncount(e){ console.log(e.detail.value); this.setData({ count1:e.detail.value }) }, 获取组件实例 可在父组件里调用this.selectComponent("id或class选择器") ,获取子组件的实例对象,从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器,例如 this.selectComponent(".my-component") 子组件 <view>子组件</view> <view> 姓名:{{username}}===密码:{{password}}===年龄:{{age}} </view> /** * 组件的初始数据 */ data: { username:"tomcat", password:"123", age:18 }, /** * 组件的方法列表 */ methods: { // 修改子组件年龄 addAge(){ this.setData({ age:100 }) } } 父组件 <test3 id="abc"></test3> <view>````````````````````````````````````````````````````````````````````</view> <button bindtap="getComp" type="warn" size="mini">获取子组件的实例对象</button> //获取子组件的实例对象 getComp(){ //参数是一个选择器 const child = this.selectComponent('#abc') console.log(child) console.log("用户名:"+child.data.username) child.addAge(); },
 2022-5-26
小程序组件-插槽
小程序组件-插槽
什么是插槽 在自定义组件的 wxml 结构中,可以提供一个 slot 节点(插槽),用于承载组件使用者提供的 wxml 结构。 单个插槽 在小程序中,默认每个自定义组件中只允许使用一个 slot 进行占位,这种个数上的限制叫做单个插槽。 新建组件-在wxml中添加 <slot></slot> 在app.json里面定义组件 "usingComponents": { "test3":"/components/test3/test3" } 多个插槽 <slot name="a1"></slot> <slot name="a2"></slot> <slot name="a3"></slot> 在组件的js里面开启插槽 options:{ // 开启多个插槽 multipleSlots:true },
 2022-5-26
Python爬虫
Python爬虫
安装requests和bs4 安装requests pip install requests 安装bs4 pip install bs4 爬取豆瓣电影数据 # 获取页面 import requests as req # 1.向服务器发送请求 url="https://movie.douban.com/top250" header={ "User-Agent":"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.62 Safari/537.36" } html = req.get(url,headers=header).content.decode("utf-8") # 2.保存文件到本地 with open("top250.html","w",encoding="utf-8") as f: f.write(html) print(html) 数据处理 from bs4 import BeautifulSoup soup = BeautifulSoup(open("top250.html",encoding="utf-8"),"html.parser") print(soup) print(soup.find_all("a",class_="")) 获取所有标题 # 这里获取的爬取之后保存到本地的文件 soup = BeautifulSoup(open("hkiii.html",encoding="utf-8"),"html.parser") text = soup.select(".loglist_title") # 获取标签内的文字 for t in text: print(t.text) 爬取结果
 2022-5-25
axios配置
axios配置
关于Axios Axios,是一个基于promise的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。 全局配置 <body> <button onclick="search()">查询</button> <button onclick="add()">添加</button> </body> <script> // axios的配置 1.全局配置 2.自定义配置 axios.defaults.baseURL='http://localhost:8080/user' // 设置超时时间 axios.defaults.timeout = 3000 function search() { var url= 'search'; axios.get(url).then().catch(err=>{ console.log(err.message) }) } function add() { var url= 'add'; axios.get(url).then().catch(err=>{ console.log(err.message) }) } </script> 自定义配置 <body> <button onclick="search()">查询</button> <button onclick="add()">添加</button> </body> <script> // axios的配置 1.全局配置 2.自定义配置 const ax = axios.create({ baseURL:'http://localhost:8080/user', timeout:'3000' }); function search() { var url= 'search'; ax.get(url).then().catch(err=>{ console.log(err.message) }) } function add() { var url= 'add'; ax.get(url).then().catch(err=>{ console.log(err.message) }) } </script>
 2022-5-24
emlog模板-新拟态效果
emlog模板-新拟态效果
模板图片 关于模板 该模板基于Emlog默认模板开发,暂时没添加什么新功能,模板交流群:138778739,欢迎大家反馈问题! 更新内容 2022-05-23 首页不完全显示 手机端不显示侧边栏 首页描述超出 2022-5-25 首页新增笔记 优化阅读文章页面样式 模板下载 正版用户直接在模板商店下载即可,盗版用户勿扰!
 2022-5-23
Es6语法笔记(部分)
Es6语法笔记(部分)
Es6语法介绍 ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。 ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。 完整代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> .box-item{ width:100px; background-color: aquamarine; height: 50px; text-align: center; line-height: 50px; margin: 10px; } #ad{ width: 200px; height: 200px; background-color: bisque; } </style> <body> <div class="box-item">1</div> <div class="box-item">2</div> <div class="box-item">3</div> <div id="ad"></div> <script> //let小demo item = document.getElementsByClassName("box-item"); for (let i = 0; i < item.length; i++) { item[i].onclick=function(){ this.style="background-color:red"; this.innerText="我被点击了" } } // 数组的解构 const F4 = ['小沈阳','刘能','赵四','宋小宝']; let [xiao,liu,zhao,song]=F4; console.log(xiao); console.log(liu); console.log(zhao); console.log(song); // 对象的解构 const zhaobs = { name:'赵本山', age:'不详', xiaoping:function(){ console.log("我也可以演小品") } } let {name,age,xiaoping}=zhaobs; console.log(name); console.log(age); console.log(xiaoping); xiaoping(); // es6引入新的声明字符串的方式【``】 // 1.声明 let str = `我是字符串`; console.log(str,typeof str) // 2.内容中可以直接出现换行符 let strTwo = ` <ul> <li>box1</li> <li>box2</li> <li>box3</li> </ul>`; // 3.变量拼接 let lovest = '杨幂'; let out = `${lovest}是我最喜欢的演员`; console.log(out) // Es6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。 // 这样写更简洁 let namee = '大彭Sir'; let change=function(){ console.log('我贼能吃!!!') } const bi ={ namee,change} console.log(bi) // Es6允许使用箭头(=>)定义函数。 let fn = (a,b) => { return a+b; } let sum = fn(10,20) console.log(sum) // this是静态的.this始终指向函数声明时所在作用域下的this得值 function getName(){ console.log(this.name); } let getName2 = () =>{ console.log(this.name);//无法改变指向 } window.name = '彭Sir' const es = { name:'PengSir' } getName.call(es); getName2.call(es); // 不能作为构造函数实例化对象 // let person = (name,age) =>{ // this.name = name; // this.age = age; // } // let me = new person('xiao',30); // person is not a constructor // console.log(me); // 箭头函数的简写,当型参有且只有一个可以省略括号 let add = n =>{ console.log(n+n) } add(1) // 当代码体只有一条语句的时候可以省略花括号,return必须省略 // 语句执行结果就是函数的返回值 let pow = n =>n*n; console.log(pow(10)); // 箭头函数demo // 需求一:点击div 2s 后颜色变成 粉色 let ad = document.getElementById('ad'); ad.onclick = function(){ setTimeout(()=>{ this.style.background="pink" },2000) } // 需求二:从数组中返回偶数的元素 const arr = [1,6,9,10,100,25]; // 普通方法 // const result = arr.filter(function(item){ // if (item % 2 === 0) { // return true // } else{ // return false; // } // }); // 箭头函数 const result =arr.filter(item=>item%2===0) console.log(result) // 箭头函数适合与this无关的回调。定时器、数组方法的回调 // 箭头函数不适合与this有关的回调。时间回调,对象的方法 </script> </body> </html>
 2022-5-21
MyBatis动态SQL实现
MyBatis动态SQL实现
创建数据库 t_user库的名称 手动创建库 user 表名 /*SQLyog Ultimate v12.09 (64 bit) MySQL - 5.5.62 : Database - t_user ********************************************************************* */ /* !40101 SET NAMES utf8 */; /* !40101 SET SQL_MODE=''*/; /* !40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */; /* !40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */; /* !40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */; /* !40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */; CREATE DATABASE /* !32312 IF NOT EXISTS*/`t_user` /* !40100 DEFAULT CHARACTER SET utf8 COLLATE utf8_bin */; USE `t_user`; /*Table structure for table `user` */ DROP TABLE IF EXISTS `user`; CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(20) COLLATE utf8_bin DEFAULT NULL, `password` varchar(20) COLLATE utf8_bin DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=14 DEFAULT CHARSET=utf8 COLLATE=utf8_bin; /*Data for the table `user` */ insert into `user`(`id`,`username`,`password`) values (1,'tom1','123'), (2,'tom2','123'),(3,'tom3','123'),(4,'tom4','123'),(5,'tom5','123'), (6,'tom6','123'),(7,'tom7','123'),(8,'tom8','123'),(9,'tom9','123'), (10,'tom10','123'),(11,'tom11','123'),(12,'tom12','123'),(13,'tom13','123'); /* !40101 SET SQL_MODE=@OLD_SQL_MODE */; /* !40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */; /* !40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */; /* !40111 SET SQL_NOTES=@OLD_SQL_NOTES */; 根据用户名或密码查询 * 一个条件都没有 * 只有用户名,没有密码 * 用户名 和 密码 都有 编写接口Usermapper //条件 public List<User> findUserByUserNameOrPws(User user); 编写sql语句 usermapper.xml中 <!--条件查询--> <select id="findUserByUserNameOrPws" resultType="user" parameterType="user"> /*username 参数对象user 中的属性 */ select * from user <where> <if test="username!=null"> and username=#{username} </if> <if test="password !=null"> and password=#{password} </if> </where> </select> 测试代码 findUser()只看这个方法 package com.haha.controller; import com.haha.domian.User; import com.haha.mapper.UserMapper; import org.apache.ibatis.io.Resources; import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory; import org.apache.ibatis.session.SqlSessionFactoryBuilder; import java.io.File; import java.io.IOException; import java.io.InputStream; import java.util.List; public class TestMain { public static void main(String[] args) throws IOException { //1.查询所有数据 //list(); //2.查询数据 findUser(); } //条件查询用户 public static void findUser()throws IOException{ SqlSession sqlSession = getSqlSession(); UserMapper mapper = sqlSession.getMapper(UserMapper.class); User user=new User(); user.setUsername("tom10"); List<User> list = mapper.findUserByUserNameOrPws(user); System.out.println(list); } //查询所有数据 public static void list()throws IOException{ SqlSession sqlSession = getSqlSession(); UserMapper mapper = sqlSession.getMapper(UserMapper.class); List<User> all = mapper.findAll(); System.out.println(all); } //获取到sqlsession对象 public static SqlSession getSqlSession() throws IOException { InputStream resourceAsStream = Resources.getResourceAsStream("sqlMapConfig.xml"); SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(resourceAsStream); SqlSession sqlSession = sqlSessionFactory.openSession(); return sqlSession; } } 批量查询 例子: select * from user where id in(1,3,5,6) 编写接口 public List<User> findByIds(List<Integer> list); 编写sql语句 <!--批量查询 根据id--> <select id="findByIds" resultType="user" parameterType="list"> /*select * from user where id in (xx,xxx)*/ select * from user <where> <foreach collection="list" open="id in (" close=")" item="id" separator=","> #{id} </foreach> </where> </select> 测试代码 //批量查询id的值 public static void findUserByids()throws IOException{ SqlSession sqlSession = getSqlSession(); UserMapper mapper = sqlSession.getMapper(UserMapper.class); List<Integer> list=new ArrayList<>(); list.add(1); list.add(3); list.add(5); List<User> users = mapper.findByIds(list); System.out.println(users); }
 2022-5-13

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录