肥林の仓库

在Vue项目中使用socket通信(vue-socket.io) vue-socket.io 其实是在 socket.io-client（在浏览器和服务器之间实现实时、双向和基于事件的通信） 基础上做了一层封装，将 $socket 挂载到 vue 实例上，同时可使用 sockets 对象轻松实现组件化的事件监听，在 vue 项目中使用起来更方便。 官方文档 基本使用:前端Vue 安装(这里我们安装vue.socket.io模块和socket.io-client模块，也可以不用socket.io-client模块，请往下看。) npm i vue-socket.ionpm i socket.io-client 在Vue项目中的main.js中引入(使用socket.io-client连接) // main.jsimport Vue from 'vue'import store from './store'import App from './App.vue'import VueSocketIO from 'v ...

数据模拟-Mockjs和json-server mock和json-server都是一种模拟数据的手段,当今时代,前后端分离开发模式已经是web开发的是主流了,我们不可能等后端的接口开发完毕了,在进行前端的页面的接口测试,因此前端开发工程师们就想出了一种能够模拟数据并且截获对应接口的网络请求,返回我们模拟的数据的方法,其中最为常见的就是:mockjs,josn-server以及apiFox了,鉴于我们之前已经使用(学习)过mockjs的基本使用,那么这篇博客就直入主题了,重点讲解mock和json-server的基本使用 json-server 官方文档 json-server是一个在前端本地运行，可以存储json数据的server。通俗来说，就是模拟服务端接口数据，一般用在前后端分离后，前端人员可以不依赖API开发，而在本地搭建一个JSON服务，自己产生测试数据。相当于一个服务器与数据库的简易结合体。 使用步骤: 下载: npm install -g json-server 启动json-server json-server --watch db.json 随后项目 ...

express框架中路由的基本使用以及多重路由的嵌套 一般来讲,我们使用node写后端服务器的时候不可避免的需要写接口(get,post),但是接口多的话写在一个app.js中难免会使得代码非常的冗余,我们修改起来也非常的不方便,而且这也不符合模块化规范,这时就可以使用我们express中内置的路由器模块Router 我们可以使用它来集中的管理我们的接口url路径,也就是集中管理我们的路由,并且当我们的项目当中出现多级路由的使用,同样可以使用它来进行路由的分层 案例需求 实现网页对应的url跳转 /api/user ====> 用户页 (二级路由)/api/user/info ====> 用户信息页 (三级级路由)/api/shop ====> 商店页 (二级路由)/api/setting ====> 设置页 (二级路由) 1. 全部接口写在app.js中(不推荐) app.js(服务器实例) // 1.引入ex ...

node文件上传(服务器与数据库)与下载 我们之前已经学习过使用multer插件来进行文件的拆分上传到服务器上,现在我我们就来学习一下multer插件的另一种模式 — 上传文件到数据库以及如何从数据库中将该文件下载下来 multer中间件的在官方文档 使用multer将数据上传到数据库 首先我们需要一个数据库,这里使用的是MySQL,我们建一张表,表中的字段设置如下: 连接数据库 /* ------------------------- 数据库操作 ------------------------------ */const mysql = require('mysql2') //引入mysql2模块用于操作数据库const db = mysql.createPool({ //创建连接池 host: '127.0.0.1', // 数据库域名 user: 'root', // 数据库账号 password: 'Zpl13189417387', // 数据库密码 ...

异步编程 今天我们来聊聊异步编程,究竟什么是异步编程,什么由是同步编程呢? 其实异步编程可以用一句话来概括,那就是:程序无须按照代码顺序自上而下的执行 CPU 与存储器 我们要想了解异步编程就需要了解一下cpu和存储器,了解程序运行过程中CPU和存储器起到了什么作用或者说扮演了什么角色. 1. CPU ​ cpu是中央处理器，计算机核心部件，负责运算和指令调用。开发者编写的 JavaScript 代码在被编译为机器码以后就是通过 CPU 执行的。 2. 存储器 内存：用于临时存储数据，断电后数据丢失。由于数据读写速度快，计算机中的应用都是在内存中运行的。 磁盘：用于持久存储数据，断电后数据不丢失。内部有磁头依靠马达转动在盘片上读写数据, 速度比内存慢。 计算机应用程序在没有运行时是存储在磁盘中的，当我们启动应用程序后，应用程序会被加载到内存中运行，应用程序中的指令会被中央处理器CPU来执行。 I/O 模型 从数据库中查询数据(将磁盘中的文件内容读取到内存中)，由于磁盘的读写速度比较慢，查询内容越多花费时间越多。无论 I/O 操作需要花费多少时间，在 I/O 操作执行完成后 ...

