皮蛋solo粥！-CSDN博客

原创 Vue 前台项目（电商）8

vuex 模块式开发vuex 是官方提供的一个插件，状态管理库，集中式管理项目中组件共用的数据。如果项目很小，完全不需要 vuex如果项目很大，组件很多、数据很多、数据维护很费劲，就用 vuex安装 vuexnpm install --save vuexvuex的基本使用在 src 文件夹下创建 store 文件夹，并在里面创建 home 文件夹、search 文件夹和相应的 index.js 文件home/index.js//home 模块的小仓库//state：仓库存储数据的地

2021-12-28 02:59:12 1417

原创 Vue 前台项目（电商）7

postman 测试接口axios 的二次封装为什么要二次封装 axios请求拦截器：可以在发请求之前处理一些业务响应拦截器：当服务器数据返回后，可以处理一些业务安装 axiosnpm install --save axios在项目中 axios 请求一般放置在 api 文件夹内在 src 文件下创建 api 文件夹，并在里面创建 request.js 文件request.js//对于 axios 进行二次封装import axios from "axios"//1:利用

2021-12-24 20:47:22 467

原创 Vue 前台项目（电商）6

商品排行组件 Rank在 Home 文件夹下创建 Rank 文件夹并在里创建 images 文件夹和 index.vue 文件index.vue<template>  <div class="rank"> <div class="tab"> <div class="tab-tit clearfix"> <a href="ja

2021-12-24 19:10:16 554

原创 Vue 前台项目（电商）5

轮播图组件 ListContainer在 Home 文件夹下创建 ListContainer 文件夹并在里创建 images 文件夹和 index.vue 文件index.vue<template>  <div class="list-container"> <div class="sortList clearfix"> <div class="center">

2021-12-24 18:25:04 426

原创 Vue 前台项目（电商）4

Footer 组件的显示与隐藏显示或隐藏组件：v-if | v-showFooter 组件：在 Home、Search 显示 Footer 组件Footer 组件：在登录、注册的时候是隐藏的打开 router 文件下的 index.js 改为下图打开 App.vue 改为下图路由传参params 参数：属于路径当中的一部分，需要注意，在配置路由的时候需要占位query 参数：不路径当中的一部分，类似于 ajax 中的 queryString，不需要占位使用对象的方式传参先双向

2021-12-24 17:55:52 459

原创 Vue 前台项目（电商）3

路由组件的搭建Home首页路由组件Search 路由组件Login 登录路由Refister 注册路由基于 vue-router 实现路由搭建，需要下载依赖cnpm install --save vue-router在 src 文件夹下创建 pages 文件夹，并在 pages 文件夹下创建4个文件，分别是 Home、Search、Login、Refister在这刚创建好的4个文件夹下分别都创建 index.vue 文件在相应的文件夹下的 index.vue 做好标识示例 H

2021-12-24 03:39:40 668

原创 Vue 前台项目（电商）2

在 Header 文件夹下创建 image 文件夹和 index.vue 组件index.vue<template> <header class="header">  <div class="top"> <div class="container"> <div class="loginList"> <p&

2021-12-24 01:51:01 541

原创 Vue 前台项目（电商）1

技术架构：vue + webpack + vuex + vue-router + axios + less…封装通用组件登录注册token路由守卫购物车支付项目性能优化…一：vue-cli 脚手架初始化项目1.新建项目文件夹（Shop）2.打开此项目下的cmdvue create app选择 vue2 的项目然后回车然后就可以看到自动创建了很多文件node_modules 文件夹：放置项目依赖public 文件夹：一般放置一些静态资源 (图片)，需要注意，

2021-12-24 01:16:23 1494

原创 Vue 案例（2）

一：组件切换+过渡动画<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="key

2021-12-16 22:38:12 73

原创 Vue 案例（1）

一：点击变色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.boot

2021-12-15 20:44:07 875

原创 Vue 的基础

一：引入 vue.js<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.common.dev.js"></script>二：第一个 vue 程序<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>vue2</title>

2021-12-15 20:06:33 845

原创 Node 部署返回页面的服务器

