- 博客(60)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 Vue首屏性能分析和优化
性能分析 借助插件 webpack-bundle-analyzer 先安装运行npm install webpack-bundle-analyzer –save-dev配置在vue.congfig.js中配置好 BundleAnalyzerPlugin 代码如下 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = {...
2021-09-08 18:18:35
2682
3
原创 git分支快捷使用
1:切出分支git branch dev //切出分支 取名为dev2:切换到分支 (查看当前分支 git branch)git checkout devps：1，2步骤可以简写位 git checkout -b dev3:修改自己的代码4:修改完成以后 git add .git commit -m ‘修改分支文件’5:把本地分支 直接推送到远程分支 (远程仓库会多一个自己的分支)git push origin dev:dev6:拉取远程分支
2021-04-21 14:41:15
653
原创 redux的入门学习 使用react-redux
1:使用react-redux 简化的 页面端的使用 业务的分离的分离不会变2:减少store的引入3:简化state的调用 和 state修改的方法的使用 类似vuex中 mapState和mapMutation第一步 安心 npm i react-redux第二步 引入和使用(全局配置)在index.js中 Provider 类似 vue中 依赖注入import React from "react";import ReactDo...
2021-01-07 18:12:16
910
原创 redux的入门学习 分离的巩固
1:新建一个两个页面 一个页面放用户的新增 一个页面用户的列表import React, { Component } from 'react'export default class UserAdd extends Component { render() { return ( <div> 新增用户 用户名<input ref="username"/>...
2021-01-07 16:05:31
437
原创 redux的入门学习 分离
1:分离 下面的 "add" 是常量 没有统一管理 99个人用的时候 都要是 add 如果第100个人把 add 改成了 +号 之前的99个人的功能就会出现问题 所以我们需要对action.type进行统一管理 switch(action.type){ case "add": return {num:state.num+action.num} case "reduce": r...
2021-01-07 11:46:13
505
原创 redux的入门学习 没有分离的版本
1:安装 npm i redux2:准备好几个页面 第一个显示数据 第二个做加法 第三个做减法import React, { Component } from 'react'export default class Menu1 extends Component { constructor(props){ super(props); } render() { return ( <div> ...
2021-01-07 11:19:22
616
原创 请假审批项目二:学生请假
在登录事件完成 接口的调用和token的存储 这样登录以后 跳转到指定的页面 submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { // console.log(this.ruleForm.username); // console.log(this.ruleForm.userpwd); userinfo..
2020-12-16 18:02:54
1349
1
原创 请假审批项目一:环境的搭建
1:后端(提供接口 存储数据)准备工作1:安装好node2:安装好express+express的脚手架3:利用 express -e 创建项目4:安装常用的模块 mongoose 链接数据库 jsonwebtoken 生成token后端设计三层model 数据 (链接数据库+设计每张表)service 业务 (每张表的增删改查)router 控制 (接收调用 返回结果)准备工作 准备设计接口 一个登陆 一个注册在model新建两个文件..
2020-12-16 12:11:54
784
原创 前端中的算法3:选择排序
二分一般针对有序排序的数 乱序排列 可以学习最简单的选择排序选择排序速度并不快 但是很好懂用大O表示法 O (n的平方) 这里的数有6个 正常来讲的 是 36次而这里没有严格的按照这个来 次数是 6+ 5 + 4 + 3 + 2 + 1次 运行的次数为 6*1/2*7 n*1/2*(n+1)平均检查的元素为(n+1)/2 let score = [99, 85, 43, 70, 20, 88];//一个分数的集合 function getMin(...
2020-12-09 19:11:30
270
原创 前端中的算法2:大O运行时间
先简单的记录一下 后面在详细讲解 O (log n) 对数时间 二分查找 O (n) 线性时间 简单的循环查找 O(n*logn) 快速排序 O(n2) n的平方 选择排序 O(n!) 排列组合算法的速度 :不是指时间 而是操作数的速度:输入增多以后 操作数将怎么样增加...
2020-12-09 16:51:59
190
原创 前端中的算法1:二分查找
如果觉得前端就是画页面 那么文章就不用看了 现在的岗位而言 对应前端的要求越来越高 代码质量也越高 性能要求也越高先来一个入门基本的算法 二分查找 所谓的算法都不是直接使用关键字indexOf findIncludes之类的 都是原生循环来实现二分 就是一拆为2 比如一个集合let list = [1,2,3,4,5,6,7]二分就是在中间拆开变成两个数组list1=[1,2,3,4]list2 =[5,6,7]二分用在哪些地方 主...
2020-12-09 16:03:27
2833
13
原创 vue/cli的学习13 vuex的使用二
1:异步操作 全部写在actions中 actions只能调用mutations中的方法 不能直接修改 例子 actions: {//定义数据的异步方法 asyncAddNum(context,n){ //模拟异步 setTimeout(()=>{ context.commit("addNum",n); },5000); } },2:异步方法的调用方法一 使用dispatch调用 a...
2020-12-03 17:47:34
572
原创 vue/cli的学习13 vuex的使用一
1:声明和使用全局的数据声明在 state中export default new Vuex.Store({ state: {//表示全局的数据 num:10 }, mutations: { }, actions: { }, modules: { }})想在哪里使用都可以 影院{{this.$store.state.num}}2:数据的修改 数据声明在哪里 数据的操作的方法声明 也在哪里同名在mutations中 ...
2020-12-03 15:31:41
878
原创 vue/cli的学习12 全局的路由守卫和元素
给所有的页面都设置自己的title 控制页面进入的权限1:在所有路由的的配置设置meta meta就是一个对象 里面的属性随便写2:利用router.beforeEach循环判断{ path: '/cinema', name: 'cinema', component: Cinema, meta:{ title:"影院", islogin:true } },const router = new VueRout...
2020-12-03 13:56:12
494
原创 vue/cli的学习11 路由内的独享守卫
场景1有一个Mine.vue页面 中 当用户没有登录 就是显示登录和注册 当用户登录以后 就显示用户信息和退出登录按钮登录以后再次进入页面正常画 路由正常搭建 只需要 在mine中的路由中处理一下 判断 是否登录 用next跳转到指定路由 { path:"", name:"login", component:()=>import ("../components/mine/Login.vu...
2020-12-03 11:23:03
534
原创 vue/cli的学习10 二级路由的使用
1:需要在哪个页面有子页面显示 就是在哪个页面放router-view标签(本质就是一个动态组件)2:在components中新建一个mine文件夹 文件夹中新建Login.vue 和Register.vue<template> <div> 登录 </div></template><template> <div> 注册 </div></t
2020-12-02 16:48:00
839
2
原创 vue/cli的学习九 跨组件的通信 状态控制
1:效果 首页有导航 详情页面没有导航 离开详情页面导航恢复2:一个原则 数据声明在哪里 数据的修改的方法就在哪里3:声明一个跨组件的busimport Vue from "vue";let bus = new Vue();export default bus;4:声明导航的效果切换状态和状态修改方法 当navFlag为false的 就会隐藏 <div id="nav" v-show="navFlag"> <router-l...
2020-12-02 14:36:15
608
原创 vue/cli的学习九路由的跳转和带参数的路由页面
1:手动跳转路由的方式window.location.href="http://localhost:8080/#/film"this.$router.push("/film"); this.$router.push({ name:"film" })2:带参数的跳转this.$router.push("/film/"+filmid); this.$router.push({ name: "film", .
2020-12-02 14:31:39
708
原创 vue/cli的学习八 上拉加载和下拉刷新
上拉加载 我们使用vant中vant-list 将需要循环的内容 放入即可<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> <van-cell v-for="item in list" :key="item" :title="item" /></van-list>说明:loading 表示加载状态 触发onlo.
2020-12-02 14:27:23
1119
2
原创 vue/cli的学习七 事件操作效果切换
正常显示 中间的导航正常显示下拉以后 滚动一段距离以后 吸顶效果1页面滚动的事件写在mounted中 拉动的距离大于 轮播图的高度以后 吸顶效果 title显示 mounted() { //处理dom操作和事件绑定 window.onscroll = () => { //滚动的事件中得到滚动的距离 let scrollTop = document.documentElement.scrollTop; let b...
2020-12-01 18:39:34
835
1
原创 vue/cli的学习六 数据请求和列表渲染
1:新建一个model文件夹 这里用来做数据的接口请求2:新建一个axios.js 配置axiosimport axios from "axios";//这里可以做很多配置//请求的拦截//响应的拦截export default axios;3:新建一个和业务相关的js 名称为homeModel.js里面写入 注意导入和导出 以及参数的配置import axios from "./axios.js";let homeInfo={ nowPlayi...
2020-12-01 17:51:13
1385
原创 vue/cli的学习五 样式切换和选项卡 动态组件
1:设置页面结构 点谁谁变黄色<div class="nav-content"> <div class="nav-item" :class="{selected:selectedIndex==1}" @click="changeIndex(1)">正在热映</div> <div class="nav-item" :class="{selected:selectedIndex!=1}" @click="changeIndex(.
2020-12-01 16:45:31
1520
原创 vue/cli的学习四 数据请求和组件分离
1:安装axios npm install axios --save2:准备好数据源 (使用json-server模拟数据 模拟了一个借口bannerlist)3:改写Home.vue中代码 把静态的改成动态(数据取值)<template> <div class="home"> <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> ..
2020-12-01 15:40:36
2216
2
原创 vue/cli的学习三 页面适配和VantUI的使用
使用插件对移动端的页面进行适配1、第一 引入lib-flexible . 安装lib-flexible： npm i lib-flexible --save 在项目的入口main.js文件中引入lib-flexible:import 'lib-flexible'一定不要忘了是在main.js中2、第二 使用postcss-px2rem自动将css中的px转换成rem（真的是大大提升了我们的工作效率，棒棒的，不用自己去瞎算啊） 安装postcss-px2r..
2020-12-01 15:17:11
4927
2
原创 vue/cli的学习二 页面和路由
页面结构分析node_modules表示 所有通过npm安装的东西 都在该文件夹中public 公共的文件目录 所有src写的代码 都会发布到public下面的index.html中src 就是开发所有的文件目录 里面的文件名称可以随便建立一般情况下 页面(大组件)也在views中 views中页面使用的组件 写在components中router放的路由的配置 路由就是导航 访问什么样的地址 就加载什么样的组件 原理就是动态组件 component isApp.vue...
2020-12-01 14:40:21
2568
原创 vue/cli的学习一 安装
1准备工作 (node npm 以及淘宝镜像的设置 网络环境)2:安装最新的脚手架 只需要安装一次npm i @vue/cli -g3:创建项目 到指定的目录下面 运行命令vue create lesson094:选择 跟着图下一步(选择选项 空格按一下 再按一下会取消)选择配置项勾选要选择的类别(Router路由 vuex全局数据管理)选择2.0的版本是够使用history模拟 (hash)EsLint(严格模式)...
2020-12-01 14:13:33
7768
3
原创 一张订单图做一个小项目十
完成订单页面新增订单 然后根据表格中的数据 生成pdf预览页面点击新增订单 弹出一个新增界面完成提交以后点击生成订单讲选择的内容全部带过来全剧终结:代码就不一一解析了 需要全部代码下载链接在:https://gitee.com/teacherLei/public27/ 有用请戳小星星 技术交流请加微信:15871437346...
2020-10-29 11:28:41
518
原创 一张订单图做一个小项目九
接下来完成订单页面 里面需要选择甲方 乙方 然后生成订单 订单中有很多种类商品 所以订单页面如下选择甲方以后 显示甲方信息选择确定甲方信息以后最后下一步就去选择种类文件目录如下 view中components组件中结构如下分别代码如下//Order.vue中做好step组件 和 parta和partb的模块<template> <div> <el-steps :active="active" fi...
2020-10-27 12:04:30
307
原创 一张订单图做一个小项目八
1：后端完成以后 来实现前端功能 主要实现登录以后的管理页面如图点击新增以后的页面业务层继续在model中实现parta.js中import axios from "./axios.js";import qs from "qs";var partaInfo = { add(info){ return axios({ method:"post", url:"/api/parta/add",..
2020-10-26 21:21:23
256
原创 一张订单图做一个小项目七
1:完善后台接口 先做两个简单的新增 甲方和乙方的数据管理 在model下面新建parta和partb 在里面分别新建好table和index.js文件目录如下partaTable.js如下var mongoose = require("../db.js");var schema = mongoose.Schema; //模型生成器(表生成器)//建立表 并且指定字段var partaSchema = new schema({ partaname:String...
2020-10-26 16:46:33
268
原创 一张订单图做一个小项目六
menu页面的的布局 效果图使用 上 (下)左右的布局方式直接用elementui的组件即可代码如下 组件的使用 应该有手 有眼会查找就行<template><div class="about"> <el-container> <el-header> <h1>27极简</h1> </el-header> <el-containe...
2020-10-26 16:16:44
222
原创 一张订单图做一个小项目五
1接口弄好 以后 开始用前端的登录页面 采用elementui 回到前端工程目录2:配置反向代理 方便跨域请求在项目中新建vue.config.js 里面写入module.exports = { publicPath: "./", assetsDir: "static", outputDir: 'dist', lintOnSave: false, devServer: { proxy: { '/api': {...
2020-10-26 14:52:58
336
原创 一张订单图做一个小项目四
接口层 在routes/users.js/新建了登录和注册的接口 这个项目可能用不上注册和批量新增 因为他一个人用就够了需要特殊处理的地方1:密码需要加密 采用再带的crypto模块2:登录以后返回token 使用jsonwebtoken模块 需要安装 npm i jsonwebtoken三个接口 分别是 login register addmany 登录 单个注册 批量注册var express = require('express');var route...
2020-10-26 11:13:28
293
原创 一张订单图做一个小项目三
1:配置数据库 在server中新建一个model文件夹 里面新建一个db.jsdb.js (上线的时候在改成 带用户名和密码的)var mongoose = require("mongoose");var DB_URL = "mongodb://localhost:27017/27";mongoose.connect(DB_URL,{useNewUrlParser: true });//状态的监听mongoose.connection.on("connected",function..
2020-10-26 11:09:00
440
原创 一张订单图做一个小项目二
1:技术选型 应该是个小项目 前端使用vue框架(2.6) UI库 elementUI 后端使用node express mongodb mongoose 上线 阿里云+nginx2:创建一个文件夹名称为27 cd 27 vue create client express -e serverps:vue-cli 和express的使用 这里略过 自行百度...
2020-10-26 10:53:57
485
1
原创 一张订单图做一个小项目一
兄弟让帮忙做一个项目 需求分析只有一张图 挑战一下两天完成 看兄弟是否满意图1: 公司名称就不打码了 算帮忙做个宣传吧分为三个模块好了 甲方信息 姓名 电话 日期 订单编号 乙方信息 订货期乙方 传真 传真 电话 这些 说真话也不懂 到底属于谁的... 订单详情 编号 产品名称...
2020-10-26 10:47:51
677
原创 02Vue中computed watch filters methods的简单理解
1:methods是所有方法的声明处2:computed;是一个对象 用来弥补data中属性的不足或者说是data中属性的扩展 会返回一个新的值3:watch:是一个对象 起到监听的作用 一个值的改变 可能会引起另一个值的变化 需要重新计算4:filters:是一个对象 data中的数据 进行过滤(重组) 需要返回一个新的值...
2020-08-11 10:16:38
353
原创 01vue的第一天
1:vue的简介 js框架 数据驱动 有双向绑定2:使用vue 需要引入可以下载vuehttps://cdn.jsdelivr.net/npm/[email protected]也可以在页面直接引入<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>3:学习第一个vue的例子 声明数据 在指定的地方显示4:vue中调用方法去修改数据5:vue的数据绑定6:特殊的内容显示...
2020-08-11 10:06:58
370
原创 react实现excel的导入和导出
1：安装插件 xlsx npm install xlsx --save 链接xlsx2：在项目里面新建一个until文件夹 在里面里面新建excel.js里面代码如下 可以直接复制粘贴拿走 分别是导入和导出的核心代码 不区分框架 react vue都可以使用import XLSX from "xlsx";//引入xlsx/** * 导入excel的函数 * @param {*} file */const importsExcel=(file)=&...
2020-07-29 15:42:17
9870
12
w3c.chm 离线版本
2011-10-28
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人