2019年09月_栗子好好吃

原创 vue --- > 子组件监听点击事件,接收父组件参数.实现对应跳转

开始vue中子组件这一块,有点麻烦。不是说它很难,而是它的传送数据方式,以及和各种前端后端路由混在一起时,如果不清晰很容易就迷茫下面假设:路由配置文件为:router.js父组件为 parent.vue , 路径为 ./parent.vue子组件1为 child1.vue, 路径为 ./child1.vue子组件2为 child2.vue, 路径为 ./child2.vue父组件中...

2019-09-30 21:08:47 1471

原创 node --- > 监听路由,读取json文件,向MongoDB中写入数据

开始假设读取的文件为newGoods.json假设数据的在MongoDB数据库中,集合的规则是Goods下面将用到koa-router:监听路由,并调用指定的函数mongoose:node中操作MongoDB的接口库fs:node的原生模块,用于读取/写入文件const Router = require('koa-router');let router = new Rou...

2019-09-30 16:38:05 316

原创 node --- > 模块化连接MongoDB数据库的参数设置方案之一

数据库的初始化操作连接的数据库的名称包含连接数据库初始化所有的Schemas暴露给其他页面使用的接口假设写在 database/init.js 中const mongoose = require('mongoose');// 连接的数据库的名称是 lzhhc-vueconst db = 'mongodb://localhost/lzhhc-vue'const glob = r...

2019-09-30 16:33:13 226

原创 mongoose --- > 建立一个集合规则,并导出.