使用 nodejs 部署一个服务器+ 能返回指定的页面和指定的文件1. http 模块创建服务1-1. 导入 http 模块1-2. 创建服务1-3. 监听端口2. 根据请求返回对应的内容2-1. 拿到 req 里面 url 信息2-2. 进行 if 条件判断2-3. 读取指定文件返回给前端3. 读取到文件返回给前端3-1. 导入 fs 模块3-2. 使用 readFile 方法读取到在我服务器上的那个 index.html 文件3-3. 把读取到的内容返回给前端实战开始按照我

2021-12-06 13:56:10 261

原创 Node的 http 内置模块 ( 了解)

http 内置模块专门进行 http 服务的协议也是一个内置模块, 直接导入使用1. createServer()=> 专门用来创建一个 http 服务的方法=> 语法: http.createServer(函数)=> 返回值: 一个 http 服务/* createServer 时候传递的函数 + 是会在前端的每一次请求都出发一次 + 这个函数接收两个参数 1. request: 本次请求的所有请求信息 => 服务

2021-12-05 20:45:55 492

原创 Node的 url 内置模块 ( 了解)

内置模块 url专门操作 url 地址的模块直接引入使用就可以了1. parse()=> 解析 url 地址=> 语法: url.parse(url地址[, 是否解析 query]) - 第二个参数, 默认是 false ,不解析 query, 选填 true, 回自动解析query=> 返回值: 一个对象, 包含整个 url 地址的所有信息// 0. 导入 url 模块const url = require('url')// 1. parse()cons

2021-12-05 20:36:53 151

原创 Node的 path 内置模块 ( 了解)

path 内置模块操作和路径相关的内容一个内置模块, 直接导入使用就可以了1. extname( ) 获取后缀名=> 专门获取一个路径中的后缀名=> 语法: path.extname('文件名')// 0. 导入 path 模块const path = require('path')// 1. extname() const res = path.extname('abc.html') console.log(res)2. isAbsolute()=>

2021-12-05 20:31:20 108

原创 Node的 fs 内置模块 ( 了解)

fs - file systemnode 内置的一个模块里面存放的都是操作文件相关的方法使用的时候不需要自己定义, 但是需要导入1. readFile( ) 异步读取文件=> 异步读取文件=> 语法: readFile(路径[, 格式], 回调函数) -> 路径: 你要读取的文件路径 -> 格式: 读取文件默认是 buffer 格式的文件 + 可以选填 'utf8' 表示读取的是 utf8 格式的内容 -> 回调函数: 读取成功以后执行的回调

2021-12-05 19:52:44 637

原创 Node自定义模块 ( 导出和导入)

在一个文件夹里创建3个 js 文件a.jsindex.js每一个 js 文件天生自带一个变量叫做 moduleconsole.log(module)Module { id: '.', // 当前文件的存储路径 path: 'D:\\phpstudy\\WWW\\自定义', // 我向外暴露的内容, 我允许别人使用的我这个文件里的某些内容 exports: {}, // 哪些文件再引用着我 parent: null, // 当前这个文件的文件名称(带有绝对路

2021-12-05 19:15:15 708

原创 PHP中执行sql语句

一：增按照字段全部插入INSERT INTO student VALUES(1025, ‘郭翔’, 18, ‘男’, ‘GP20’, 100)在插入的时候, 主键可以不写, 写一个 null选取字段插入INSERT INTO student (字段1, 字段2, …) VALUES(数据1, 数据2, …)注意: 其他字段需要允许为空 // 1. 按照字段全部插入 $sql = 'INSERT INTO `student` VALUES(NULL, "郭翔", 18, "男

2021-12-04 22:55:31 4220

原创 PHP操作mysql数据库流程

php操作数据库的基础语法1.和数据库建立连接保证你的 MySQL 是启动的语法：$link = mysqli_connect( ’ IP ’ , ’ 数据库用户名 ’ ,’ 数据库密码 ‘,’ database ');IP：你要访问的数据库所在电脑的 IP 地址，本机是 localhost 或者 127.0.0.1用户名：phpstudy 默认是 root密码：phpstudy 默认是 rootdatabase：选择一个你要操作的库返回值：就是一个连接信息<?php /

2021-12-04 22:22:13 361

原创 PHP的基础语法

php语法规则php的语法必须写在 <?php?> 这个标签对里写在这个标签对外的会被浏览器当作 html 解析<?php//单行注释/* 多行注释*/?>而且在 php 中每一句都必须要带分号1.定义变量$ 名字 = 值不需要关键字你的变量名叫做 $名字例子：$num = 100 ;将来使用的时候就是 $num<?php$num = 100;?>2.输出语法说明：-------> 输出并不明确输出给谁，

