WEB
Vic·Tory
Make your hands dirty
展开
-
使用Bootstrap快速构建页面
1、引入Bootstrap首先从Bootstrap官网下载代码包,解压后将其中的css、js、fonts中的文件放在对应的静态资源目录中。之后在要使用的页面中引入该css、js文件,或者也可以直接以CDN的方式引入。注意bootstrap.js是基于jQuery,因此也需要引入jquery.js。接着需要用meta标签设置字符编码为utf-8,并且使用viewpoint固定页面大小以保证页面在不同分辨率的设备上看起来都是一样的<head> <meta charset="utf-8"原创 2020-08-15 10:54:05 · 2591 阅读 · 0 评论 -
React Native--通过fetch请求网络数据制作一个新闻App
今天记录一个用React Native制作一个新闻App的过程,要做成的效果如下: 1、利用fetch请求网易数据接口 在之前的网页开发中,经常使用ajax来异步请求网络数据,而在react中提倡使用fetch来进行网络通信,fetch发起网络请求的方式很简单: fetch(url); 如果希望对请求的参数进行指定或者添加请求数据,fetch接收第二个参数...原创 2018-05-06 12:41:50 · 1880 阅读 · 0 评论 -
React Native制作仿美团APP总结
最近学习了一个网上的React Native项目,利用React Native制作一个类似于美团的App,项目属于对之前React Native常用组件的基本使用,但是仍有一些关键点值得记录。最后做成的效果如下:1、通过React Navigation来搭建整体的页面框架 可以看到这个App大致分为四个板块:主页、商家、我的、更多,分别对应四个标签导航,可以利用React n...原创 2018-05-05 19:35:13 · 5497 阅读 · 2 评论 -
React Native--_this.*** is not a function
在react native使用<ListView><FlatList><SectionList>等组件列表时,经常会报错this.**不是一个方法,然而我们明明已经声明了该方法,这是因为在该组件中的this并不是你的class中的this。例如我在使用FlatList渲染一个组件:<FlatList ref={ref=>flatList=...原创 2018-04-27 21:11:17 · 1916 阅读 · 0 评论 -
React Native--使用React Navigation实现界面导航与跳转
在浏览器中我们可以通过<a>标签与url实现不同页面之间的跳转,利用浏览器的返回按钮返回之前浏览的页面,但是在React Native中却没有集成内嵌的全局栈来实现这个界面的跳转,因此需要使用第三方库来实现这个功能。React Navigation就是这样一个源于ReactNative社区的用于实现界面导航的js库。通过如下方法安装react navigation到你的...原创 2018-04-26 20:59:24 · 27545 阅读 · 3 评论 -
ReactNative--TypeError: Cannot read property 'throwIfClosureRequired' of undefined
今天在react-native init 新建项目时,发现react native的版本从0.55.2升级到了0.55.3,初始化项目之后在安卓上运行时,node服务器编译错误,报错如下:error: bundling failed: TypeError: Cannot read property 'throwIfClosureRequired' of undefined (While p...原创 2018-04-22 18:56:59 · 1020 阅读 · 0 评论 -
ReactNative--在Android上使用TabNavigator实现页面导航
React Native默认提供了TabBarIOS组件用于提供视图切换功能,但这个组件是不能跨平台的,如果希望在Android平台上实现TabBar功能需要自己使用第三方js库,我在GitHub上找到了一个react-native-tab-navigator组件用于安卓上的TabBar实现。它的效果如下: 首先需要安装组件到你的项目中,在你的项目所在文件夹通...原创 2018-04-21 19:55:46 · 1071 阅读 · 0 评论 -
React Native--FlatList与SectionList
在我的上一篇博客中用ListView实现了列表数据的渲染,但是ListView的使用步骤较为繁琐,而且ReactNative官方文档提倡使用FlatList与SectionList来替代ListView。其中FlatList用来渲染一维的数据,SectionList用于渲染二维数据。1、FlatList 常用的属性:data:定义flatlist的数据来源 keyExt...原创 2018-04-21 12:19:47 · 3315 阅读 · 0 评论 -
React Native--ScrollView组件轮播图与ListView渲染列表组件
1、Scroll View ScrollView是React Native提供的滚动视图组件,渲染一组视图,用户可以进行滑动响应交互,其常用属性如下:滚动的偏移量:通过event.nativeEvent.contentOffset.x可以得到水平偏移量。 horizontal={bool},属性为true时,所有子视图在水平方向排列,否则在纵向排列。默认为false。 pagin...原创 2018-04-20 12:19:26 · 1672 阅读 · 6 评论 -
React Native生命周期
React Native的组件从创建到被渲染再到被销毁有一个过程,在不同的阶段完成不同的任务,通过了解其生命周期可以让我们知道应该在什么阶段对其进行哪些操作。一般人们将其分为三个阶段:初始化阶段:这个阶段用于准备组件所需要的数据,然后将组件渲染到页面上。 运行阶段:组件一直循环监听,当组件中的数据被修改时,组件将重新渲染页面。 销毁阶段:当不再需要组件时,组件会自动进行销毁。从上图中...原创 2018-04-18 14:59:42 · 710 阅读 · 0 评论 -
常用的ReactNative组件
1、View组件 <View></View>组件类似于<div>标签,是一个常用的ReactNative容器,用于盛放其他组件,可以通过StyleSheet对其样式进行定义,基本上div的CSS样式都可以用于View,但注意采用驼峰写法而不是短横线写法。const styles=StyleSheet.create({ parent:{ ...原创 2018-04-15 20:29:07 · 670 阅读 · 0 评论 -
ReactNative学习--FlexBox布局
1、什么是FlexBox FlexBox是FlexibleBox的简称,它是一种CSS3的布局模式,用于灵活排列容器内的元素。它能够自动伸缩容器内的元素,使它们在不同的屏幕尺寸与设备上合适地展现出来,它在以下方面有较好的表现:在不同方向排列元素 重新排列元素的显示顺序 更改元素的对齐方式 将元素动态装入容器2、基本概念 如图所示为一个橙色父容器,里面横向排列了三个子...原创 2018-04-12 17:43:23 · 507 阅读 · 0 评论 -
React-native在Windows下Android环境的安装调试
在第一次使用react-native时,遇到的问题就是在运行react-native run-android时报错FAILURE: Build failed with an exception.* What went wrong:Could not determine java version from '9.0.1'.网上有些人说这是由于Android Studi...原创 2018-04-11 11:05:03 · 455 阅读 · 0 评论 -
React学习--React应用的构建思想
React在构建一个组件应用时所使用的设计模式与传统的前端开发思路不同,在刚使用的时候觉得它很别扭,甚至多此一举,但当你理顺它的设计思路时,就会觉得一切都是那么理所当然了。构建一个react应用思路上分为以下五步:1、划分UI组件拿到UI界面后,首先将一个复杂的应用拆分为单个应用功能组件,每个组件只完成一部分UI的渲染或者一项功能职责。将组件按照UI包含层次划分父子组件关系。如图:...原创 2018-04-09 16:20:27 · 470 阅读 · 1 评论 -
React学习--JSX与react事件
1、JSX1.1、表达式 在React中使用JSX来描述HTML页面,而且可以与js混合使用,使用JavaScript表达式时要将表达式包含在大括号里const user = { firstName: 'Harper', lastName: 'Perez'};const element = ( //将JSX语句保存在变量中 <h1&...原创 2018-04-08 18:52:18 · 919 阅读 · 0 评论 -
React学习--受控组件与数据共享
在HTML当中,像<input>,<textarea>, 和 <select>这类表单元素会自己储存值,并且根据用户输入进行更新。但在React中,可变的值通常保存在组件的state中,并且只能用 setState() 方法进行更新。为了解决二者的矛盾,可以让HTML元素不再自己储存数据,而使用来自于react的state。也就是说HTML元素把数据保存在rea...原创 2018-04-08 10:50:04 · 451 阅读 · 0 评论 -
React学习--组件、props、state、生命周期
1、定义组件 通过函数定义组件:js函数可以接收一个props属性,并返回一个React组件function MsgBox(props){ return <div>hello {props.name}</div>} 通过类继承定义组件:通过继承React.Component产生一个类组件,通过this.props访问类属性,并在render函...原创 2018-04-06 19:04:55 · 842 阅读 · 0 评论 -
React学习--Getting Start
1、React简介 1、本质:React 是一个用于构建前端用户界面的 JAVASCRIPT 框架。 2、用途:主要用于构建UI,很多人认为 React 作用于 MVC 中的 V(视图)。 3、起源:Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。2、React特点 1.声明式设计 −React采用声明范式...原创 2018-04-06 10:58:03 · 348 阅读 · 0 评论 -
使用Vue-CLI与Vuex
1、通过Vue-CLI创建项目Vue-CLI是Vue用于创建Vue项目的脚手架工具,它可以快速帮你创建一个Vue项目的文件目录,使Vue开发更加便捷、标准化。1、全局安装脚手架:npm install --global vue-cli,安装成功后可以通过vue -V查看版本号2、初始化项目文件夹:vue init webpack 项目名,之后会出现命令行交互,根据提示设置项目名称、描述...原创 2018-04-03 15:16:50 · 396 阅读 · 0 评论 -
Vue+Node商城用户管理
1、用户登陆 前端将用户输入的用户名密码post发送到后端,如果返回status=0,代表登陆成功,将hasLogin置为true,控制页面登陆按钮不显示,并显示返回的用户名nickname login(){ if(!this.username||!this.password){ this.errMsg="请输入用户名与密码!"...原创 2018-03-29 10:19:12 · 2030 阅读 · 1 评论 -
利用mongoose操作数据库实现购物车的增、删、改、查
1、数据库操作语句Mongoose通过model实现对每个集合的操作,在使用前需要先定义model:goods。 1、增加数据:从集合中查询一条记录,并返回doc,对doc操作之后通过save()保存到集合 goods.findOne({productId},(err,goodsDoc)=>{ ...原创 2018-03-29 09:52:25 · 2582 阅读 · 1 评论 -
Vue+Node:商品列表的分页、排序、筛选,添加购物车
1、分页商品列表的分页实现是后台根据前端请求的页面大小、页码位置,去数据库中查询指定位置的数据然后返回给前端。比如页面大小为8,要查第3页的数据,则跳过2*8条数据,然后返回接下来的8条数据。实现滚动加载:页面刚一加载完成并不需要请求所有数据,只显示一部分。当用户下拉到页面底部时,再去请求数据并拼接到商品数据列表中。通过vue-infinite-scroll插件实现滚动加载,在框架末尾插入...原创 2018-03-27 10:50:21 · 3645 阅读 · 0 评论 -
Mongo数据库→Node服务器→Vue页面的数据传递
1、利用Mongoose查询MongoDB 通过mongoose依赖可以简捷地操作mondodb数据库,首先安装mongoose:cnpm install mongoose --save 使用mongoose需要一个模式Schema,它用于定义你从mongodb中查询的每个文档条目的内容,然后通过mongoose.model()生成一个模板model,模板像一个架...原创 2018-03-21 18:45:25 · 1672 阅读 · 5 评论 -
Node.js学习--创建一个Express服务
1、创建一个HttpServer服务端在node.js官网下载好node的Windows版本后一路下一步安装好了node,新建一个server.js文件,开始第一个node文件。首先在文件开头需要使用require包含所需要的模块,然后利用http.createServer创建一个server,并执行回调函数。在回调函数内对请求req进行处理,并返回res结果。利用url的parse方法将...原创 2018-03-19 12:04:10 · 986 阅读 · 0 评论 -
Vue学习--axios的使用
Axios 是一个用于实现网络数据请求的JavaScript库,可以用在网页和 node.js 中,用于创建 XMLHttpRequests,vue官方支持使用axios代替vue--resourse来实现网络数据请求。使用前需要在你的项目中安装axios,例如通过npm安装库:npm install --save axios 接着在项目中引入axios:import a...原创 2018-03-17 15:47:18 · 759 阅读 · 0 评论 -
Vue学习--计算属性与侦听器
vue之所以加载速度非常块,是因为在数据改变时,它并不是将所有组件都刷新,而是在重用代码的基础上对发生改变的地方进行渲染。同时,还得益于计算属性的使用:1、计算属性像绑定普通属性一样在模板中绑定计算属性。例如reverseName属性依赖于firstName和lastName,当firstName或lastName发生改变时,依赖于它的 reverseName 也会更新。利用函数方法也...原创 2018-03-13 20:22:33 · 337 阅读 · 0 评论 -
vue学习--VueRouter
Vue-router就像一个路由器,将组件(components)映射到路由(routes)后,通过点击<router-link>它可以在<router-view>中将相应的组件渲染出来。1、使用vue-router的步骤//1、创建路由组件 const Link1={template:'#link1'}; const Link2={tem...原创 2018-03-12 16:40:42 · 401 阅读 · 0 评论 -
Vue学习--组件通信
组件实例的作用域是孤立的,这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。但是父子组件之间需要通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件。在 Vue.js 中,父子组件的关系可以总结为 props down, events up :父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。1、子组件中通过...原创 2018-03-11 19:33:18 · 889 阅读 · 0 评论 -
Vue学习--组件
Vue中的模块化、可重用代码块将页面细分为一个个功能组件,而且组件之间可以嵌套。组件分为全局组件与局部组件,局部组件在实例中进行注册,并且只可以应用于该实例中。1、 组件的使用流程: //1、创建组件构造器 let overallDiv=Vue.extend({ template:` <div> ...原创 2018-03-11 12:11:18 · 968 阅读 · 0 评论 -
Vue学习--常用指令
1、创建一个vue实例vue的一个特点就是数据驱动界面,一旦对js中的数据进行修改,界面中用到数据的地方也会立马做出更改。为了对界面进行操纵,需要先获取到界面的标签元素,并实例化一个vue实例。例如在HTML创建一个div:<div id="app"> <p>{{msg}}</p></div>在js中将其实例化为v...原创 2018-03-10 18:27:46 · 2908 阅读 · 0 评论 -
ES6学习--字符串、数组、对象、函数新增点
1、模板字符串 反引号`` 内用于输入格式化的字符串文本,在``内可以将表达式用${}包含起来 let str=` <!DOCTYPE html> <html lang="en"> <body> <div> ...原创 2018-03-09 20:37:00 · 282 阅读 · 0 评论 -
ES6学习--新增数据类型
1、数据解构赋值1、数组的解构赋值 基本用法:let [key1,key2...]=[value1,value2...]let [name,age,sex]=['小明',24,'男'];console.log(name);console.log(age);console.log(sex); 注意左右的key与val...原创 2018-03-09 10:56:34 · 4277 阅读 · 0 评论 -
ES6学习--let与const
在ES6中不是var,而是通过let来声明变量,用const来声明常量,有如下一些不同:1、let与const作用域只限于当前代码块{},而var则没有这种限制。2、使用let、const申明的变量作用域不会被提升。例如:console.log(str);var str="var declare";控制台输出undefined;因为变量申明是在任意代码执行前处理...原创 2018-03-08 20:45:31 · 229 阅读 · 0 评论 -
利用javascript在网页实现八数码启发式A*算法动画
最近人工智能课老师布置了一个八数码实验,网上看到很多八数码的启发式A*算法,但是大多数都是利用C或者C++在控制台实现的,于是我用js在网页中做了一个类似的。首先八数码就是一个九宫格,其中有一个空格,其他八个对应数字1-8,移动空格,使得最后状态为有序,如下图启发式算法是指在求解时,利用启发函数将不符合规则的解节点去掉,从而缩小问题的解空间。A*算法是利用评价函数的启发式算法,在本例中,利用当前节...原创 2017-04-15 20:22:37 · 1753 阅读 · 0 评论 -
Bootstrap网页基础
Bootstrap框架 标题 <h1>或者使用类.h1 副标题 <h1>标题<small>副标题</small></h1> 强调文本 class="lead" 文本颜色 使用不同类:...原创 2017-03-13 08:45:06 · 614 阅读 · 0 评论 -
JQuery常用简单动画回顾
jQuery基础动画回顾 .hide() 隐藏动画 .show() 出现动画 .toggle() 切换显示状态 .slideUp()/Down() 下拉/卷起动画 .slideToggle() 下拉卷...原创 2017-01-29 18:30:41 · 616 阅读 · 0 评论 -
JQuery中的常用事件
JQuery中的常用事件 .click() 鼠标单击触发事件,参数可选(data,function) .dblclick() 双击触发,同上 .mousedown()/up() 鼠标按下/弹起触发事件 .mousemove() 鼠标移动事件...原创 2017-01-29 11:50:29 · 5060 阅读 · 0 评论 -
JQuery中DOM节点的操作
Jquery中DOM节点的操作 已有对象.append(要添加的对象) 作为最后一个子元素添加 要添加的对象.appendTo(已有对象) prepend()/prependTo() 作为第一个子元素添加 已有元素.before(要添加的元素)/after() 在...原创 2017-01-27 15:28:06 · 513 阅读 · 0 评论 -
JQuery样式与属性设置
Jquery属性的获取与设置//找到第一个input,通过attr设置属性value的值$("input:first").attr('value','新设值');//同时为多个属性赋值$("input:first").attr({'attr1':'v1','attr2':'v2'...});//找到最后一个input,通过使用removeAttr删除属性$("input:last"...原创 2017-01-26 19:10:43 · 582 阅读 · 0 评论 -
JQuery回顾--常用选择器
JQuery基础回顾今天对JQuery内容进行了回顾,下面进行一些总结:JQuery是javascript的一个库,所以二者可以相互转换,例如JQuery到Javascript,用$()获取元素,传给JS的var变量。反之JS的getElement方法获取var变量后,可以通过$(var)转化成JQuery对象。JQuery的选择器,id选择$(“#id”),class选择$(“....原创 2017-01-26 17:28:28 · 362 阅读 · 0 评论