汪小喵~-优快云博客

原创 TypeScript下的webpack配置

TypeScript下的webpack配置build->webpack.config.jsconst merge = require('webpack-merge')const baseConfig = require('./webpack.base.config')const devConfig = require('./webpack.dev.config')const proConfig = require('./webpack.pro.config')module.exports

2021-10-18 15:13:12 510

原创 vue 鼠标滚动事件处理定位问题

methods: { handleScroll(e) { const scrollTop = e.target.scrollTop const scrollWrap = document.getElementById('scroll-wrap') const offsetTop = scrollWrap.offsetTop if (scrollTop > offsetTop) { // 滚动值大于偏移值

2020-12-09 13:39:01 686

原创小程序获取用户信息

获取用户信息获取用户信息有一种方式wx.getUserInfo，但是这个东西不能直接调用，除非用户已经授权。用户未授权时用户未授权时，我们需要给用户提供一个可点击的按钮，当用户点击该按钮时，我们获取用户的相关userInfo<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取用户信息</button>当用户授权后，获取到用户信息应该存放在app.globalData中，可以方便其他页面使用如果用

2020-10-28 12:59:08 956

原创小程序基本语法

小程序基本语法插值在小程序中，插值和vue没有区别，我们可以直接写 {{}} 中间包含变量（data中的属性名）{{msg}}判断条件判断wx:if="{{条件}}"wx:elif="{{条件}}"wx:else<view wx:if="{{score > 80}}">优秀</view><view wx:elif="{{score > 70}}">良好</view><view wx:elif="{{score >

2020-10-28 12:58:05 1170

原创小程序注册和配置

小程序注册想要注册小程序需要去一个网站微信公众平台，点击立即注册，根据提示进行小程序注册实名认证小程序需要进行实名认证，使用已经绑定了银行卡的微信进行扫码即可进行实名认证小程序开发工具下载页面小程序配置全局配置全局配置在app.json中进行配置pagespages可以用来配置页面的相关内容，如果需要新增页面，则在pages数组中添加新的配置项{ "pages": [ "pages/xxx/xxx" ]}当数组中配置后，相关文件会自动被创建局部配置局部配置在页

2020-10-28 12:57:18 342

原创 webpack配置

webpack配置webpack支持丰富的自定义配置，只需要在根目录新建一个webpack.config.jswebpack.config.jsconst path = require('path')module.exports = {}入口配置entry 默认情况下指的是src下的index.js，我们可以通过在webpack.config.js中进行对应的配置修改相关入口文件路径及名字webpack.config.jsconst path = require('path')m

2020-10-22 20:24:27 126

原创 React路由

React路由安装如果想要使用react路由，则需要安装react-router-dom在该模块中，我们会经常使用BrowserRouter，HashRouter，Route，Switch，Redirect，Link，NavLink使用import React, { Component } from 'react'import { HashRoter as Router, Route } from 'react-router-dom'class Router extends Componen

2020-10-22 20:24:10 170

原创 webpack基础

webpack是什么webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)。基于模块化webpack改变了现有的前端的开发模式，从原本写js html css变成了模块化开发之前在网页开发时，想要使用模块化需要借助require.js或者sea.js。后来ES6出现了模块化的概念，借助we

2020-10-17 09:58:17 166

原创 vuex

Vuexvuex在使用时需要通过new Vuex.Store获取到对应的对象，然后进行相关的配置state用来保存组件中的数据，如果想要修改这里的数据，需要通过mutation进行修改const store = new Vuex.Store({ state: { msg: "Hello Vuex" }})获取到对应state中的数据在想要使用的组件中，我们可以直接通过this.$store.state.msg获取到对应的msg数据<template> &lt

2020-10-17 09:54:32 108

原创 vue项目部署

项目部署使用vue开发的项目，最终还是HTML CSS JavaScript构建项目npm run build使用该命令可以构建我们的项目，会生成一个dist文件夹，文件夹中就是构建完成的项目部署项目nginx进入到nginx的conf/nginx.conf，修改该文件的配置，添加新的虚拟主机。server { listen 8000; # 监听端口 server_name localhost; # host地址 location / { root

2020-10-17 09:53:04 415

原创 vue-router基础

VueRouter路由组件在创建过程中，路由组件和普通组件是一模一样的，使用方法不一样。普通组件是放置在其他组件中的路由组件放在路由配置中路由配置所有的路由配置放在一起应该是个数组，单个的路由配置应该是个对象，对象中有很多固定的属性path表示路由路径，配置后可以去访问对应的路由，并且将对应的组件显示在 router-view 中component表示路由组件的配置，和path一一对应，当匹配到对应的path时，component会被渲染到router-view中name我们可以

2020-10-17 09:45:38 129

原创 vue-router的使用

VueRouter的使用路由的使用时一个模式化的过程script中引入的js1 引入js<script src="vue-router.js">2 创建routes配置数组const routes = [ { path: '/', name: 'index', component: 组件 }]3 把routes放在new VueRouter中const router = new VueRouter({ routes})4 将rout

2020-10-17 09:43:36 136

原创 vue 生命周期钩子函数

生命周期组件声明周期的几个过程创建挂载更新销毁创建beforeCreate (创建前)初始化事件和生命周期后created (创建后)相关数据注入时，这个时候可以获取到data中的值，但是无法获取DOM挂载beforeMount (挂在前)当data数据已经和vue模板渲染出HTML时，页面上还没有内容mounted (挂在后)将编译好的HTML替换到页面上后，这个时候可以获取到真实的DOM更新beforeUpdate (更新前)当data中的值发生变化前，

2020-10-17 09:38:01 219

原创插槽

插槽基本的插槽解决了在组件标签中写内容无法被渲染的问题（如果我们想要像普通标签一样在标签中写内容会渲染出来）基本插槽的写法child.vue<template> <div> <slot></slot> </div></template>我们要给组件的使用者一个权限，可以自定义内容的权限，可以使用slot，slot放在哪，未来组件标签中的内容就会被渲染到哪parent.vue<template&gt

2020-10-17 09:28:15 146

原创组件通信

组件通信组件之间的关系父子关系非父子关系组件通信-父子通信父子通信，利用在父组件模板中，给子组件添加属性的方法进行通信，一旦添加了属性，那么在子组件中可以通过props进行接收<template> <div> {{msg}} <Child :msg="msg"></Child> </div></template><script> export default { da

2020-10-17 09:26:54 140

原创 json-server的基本使用

json-server的使用安装npm i -g json-server创建目录在电脑合适的位置创建一个文件夹，尽量是英文创建db.json在文件夹中创建一个db.json，并进行编辑json中数据对应关系{ "books": [], "users": []}当我们在db.json中写入以下内容时，未来会给我们提供下列接口GET /books 获取所有信息GET /books/:id 获取单个信息POST /books 新增数据PATCH /books/:id 更新部

2020-10-17 09:24:08 132

原创 vue基础及指令

Vue基础引入vue.js<script src="vue.js路径"></script><script> // 这里写相关JS的代码</script>实例化vue对象const app = new Vue({ // 这里写相关的配置})配置el挂载点，将对应符合选择器要求的挂载点，作为vue的模板（只有变成模板才能去使用模板语法）new Vue({ el: "#app"})data如果我们把数据放在data中，

2020-10-17 09:22:18 116

原创 cookie的使用，web存储以及区别

cookie的使用（node）第一步安装cookie-parser yarn add cookie-parser --save / npm install cookie-parser --save使用 // 引入cookie-parser var express = require('express'); var app = express(); var cookieParser = require('cookie-parser'); app.use(

2020-07-28 20:14:03 328

原创 node express框架 post请求连接mysql

post 请求在js文件中 var express = require('express'); var app = express(); // 考虑到post的请求的参数在请求体内 req.body 所以要安装body-parser来解析请求体中的数据 // 安装body-parser的命令 npm install body-parser --save var bodyparser = require('body-parser'); // 已解析表单提

2020-07-24 20:17:46 940

原创 nodejs 文件流，http/url/fs混用搭建服务器

总结文件流 var fs = require('fs'); // 如果文件存在则向文件中写入内容如果文件不存在则创建该文件并写入内容 var writeStream = fs.createWriteStream('要写入内容的文件地址') writeStream.write('要写入的内容', 'utf-8'); // 用来标记结尾 writeStream.end() writeStream.on('finish', function() {}

2020-07-21 19:25:14 335

原创 nodejs 模块化创建服务器文件系统

nodenode 是一个用在服务端运行js代码的环境他是运行在谷歌的v8引擎上的javascript代码他是用I/O模式非阻塞模式 I => input O => out模块化node的模块化使用的是commonjs的模块化系统导出方法module.exports = {} 对象中是要导出的函数或者属性exports.要导出的模块名称 = 要导出的逻辑或者属性方法 module.exports = { key1: 'a',

2020-07-21 19:23:15 174

汪小喵的博客