qq_46065861的博客

原创 vue+vuex+node+express+mysql实现收藏

首先实现进入详情页看是否已收藏点击实现取消和确定收藏总结效果展示业务逻辑首先实现进入详情页看是否已收藏步骤前端进入详情页，发送用户id和商品id后端查询对应用户和对应商品，返回数据给前端前端拿到返回值判断是否收藏点击实现取消和确定收藏步骤1.前端发送用户id和商品id给后端2.后端进行删除或者插入表操作3.前端拿到后端的值进行更改样式总结感觉交互挺有意思的，经过这几次，感觉更好的把握了前后端的交互了，继续加油...

原创 vue+vuex+node+express+mysql修改头像、昵称、性别、签名

效果图业务逻辑这几个的逻辑一样，只发了修改头像前端发tel、path给后端后端先更改、然后发给前端修改后的值前端拿到值去异步更新vuex的loginUer

原创 vue+vuex+node+express+mysql实现登录

效果图业务逻辑前端发给后端拿到actions的login()方法actions里面的login()后端查库，返回值前端拿到值进行存缓存，展示我的页面以及个人信息

原创 vue+node+mysql+express实现注册

功能需求：1.全部输入正确后提交注册才能用2.不能重复注册3.两次密码必须相同4.正则不通过提示相应信息效果图首先实现第一个布局像这种，一个隐藏，一个显示，默认显示禁用的提交上面三个条件全部满足时，显示没被禁用的提交注册 // 手机正则 phoneblur() { let regPhone = /^1[3-9]\d{9}$/; if (regPhone.test(this.phone.trim())) { this.show

原创 Vue底部导航栏变色

效果如下:实现了底部变色和跳转思路利用父组件传值给子组件，子组件根据得到路径进行操作1.在父组件中定义属性，设置初始值2.子组件中监听父组件传过来的值，然后进行变色和跳转这是布局这是js...

原创 typescript---入门（持续更新ing）

该文章是看的这个老师的一、介绍、安装和编译1.1、介绍1.2、安装命令如下1）打开cmd输入命令2）新开一个终端，输入tsc -v验证是否安装成功1.2、编译1）进入项目目录输入tsc --init新建tsconfig.json文件2）更改tsconfig.json的代码，指定输出到js目录下3）新建一个index.js文件4）点击终端>运行任务>typescript>tsc监视我此时报错了（无报错忽略此步骤）解决办

原创 MySQl+express+node.js+vue+axios项目搭建（持续更新ing）

前期准备：需要安装Node、和mysql参考文档1.利用vue-cli脚手架创建vue项目2、在vue项目基础上添加后端目录2.1、项目中新建server文件夹,结构如下userApi.js// 引入express调用路由模块var express = require('express')var router = express.Router();// 访问该路由的路径：/api/User/addUserrouter.post('/addUser',function(req,res

原创 node+mysql+express实现登录、注册功能

18.3、mysql+node实现注册功能(接着18.1)经验:前端人员需要注意这个需求 1.失焦时，查询电话号码是否存在，若存在，显示已被注册2.当电话号码、密码、确认密码全部通过才能注册到数据库步骤1.给项目安装数据库2.实现需求一1.更改register.html为如下，这样才能提交数据过去2.修改register.js思路:把前端输入的手机号码传到后端，后端拿这个值查询数据，若返回的是空数组，则没注册，否者为注册了的注意result为数组 若长度为0，没有注册，

原创 Node.js-----express框架（持续更新中）

十三、express框架13.1、express简介Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站13.2、express框架的核心特性可以设置中间件来响应 HTTP 请求。定义了路由表用于执行不同的 HTTP 请求动作。可以通过向模板传递参数来动态渲染 HTML 页面。13.3、express的安装1、安装前确认是否正确安装node

原创 Node的介绍和基本使用(更新ing)

自己的有道云一、什么是Node?node是一个基于Chrome V8引擎的javascript运行环境，是运行在服务器端的javascript可以使用node搭建服务器，连接数据库。让前端开发人员走向后端开发。Node.js使用了一个事件驱动、非阻塞I/O口，使其轻量且高效Node的包管理工具npm,是全球最大的开源库生态系统二、为什么要学习node?他很火他很强三、node的环境搭建参考笔记：自己有道云检测是否安装成功四、交互式解析器Node 自带了交互式解释器，可以执行以下任

原创 React-router-V6.0路由的使用

我的有道云参考文档一、路由的介绍React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步通过react-router主要创建单页面的大型应用（SPA）二、安装路由先通过npx create-react-app搭建一个项目1、在react的项目中安装路由react-router或者react-router-domnpm install react-router-dom --savepackage.json里

原创 React-----事件在无状态和有状态组件的使用

一、在无状态的使用注意:函数(无状态)组件里面不需要this调用函数1.直接调用方法 function addNum(){ console.log(111) } //调用 <h2 onClick={addNum}>点击增加数量{num}</h2>2.间接调用(这是使用了Hook)const [num,setNum]=useState(0)function addNum(){ setNum(num+1)}//通过调用addNum来调用setNum&l

