学习笔记
文章平均质量分 72
记录学习过程,新知识的尝试
我叫陈小皮。
前端菜鸟,请多指教
展开
-
高德地图-路线规划
获取高德地图key页面中引入所需文件,根据提供的api引入相应文件(本文主要是web端的路线规划问题)script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=申请的key值&plugin=AMap.Driving">script>页面部分准备一个容器,用来放地图div原创 2018-02-07 15:15:43 · 2276 阅读 · 0 评论 -
vue-cli项目中用json-sever搭建mock服务器
全局安装json-servernpm install json-server -g在项目目录下创建mock文件夹,并在文件夹下创建db.json文件文件格式如下:{ "slides": [{ "src": "/static/img/right1.png", "title": "xxx1", "href": "#" }, {原创 2017-08-16 19:45:56 · 2166 阅读 · 0 评论 -
HTTP状态码
1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态码。100(继续)请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。101(切换协议)请求者已要求服务器切换协议,服务器已确认并准备切换。2xx(成功) 表示成功处理了请求的状态码。200(成功)服务器已成功处理了请求。通常,这表示服务器提供了请求的网页。如果是对您的 robots.txt 文件显示此状态转载 2017-07-26 16:48:52 · 237 阅读 · 0 评论 -
websocket 技术文档
websocket 是服务器推送技术的一种,最大的特点是服务器可以主动向客户端推送消息,客户端也可以主动向服务器发送消息。特点:建立在 TCP 协议之上,服务器端的实现比较容易。与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。数据格式比较轻量,性能开销小,通信高效。可以发送文本,...原创 2018-06-27 16:18:00 · 5767 阅读 · 0 评论 -
性能优化 - 优化项目打包体积,减少首屏加载速度
设置mode如果你的环境变量用的是vuecli3自带的production,则不需要设置,因为本身是开启的,但是如果你自定义了上线的环境变量,比如prod,online等,则需要配置一下,配置之后体积会立马少一半哦~configureWebpack: (config) => { config.mode = 'production'}开启GZIP当然nginx也要做相应的配置哦,自行让公司的运维同学去百度吧,一堆一堆的~npm install compression-webpack原创 2021-07-16 10:14:09 · 439 阅读 · 0 评论 -
前端知识积累(可能包含面试题)
本篇文章打算自己遇到一个问题积累一个,所以…..慢慢来,慢慢积累,总会好的sessionStorage 、localStorage 和 cookie 之间的区别共同点:都是保存在浏览器端,且同源的。 区别: cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发...原创 2017-08-02 10:10:32 · 350 阅读 · 0 评论 -
vue问题合集
1. (vue init webpack过程中报错) inquirer.prompt(…).then is not a function问题解决: 用cnpm install -g vue-cli,重新安装即可(后续慢慢补充) 2. Can’t resolve ‘element-ui’ in ‘c:/…….’问题解决: 出现此类问题多数为找不到所引入的文件在某个文件中,利用...原创 2018-01-08 20:04:20 · 1469 阅读 · 0 评论 -
vue 动态绑定背景图片
backgroundImage && 三目运算符 <div class="right-con" :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'contain'}"></div>backgroundI...原创 2018-05-09 11:23:06 · 59146 阅读 · 4 评论 -
vue 防止加载闪烁
[v-cloak]{ display:none;}p>{{name}}p>div v-if="showTip" v-cloak> p>提示框p>div>加载进来本来隐藏的弹窗等信息会出现闪烁的效果,加上v-cloak即可原创 2018-02-07 15:57:32 · 629 阅读 · 0 评论 -
meta标签的使用
<meta charset="UTF-8"><!-- 设置编码格式 --><meta name="keywords"content="meta标签,meta,meta属性"><!-- 设置网页关键字,每个关键字之间用英文逗号隔开! --><meta name="description"content="meta标签的使用"> <!-- 设置网页描述 --><meta name="viewpor原创 2017-10-10 15:55:11 · 229 阅读 · 0 评论 -
vue 生命周期 应用场景 概述
鉴于总结别人的面试经验,当提到vue项目的时候或者公司做vue项目的时候,笔试题或者面试题都会问问vue的生命周期,然而平时的项目中却很少关注这件事,今天来总结一下:此处先挂上官网的生命周期图vue的生命周期(开始创建、初始化数据、编译模板、挂载Dom、渲染、更新、渲染、卸载)主要分为八个阶段:beforeCreate(创建前) created(创建后) beforeM...原创 2018-03-22 16:01:31 · 7142 阅读 · 5 评论 -
vue-router 的传参方法
* 1 *//a.vuethis.$router.push({ name:'gotoNew', //与路由文件配置中的name相同 query:{ id:1 }, // 参数地址栏上显示 params:{ id:1 } // 参数地址栏上不显示,当传参之后重新刷新页面就没有传过来的参数了})//...原创 2018-03-23 10:17:41 · 503 阅读 · 0 评论 -
Vuex学习小记(action)
action 不能直接变更状态,而是用于提交mutationmutation只能进行同步操作,而action可进行异步操作.action接收一个与store实例具有相同属性和方法的context对象作为参数,所以可通过context.commit(‘typeName’)进行提交mutation,也可以通过context.state以及context.getters获取state和getters.但是原创 2017-10-27 11:12:39 · 982 阅读 · 0 评论 -
Vuex 学习小记(mutation)
更改store中状态的唯一方法就是提交mutation 每个 mutation 都有一个字符串的事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数; mutation的回调函数不能直接调用,必须要用对应type调用store.commit方法 store.commit('increment')原创 2017-10-27 10:05:16 · 2565 阅读 · 0 评论 -
Vuex学习小记(module)
为了避免多个对象导致的臃肿现象,vuex允许将store分为多个模块(module),每个模块有特定的state,getters,mutation等.模块局部的状态: 模块内部的mutation和getter获取的第一个参数还是模块的局部状态对象 模块内部的 action,局部状态通过 context.state 暴露出来,根节点状态则为 context.rootState 模块内部的 get原创 2017-10-27 11:39:08 · 387 阅读 · 0 评论 -
Vue基础知识学习(一)
Vue 中几种数组方法触发视图更新push() (常用,用于数组的新增)pop()shift()unshift()splice() (常用,用于数组的添加,删除等)sort()reverse()几种改变数组但不能触发视图更新的方式当你利用索引直接设置一个项时,例如:vm.items[ind] = newVal当你修改数组的长度时,例如:vm.items.length = n原创 2017-10-25 12:04:39 · 324 阅读 · 0 评论 -
【react】父子组件之间通讯props
父组件父组件中定义一个函数,包含一个props的参数,函数内利用super(props)传递给子组件,this.state中用于定义本页面中要用到的以及要传递给子组件的变量。 父组件的render函数中利用<Table list={this.state.list}/>此种形式传递给子组件 (ps:此例子中也包含组件之间的嵌套,同时组件的名称开头字母必须大写,不然会报错)import React原创 2017-07-26 17:25:40 · 3629 阅读 · 0 评论 -
【react】map 遍历json数据
数据格式:(此数据写在了getInitialState方法中)list: [{ 'id':'1', 'title':'123', 'time':'2017', 'person':'cheny0815', 'type':'type', 'operation':'operation' },{ 'id':'2', 'ti原创 2017-07-26 16:12:43 · 16918 阅读 · 2 评论 -
【react】页面中引用本地图片
方法一:<img src={require('../img/icon1.png')} alt="" />方法二:import search from '../img/search.png'import user from '../img/user.png'<img src={search} alt="" /><img src={user} alt="" />方法三:(不推荐使用)<img src原创 2017-07-26 16:30:49 · 28684 阅读 · 10 评论 -
react 增加@connect装饰器
@connect 安装配置1 . npm run eject2 . npm install babel-plugin-transform-decorators-legacy --save-devnpm install @babel/plugin-proposal-decorators --save-dev3 . 在package.json中配置babel, 添加如下代码:"plugi...原创 2019-04-02 15:54:08 · 4646 阅读 · 0 评论 -
react 增加less配置
由于create-react-app搭建出来的react项目是对less不支持,需要自己对其配置create-react-app react-demo 生成react项目npm run eject 由于react对webpack配置是不暴露出来的,需要npm run eject获取,找到对应的webpack.config.js文件增加less配置npm install less less...原创 2019-03-27 15:46:12 · 604 阅读 · 0 评论 -
scss学习笔记
.scss的文件中带有中括号和分号;.sass的文件中不带有中括号和分号导入导入格式:@import 'index.scss' 导入时可忽略后缀名.scss;@import 'index' 一般以_下划线开头的文件(_mixin.scss),引入时可不写下划线 @import 'minxin.scss'注释分为两种 分别为:/* 注释内容 */ (多行注释) 以及 // 注释内容原创 2017-10-25 19:40:13 · 839 阅读 · 0 评论 -
工作记录
npm install nodemon -g nodemon启动一次即可,多次启动会提示接口被占用原创 2018-05-28 17:00:07 · 360 阅读 · 0 评论 -
mustache语法
mustache语法mustache 模板,用于构造html页面内容。在实际工作中,当同一个模板中想要调用不同的函数来渲染画面,在已经自定义好了的前提下,可以在渲染页面时对传入的参数进行手动判断。【在不好判断的情况下,我们可以通过改变传入参数来进行判断】。Mustache 的模板语法很简单,就那么几个:{{data}}{{#data}} {{/data}}{{^data}} {{/data}}转载 2017-07-14 12:04:12 · 730 阅读 · 0 评论 -
get post 区别 ???
总体来说,两者都是向服务器端发送请求的方法, get是向服务器端发起一个获取资源的请求,比如获取网页中的静态资源(image,css等) 或者获取某列表数据, 而post是向服务器端提交数据的一个请求,比如表单的提交或者对数据的增删改操作但是并非是规定两者必须做获取资源或者提交数据的操作,两者做对方的操作也是可行的,只是大部分情况不这样做而已get 请求的参数在url中显示, post 请...原创 2018-03-23 11:29:45 · 206 阅读 · 3 评论 -
ES6 => 箭头函数
1. 箭头函数的两种形式(1)无{...}和return```x =>x*x;```(2)有{...}和return```x=>{ if(x>0){ return x*x; }else{ return -x*x; }}```2. 箭头函数的参数(1) 无参数 ( )=>3.14(2)参数只有一个 x=>x+x;(3)参数原创 2017-08-08 23:44:33 · 1093 阅读 · 0 评论 -
DEDE自定义表单点击提交后,如何直接跳转到当前提交页?
找到/plus/diy.php这个文件修改以下代码将$goto = !empty($cfg_cmspath) ? $cfg_cmspath : '/';$bkmsg = '发布成功,请等待管理员处理...';改为:$goto = !empty($cfg_cmspath) ? $cfg_cmspath : $_SERVER["HTTP_REFERER"];$bkmsg = '发布成功,现在转向表单转载 2017-09-22 09:55:29 · 1562 阅读 · 0 评论 -
dedescms 标签
面包削导航条{dede:field name=’position’ runphp=’yes’ /}文章列表 {dede:arclist typeid='' pagesize='5'} //typeid写文章列表所在栏目的栏目id <li> <a href='[field:arcurl/]'> <div class="pic">原创 2017-09-14 20:08:39 · 351 阅读 · 0 评论