zhou-boy-CSDN博客

原创实现上传图片功能

小程序-实现上传图片功能1：在data中设置三个变量： 1）src空数组（用来存放用户上传的图片） 2）img_count默认值为0，用来记录用户上传图片的数量 3）wechat默认值为空，用来存放用户的微信号码2：在一个label标签中写入{{img_count}}显示当前图片的熟练 /2是表明最多可上传两张图片3：在下面的一个label里面循环展示src数组里的图片,在label里面通过vue的语法v-for来循环 1）v-for="(item,index

2020-11-16 01:07:34 1616

原创将图片等信息提交到数据库当中

将图片等信息提交到数据库当中1：在数据库文件夹server下的tools下新建一个数据库文件other.sql,在里面创建表单opinions，表单信息有 1）id(必填项，主键) 2）openid(必填项，用来关联用户信息，是用户的唯一标识符) 3）src(选填项，用户上传的图片信息) 4）wechat(选填项，用户反馈的微信号) 5）opinion(必填项，用户反馈的建议) 6）create_time(必填项，数据的创建时间)2：用户提交信息，后端需要在数据库

2020-11-16 01:03:07 787

原创 Ajax基础

XMLHttpRequest的几个方法和属性● open()：建立到服务器的新请求。● send()：向服务器发送请求。● abort()：退出当前请求。● readyState：提供当前 HTML 的就绪状态。● responseText：服务器返回的请求响应文本。创建新的 XMLHttpRequest 对象var request = new XMLHttpRequest();javascript 不要求指定变量类型在 Java 语言中可能需要这样(创建 XMLHttpRequest

2020-11-16 00:50:48 92

原创 axios基本使用

1：axios是一个功能强大的网络请求库2：导包<script src="https://unpkg.com/axios/dist/axios.min.js"></script>3：请求方法get请求axios.get(地址).then(function(response){},function(err){});//地址就是文档提供的接口地址//response 指服务器响应的内容 err是返回的错误的信息//如果需

2020-11-16 00:48:19 495 1

原创 v-for、v-on补充、v-model

1：v-for指令1）根据数据生成列表结构2）结合的类型有数组，对象，数字，字符串，迭代器等，数组经常跟v-for结合使用3）语句 v-for=" (item,index) in arr" (1) item：遍历到的每一项，名字可修改 (2) index：数组的索引，可修改，可不写 (3) in :关键字，不可修改 (4) arr ：要循环的数据名4）item和index可结合其他指令一起使用，比如v-bind5）数组长度的更新会同步到页面上，是

2020-11-16 00:37:57 103

原创 v-show、v-if、v-bind

1：v-show指令1）根据表达值的真假，切换元素的显示和隐藏2）根据布尔值切换(true显示,false隐藏)3）原理是修改元素的display样式，实现显示和隐藏4）指令后面的值，最终都会被解析为布尔值，也就是true和false<div id="app"> <a herf=" " v-show="false"></a>  <button v-show="age

2020-11-16 00:35:12 110

原创计数器Demo

1：v-on指令的作用是绑定事件，简写为@2：方法中通过this，关键字获取data中的数据3：v-text指令的作用是，设置元素的文本值，简写{{}}<div id="app"> <button @click="add"> + </button> <span>{{num}}</span> <button @click="sub"> - </button

2020-11-16 00:34:42 105

原创 v-text、v-html、v-on基础

1：v-text指令1）v-text指令的作用是：设置标签的内容（textContent）2）默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容3）内容支持写表达式<div id="app"> <p v-text="message">vue</p>  <p> {{message}} </p>  <

2020-11-16 00:34:11 123 1

原创 Vue的生命周期

1：什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！3：生命周期钩子：就是生命周期事件的别名；4：生命周期钩子 = 生命周期函数 = 生命周期事件5：主要的生命周期函数分类：创建期间的生命周期函数： 1）beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性 2）created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有

2020-11-16 00:29:20 207

原创数据层-3-将JSON格式的文件的数据批量插入到数据库当中

将JSON格式的文件数据批量插入到数据库中##项目所在地址https://github.com/zhou-X-boy/Vue_study/tree/master/VueProject/pdd在服务端server文件夹下的router文件夹下的index.js文件中操作index.jspdd\server\router\index.jsindex.jsconst express = require('express');const router = express.Router();

2020-11-15 00:38:08 564

原创数据层-2-实现服务器端访问MySql中的数据

实现服务器端访问MySQL数据库中的数据项目所在地址https://github.com/zhou-X-boy/Vue_study/tree/master/VueProject/pdd在服务器端进行操作在服务器端server文件夹下的router文件夹下的index.js中进行操作server\router\index.jsindex.jsindex.jsconst express = require('express');const router = express.Route

2020-11-15 00:36:15 115

原创数据层-1-建立服务端跟MySQL之间的联系

建立联系下载MySQL第三方库在服务端文件夹server下下载npm install mysql --save服务端跟数据库进行关联新建文件夹db在服务端server文件夹下新建一个文件夹db用来存放跟数据库建立连接的文件新建JS文件在db文件夹下新建一个JS文件db.js进行连接数据库操作db.js//1：引入mysql模块const mysql = require('mysql');//2：建立连接const conn = mysql.createConnecti

2020-11-15 00:34:35 69

原创 3-Express服务端框架

Express框架express是什么1：Express.js 框架是目前最流行的node.js后端框架之一, 相当于jQuery和js之间的关系;2：Express 不对 Node.js 已有的特性进行二次抽象，我们只是在它之上扩展了 Web 应用所需的基本功能;3：功能类似的后端框架：Koa.js, egg.js, hapi.js安装express1：进入应用目录2：命令为你的应用创建一个 package.json 文件npm init3：安装 Express 并将其保存到依赖

2020-11-15 00:33:03 249

原创视图层-Home-pdd项目通过Vuex状态管理请求首页轮播图和导航数据

请求首页轮播和导航数据在index.js中写入请求数据方法在项目目录下的src文件夹下的api文件夹下的index.js服务端入口文件写入请求数据方法src\api\index.jsindex.js//引入 ajax 模块import ajax from './ajax'//1；设置基础路径const BASE_URL = 'http://127.0.0.1:3000';//2：请求方法//2.1：请求首页的轮播图export const getHomeCasual = ()=

2020-11-15 00:23:04 191

原创视图层-Search-pdd项目实现在搜索页面点击取消返回商品列表

实现在搜索面板点击取消按钮返回商品列表定义数据在搜索主面板Search.vue中定义一个数据设置搜索面板显示隐藏，并通过指令v-if给搜索面板<template> <div class="search">  <search-nav/>  <shop/>  <search-panel v

2020-11-15 00:16:47 190

原创视图层-Search-pdd项目实现搜索页面左右联动滚动

左右联动滚动项目源码地址https://github.com/zhou-X-boy/Vue_study/tree/master/VueProject/pdd定义数据在Shop.vue组件中定义数据1：右侧列表滑动的Y轴坐标2：右侧所有分类的头部位置<template>//见源码</template><script>//1：引入vuex中从服务器端发送过来的数据，也就是state.js中的数据import { mapState} from '

2020-11-15 00:16:10 165

原创视图层-Search-pdd项目实现搜索页面商品列表上下滚动

上下滚动项目源码地址https://github.com/zhou-X-boy/Vue_study/tree/master/VueProject/pdd使用第三方插件库better-scrollBetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。BetterScroll 是使用纯 JavaScr

2020-11-15 00:14:13 194

原创视图层-pdd项目配置Vuex状态管理

配置VuexVuex是？1：Vuex是一个专为Vue.js应用程序开发的状态管理模式2：当项目比较庞大的时候，每个组件的状态比较多，为了方便管理，需要把组件中的状态抽取出来，放入Vuex中进行统一管理。作用：对项目中多个组件的共享状态进行集中式的管理(读/写)安装Vuexnpm install vuex --saveVuex图示vuex官方图示官方图示手写图示手写图示创建vuex状态管理在项目文件夹下的src文件夹中的store文件夹新建vuex状态管理

2020-11-15 00:12:40 163

原创视图层-pdd项目封装Ajax请求

封装AJAX下载Ajax的axios库npm install axios新建ajax请求的JS文件在项目目录下的api文件夹下新建ajax.js请求文件api\ajax.jsajax.js文件ajax.js文件内的操作//引入axios模块import axios from 'axios'export default function ajax(url = '',params = {},type = 'GET') { //1：定义promise对象 let prom

2020-11-15 00:02:20 105

原创 2-pdd项目主面板搭建

主面板搭建配置路由入口文件index.js在项目目录下的src文件夹下的router文件夹下新建路由入口文件index.jssrc\ router\ index.jsindex.jsindex.js 路由入口文件// 配置完成路由后, 会自动增加了两个属性供访问使用: $router 、$route//1：引入相应的模块import Vue from 'vue'import VueRouter from 'vue-router'//引入主面板一级路由import Hom

2020-11-14 23:59:41 171

原创 1-pdd移动端项目搭建

Pdd项目项目搭建vue-cli脚手架基本步骤//安装vue-clinpm install -g vue-cli//基于webpack创建一个名为pdd的项目vue init webpack pddcd pdd//下载依赖包npm install//运行客户端npm run dev浏览器运行: localhost:8080项目初始化结构build （webpack相关的编译文件夹（无需改动））config

2020-11-14 23:54:48 1332

原创上传github代码基本操作命令

将文件上传到已经关联的gitHub中1：git clone [email protected]:zhou-X-boy/Git_study.git //在本地新建一个跟gitHub上的代码库同名的文件夹2：cd Git_study2：git add 文件名 //选择需要上传的文件3：git commit -m “备注”4：git push origin master //提交将本地文件夹上传到还未关联的gitHub中1：git init2：git add .3：git c

2020-11-14 21:36:26 99

原创回顾JavaScript基础——内置对象

1：内置对象：Number1）Number对象可以把字符串转换为数字（1）转换字符串为整数var strNum = "15";//var num = Number.parseInt(strNum);var num = parseInt(strNum);2）将代表小数的字符串转换为flost类型var strNum = "12.34";var num = parseFloat(strNum);3）NaN也是Number类型var strNum = "abc";var num = pa

2020-10-06 14:31:47 174 1

原创回顾JavaScript基础——正则表达式

1：正则表达式是用来表示字符串的规则和模式2：创建正则表达式1）字面值和RedExp()创建var str = "what where when";//创建表达式var re = /wh/;var re2 = RedExp("wh");2）执行正则表达式有两种方法 exec() 和 test()（1）exec()方法会返回匹配到的信息,不过只会返回第一个匹配到的结果console.log(re.exec(str));console.log(re2.exec(str));（2）t

2020-10-06 10:45:43 271 1

原创 Nodejs-笔记-基础-1

1：Node.js是一个JavaScript运行时环境，nodejs可以解析和执行JavaScript代码2：在Node这个JavaScript执行环境中为JavaScript提高了一些服务器级别的操作API1）文件读写2）网络服务的构建3）网络通信4）http服务器等3：Node.js的特性1）event-driven事件驱动2）non-blocking I/O model 非阻塞IO模型（异步）3）lightweight and efficient 轻量和高效4：npm是世界上最

2020-10-06 00:23:57 168 1

原创回顾JavaScript基础——字符串

1：字符串定义1）字面值定义字符串var str = "hello"2）使用string构造函数来创建出一个string对象var str2 = new String("hello");3）转义字符（键盘上没办法打印的字符，或者是有冲突的字符都可以使用转义字符打印）以反斜杠（\）开头var str3 = " hello \"world\" ";4）换行使用 \n 来表示var str4 = "hello \n world";5）\t 是tab键打出来的空白字符var str

2020-10-05 14:42:23 158 1

原创回顾JavaScript基础——面向对象

1：定义class//定义class类class Employee { //构造方法 constructor关键字，不可更改 constructor(name,age){ this.name = name ; this.age = age ; }}var emp = Employee("z",20);console.log(emp);//输出结果：[name:"z",age: 20]2：成员方法class Employee {

2020-10-05 13:40:32 104 1

原创回顾JavaScript基础——对象

1：创建对象//var 对象名 = {}var employee = { name : "z", age : 20, num : 4, signIn : function(){ console.log("创建对象"); }}var employee2 = new object();employee2.name = "w";employee2.signIn = function(){ console.log("创建对象");}

2020-10-04 23:38:33 148

原创回顾JavaScript基础——数组

1：创建数组var arr1 = [1,2,3];console.log(arr1);//输出结果：[1,2,3]var arr2 = new Array(4,5,6);console.log(arr2);//输出结果：[4,5,6]var arr3 = Array(7,8,9);console.log(arr3);//输出结果：[7,8,9]var arr4 = Array.of(10,11,12);console.log(arr4);//输出结果：[10,11,12]//创建数

2020-10-03 20:12:13 341

原创回顾JavaScript基础——函数

1：声明函数//声明一个函数/* function 函数名(参数1,参数2,...){ //在内部定义函数体 }*/function put(something){ console.log("1" + something + "=");}function add(a,b){ return a + b;}function testNum(num){ if(num < 0 ) return; return num > 10;}2：调用

2020-10-03 11:24:22 1067

原创回顾JavaScript基础知识

1：数据类型数据类型：boolean布尔型 (ture,false)，number数字型，string字符串型，undefined未定义，null(空),特殊数据类型：object对象，arry数组，function函数2：判断数据类型typeof 变量名;判断数据是什么数据类型var str="周";var num=19;var ble:true;var udf=undefined;var n=null;conse.log(typeof str);//输出string3：数据类型

2020-10-03 09:03:24 85

qq_43632167的博客