2021年06月_小歪 | 前端

原创 VUE_axios使用post请求后端接受不到参数，axios使用application/x-www-form-urlencoded和application/json传递参数的两种方式表现形式

https://hbiao68.blog.csdn.net/article/details/106004100‘Content-Type’: ‘application/json’ 请求将数据转为 key=value 的形式import qs from 'qs'http({ method: 'post', url: 'http://127.0.0.1:10111/login', data: qs.stringify(data)})‘Content-Type’: ‘appl

2021-06-30 11:18:11 350

原创 REACT_react使用antd-mobile UI框架

安装npm install antd-mobile --savepublic/index.html<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script> <script> if ('addEventListener' in document) { document.addEventListener('DOMC

2021-06-29 17:13:10 345

原创 REACT_react创建项目

npm install -g create-react-appcreate-react-app my-app ————创建my-app项目cd my-appnpm start ————启动项目，在 http://localhost:3000查看项目运行npm run build ————项目打包，生成一个build文件夹npm run eject ————弹出配置文件–不可逆操作–用于修改默认的配置npm test ————测试...

2021-06-29 16:19:13 85

原创 REACT_react路由配置

BrowserRouter：history路由HashRouter：hash路由Router：的history是必需的propsSwitch：表示只渲染第一个与当前地址匹配的Route 渲染组件的方式Route的props path为路径，component为路径对应的页面Route 是 React Router中用于配置路由信息的组件，每当有一个组件需要根据 URL 决定是否渲染时，就需要创建一个 Routecomponent 的值是一个组件，当 URL 和 Route 匹配时，Comp.

2021-06-29 16:00:57 355

原创 UNI-APP_WebSocket长连接通信，uni-app长连接

uni-app官方文档实例代码：let isReceive = trueuni.connectSocket({ url: 'ws://192.168.0.1:39001/socket', //服务器接口地址 success: function() { console.log("WebSocket连接成功"); // that.sleep(2000); uni.onSocketOpen(function(res) { console.log('WebSock

2021-06-23 11:18:58 1476 1

原创 JS_html2Canvas基础使用

先将html转成canvas，再生成图片官网地址：http://html2canvas.hertzen.com/CDN引入使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten

2021-06-21 16:38:04 2359

原创 JS_babel转码器，es6代码转换成es5代码

官方文档npm：npm install --save-dev @babel/preset-reactcdn：https://unpkg.com/babel-standalone@6.26.0/babel.jscdn引入使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=

2021-06-18 14:32:52 95

原创 JS_获取在input:file中选中图片的宽高信息，监听读取文件过程

方法一操作方法: window.URL || window.webkitURLwindow.URL属性返回一个对象,这和对象提供了一个静态createObjectURL()方法去创建和管理object URLs.URL对象是硬盘指向文件的一个路径，如果我们做文件上传的时候，想在没有上传服务器端的情况下看到上传图片的效果图的时候就可是以通过var url=window.URL.createObjectURL(obj.files[0]);获得一个http格式的url路径，这个时候就可以设置到img中显

2021-06-18 09:59:07 1355 1

原创 VUE_vue二级路由配置

二级路由配置path时前面不能有 " / "在一级路径信息数组中添加一个children配置项：{path:'/hot',component:()=>import('@/views/Hot/index'), children:[ {path:'/',redirect:'film'}, //配置默认显示模板内容 {path:'film',component:{template:'<p>妖猫传</p>'}}.

2021-06-17 11:21:29 604

原创 UNI-APP_uniapp image图片高度不能自适应的问题[widthFix]

在iamge标签里定义 mode=“widthFix” 就行了组件image=>mode=>widthFix:宽度不变，高度自动变化，保持原图宽高比不变<image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2611367090,3953241077&fm=26&gp=0.jpg" mode="widthFix></image>...

2021-06-11 19:17:06 5614 3

原创 JS_js数据导出excel文件

<html> <head> <div>以Table格式导为xls文件 <button onclick='TableToExcel()'>导出</button></div> <div>导出CSV文件 <button onclick='toCSV()'>导出</button></div> <div>大量数据导出CSV <button oncli

2021-06-11 15:42:26 158

原创 VUE_修改vuex数据的方法，mapGetters获取数据

vueximport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { memberType:0, }, mutations: { upMemberType(state,type){ state.memberType = type } }, actions: { }, modules: { }})调用vuex方法修改数据th

2021-06-09 17:56:43 1745

原创 VUE_监听vuex数据的方法

监听单个数据vuex数据import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { memberType:0 }, mutations: { }, actions: { }, modules: { }})页面处理data() { return { }},computed:{ //计算vuex数据并返回 stateM

2021-06-09 17:51:31 634

原创 UNI-APP_动态设置当前页面的标题

uni-app官方文档uni.setNavigationBarTitle({ title: '新的标题'});如果需要在页面进入时设置标题，可以在onReady内执行，以避免被框架内的修改所覆盖。如果必须在onShow内执行需要延迟一小段时间

2021-06-08 17:13:21 1276

原创 UNI-APP_uni-app uni.getUserProfile微信授权，微信授权信息显示微信用户解决

解决方法：替换微信授权api为uni.getUserProfile代码：xwLogin(){ // console.log('微信授权弹窗'); uni.getSetting({ success(res) { // console.log("授权：", res); uni.showModal({ title: '授权提醒', content: '请授权头像等信息，以便为您提供更好的服务', cancelText: "随便逛逛", confirmTex

2021-06-04 14:18:11 8524 3

原创 UNI-APP_uni-app swiper轮播图自定义指示点样式

<view class="swiper_cent"> <swiper class='u-wrp-bnr' :indicator-dots='false' autoplay='true' interval='3000' duration='1000' circular='true' @change="swiperChange"> <block v-for="(item,i) in swiper" :key="i" > &.

2021-06-02 10:41:56 1695

原创 JS_向你的web应用程序添加触摸手势，Hammer.js

hammer.js官方文档：http://hammerjs.github.io/CDN：http://hammerjs.github.io/dist/hammer.min.jsNPM：npm install --save hammer.js分享详细文档简单拖动示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv=

2021-06-01 16:37:25 163

原创 UNI-APP_修改页面背景色，uni-app设置单个页面背景颜色

uniapp设置全局颜色后设置单个页面颜色不起作用，uni-app设置单个页面背景颜色解决：再加一个<style></style>

2021-06-01 00:18:20 3703 7

小歪博客