2021-12-04 20:18:10 1010

原创 jQuery的ajax请求

jQuery的ajax请求$.ajax()因为是发送 ajax 请求，不是操作DOM不需要依赖选择器去获取到元素他的使用是直接依赖 jQuuery 或者 $ 变量来使用语法：$.ajax( { 本次发送ajax的配置项 } )配置项url：必填，表示请求地址method：选填，默认是GET，表示请求方式data：选填，默认是 ’ ’ ，表示携带给后端的参数async：选填，默认是 true ，表示是否异步success：选填，表示请求成功的回调函数error：选填，表示请求失败的

2021-12-04 04:03:10 84

原创 jQuery的结束动画函数

jQuery的结束动画函数stop()当任何一个元素，执行了 stop 方法后会立即结束当前的所有运动，目前运动到什么位置，就停在什么位置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte

2021-12-04 03:34:41 168

原创 jQuery的综合动画函数

jQuery的综合动画函数只有一个animate()1. 第一个参数：要运动的样式，以一个对象数据类型传递2. 第二个参数：运动时间3. 第三个参数：运动曲线4. 第四个参数：运动结束的回调函数ps：关于颜色相关的样式是不能运动的ps：关于 transform 相关的样式是不能运动的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta htt

2021-12-03 22:20:31 54

原创 jQuery渐隐渐现动画函数

