- 博客(28)
- 收藏
- 关注
RSS订阅原创 登录界面架构设计vue、element UI、less
一、搭建1.安装vue-cli脚手架npm install -g @vue/cli-initvue init webpack baoge//创建项目名称2.安装webback打包工具 npm install webpack-dev-server -g3.创建vue webpack包如果报错，按照提示下载相应的资源包即可vue init webpack my-pro14.下载UI框架npm i element-ui -S5.进入到my-pro1文件下，并且运行cd my-p
2020-08-29 01:14:08
321
原创 koa2脚手架的基础应用与cookie与session的使用
一、安装与搭建安装1.脚手架安装koa2npm install -g koa-generator2.建立项目koa2 项目名称3.启动npm start server搭建express中自带路由， koa2中需要自己安装: npm install koa-router// 注意koa2是基于async/await操作中间件，目前node.js 7.x的harmony模式下才能使用，const koa = require('koa')const app = new koa()
2020-08-28 01:33:53
276
原创 vuex的状态管理
一、vuex简介vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。二、核心概念store:vuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象。store创建 new Vuex.Store({ })在store中又包含了5个对象state – 存放状态gett
2020-08-26 23:56:35
230
原创 webpack中export导出与路由嵌套
export导出1.在配置好文件后，在主入口导入vue包，并且将所需要打包的文件引入到入口文件中。使用render方法展示到页面import Vue from 'vue'import login from './login.vue'console.log(login);new Vue({ el:'#app', data:{}, methods:{}, components:{ }, render:function(createElement,context){
2020-08-26 01:35:50
481
原创 2020-08-25
webpackWebpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求npm i html-webpack-plugin -D 页面存在内存中打包js文件（自动打包）设置入口和出口module.exports={ //手动设置配置文件 entry:path.join(__dirname,'./src/index.js'),//入口文件 output:{//输出相关配置 path:path.join(__dirname,'
2020-08-25 02:29:28
85
原创 vue基础梳理
指令v-text：更新元素的 textContent<div id="app"> <div v-text="message"></div></div> <script>new Vue({ el: '#app', data: { message: '123456' }})</script>v-html：更新元素的 innerHTML<div id="app"> .
2020-08-24 19:02:03
104
原创 vue-基本路由的使用
一、介绍VueRouter是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。在使用时我们需要提前安装，配置好环境。安装直接下载/CDNhttps://unpkg.com/vue-router/dist/vue-router.js二、创建单页面应用HTML<div id="app"><!-- 路由出口 将匹配到的组件渲染在这里 --> <router-view></router-vie
2020-08-21 23:32:21
120
原创 vue基础：组件、过渡、动画
动画Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库，如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库，如 Velocity.js组件组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。全局组件语法格式：Vue.componen
2020-08-21 01:58:13
221
原创 vue基础（二）过滤器、自定义指令与生命周期
一、过滤器1.过滤器的分类局部过滤器：只允许在当前组件中使用 <div id="app"> <p>{{msg | dataFormat}}</p> </div> var vm= new Vue({ el:'#app', data:{ msg:'你不秃头' }, methods:{}, //定义私有
2020-08-19 23:26:10
111
原创 vue基础语法。。待完善
一、模板语法数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值； <div id="app"> {{message}} //插值 </div> <script> var vm=new Vue({ el:'#app', //表示所控制页面上的区域 data:{ //存放的是el中所用到的数据 message:'显
2020-08-19 01:24:59
114
原创 前后台交互实现图书管理
业务逻辑分析加载首页面后台：分配首页面路由（books），在server中使用数据库查询语句并将所有数据返回成json数据（res.json()）前台：调用ajax方法，type\url与后台对应，向后台发送数据，后台接收到数据后，返回 将所有数据渲染在tbody中添加图书后台：获取要添加的数据，连接数据库执行数据库添加语句，将数据添加到数据库中前台：添加点击事件，点击添加图书是 弹出表单，给提交按钮添加点击事件，调用ajax接口 获取表单所有的数据，判断，成功则渲染到页面删除图书后台：获
2020-08-17 23:14:38
846
原创 GIT基础应用
一、主要具备的功能协同修改：多人并行不悖的修改服务器上的同一文件数据备份：不仅能保存目录文件的当前状态，还能保存每一个提交过的历史状态版本管理：保存每个版本文件信息时，采用文件系统快照的方式权限控制：对团队中参与开发的人员进行权限控制，对外开发者的代码进行审核历史记录：查看修改人、修改时间、修改内容、日志信息，将本地文件恢复到某一个历史状态分支管理：在开发过程中可以多条生产线同时进行Git结构二、使用1.创建版本库版本库(repository)也叫仓库，可以看做一个目录，这个目录里
2020-08-17 21:37:09
163
原创 node.js实现MySQL连接
一、使用方法1.进入到文件，打开powershell窗口，进行初始化：npm init -y2.执行npm install mysql --save命令下载数据库3.导入模块二、连接数据库var mysql = require('mysql');//创建数据库的链接var connection = mysql.createConnection({ host:"localhost", //访问地址 user:"root", //用户名 password:"12345
2020-08-13 22:06:16
194
原创 基于node、express图书管理系统的实现
一、下载并导入模块在本案例中，我们需要将需要使用到”art-template body-parser express和express-art-remplate,这几个模块。1.安装**a.**进入到文件，打开powershell窗口，进行初始化：npm init -y。执行完成后开始下载上面所要用的模块： npm install art-template express body-parser path xpress-atr-template --save2.创建文件router 主要进行对
2020-08-13 19:02:28
596
原创 exprass中间件使用
中间件定义：在整个程序过程当中所执行的环节c称之为中间件，由一系列函数构成。一、常用的中间件1.next如果在post，get请求过程中的回调函数没有next()参数，那么就匹配上第一个路由，就不会往下匹配了。如果想往下匹配的话，就需要写next(),例如：app.use('/user', (req, res,next) => { /*表示匹配任何路由*/ console.log('一次'); next(); /*表示匹配完成这个中间件就继续往下执行。*/});a
2020-08-12 01:17:02
115
原创 Express框架
一、安装1.创建一个文件夹，进入其中，2.初始化npm init --y2.安装npm install express --save二、基础用法1.express特点实现路由功能，在没有框架之前炫耀大量的判断实现路由划分中间件功能，可以封装多种方法及程序能继承其它模板的引擎2.模块的引入const express=require('express') //返回一个函数const app=express() //接收//简写方式const express=requ
2020-08-11 00:26:44
92
原创 node.js实现成绩查询案例
1.引入模块用到模块分别有:const http=require(‘http’);const fs=require(‘fs’); //引入文件系统const path=require(‘path’); //引入路径const querystring=require(‘querystring’); 引入查询字符串 供用于解析和格式化 URL 查询字符串的实用工具const scoreData=require(’./score.json’); 获取外部成绩文件c
2020-08-10 19:23:23
469
原创 node.js实现服务器功能
安装模板npm install are-template --save运行模板二、初步实现服务器功能1.第一步应当先导入模块，起名应当达到见名思意作用时const http=require('http'); 2.创建服务，用到 http.createServer()这个方法let server= http.createServer() //创建服务server.on('request',(req,res)=>{ //通过on绑定tequest事件 res.end('hell
2020-08-09 22:36:38
297
原创 es6
一、let与const**let:**声明的变量只在let命令所在的代码块内有效。与js(var)不同，let只能声明一次而var可以声明多次。var a=1var a=2console.log(a) //a=2let b=1let b=2console.log(b) //报错**const:**声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错.二、解构赋值1.数组模型的解构1.可忽略let [a,,b]=[1,2,3]console.log
2020-08-07 23:39:54
158
原创 MySQL
文章目录一、概述二、启动和停止二、SQL语言分类DMLDDLDCL用来控制数据库的访问，包括如下SQL语句：一、概述SQL是用于访问和处理数据库的标准的计算机语言1.什么是SQL指结构化查询语言可以访问和处理数据库是一种ANSI标准的计算机语言2.优点成本低：开放源代码，一般可以免费试用 ，几乎所有的DBMS（数据库管理系统）都支持简单：很容易安装和使用性能高：执行很快 可以进行非常复杂和高级的数据库操作二、启动和停止二、SQL语言分类1.DML（Data Manipula
2020-08-06 18:18:43
95
原创 jsonp跨域请求基本原理
一、什么是jsonpJsonp(JSON with Padding) 是 json 的一种"使用模式"，是一种轻量级的数据传输格式。可以让网页从别的域名（网站）那获取资料，即跨域读取数据，被广泛应用于当前Web应用中。二、jsonp原理ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。注：同源策略是浏览器的一种安
2020-08-05 00:25:19
346
原创 php基础
一.基本语法1.语法PHP 脚本以 <?php 开始，以 ?> 结束。如：<?phpheader("content-type:text/html;charset=utf-8");//防止出现乱码 PHP 代码?>二.定义变量jQueryvarphp$a. global:在所有函数外部定义的变量，拥有全局作用域。除了函数外，全局变量可以被脚本中的任何部分访问，要在一个函数中访问一个全局变量，需要使用 global 关键字。$x=5;$
2020-07-30 23:35:46
92
原创 bootstrap案例
什么是bootstrap是一个用于快速开发 Web 应用程序和网站的前端框架。内容主要有：基本结构、css、布局组件、js插件。Bootstrap CDN推荐<!-- 新 Bootstrap 核心 CSS 文件 -->2.<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">3. 4.<!-- 可选的Bootstrap主题文件（一般
2020-07-30 22:44:03
212
原创 jquery基础（4）
一、jquery事件1.常用的DOM事件1.1 鼠标事件a.单机事件：click() $('p').click(function(){ alert('你点击了我'); }) b.双击事件：dblclick() $('p').dblclick(function(){ alert('你双击了我'); }) c.当鼠标指针穿过（进入）被选元素时：mouseenter() $('p').mo
2020-07-24 23:01:46
146
原创 jquery基础（3）
一、获取和设置元素相关尺寸width()、height()获取元素width和heightinnerWidth()、innerHeight()包括padding的width和heightouterWidth()、outerHeight()包括padding和border的width和heightouterWidth(true)、outerHeight(true)包括padding和border以及margin的width和height举例如下：//获取和设置元
2020-07-23 21:46:14
87
原创 选项卡案例
<html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *
2020-07-22 22:16:58
91
原创 jquery基础（2）
一、绑定click事件//button点击事件例1：$('button').click(function(){ alert('你点我一下，我就出来'); }) 例2：on中第二个参数$('button').on('click',function(){ alert('你点我一下，我就出来'); })例2-1：$('ul').on('click','li',function(){ alert('在这个点击事件
2020-07-22 22:02:36
82
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人