原创 微信小程序中组件的使用

1.map显示当前1.在map标签设置如图所示2.js写下如下代码

原创 React---留言栏

效果图1.前期准备搭建项目和初始化项目，详情看这篇文章的二、五2.项目结构只需要我圈红的这个3.代码Liuyanlan.js// 1.导入import React,{Component} from 'react';import './Liuyanlan.css'class Liuyanlan extends Component{ constructor(props) { super(props); // 定义state this.state={

原创 React---基本入门知识

自己有道云的文档一、简介React是目前前端较为流行的框架，是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。2013年由FaceBook进行开源，我们将React 16以后的版本，称之为React Fiber(使react运行更加的流畅，特别是复杂的动画)属于MVC设计模式 M model V view C control(即为模型层影响控制层，控制层影响视图层)相关技术栈：React-Router Redux React Native React VR Ho

原创 微信小程序----云函数的使用

1.新建一个文件夹并且配置云函数用到的文档2.右键新建云函数3.修改函数4.右键addnum上传并部署注意每次更新云函数都需要重新部署5.测试云函数

原创 微信小程序----配置云开发

原创 微信小程序增删改查

1.插入数据效果图需求拆分1.创建集合2.写表单需要的知识3.在js里面写插入逻辑中间打印的值e.detail.value

原创 vant框架的使用

我的有道云笔记一、通过脚手架安装vant二、引入vant2.1、方式一:按需引入(推荐)步骤1.安装vant2.下载插件3.在 babel.config.js 中配置4.引入需要的标签,若只有一处使用，则在需要的页面引入，若多处使用，在main.js引入运行结果2.2、方式二：手动按需引入组件2.3、方式三：导入所有组件Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。步骤1.安装vant框架2.mai

原创 VueX入门知识

一、介绍官方介绍十分钟入门vuex组件间通讯八大方式1.vuex是为vue.js专门提供的状态管理模式，即将所有组件公用的数据、方法提取到指定的地方，进行统一管理3.作用(为什么)：解决了兄弟组件间的通信4.面试：子组件和父组件相互通信时props和$emit，项目大了就用vuex二、安装、使用vuex步骤1.在当前项目所在目录下载vuex（生产者模式下）2.、新建一个store的文件夹，在index.js文件中引入vue和vuex3.使用vuex插件// 使用vuex插件

原创 VUE的基础知识

注意：先看菜鸟教程和手册菜鸟教程官方文档一、VUE的介绍面试或者笔试要问类似于 view，vue是一套构建用户界面的`渐进式框架Vue 只关注视图层， 采用自底向上增量开发`的设计。vue是基于MVVM（M:model(数据处理) V:view VM:viewmodel）设计模式，支持数据的双向绑定(v-model)MVC设计模式:M model数据层(进行价格之类的数据处理) 、V：view视图层、C:conreol控制层（判断、循环等逻辑）与js不同的是不需要再获取元素了..

原创 ES6的基础知识

es6的书籍：书籍我的原文一、简介1.ECMAScript和JavaScript的关系同人不同名字。ES6涵盖了ES2015、ES2016、ES2017等等二、块级作用域可以理解为一个{}，凡是有{}就有块级作用域ES6中存在块级作用域，ES5没有1.let的特点变量提升声明提前，赋值并未提前1.let和const均不存在变量提升，var声明的变量存在变量提升(let和const前面的区域叫做暂存性死区)2.使用let和const声明的变量不再属于window,不能通过wi

原创 LESS基础

该篇原文我保存在有道云，整理了后发在这里原文有道云链接一、LESS的使用LESS的使用简化的代码:(实际开发不用这种，因为加载很久)<link rel="stylesheet/less" type="text/css" href="styles.less" /><script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>开发时候用这个(推荐使用)&

原创 bootstrap的js插件效果图以及用法

bootstrap的js插件点击这里以下使用之前均需要引入bootstrap的css和js和jQuery一.静态模态框效果图代码 <div tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header">

原创 @media实现响应式例子