git常用命令大全 一般来说，日常使用只要记住下图6个命令，就可以了。但是熟练使用，恐怕要记住60～100个命令。 下面是我整理的常用Git命令清单。几个专用名词的译名如下。 Workspace：工作区 Index / Stage：暂存区 Repository：仓库区（或本地仓库） Remote：远程仓库 1. 新建代码库# 在当前目录新建一个Git代码库$ git init# 新建一个目录，将其初始化为Git代码库$ git init [project-name]# 下载一个项目和它的整个代码历史$ git clone [url] 2. 配置 Git的设置文件为:.gitconfig,它可以在用户主目录下（全局配置），也可以在项目目录下（项目配置)。 # 显示当前的Git配置$ git config --list# 编辑Git配置文件$ git config -e [--global]# 设置提交代码时的用户信息$ git config [--global] user.name "[name]"$ git config [--global] user.em ...

实用的开源在线编辑表格库推荐 - LuckySheet 我们在网页开发中经常会遇到需要在线编辑excel或者是多人同时编辑excel的需求,那么这个需求如何实现呢? 由此我们引出今天的主角:LuckDSheet LuckSheet 官方文档 gitee地址 、github地址 什么是LuckSheet? Luckysheet ，一款轻量的·在线Excel渲染框架·，易集成使用。支持二次开发，最重要的是渲染真的很快！它功能强大、配置简单、完全开源。它基本支持类似wps和office的excel图表的所有功能,同时它支持集成到基本上所有的业务系统中,为业务系统赋能,不仅如此,这个库的生态还提供了支持Vue和React项目的开源地址以及对node端的部分支持,下面我就站是一下使用Vue来实现在线编辑excel表格功能 Vue2 项目搭建 直接下载官方的Vue2模板 引入css和js ​ 目前Luckysheet不支持使用npm安装包，所以只能使用CDN引入依赖或者本地引入,我个人是更推荐本地引入的;在vue项目的public/index.html文件里引入： 本地引入需 ...

Node.js之Node与java作为后台服务器的对比 最近一直在学习Node.js,随着逐渐深入的了解，发现真的node能越来越变得热门是有其存在的道理的。可能有人会说，java作为后端语言一直隐隐有龙头老大的姿势，为何我们还要去学node呢？Node.js究竟是什么？它是新的语言还是新的框架，是新的工具抑或只是一个简单的JavaScript文件？ 两种工具的介绍:Node.js Node.js是一个基于Chrome的JavaScript运行时构建的平台，可以轻松构建快速且可扩展的网络应用程序。Node.js使用事件驱动的无阻塞 I/O 模型，使其轻量级且高效，非常适合跨分布式设备运行的数据密集型实时应用程序。 NodeJS是用于服务器端和网络开发的开源和免费使用的运行时环境，可用于跨平台。用JavaScript编写的NodeJS应用程序可以在任何操作系统（包括OS X，Windows或Linux）的运行时环境中运行。 NodeJS提供了一个巨大的库，其中包括各种JavaScript资源。因此，NodeJS提供了一个运行时环境和JavaScript库，并具有强大的V8引擎。 ja ...

TS项目练习:贪吃蛇小游戏(三) 现在正式开始ts代码的编写,基本上全部的编码流程都是通过类来践行面向对象编程思想 1. 食物类(food) 在设计类之前,我们首先要了解一下这个类到底有哪些属性和方法,食物的属性有: 1. 自己本身的元素(它必须要有一个属性是指向自身的div的) 食物的方法(功能)有那些? 食物被吃:判断蛇与食物的位置重合,因此我们需要一个方法来获取食物的x和y坐标 食物的被吃后需要随机生成新的位置,这里同时规定蛇每移动一次就是10px,结合下来就是食物必须也是10的整数位置 代码展示:// 1. 定义食物的类(比较简单)class Food{ // 定义一个属性用于指向食物对应的元素 element:HTMLElement; constructor(){ // 获取页面中food元素并将其赋值给类中的element属性 this.element = document.getElementById('food')!//!表示这个元素不可能为空 } / ...

TS项目练习:贪吃蛇小游戏(二)2. 项目界面的搭建贪吃蛇的界面设计稿如下: 代码展示: index.html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>贪吃蛇</title></head><body> <!-- 创建游戏的主容器 --> <div id="main"> <!-- 游戏舞台(蛇的移动区) --&g ...