![](https://img-blog.csdnimg.cn/37fa7c5347064d94aaf5ce5698786d95.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
大前端
文章平均质量分 65
大前端
落花雨时
守破离,断舍进。
展开
-
react-router-dom v6快速上手
react-router: 路由的核心库,提供了很多的:组件、钩子。包含react-router所有内容,并添加一些专门用于 DOM 的组件,例如等。等。与React Router 5.x 版本相比,改变了什么?内置组件的变化:移除,新增等。变为等。useParams、、useMatch等。官方明确推荐函数式组件了!!!…原创 2022-10-24 09:39:49 · 742 阅读 · 0 评论 -
ReactNative 使用Iconfont字体图标的方式总结(安卓)
一、使用<Text/>直接引入这种方式比较直接,也是最简单的方式,十分推荐使用该方式在iconfont下载自己的项目然后拷贝 ttf后缀的文件到 android\app\src\main\assets\fonts中 如果没有assets文件夹可以新建一个关于assets文件夹:https://www.jianshu.com/p/35db9e819a54字体文件名是不能随便更改的,文件名要与fontFamily保持一致:https://blog.csdn.net/aiyn原创 2022-01-29 12:13:57 · 3179 阅读 · 0 评论 -
React Native安卓环境搭建(以官网教程为基础进行改进)
本文以官网的教程为基础,进行了一定程度的详细描述,并以Android Studio作为重点进行描述,由于安装环境的具体操作变化很快,故本文也仅供参考,文中所涉及的组件及软件版本为ReactNative-v0.67,Android Studio-2020.3.1,阅读时请注意版本对应必须安装的依赖有:Node、JDK 和 Android Studio。虽然你可以使用任何编辑器来开发应用(编写 js 代码),但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环.原创 2022-01-22 14:49:59 · 3784 阅读 · 0 评论 -
通过一个案例学习Redux+React-Redux+Redux-Thunk在React项目中的基本使用
一、需求描述及分析在一个页面中有三个组件,分别为Header、List以及AddForm,它们是兄弟组件,要求:Header组件中有两个按钮(一个同步一个异步)可以打开AddForm(默认AddForm隐藏不显示)AddForm有一个按钮可以关闭自身AddForm中有输入框,可以添加数据到List组件List可以显示数据需求中的数据流如下图所示:二、案例实操1. 安装依赖安装redux(核心库)npm install redux安装react-redux(用于实现Reac原创 2022-01-04 16:25:11 · 839 阅读 · 2 评论 -
React react-router-dom的基本使用
一、环境准备创建React项目create-react-app hello-react进入项目后安装ract-router-domnpm install react-router-dom二、步骤2.1 创建路由组件2.2 更改index.jsimport React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';// 引入BrowserRout原创 2021-10-26 15:23:21 · 209 阅读 · 0 评论 -
React学习笔记汇总
笔记:http://notes.xiyanit.cn/#/react/React%E5%85%A5%E9%97%A8代码:https://gitee.com/bright-boy/technical-notes/tree/master/study-notes/react/%E6%BA%90%E7%A0%81/react_basic代码示例里面的笔记十分重要,概念性的东西在笔记里面...原创 2021-10-24 20:30:53 · 2258 阅读 · 0 评论 -
行思工作室官网移动端前端开发笔记
使用CSS的 :active属性可是实现按钮点击的效果.menu-icon:active{ opacity: 0.7; //点击后透明度发生变化 }CSS文本超过指定行数显示省略号overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; //这个代表你要在几行显示省略号-webkit-box-orient: vertical;CSS实现模糊背景效果..原创 2021-02-05 09:50:33 · 344 阅读 · 1 评论 -
Vue 配置代理以解决跨域问题
前言跨域一直是一个在开发中很让人头疼的问题,解决跨域的方式有很多,后端和前端都有自己的解决方式,后端的话主要是在响应头里面添加信息,而前端主要是以代理的方式去进行解决,说白了就是将我们发送的请求交给跟我们同源的服务器,然后由他来做一个中转。其实,vue的代理是 借助vue静态服务器来实现的,使用的是 http-proxy-middleware 这个模块。原理大概就是这样,配置起来其实还是蛮简单的。在vue.config.js中配置假设我们的项目运行在localhost:3000上,现在我们想发送请原创 2021-01-17 09:33:56 · 1454 阅读 · 0 评论 -
Vue Vue-CLI3使用CDN
1、html 中引入文件 html中添加script标签如下: <script src="//cdn.bootcss.com/echarts/4.2.1/echarts.simple.min.js"></script> css文件直接用link标签引入2、在 webpack 中配置使用 CDN 在vue....原创 2019-11-27 10:18:57 · 1422 阅读 · 0 评论 -
Vue Vue-CLI3使用文件夹别名
创建vue.config.jsmodule.exports = { configureWebpack: { resolve: { alias: { // @代表src 'assets': '@/assets', 'common': '@/common', 'components': '@/component...原创 2019-11-12 16:19:09 · 796 阅读 · 0 评论 -
Vue Vuex使用详解
基本使用作用vuex是用来做状态管理的,就是将部分数据集中存储起来,实现每个组件之间的共享。安装npm install vuex --save创建store目录编辑index.jsimport Vue from 'vue'import Vuex from 'vuex'// 1.安装插件Vue.use(Vuex)// 2.创建对象const store = n...原创 2019-11-11 11:51:58 · 284 阅读 · 0 评论 -
ES6 Promise
Promise的基本用法<script> // 1.使用setTimeout // setTimeout(() => { // console.log('Hello World'); // }, 1000) // 什么情况下会用到Promise? // 一般情况下是有异步操作时,使用Promise对这个异步操作进行封装 // new ->...原创 2019-11-09 10:32:55 · 140 阅读 · 0 评论 -
Vue 路由懒加载&导航守卫&keep-alive
懒加载组件导入方式const Foo = () => import('./Foo.vue')const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ]})导航守卫导航守卫主要用来监听监听路由的进入和离开的/***************导航守卫*********...原创 2019-11-08 15:38:54 · 541 阅读 · 0 评论 -
Vue 在VueCLI4中使用路由(仅适用于Vue2.x)
安装vue-routernpm install vue-router新建一个router文件夹创建一个js文件index.js// 配置路由相关的信息import VueRouter from 'vue-router'import Vue from 'vue'import Home from '../components/Home'import About from ...原创 2019-11-08 15:13:18 · 7750 阅读 · 9 评论 -
Vue 使用Vue-CLI4 创建Vue项目
安装vue-clinpm install -g @vue/cli-service-global创建项目vue create 项目名称选择手动配置(如果喜欢使用eslint可以选择默认)键盘上下键即可切换,刚开始其实有两个选项,我之前曾经自定义过,所以有三个。取消eslint(Linter)下一步默认是否保存模板(预设)创建完成启动npm run ...原创 2019-11-07 10:37:18 · 34827 阅读 · 1 评论 -
less的基本语法
变量LESS 允许开发者自定义变量,变量可以在全局样式中使用,变量使得样式修改起来更加简单。@charset "UTF-8";/*注释:在css当中可以使用,所有编译的过程当中生成在css文件*///注释:css不支持,不会编译在css文件/*变量*///必须@前缀,:是等于的以上,必须分号结束;//不能以数字开头,不能包含特殊字符,区分大小写@mainColor:#e923...原创 2019-11-04 19:51:06 · 403 阅读 · 0 评论 -
ES6 模块导入导出
export的使用var name = '小明'var age = 18var flag = truefunction sum(num1, num2) { return num1 + num2}if (flag) { console.log(sum(20, 30));}// 1.导出方式一:export { flag, sum}// 2.导出方式二:e...原创 2019-11-03 18:52:40 · 584 阅读 · 0 评论 -
Vue 插槽
基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--1.插槽的基本使用 <slot></slot>...原创 2019-11-03 17:07:36 · 112 阅读 · 0 评论 -
Vue 侦听器和计算属性
侦听器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-11-01 15:27:23 · 114 阅读 · 0 评论 -
Vue 路由
基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-11-01 14:35:19 · 132 阅读 · 0 评论 -
Vue 使用$refs获取DOM和组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...原创 2019-10-31 15:31:38 · 742 阅读 · 0 评论 -
Vue 父组件向子组件传递方法和值
父组件向子组件传递值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...原创 2019-10-31 15:29:27 · 214 阅读 · 0 评论 -
Vue 组件切换
普通切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-10-30 16:26:42 · 104 阅读 · 0 评论 -
Vue 组件的data和methods
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...原创 2019-10-30 16:11:52 · 238 阅读 · 0 评论 -
Vue 组件的创建
全局组件的三种创建方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...原创 2019-10-30 16:00:16 · 125 阅读 · 0 评论 -
Vue 动画
基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-10-30 15:34:10 · 125 阅读 · 0 评论 -
Vue 生命周期函数
概览代码演示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...原创 2019-10-29 15:14:31 · 139 阅读 · 0 评论 -
Vue 自定义指令以及自定义按键修饰符
自定义按键修饰符<input type="text" class="form-control" v-model="name" @keyup.f2="add">Vue.config.keyCodes.f2 = 113 // js代码自定义指令官网教程:https://cn.vuejs.org/v2/guide/custom-directive.html自定义全局指...原创 2019-10-28 19:44:39 · 305 阅读 · 0 评论 -
Vue 过滤器
全局过滤器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-10-28 16:48:17 · 102 阅读 · 0 评论 -
Vue 基础语法
基本代码结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...原创 2019-10-28 15:35:43 · 174 阅读 · 0 评论 -
Node.js 服务器发送请求
官网教程:http://nodejs.cn/api/http.html#http_http_request_url_options_callback转载 2019-10-26 10:59:02 · 382 阅读 · 0 评论 -
Node.js 实现数据库的增删改查
安装mysql驱动npm install mysql --save插入数据/* 插入数据*/// 加载数据库驱动const mysql = require('mysql');// 创建数据库连接const connection = mysql.createConnection({ host: 'localhost', // 数据库所在的服务器的域名或者IP地址...原创 2019-10-26 10:01:21 · 1773 阅读 · 0 评论 -
Node.js 项目实战(简易图书管理系统)
目录结构index.js/* 图书管理系统-入口文件*/const express = require('express');const path = require('path');const router = require('./router.js');const template = require('art-template');const bodyPars...原创 2019-10-25 15:57:15 · 1710 阅读 · 0 评论 -
Node.js Express整合模板引擎
/* 模板引擎整合:art-template*/const express = require('express');const path = require('path');const template = require('art-template');const app = express();// 设置模板的路径app.set('views',path.join(...原创 2019-10-25 10:29:06 · 144 阅读 · 0 评论 -
Node.js Express处理请求参数
/* 参数处理*/const express = require('express');const app = express();const bodyParser = require('body-parser')// 挂载内置中间件app.use(express.static('public'));// 挂载参数处理中间件(post)app.use(bodyParse...原创 2019-10-25 10:17:24 · 462 阅读 · 0 评论 -
Node.js Express中间件
/* 中间件:就是处理过程中的一个环节(本质上就是一个函数) 倘若不执行next方法,就不会调用下一个中间件*/const express = require('express');const app = express();let total = 0;// 不关心请求路径和请求方法app.use((req,res,next)=>{ console.l...原创 2019-10-25 10:00:17 · 129 阅读 · 0 评论 -
Node.js Express路由
/* 路由(根据请求路径和请求方式进行路径分发处理) http的常用请求方式: post 添加 get 查询 put 更新 delete 删除 restful api (一种URL的格式)*/const express = require('express');const app = express();cons...原创 2019-10-24 09:35:55 · 120 阅读 · 0 评论 -
Node.js Express静态资源管理
/* 托管静态文件 可以指定虚拟目录 可以指定多个目录作为静态资源目录*/const express = require('express');const app = express();// 实现静态资源服务(请求路径中无需包含public)let server = app.use(express.static('public'));// use方法的第一...原创 2019-10-24 09:29:48 · 348 阅读 · 0 评论 -
Node.js Express基本使用
/* Express之HelloWorld*/var express = require('express');var app = express();// 绑定路由app.get('/', function(req, res) { // 响应请求 res.send('Hello World!');});var server = app.listen(3...原创 2019-10-24 09:26:53 · 103 阅读 · 0 评论 -
Node.js 处理get和post请求参数
get请求参数处理/* get参数处理-url核心模块*/const url = require('url');// --------------parse方法的作用就是把URL字符串转化为对象-----------let str = 'http://www.baidu.com/abc/qqq?flag=123&keyword=java';let ret = url....原创 2019-10-22 18:43:17 · 648 阅读 · 0 评论