效果图思路1.先写全屏的布局2.在分别在@media里面写平板、手机的尺寸对应的响应式的css /* 通用样式 */ *{ margin: 0; padding: 0; } ul{ list-style: none; } /* 1.设置一直居中 */ ul{ width: 1600px; margin: 0 auto; display: flex; justify-content: flex-start

原创 form表单+MySQL写进数据库

效果图思路1.先写form表单，input里面必须写name属性,因为后端通过name属性获取前端的值2.再写PHP，PHP先拿到值，然后再用sql语句写到数据库注意一下VAlUE里面的语法$sql=$pdo->prepare("INSERT INTO user(name,password) VALUE('${user}','${pass}')");<form action="formData.php" method="get"> <label>姓名:&lt

原创 Ajax+MySQL+PHP+jQuery实现异步请求页面并显示数据

完整效果图:思路1.先写insert.php插入数据（这里插入的93条）<?php // 解决乱码 header('content-type:text/html;charset=utf8'); try{ // 1.设置数据库连接 $dsn="mysql:host=localhost;dbname=tx"; // 2.创建PDO 生成数据库连接 $pdo=new PDO($dsn,'root',''); // 3.设置字符集 $pdo->exe

原创 PHP连接数据库

一、PHP的介绍php是创建动态站点的服务器端脚本语言php脚本在服务器端上运行php的脚本可以放置在文档的任意部分M model V view C control M model V view VM二、PHP的基本使用2.1PHP的命名和引入php脚本语法：<?php php的代码 ?>2.2php常见的输出方式ehco 输出字符串var_dump 打印数组或则对象print_r 打印数组或则对象注意：php的每一行代码结束的位置必须加上分号2.

原创 MySQL

本文完整链接:https://note.youdao.com/web/#/file/5DB568631687422E8ED27E1D94EBFD8F/note/9614E2C00ED6480CB308DB101B40D395/1介绍1.MySQL是开源免费的关系型数据库 关系型数据库:适合存放有规律的数据 2.非关系数据库:存放无规律的数据2命令MySQL命令1.进入数据库命令 mysql -h localhost -u root -p回车简要写法: mysql -u root2.

原创 0基础入门Ajax

1.入门需要掌握1.数据的转换parse()、stringify() stringify(json,['name','age'])2.创建流程、封装流程3.会用AJAX什么是 AJAX？AJAX = Asynchronous JavaScript And XML.ajax 主要是实现页面和 web 服务器之间数据的异步传输我觉得学好AJAX需要直到怎么搞懂怎么获取数据和渲染到页面上AJAX 并非编程语言。AJAX 仅仅组合了：浏览器内建的 XMLHttpRequest 对象（从

原创 js事件的绑定

JS操作css代码注意js无法获取内嵌(css设置的)的样式,只能获取行内的必须利用封装的函数获取内嵌属性 先外部引入getStyle.js<head> <meta charset="utf-8"> <title></title> <script src="getStyle.js" type="text/javascript" charset="utf-8"></script> <style

原创 js的DOM

1.DOM定义:属于window的子对象，是文档性对象模型在DOM中，所有内容为节点，节点的集合叫节点树document是最大节点用处：通过js改变标签和样式2.节点整个文档叫做节点树每一个标签是一个元素节点每一个属性是一个属性节点每一个文本时文本节点每一个注释都是节点整个html的document是一个文档节点节点类型节点类型节点名节点值元素节点1标签名（大写）null属性节点2属性名属性值文本节点3#text文本内容文档

原创 Jquery相关知识

Jquery介绍1.jQuery是一个封装的库，也可以称为一个框架。将js中复杂的方法进行了封装改良，让开发人员更加专注于逻辑开发2.jQuery做好了兼容，但是仅仅封装了DOM操作,操作不了bom注意：前面两个是js和jQuery的区别3.jQuery使用时必须进行引入(必须引入在自己的js之前，建议引入min) 引入本地的js文件 cdn加载（引入在线网址上 网址上具有框架） 4.没有DOM,需要用原生js写 5.在线手册:https://jquery.cuishifeng.c

原创 前端flex布局和grid布局

9.flex布局9.1定义弹性盒子特点：自动计算宽高和不换行在父容器样式里面写上.box{ display:flex; display:-webkit-flex;}设置弹性盒子的兼容性​ -webkit-谷歌内核​ -moz- 火狐​ -o- 欧鹏​ -ms- IE9.2容器属性有以下几个可参照弹性盒子布局(阮一峰)https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

原创 html基础-几种布局

1.html标签html为网页标记语言 <标签名>DTD声名新版<!DOCTYPE html>标题标签 hn<h1></h1><h2></h2><h3></h3> <h4></h4><h5></h5><h6></h6>n越大，字体越小，自动加粗，换行color设置字体的颜色1.HEXColor 六位的十

原创 js的BOM

参考w3school手册全部查手册window属性三种弹框<script> // 1、警告弹框 // alert('不要出门不要出门!!!') // 2、确认弹框 // var res = confirm('你确定要抛弃我吗？') // console.log(res) // 3、输入弹框 var res = prompt('密码是多少?') console.log(res)</script>window

原创 js的对象

查看原型参考网址：https://www.w3school.com.cn/jsref/jsref_obj_array.aspprototype叫原型<script> var obj=new Object(); console.log(obj) // 查看对象的原型 // 通过实例化对象查看对象的原型 console.log(obj.__proto__()); // 通过Object查看对象原型 console.log(Object.

原创 js运算符

数据运算符数学运算符 + - * / % ++ –赋值运算符 : = += -= /= *= %=比较运算符:> < >= <= != == ===三元(目)运算符: 运算符 (条件)? 条件成立执行 ：条件不成立执行逻辑运算符:存在逻辑短路&& 与|| 或！ 非位运算符：先转为二进制，再按位运算与 &或 |非 ~数学运算符 + - * / % ++ –注意/

原创 javascript的引入和介绍和数据类型的转换

js引入方式1.直接引入<script><script/><script type="text/javascript"><script/><script language="javascript"><script/>2.间接引入<script src=""></script>间接引入框架最好用cdn加载在别人的服务器注意最好放在body的最后注释方式单行注释 ctrl+/多行注释 c