使用mongoose写一个集合的规则首先要设计数据结构下面是newGoods.json里面的一条数据 { "ID": "ff89cf2e14e143dc9e49ad75f7bc7bb0", "GOODS_SERIAL_NUMBER": "6901844910651", "SHOP_ID": "402880e860166f3c0160167897d60002", ...

2019-09-30 16:25:34 585

原创 vue && node --- > 前后端联系的知识梳理

前端、后端联系知识梳理以打开浏览器,访问login为栗打开浏览器,访问localhost:8080/#/loginsrc/router/index.js 会根据 /login 找到对应的Login(src/components/pages/Login.vue)组件, 然后渲染到浏览器当输入用户名和密码,点击登录按钮后根据Login组件中配置的axios请求向后端发送请求.请求的url...

2019-09-30 16:12:50 237

原创 vue --- > 按钮的防重复点击事件

按钮的防重复点击事件:loading属性当loading = true时:按钮会显示一个旋转的圆圈.此时的按钮是无法点击的当loading = false时:按钮重新变为可点击的状态可以通过使用一个变量来控制按钮的可点击性,当提交时,按钮不可点击,提交完毕后,按钮可以点击<van-button :loading="openLoading">提交</van-butto...

2019-09-30 16:10:42 1595

原创 node --- > 使用mongoose连接mongoDB,并初始化所有的Schema

写了一个init.js函数使用了glob来对协助完成(https://github.com/isaacs/node-glob)连接的数据库的名称(smile-vue)连接数据库操作:connect断线重开连接失败连接成功初始化所有的Schemas暴露给其他页面使用的接口const mongoose = require('mongoose');const db = 'm...

2019-09-29 16:40:21 485

原创 node --- > koa、Mongoose、vue联系知识梳理

前端、后端联系知识梳理以打开浏览器,访问login为栗打开浏览器,访问localhost:8080/#/loginsrc/router/index.js 会根据 /login 找到对应的Login(src/components/pages/Login.vue)组件, 然后渲染到浏览器当输入用户名和密码,点击登录按钮后根据Login组件中配置的axios请求向后端发送请求.请求的url...

2019-09-29 11:31:05 212

原创 node --- > 后端使用body-parse解析Post请求,前端使用axios发送Post请求

使用body-parser解析post请求安装service/index.jsnpm install --save koa-bodyparser导入const Koa = require('koa');const app = new Koa();const bodyParser = require('koa-bodyparser');app.use(bodyParser)...

2019-09-28 19:58:42 597

原创 node --- > 使用koa-router,让后端模块化

使用Koa-router进行路由管理npm install --save koa-routerconst Router = require('koa-router');let router = new Router();router.get('/', async (ctx)=>{ ctx.body = '用户操作首页'})路由模块化在appApi下面创建需要模块化的...

2019-09-28 19:56:14 587

原创 node --- > 后端使用bcrypt对密码进行加密处理

密码的处理加密处理在线调试: http://www.atool9.com/hash.phpbcrypt: 加密工具安装 && 使用npm install --save bcryptconst bcrypt = require('bcrypt');const SALT_WORK_FACTOR = 10;const UserSchema = new Schema...

2019-09-28 19:54:49 522

原创 css --- > flex:n的解析

起步效果如下:在父元素中,将3个盒子平均分成了3等份代码如下:p span { flex: 1; background-color: lightcoral;}p span:nth-child(even) { border-right: 1px solid black; border-left: 1px solid black;}假设有3个子元素flex:1 的...

2019-09-26 10:35:11 232

原创 css --- > 圣杯布局

圣杯布局左右固定宽度,中间自适应div:nth-child(1)section { display: flex; width: 60%; height: 150px; background-color: pink; margin: 0 auto;}section div:nth-child(1) { width: 100px; height: 150px...

2019-09-26 10:15:45 130

原创 node --- > 创建一个Socket客户端连接到服务器

描述:net.createrServer().listen(60300) 监听客户端访问net.connect({ port: 60300 }) 访问服务器服务器:一个很简单的监听文件改变的服务器每当监听的文件改变了,将信息通过json的格式传递给连接到的客户端 connection.write// 01、net-watcher.js'use strict'const fs...

2019-09-19 16:56:47 655

原创 node --- > 创建一个Socket服务器

流程:会开发一个监听文件改变的应用然后客户端使用命令行工具(telnet)连接服务端服务端在监听到文件变化后,会发送数据给客户端监听文件变化node 的fs模块:watch方法用于监听文件的变化,可以在内存分配一个区域,来专门用于监听文件变化,并执行该区域内指定的回调函数// 在内存中开辟一个区域,并命名为 watcherconst watcher = fs.watch(f...

2019-09-19 16:11:07 753

原创 css --- > 手机端,留言模块的样式

效果如下:代码:说明:用到了mint-ui,需要先安装mt-button的导入: import { Button } from ‘mint-ui’mt-button的使用: Vue.component(Button.name, Button)更多 http://mint-ui.github.io/// comment.vue<template> <div ...

2019-09-19 15:22:09 654

原创 vue --- > 全局注册子组件,并导入全局的子组件

假设:需要一个评论的模块comment由于comment在多个页面中可能会复用.于是创建一个comment.vue步骤:创建comment.vue在需要引用的位置使import comment from '../subcomponent/Comment.vue' 导入子组件在Vue实例中使用components属性注册注册的规则: “comment-box” : commen...

2019-09-19 14:37:17 654

原创 vue --- > 使用vue-router获取带参数的路由

希望的效果如下:2个路由: 点击如下步骤.使用 router-link 来指定路由路径在router.js中指定路径的事件处理函数(对应的组件)创建对应的组件router-link找到一个区别各个列表的属性(id),将其作为参数传递到路由中to是vue-router中用来绑定路由的属性由于需要进行计算(path + id),故需要将to改为 :to// N...

2019-09-19 10:21:43 1392

原创 vue --- > 全局配置过滤函数,使用moment函数来格式化时间

效果1YYYY-MM-DD效果2YYYY-MM-DD HH:mm:ss配置注意事项由于时间格式化,在大多数页面中都会用到,因此建议配置在全局中使用moment函数 -> http://momentjs.cn/npm 安装# 命令行cnpm i moment -S在全局中配置// main.jsimport moment from '...

2019-09-19 09:31:36 1260

原创 css --- > flex布局的应用(between)

between想把发布时间放在左边,点击放在右边页面结构如下:可以看到发布时间和点击是在类 .mui-ellipsis 下.使用css3的 flex 布局中的: space-between.mui-ellipsis{ display: flex; justify-content: space-between;}...

2019-09-18 17:45:10 2133

原创 es6 --- > Promise封装读取文件操作

Promise:es6中为了解决回调地狱问题而产生的Promise的参数Promise的参数是一个函数.每个Promise在实例化时,都会立即执行参数里的函数const p = new Promise(()=>{ console.log(1);})// 解释了上面的第2条Promise参数的参数Promise的参数(函数),默认有2个参数(resol...

2019-09-18 16:10:02 1015

原创 node --- > 监听文件变化(静态、动态、子进程)

静态版本:监听的文件名写死了// watcher.js'use strict'const fs = require('fs');fs.watch('target.txt', () => console.log('File changed!'));console.log('Now watching target.txt for changes...');命令行启动node ...

2019-09-17 15:08:31 458

原创 vue --- > mintUI中Swipe(轮播图)的使用

引入// main.js// 导入包import { Swipe, SwipeItem } from 'mint-ui'// 注册Vue.component(Swipe.name, Swipe);Vue.component(SwipeItem.name, SwipeItem);放在需要显示的位置// HomeContainer.vue(首页 -> 组件)<temp...

2019-09-16 22:07:12 4084

原创 vue --- > vue-router(项目模式的导入)

main.js// main.js// 1.1 导入路由的包import VueRouter from 'vue-router'// 1.2 安装路由Vue.use(VuerRouter)// 1.3 导入自己的router.js模块import router from './router.js'// 1.4 挂载router对象在vm实例上const vm = new ...

2019-09-16 21:41:48 643

原创 javascript --- > 对象的方式体验链式调用

将功能相近的方法写入同一个对象中,是一个很好的编程习惯,便于后期的维护和前期的开发.foo1var fooObj = { foo1: function() { console.log('foo1'); return this; }}fooObj.foo1();此有一个对象: fooObj它有一个方法: foo1()foo1打印了一个...

2019-09-16 13:40:48 189

原创 javascript --- > repeat的用处

描述思路:最多重复s.length次使用String.prototype.repeat(n)方法可以将字符串重复n次核心:while( i <= len/2){ if( s === s.slice(0,i).repeat(len /i) ) { return ture; }}总体代码:var repeatedSubstringPatte...

2019-09-14 18:19:38 436

原创 javascript --- > 创建一个二维数组

想创建一个 n*n 的矩阵,并全部赋予初始值false你可能会想到下面let arr = [];for(let i =0 ;i< n;i++) { arr[i] = []; for( let j =0; j< n; j++){ arr[i][j] = false; }}稍微封装一下:function Cmatrix(n, c) {...

2019-09-12 11:35:10 872

原创 javascript --- > 让函数的实例可以链式调用

关键:在每个函数的末尾加上 return thisthis:在javascript中表示当前的对象栗如:有以下函数var fooObj = { foo1: function() { console.log(1); }, foo2: function() { console.log(2); }, foo3: f...

2019-09-12 09:34:12 121

原创 javascript --- > 变量污染全局作用域问题解决方案

日常写法// 假设你写了几个关于某个某块的函数function foo1 () {...}function foo2 () {...}function foo3 () {...}出现问题:假设你的团队中也有一个人定义了foo1函数,那么你写的将会覆盖以前的函数,或者会被覆盖掉.若前面使用let声明了foo1变量.将会报错.解决污染你可能会想,将上面3个函数,挂载到一个FooOb...

2019-09-12 09:26:57 385

原创算法 --- > 递归生成括号

问题描述思路:1.首先生成n个括号2.左括号数量(记为l)不超过n3.右括号数量(记为r)不超过n,且优先生成左括号(即 l < r)4.需要设计一个递归式h(str,l,r)// 一开始,str = '', l = 0, r= 0// 第一步进去,添加左括号, str='(', l = 1, r =0// 然后因为 l < n . r < l 所以会有2个h...

2019-09-11 11:11:00 249

原创算法 --- > reduce的使用.

描述:难点:将[[‘a’,‘b’,‘c’],[‘d’,‘e’,‘f’]]输出为[“ad”, “ae”, “af”, “bd”, “be”, “bf”, “cd”, “ce”, “cf”].关键代码描述:1.假设我们已经根据输入的数字得到了 rawArr = [[‘a’,‘b’,‘c’],[‘d’,‘e’,‘f’]]2. 下一步将rawArr[0]中的每一个元素与 rawArr[1]中的...

2019-09-11 09:59:35 267

原创 koa --- > nunjucks

2019-09-09 20:12:15 199

原创 koa --- > 自制简易的koa-router

打算自己写一个简单的Router类,来实现koa-router这个中间件的(部分)神奇功能确定需求1.首先导入需要在app.js里面导入自己写的Router类2.然后是使用的方式和挂载router的方式// 导入Router类const Router = require('./components/router.js');// 使用方式,(暂时只对get请求做处理)const ro...

2019-09-07 08:11:55 111

原创 webpack --- > 使用vue

// webpack中如何使用 vue:// 1. 安装vue 的包: cnpm i vue -S// 2. 由于在 webpack 中,推荐使用 . vue 这个组件模板文件定义组件, 所以需要安装能解析这种文件的loader cnpm i vue-loader vue-template-compiler -D// 3. 在main.js 中导入 vue的包, import Vue f...

2019-09-06 16:38:35 125

原创 webpack --- > html-webpack-plugin

安装cnpm i html-webpack-plugin -D配置 (webpack.config.js)// webpack 是基于node构建的,webpack的配置文件中,任何合法的Node代码都是支持的var path = require('path')// 在内存中生成src下的index.html,同时自动将打包好的bundle.js 导入到页面中var htmlWe...

2019-09-06 13:36:35 246

原创 vue --- > ref属性获取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...

2019-09-04 16:55:17 14518

原创 es6 --- > map的使用

思路:1.使用一个map数组来保存nums1中出现的元素及其次数.2.遍历nums2.使用map的has方法来检测nums2中的元素是否出现在map中,若出现则加入返回数组(retArr),且map数组中的次数减1/** * @param {number[]} nums1 * @param {number[]} nums2 * @return {number[]} */var i...

2019-09-04 09:56:51 143

原创 vue --- > 使用component的 :is属性切换标签页

点击对应的标签,下面切换至对应的模板…// 说明<component :is="name"></component> // 相当于把id为name的组件放到对应的位置总体代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...

2019-09-03 21:10:38 12092

原创 vue --- > 列表(v-for渲染)的各种神仙动画效果

通过v-for生成的元素,使用transition包裹将只显示第一条数据,此时需要使用transition-group包裹.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...

2019-09-03 16:22:23 4961

原创 vue --- > 动画执行的周期(动画的钩子函数)

如下8个:<transition v-on:before-enter = "beforeEnter" v-on:enter = "enter" v-on:after-enter = "afterEnter" v-on:enter-cancelled = "enterCancelled" v-on:before-leave = "beforeL...

2019-09-03 16:01:50 598

空空如也

空空如也