前端
前端小东
一个专注于前端和python的程序员,人生越努力越幸运
展开
-
Vue下拉框过宽溢出解决
记录一下,我们在使用element的下拉组件的时候,如果内容过长,会导致溢出非常的不美观,那么有没有什么解决 办法了。切记要加:popper-append-to-body="false"这个属性,不然没法生效哦。经过不断的寻找,终于找到了以下解决办法。最后来个效果图,大功告成。原创 2023-03-08 09:16:03 · 1097 阅读 · 0 评论 -
Vue中input只能输入正数字
input只能输入大于0的数字,如果不满足就清空input,并且给出提示。可以看到输入负数,字符串等都会被清空,只能输入整数。原创 2023-03-06 10:34:05 · 957 阅读 · 0 评论 -
Vue实现直播功能
Vue中在线直播最近公司刚好在做直播,那么今天就记录一下遇到的坑,公司服务器用的亚马逊aws,所以直接看官方的api就可以了,aws官方地址aws直播api先看下具体的实现后的效果图把按照网上成熟的方法,使用的是video.js,然后aws做了一层封装,那么我们直接拿来使用把,这里使用vue版本的vue-video-player先安装下相关的包npm install vue-video-player --save在main.js引入vue-video-player// 第一个是vi原创 2021-10-12 12:41:07 · 10839 阅读 · 4 评论 -
动态获取浏览器窗口宽高
实现一个resize拖拽浏览器窗口,实时显示浏览器窗口大小宽高上代码import React,{useState,useEffect,useCallback} from 'react';function useWinSize(){ //定义初始化状态 const [size,setSize] =useState({ width:document.documentElement.clientWidth, height:document.documentElement.clientHei原创 2021-09-26 18:10:05 · 536 阅读 · 0 评论 -
Mvvm的实现基本原理
开始构建一个MVVM实例首先构建一个DOM以及一个数据源data,通过这两个属性,构建一个vm实例,接着构建一个Observer对象 constructor (options) { this.$el = options.el this.$data = options.data if (this.$el) { let _ _ = new Observer(this.$data) this.proxyData(this.$data) _ =原创 2021-09-26 18:06:24 · 203 阅读 · 0 评论 -
Next.js配置接口跨域代理转发
上一个章节中,讲解了next下如何通过axios获取远程数据,可是遇到了跨域的问题,所以单独写个文章讲解一下,如何在开发模式dev下面,解决跨域,没有使用跨域代理之前下面开始讲解如何跨域首先,打开我们的koa项目,启动,用koa来作为后台接口模拟数据以上都准备好,浏览器访问http://localhost:3333/api/list,没有问题后作为我们的模拟数据好,正式开始配置~~~~~~~~~~~~~~~~~~~~~~~~~~打开Next项目1:安装跨域的依赖中间包 http-proxy-原创 2021-09-26 18:04:21 · 3113 阅读 · 0 评论 -
React实现购物车
###购物车来啦2020年疫情刚刚结束,好久没写React了,有点慌,为了不遗漏知识点,查漏补缺,写个简单的购物车,基本的功能有列表、新增、修改、删除开发用的框架React+Antd+Koa+Mysql,开发工具hbuilder-x,上传代码gitee好啦,开始写啦1:新建一个文件夹,起名shopWeb,里面新建shop文件夹,存放前台所有代码,新建shopServer文件夹,存放后台接口api所有文件2:先讲解前台部分吧,进入shop文件夹,安装项目,用官方提供的脚手架初始化一下create原创 2021-09-24 14:50:09 · 3093 阅读 · 0 评论 -
react服务端渲染Next的学习
记录一下Next的学习,1:手动安装2:自动安装好,开始手动安装//先安装依赖包npm initcnpm install react react-dom next --save //安装完成后,修改package.json,添加如下命令 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev":"next", "build":"next build", "st原创 2021-09-24 14:49:00 · 664 阅读 · 0 评论 -
用useRef--来保存变量
//用useRef 来保存变量import React,{useRef} from 'react'function App8(){ const username =useRef(null); const changeWord= ()=>{ username.current.value="Hello,好好学习React" console.log(username) } return( <> <input type='text' ref={u原创 2021-09-23 18:04:36 · 1771 阅读 · 0 评论 -
用redux-thunk中间件异步获取数据
上一个章节我们做了个一个简单的获取数据的todolist,但是有些缺点1:异步数据获取 全部放在componentDidMount里面,业务功能有耦合2:不方便测试运营人员维护和调试现在我们使用redux-thunk来做优化,提取出来放入一个action,好上代码1:安装redux-thunkcnpm install redux-thunk2:在actionCreater.js中定义一个getTodoList,注意这里不是访问对象了,是返回一个函数,函数中再把获取数据的axios放在这里执行,原创 2021-09-23 18:04:06 · 159 阅读 · 0 评论 -
用redux-saga实现异步获取数据action
上个章节我们用了redux-thunk中间件来处理数据,现在我们用另外一个中间件,来处理axios,相对来说比较复杂一点点,但是小学生才做选择题,2个我们都得会,看个人爱好吧。上代码1安装redux-sagacnpm install redux-sage --save2:改造//redux-saga import createSagaMiddle from 'redux-saga';const sagaMiddle = createSagaMiddle();const halders原创 2021-09-23 18:03:29 · 302 阅读 · 0 评论 -
用React搭建一个简单的菜单系统
用react搭建一个简单的菜单列表,点击跳转菜单详情,作为Demo学习使用。先来个效果图话不多说,上代码1:搭建一个react项目create-react-app my-react2:安装url模块,方便解析url地址,获取参数,安装axios,发送get请求cnpm install url axios -S3:启动项目,将静态文件html、css、拷贝到src/static下面4:新建一个router.js用来实现路由跳转router.jsimport React from "r原创 2021-09-23 18:02:10 · 1022 阅读 · 0 评论 -
useMemo的使用
来学习一下useMemo的使用import React,{useState,useMemo} from 'react';function Example7(){ const [xiaohong,setxiaohong]=useState(""); const [zhiling,setzhiling]=useState(""); return( <> <button onClick={()=>{setxiaohong(new Date().getTime())}原创 2021-09-23 18:01:30 · 116 阅读 · 0 评论 -
Redux实现一个小todoList
今天刚刚学习了redux,趁热赶紧记录一下,话不多说上代码最后效果图1:安装reduxcnpm install redux --save2:安装antd,为了样式好看一点点cnpm install antd --save3:新建一个Todo.js存放页面import 'antd/dist/antd.css';import { Input,Button,List } from 'antd'; render(){ return( <div> <di原创 2021-09-23 18:00:38 · 237 阅读 · 0 评论 -
React的小结
1:React 开发中遇到React.createClass is not function,换成以下写法就可以了!2:Uncaught SyntaxError: /Inline Babel script: Unexpected token, expected “;” (5:21)原因是:render函数不能写成render:function(){},必须直接用es6的写法调用才可以地方在改好以后就可以了3:{…this.props} 的具体作用在React中发挥着很重要的作用,先看不使原创 2021-09-23 17:59:55 · 63 阅读 · 0 评论 -
react-hooks的小案例
新建一个example文件夹,用来存放小demo的所有js文件开始写代码showArea.js 上面的显示部分import React,{useContext} from 'react';import {ColorContext} from './color.js'function ShowArea(){ const {color} = useContext(ColorContext) return( <div style={{color:color}}> 字体颜色原创 2021-09-23 17:59:11 · 157 阅读 · 0 评论 -
React搭建一个人博客
今天我们就用我们所学的知识,搭建一个个人的简易博客,当然前提是你必须得会react的基本知识咯,话不多说,开始搭建准备工作1:用create-next-app 框架作为快速脚手架搭建2:使用阿里的Antd作为我们的ui库1:安装脚手架//全局安装create-next-appcnpm install create-next-app -g //初始化一个项目 npx create-next-app blog2:让next支持csscnpm install @zeit/ne原创 2021-09-23 17:58:19 · 502 阅读 · 0 评论 -
React实现一个简单的TodoList
作为React入门教程,todoList经常被哪来做入门教程,今天我们也来手把手搭建个todolist,简单粗暴,方便学习1:脚手架搭建一个项目react-studycreate-react-app react-study 2:进入目录,启动项目cd react-studynpm start3:新建一个TodoList.jsimport React,{Component,Fragment} from 'react';import './App.css';import TodoI原创 2021-09-23 17:57:25 · 495 阅读 · 0 评论 -
React-hook的使用
Hello,大家好,今天讲解一下React-hooks的使用首页没有使用react-hooks的情况下,我们平时写代码是这样写的import React,{Component} from 'react';class App extends Component{ constructor(props) { super(props); this.state={ count:0 } } render(){ return( <div> <h2原创 2021-09-22 14:00:02 · 70 阅读 · 0 评论 -
React-Router的嵌套路由
这个章节我们来讲解一下嵌套路由的具体实现1:AppRouter.js中先定义好我们要访问的一级路由//首页import Index from './page/Index.js';import Video from './page/Video.js';import Work from './page/Work.js';function AppRouter(){ return( <div className='main'> <Router> <ul c原创 2021-09-22 13:59:05 · 1767 阅读 · 0 评论 -
React-Router路由动态传值
当我们点击列表,想在url上面动态传递参数,然后详情页获取参数,查询数据,渲染数据,具体怎么做了?上代码其实一行代码就搞定了<Route path='/list/:id' component={List}></Route>let id = this.props.match.params.id;好,具体来看1:在AppRouter.js中,必须定义一个动态传递参数为idfunction AppRouter(){ return( <Router>原创 2021-09-22 13:57:14 · 579 阅读 · 0 评论 -
React-Router的入门
记录一下react-router的学习1:安装react-routercnpm install react-router-dom --save2:定义一个AppRouter.js,导入需要的包import React from 'react';import {BrowserRouter as Router,Route,Link} from 'react-router-dom';3:定义组件//首页function Index() { return <h2>index<原创 2021-09-22 13:56:39 · 120 阅读 · 0 评论 -
React传递参数校验
注意传递参数,一定要写在子组件里面才可以哦1:导入校验包//类型校验import PropTypes from 'prop-types'2:定义//传递参数类型校验TodoItem.propTypes={ content:PropTypes.string, deleteOne:PropTypes.func, index:PropTypes.number}3:测试如果需要传递一个参数,但是父组件没传递,默认情况下,是不会报错的,因为没有传递,所以不会走到校验这一步但是如果非要原创 2021-09-22 13:55:57 · 329 阅读 · 0 评论 -
Vuex的使用
今天来总结一下Vuex的使用,来一个很简单的小demo,方便学习Vue的有点如下Vuex状态管理跟使用传统全局变量的不同之处:1.Vuex的状态存储是响应式的:就是当你的组件使用到了这个Vuex的状态,一旦它改变了,所有关联的组件都会自动更新相对应的数据,这样开发者省事很多。2.不能直接修改Vuex的状态:如果是个全局对象变量,要修改很容易,但是在Vuex中不能这样做,想修改就得使用Vuex提供的唯一途径:显示地提交(commint)mutations来实现修改。这样做的好处就是方便我们跟踪每一个状原创 2021-09-22 13:53:22 · 108 阅读 · 0 评论 -
Vuex+嵌套路由的实现原理
#今天来讲解一下嵌套路由+Vuex的实现##下面来讲解Vuex实现原理1:安装vuexcnpm install vuex --save-dev2:新建一个store文件夹,新建index.js用来存储count,用vuex实现提交3:在Info组件实现点击提交,提交一个changeNumber 方法,注意引入store,不能漏写store代码如下,最关键的是要方法中提交store.commit('increase');4:在Person组件查看,代码如下最终效果person组件中原创 2021-09-22 13:52:07 · 164 阅读 · 0 评论 -
快速熟悉Vue项目
#一.快速梳理大型vue项目整体架构技巧方法总结首先对于Vue Cli搭建的项目,一定要知道项目的目录结构,如果目录结构都不了解,那一定会很头痛查看 package.json 配置文件,了解项目引用了哪些额外插件和框架查看 router 文件,可以快速梳理项目脉络(非常重要!)查看 vuex 文件(如果项目使用了 vuex,那vuex在其中一定扮演着非常重要的角色 ,时不时一些数据就是从vuex中取得的),通过这点可以大概明白整体项目的数据流向;除此之外通过vue devtool查看vuex也是个方原创 2021-09-22 13:51:06 · 2870 阅读 · 2 评论 -
Vuex的热更新
在使用vuex的时候,发现修改一个地方,页面都要刷新,非常不方便,数据状态丢失,所以查了资料使用热更新功能,发现很好用,分享如下使用方法import Vuex from 'vuex'import Vue from 'vue'Vue.use(Vuex)import defaultState from './state/state'import mutations from './mutations/mutations'import getters from './getters/getters'原创 2021-09-22 13:49:10 · 377 阅读 · 0 评论 -
Vuex简介使用
2020年啦,复习一下Vuex,这样才能温故而知新,记下来1:先安装下vuexcnpm install vuex --save2:新建一个vuex文件夹,下面新建一个store.js3:store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const state={ count:1}const mutations={ add(state){ state.count++ }, r原创 2021-09-22 13:48:17 · 99 阅读 · 0 评论 -
webpack-的配置学习4
今天来讲解一下webpack的配置,webpack默认寻找三方包会去nod_modules下面去寻找,我们也可以指定具体去寻找,那么就需要配置resolve这个字段来解析了,配置如下 resolve:{ modules:[path.resolve('node_modules')], //有限寻找此目录 mainFields:['style','main'] ,//入口字段 extensions:['.js','.css','.json','.vue'] //自动添加后缀并依次寻找 /原创 2021-09-17 10:02:21 · 147 阅读 · 0 评论 -
webpack的学习3
webpack可以配置单页应用,现在我们来配置一下多页应用----假设我们想在src下面新建2个js,一个是home.js和一个是other.js,分别代表2个不同的页面和不同的js,打包后生成2个不同的js,那么如何配置了? entry:{ home:'./src/index.js',//入口 other:'./src/other.js' }, output:{ //出口 filename:'[name].js', //输出文件名称,添加hash,并且只要8位 //__dirn原创 2021-09-17 10:00:48 · 125 阅读 · 0 评论 -
webpack的学习2
######这个章节介绍webpack处理js模块普通模式下,所以ES6的语法,打包后不会做任何转换,这个肯定不符合我们的需要,在低版本浏览器不支持,那么如何转换了,这里用babel来实现.实验在index.js中定义如下代码let sleep = ()=>{ console.log("我是ES6")}sleep();打包后测试发现没做转换,现在来解决这个问题//1 安装插件 babel-loader和@babel/core和 @babel/preset-env//@bab原创 2021-09-17 09:59:59 · 72 阅读 · 0 评论