weixin_60488295的博客

原创 Vue中vuex解决非父子通信的问题

vuex很好的解决非父子通信的问题。1.定义Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式（ 数据、方法 ）。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。以前是把数据和方法定义在每个对应的页面中。但是现在我们可以很好的利用vuex和模块化把数据和方法放在一个公共的池子中。很好的管理你的数据 。stategettersmutations: commitactions : diptachmodules2.安装

原创 Vue中的数据交互axios

数据交互ajax: 原理必须要能说出来流程即可。jquery_ajax。 我们promise要结合它Promise + async函数的前端的主要工作：1. 画页面、2. 请求ajax （后端给你接口和说明书）有node环境和mysql环境。工作中就不需要搭建mysql环境了。0.搭建后端接口项目 环境 node + mysql( phpstudy ) 打开phpstudy启动mysql 使用navicate导入数据库 先创建一个数据库（ xi

原创 Vue 路由总结

传参1：querystring方式传参/path?key1=value1&key2=value2querystring方式传参在接收页面使用 $route.query 接收传参2：params动态路由，先修改路由配置{ path:'/path/:id'}​传了一个id为10的参数。/path/10在接收页面使用 $route.params命名路由{ path:'/path', name:'routename'}​$push( {

原创 PC端，移动端 组件库 element-ui iview vant

1-1.element-ui网址:Element - The world's most popular Vue UI framework1.定义基于vue2.0的桌面端组件库,一般使用于pc端中后台系统的开发2.安装 npm npm i element-ui -S3.引入import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI

原创 Nodes.js中 跨域 及 Ajas 请求 原理图

原创 Vue中的导航守卫

全局守卫： 大门口的保安 router.beforeEach((to,from,next)=>{}) //所有路由进来之前 登录拦截 router.afterEach((to,from)=>{}) //所有路由进来之后 : 了解 路由独享守卫：各个楼（每一个公司：前台） 每一个路径就是可以定义一个路由的独享守卫： 角色的判断（ A座是网易，B座是360 ） beforeEnter(to,from,next){} //守卫path 组件内部守卫：秘书 beforeRouteEnter(to,fro

原创 Vue中路由的基本操作

1）编程导航push() 向历史记录添加一个记录，保存历史记录 router-link跳转就是pushreplace() 目标页面地址把当前地址给替换掉，不保存历史记录 支付、登录成功、注册成功go(-1) 返回经常在做判断的时候要用的。 <button @click="$router.go(-1)">返回</button> <ul> <!-- 点击进入商品详情 --> <li @click...

原创 Html 项目介绍

项目名称：小U课堂项目描述：小U课堂是优就业打造的在线实用技能学习平台，我们要完成 首页、同步课程、视频详情、登录、注册页面等静态页面的制作项目页面（预览） 首页 列表页 详情页 其他 开发工具以及技术栈 开发工具 VScode Photoshop 主流浏览器 技术栈 利用 HTML5 + CSS3 布局 采取结构与样式相分离，模块化开发 项目规划与项目搭建

原创 圆角属性及项目

圆角属性 .box { width: 300px;height: 300px;background-color: red;/*border-radius四个角可以设置不同的圆角*/border-radius: 20px 50px 80px 100px;padding: 20px;border: 20px solid #000;}.box1 {width: 300px;height: 300px;background-color: blue..

原创 Css3过渡动画

过渡动画 css3的 transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元 素任何改变中触发，并圆滑地以动画效果改变CSS的属性值 分别属性设置 transition -property：检索或设置对象中的参与过渡的属性transition- duration：检索或设置对象过渡的持续时间 transition -delay：检索或设置对象延迟过渡的时间 transition- timing- function：检索或设置对象中过渡的动 画类型,

原创 CSS3新增及多列布局

CSS3简介 CSS3是最新的CSS标准。 CSS3新增选择器 属性选择器 以box开头 <style>​ div[class^="box"] {​ background:red;​ }​</style><div class="box">box</div><div class="abox">abox</div><div class="boxa">bo...

原创 HTML5中新增的标签

HTML5基础HTML5中新增的布局标签html 1990 html4.0.1 1997 html5 2008 稳定版 2012年新增的结构标签 （更加语义化） header标签 <header>这里是头部区</header> footer标签 <footer>这里是页脚区</footer> main标签 <main>这里是主体区</main> nav标签 <

原创 制作favicon图标

常见的图片格式和特点格式 优点 缺点 使用场景 jpg 色彩丰富，文件小 有损压缩，反复保存图片质量下降明显 色彩丰富的图片/渐变图像 gif 文件小，支持动画、透明，兼容性比较好 只支持256种颜色 色彩简单的logo/icon/动图 png 无损压缩，支持透明，简单图片尺寸小 不支持动画，色彩丰富的图片尺寸大 logo/icon/透明图 webp 文件小，支持有损和无损压缩，支持动画、透明 浏览器..

原创 IE 浏览器常见兼容问题

兼容IE 浏览器常见兼容问题 兼容问题 ie中图片边框问题 图片放在a标签中 img { border:none } ie8以下浏览器中背景复合属性的写法问题 .bg { background:url("./images/bg.jpg")no-repeat center } 解决方案：在url和no-repeat 直接加上空格 .bg { background:url("./..

原创 表单及阿里巴巴矢量图

表单表单元素 表单元素是允许用户在表单中输入内容的标签， 比如：文本域、下拉列表、单选框、复选框等。 表单元素标签 input标签 概述：<input> 标签是最重要的表单元素。 type属性取值不同，可以展示出不同的表单形式 作用：用来定义不同种类的输入控件 语法：<input type="类型"> 常用类型9种 type="text" 作用：用于文本输..

原创 定位及BEC

定位定位的应用场景和基本原理定位的原理 在本文流中 , 任何一个标签都被文本流所限制了自身的位置 , 但是通过 CSS 我们依然使得这些标签可以改变 自己的位置 , 我们可以通过 float 来让标签浮动 , 我们也可以通过 margin 来让标签产生位置移动。 CSS 定位属性，允许定义标签框相对于其正常位置应该出现的位置，或者相对于父标签、 另一个标签甚至浏览器窗口本身的位置。标签可以使用顶部、底部、左侧和右侧属性定义具体的位置 position static 默认 静态定位..

原创 浮动及滑动门技术

浮动什么是浮动？标签的浮动是指设置了浮动属性的标签会脱离标准流的控制，移动到其父标签的指定位置浮动属性 float left right none 默认 浮动的作用 图文环绕：注意：图片和文字不会到浮动标签的下方 页面布局 浮动的宽度 浮动的宽度就是内容的宽度 浮动的问题标签浮动以后，脱离的正常文档流，导致父标签无法被撑开，会影响后续正常布局清浮动的几种方法 给浮动标签的父标签固定高度..

原创 背景属性及盒子居中技巧

背景属性 background-color : red background-image: url(./img/bg.jpg) background-repeat: no-repeat background-size: 像素值或者百分比 background-position:百分比或者位置英文单词或者像素值 简写：background:red url(./img/bg.jpg) no-repeat top 标签的嵌套规则 ..

原创 选择器进阶

选择器进阶 群组选择器 h1, h2, h3 { background-color: yellow;text-align: center;} 选择器之间用逗号分隔 交集选择器 div.red { background-color: yellow;} 由两个以上单一选择器组成 子代选择器 ul li > a { /*子代选择器 子 指的是 亲儿子 大于号分割 此时的a 一..

原创 css简介

day02HTML列表 无序列表 项目的列表li，自带粗体的圆点项目符号 块级标签 list-style: none; 去掉项目符号 ul>li 复合标签，ul标签的子标签必须是li标签 <ul>​• <li>HTML</li>​• <li>CSS</li>​• <li>JS</li>​...

原创 前端的概述

day011.前端的概述 web的发展史 web1.0 简单的静态页面 早期三大门户 搜狐 新浪 网易 web2.0 更注重用户之间的交互 用户即是信息的消费者也是制造者 微博 web3.0 人工智能 复杂的页面功能 即时通讯 web的前景 pc端的网页 移动端的网页 ios android 2.

原创 Vue路由

路由一一对应的映射关系 。访问路由返回对应的.vue组件页面。思想就是照搬后端的路由思想 。1.路由介绍2.路由安装npm i vue-router3.基本使用页面级的.vue组件（pages或views），不是公共组件（components）​// 项目中肯定要使用路由的。// 渐进式的框架//1. 安装 npm i vue-router//2. 引入vue-router 并实例化import VueRouter from 'vue-router'Vue.use

原创 Vue基本语法

v-if与v-show的生命周期影响再深刻认识 v-if和v-show以及组件的生命周期 v-if对组件的生命周期每次都会执行一遍 而v-show只会执行一遍。1. scoped 样式的问题我们需要为一个.vue中的style添加一个scoped属性，以保证样式也是局部的。<style scoped>​</style> app.vue中的样式是全局的 <style>​​.box{ margin:20px; ...

原创 Vue组件

1.过渡动画(了解)1.一般对元素的添加,修改或者删除时,需要使用过渡动画2.在大型应用中,使用过渡动画一般在导航切换3.在vue中使用过渡动画的地方: v-if(条件判断) v-show(条件展示) 动态组件(component)总结:一般实现过渡动画需要结合CSS样式.1-1 transition组件在vue中系统提供了一个组件为transition,将需要实现过渡动画的元素被transition组件进行包裹即可.​语法:

原创 Vue生命周期

1.生命周期表示的是一个vue实例对象的一个轮回。人的生命周期。一个月内要办理出生证明以及去派出所办户口、打疫苗从技术上来考虑，这8个生命周期就是8个函数，也叫生命周期钩子函数 。不需要自己手动调用，它是在相应的时机上自动触发的，语法上这8个函数不在methods中。 beforeCreate 创建之前 created 创建完成 ： 最早发送ajax的地址在这里 beforeMount 挂载之前 mounted 挂载完成 ： 有些项目中，一些开发者也在这

原创 Vue指令综合案例及表单

1. 指令综合案例-信息表<!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"> ...

原创 回顾及vue初识

第1阶段：html css 。 浮动、定位布局、mdeia（百分比）、响应式、flex、rem布局<tagname key="value"></tagname><tagname key="value" />selector{ key:value;}第2阶段：得保证嵌套标签要合理 ，逻辑思维，编程思维。声明变量、数据类型、运算符（算术、赋值、比较、逻辑、三目）、 声明函数( 参数、this )、分支语句（ if,switch ），..

原创 Session的创建过程

原创 Cookie创建过程

原创 WebPack4.X配置指南

一、简介（一）WebPack简介Webpack是一个前端自动化打包工具，根据它的名字也很好理解，web-pack顾名思义就是前端打包工具，它是基于Node和NPM的，所以在安装使用webpack之前，需要安装nodejs，nodejs的版本过低也不行，所以推荐安装nodejs版本为v8.11.2以上，npm版本为v5.6.0以上。二、项目建立（一）项目建立第一步：新建一个文件夹，命名为mywebpack;第二步：在cmd命令框中使用cd命令切换到mywebpack目录中，输入npm

原创 Node.js中 es6模块化和webpack

一、websocket1.1 websocket介绍【重点】websocket是html5新增的协议，通过websocket协议可以让客户端与服务器进行双向通信，也就是客户端可以发送请求给服务器，服务器也可以主动推送消息给客户端。应用场景：聊天室、直播等。在没有websocket之前可以使用轮询技术(定时器+ajax)来实现类似于聊天室的功能。1.2 socket.io模块使用步骤：(1)下载socket.ionpm install socket.io(2)

原创 Node.js 接口文档

一、项目介绍1.1 学习此项目目的能够把所学知识进行复盘和总结，进行灵活运用。1.2 使用技术栈前后端分离后端技术栈：Node，Express，MySQL，JWT前端技术栈：HTML5，CSS3，Ajax，本地存储1.3 功能描述实现了首页课程渲染、列表页筛选课程，搜索课程，课程详情介绍，视频播放，报名课程，登录，注册，个人中心等。具体实现如下：● 使用Node，Express，MySQL完成底层接口（编写的路由返回的是json）的编写● 登入模块整合JWT，为每

原创 Node.js项目部署

一、准备工作：(1)准备程序源文件(2) 准备数据库备份文件(3)购买服务器(4)购买域名(5) 配置服务器(6)安装宝塔面板并配置(7) 配置项目(8)绑定域名(9) 域名测试访问二、部署流程2.1 购买服务器：常见的服务器有阿里云、腾讯云，这里选择腾讯云免费30天的产品 云产品免费试用_云服务免费体验_免费云产品试用 - 腾讯云2.2 注册腾讯云账号注册腾讯云账号，并选择 轻量云服务器产品 （实名制）2.3 配置服务器：

原创 跨域及处理方案

一、跨域1.1 简介什么是跨域调用？【重点】当前地址与要调用的目标地址中的协议、主机名、端口号有一个不一致就发生跨域调用，这是因为浏览器的同源策略限制所导致。怎样解决跨域调用？【重点】第一种：在服务端设置允许跨域调用的响应头信息：【重点】 res.header('Access-Control-Allow-Origin', '*'); //开启允许跨域调用 res.header('Access-Control-Allow-Methods', '*'); //所有请求方式...

原创 Node.js中 Ajax

一、接口开发规范(RESTful api)1.1 简介RESTful规范，是目前一种比较流行的互联网软件设计规范。这个规范约束的就是路由地址应该如何定义，返回的json接口数据应该如何规范。什么是RESTful规范的API?当我们使用RESTful规范来设计我们应用程序接口(API)时对于同一个资源(比如：班级、学生、成绩等)的路径使用同一个，然后通过不同的请求方式来区别具体的操作(比如：添加、修改、删除等)。1.2 优点：使开发者在进行独立开发或协作开发更能标准，以达到

原创 Node.js中 promise与异步

一、Node操作Mysql1.1 介绍和意义1.2 操作流程1.2.1 下载mysql模块npm i mysql 1.2.2 在后端js文件中引入mysqlconst mysql = require('mysql')1.2.3 先创建mysql数据库的配置连接let connectObj = mysql.createConnection({ host:'主机名', user:'用户名',

原创 MySQL 数据库

一、数据库介绍1.1 什么是数据库？数据库（database）是用来组织、存储和管理数据的仓库。要想管理数据就需要安装对应的软件：比如我们的excel。1.2 常见数据库常用的关系型数据库有：(1)MySQL 数据库,目前使用最广泛、流行度最高的开源免费数据库 (甲骨文)(2)Oracle 数据库，收费 (甲骨文)(3)SQL Server 数据库，收费 (微软)以上三种属于传统型数据库，又叫做：关系型数据库 ，这三者的设计理念相同，用法比较类似。常用的非关系型数据库有：

原创 Node.js中 cookie session ejs模板引擎

一、项目开发流程把前端给的文件一一归类。1、html页面放在views文件夹2、静态资源放在static或public3、配置一些post中间件（因为要接收post传递过来的参数）4、配置开放静态资源的中间件二、文件上传2.1 前端注意：当表单中含有<input type="file">文件上传的表单项，则要把表单的编码设置为流媒体格式才能把用户选择的要上传的文件内容上传到服务器上​<body> <!-- 注...

原创 Exprese框架开发

一、中间件1.1 简介中间件（Middleware），特指业务流程的中间处理环节。我们可以把中间件比作工厂中的车间。比如：在处理铁矿石的时候，一般都要经过三个处理环节，从而保证处理过后的矿石达到标准的钢材。处理铁矿石的这三个中间处理环节，就可以叫做中间件。而中间件其实是路由的升级，也能达到请求的匹配，只不过必须要进行下一步处理，以到达最终的路由匹配，就像在工厂中生产产品，最后必须要出厂。1.2 中间件的好处1.3 中间件执行流程当一个请求到达Express的服务器..

原创 Express框架

一、简介Express是基于基于 Nodejs平台，快速、开放、极简的 Web 开发框架【后端框架】。中文地址：Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网官网地址：Express - Node.js web application framework作用：使用 Express，我们可以方便、快速的创建 Web 网站的服务器或 API 接口(纯json数据)的服务器。本质上：express是一个第三方..