jQuery渐隐渐现动画函数fadeIn() 显示语法：元素.fadeIn( 运动时间，运动曲线，运动结束的回调函数)fadeOut() 隐藏语法：元素.fadeOut( 运动时间，运动曲线，运动结束的回调函数)fadeToggle() 切换本身如果是隐藏的，就显示本身如果是显示的，就隐藏语法：元素.fadeToggle( 运动时间，运动曲线，运动结束的回调函数)fadeTo() 指定的透明度语法：元素.fadeTo( 运动时间，指定的透明度，运动曲线，运动结束的回调函数

2021-12-03 22:02:56 93

原创 jQuery的折叠动画函数

jQuery的折叠动画函数slideDown() 显示语法：元素.slideDown( 运动时间，运动曲线，运动结束的回调函数)slideUp() 隐藏语法：元素.slideUp( 运动时间，运动曲线，运动结束的回调函数)slideToggle() 切换本身如果是隐藏的，就显示本身如果是显示的，就隐藏语法：元素.slideToggle( 运动时间，运动曲线，运动结束的回调函数)<!DOCTYPE html><html lang="en"><he

2021-12-03 21:34:43 362

原创 jQuery的基本动画函数

jQuery的基本动画函数show() 显示语法：元素.show( 运动时间，运动曲线，运动结束的回调函数)hide() 隐藏语法：元素.hide( 运动时间，运动曲线，运动结束的回调函数)toggle() 切换本身如果是隐藏的，就显示本身如果是显示的，就隐藏语法：元素.toggle( 运动时间，运动曲线，运动结束的回调函数)<!DOCTYPE html><html lang="en"><head> <meta charset=

2021-12-03 21:21:32 118

原创 jQuery事件的解绑和触发

jQuery事件的解绑和触发off() 事件解绑1-1 解绑全部事件处理函数语法：元素集合.off( 事件类型 )会把 div 的 click 事件对应的所有事件处理函数全部移除<body> <div>我是div标签</div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <script>

2021-12-03 20:46:48 156

原创 jQuery的事件绑定

jQuery绑定事件on()one()hover()事件常用函数1.on()1-1基础绑定语法：元素集合.on( ‘事件类型’ , 事件处理函数) <style> div{ width: 500px; height: 500px; background-color: skyblue; } p{ width: 300px; height: 300px; background-col

2021-12-03 20:26:23 306

原创 jQuery的DOM操作

一.获取元素语法：$(‘选择器’)--------------获取元素<body> <ul> <li>1</li> <li class="a">2</li> <li>3</li> <li class="b">4</li> <li>5</li> <li class="a">6</li>

2021-12-03 19:53:12 464

原创 JS原生的BOM操作

一.获取浏览器可视窗口尺寸获取可视窗口宽度：window.innerWidth获取可视窗口高度：window.innerHeight //获取可视窗口宽度 var w=window.innerWidth //获取可视窗口高度 var h=window.innerHeight //输出 console.log(w) console.log(h)二.浏览器的弹出层提示框：window.al

2021-11-28 01:03:37 281

原创 JS原生DOM基本操作(下)

七.节点操作创建节点插入节点删除节点替换节点克隆节点创建节点语法：document.createElement(‘标签名称’)作用：创建一个指定的标签元素返回值：一个创建好的元素节点 //创建一个div标签 var div=document.createElement('div') //控制台输出 console.log(div)插入节点语法1：父节点.appendChild(子节点)作用：把子节点放入

2021-11-28 00:01:01 704

原创 JS原生DOM基本操作(上)

一.获取元素1.根据id名称获取元素语法：document.getElementById(‘id名称’)作用：获取文档流中id对应的一个元素返回值：如果有id对应的元素，就是这个元素如果没有id对应的元素，就是null <div>一号</div> <div class="box">二号</div> <div class="box content">三号</div> <div clas

2021-11-27 22:43:17 354

原创 JS原生对时间(Date)操作的常用方法

获取当前终端时间 var time=new Date() console.log(time)Fri:周五Nov:11月26：26号2021：2021年20：43：08=时分秒GMT+0800=时区传递指定的时间用法：new Date(年，月，日，时，分，秒)ps:月-0表示1月，11表示12月 var time=new Date(2021,3,31,12,45,46) console.log(time)对时间的常用方法一.获取1.时间对象.getFu

2021-11-26 21:29:36 1581

原创 JS原生对数字操作常用的方法

1.random()语法：Math.random()作用：获取0~1之间的随机小数，包含0，但不包含1返回值：0~1之间的随机小数 //使用random方法获取随机小数 var res=Math.random() //输出获取结果 console.log(res)2.round()语法：Math.round(数字)作用：对数字进行四舍五入取整返回值：四舍五入后的数 //使用round方法取整小数 var res1=Math.round(10.

2021-11-26 20:31:18 358

原创 JS原生对字符串操作的常用方法

1.charAt()语法：字符串.charAt(索引)作用：获取对应索引位置的字符返回值：对应索引位置的字符 //准备一个原始字符串 var str='你好啊，皮蛋' //输出一次 console.log(str) //执行一下 charAt 方法 var res=str.charAt(4) //输出一下返回值 console.log(res)2.toLowerCase()语法：字符串.toLowerCase()作用：将字符串内

2021-11-26 19:51:08 596

原创 JS原生对数组操作的常用方法

1.push()语法：数组.push(数据)作用：将数据追加到数组的末尾返回值：追加数据后数组最新的长度 //准备一个原始数组 var arr=[100,200,300,400] //输出一次 console.log(arr) //执行 push 方法 var res=arr.push('追加的数据') console.log(arr) console.log(res)2.pop()语法：数组.pop()作用：删除数组最后一个数据

2021-11-26 19:08:44 1006

原创 js 鼠标跟随

js 鼠标跟随可根据点击按下事件改为按下跟随松开即回归原位css代码<style> *{ margin: 0; padding: 0; } div{ width: 50px; height: 50px; background-color: orangered; border-radius: 50

2021-11-26 02:58:59 927

原创 js 将js中数据动态渲染到html页面

js 将js中数据动态渲染到html页面css代码<style> *{ margin: 0; padding: 0; } table{ width: 300px; text-align: center; } </style>html代码<table border="1" cellspacing="0"

2021-11-26 02:15:08 11044 2

原创 js写选项卡-tab切换

js写选项卡-tab切换css代码<style> *{ margin: 0; padding: 0; } ul li,ol li{ list-style: none; } .box{ width: 600px; height: 400px; border: 3px so

2021-11-26 01:46:44 97

原创 js 写全选按钮

js 写全选按钮css代码<style> *{ margin: 0; padding: 0; } .box{ width: 100px; padding:20px; border-radius: 5px; border: 1px solid black; margin: 50p

2021-11-26 01:20:00 903

空空如也

空空如也