- 博客(66)
- 收藏
- 关注
RSS订阅
原创 Vue基础语法，Vue组件化开发
Vue相关知识1.邂逅Vue2.Vue基础语法3.组件化开发4. Vue cli5.Vue router 路由6.vuex7.网络封装一，邂逅Vue1.1认识Vue.jsVue，是一个渐进式的框架。意味着你可以将Vue作为应用的一部分嵌入其中，带来丰富的交互体验。特点解耦视图和数据可复用的组件前端路由技术状态管理虚拟DOM1.2 安装Vue1.CDN引入2.下载引入3.NPM安装1.3 Vue初体验hellovue<div id="app">
2020-08-06 16:36:55
351
原创 Angular实战项目记录（四）------ 默认请求时间为最近一周
时间选中格式：2021-02-16 2021-02-23 <script> var time1 = Date.parse(new Date()); console.log(time1) //1614052457000 var time2 = this.time1 - 86400000 * 7*1; console.log(time2) //1613447657000 time1 = timestampToTi
2021-02-23 11:55:51
168
原创 rem布局
rem布局r rootem 相对单位，相对于HTML的字体大小单位，可以用于任何设定长度的单位i/*1.设计师设计网站的设计稿：10002.每个人打开网页的时候，因为设备不同，或者浏览器设定的分辨率不同，使得需要在不同的分辨率打开，进行同比例的放大和缩小*/...
2021-02-02 18:33:17
103
原创 Echarts系列----高级使用
主要内容显示相关动画的使用交互API1.显示相关主题调色盘样式自适应主题内置主题- Echarts中默认内置了两套主题：light dark- 在初始化对象方法init中可以指明- var chart = echarts.init(dom,‘light’)- var chart = echarts.init(dom,‘dark’)自定义主题 （网址）https://echarts.apache.org/zh/download-theme.html- 1.在主题编辑器
2021-02-02 17:16:49
266
原创 Echarts系列----基础使用
Echarts柱状图 bar折线图 lines散点图饼图地图雷达图仪表盘图柱状图常见效果标记：最大值 最小值 平均值显示：数值显示 柱宽度 横向柱状图 var xDataArr = ['张三','李四','王五','小猪'] var yDataArr = [88,98,70,86] this.option1={ //横向柱状图----将xAxis和yAxis调转
2021-02-01 14:45:39
1919
原创 跨域
同源策略同源策略是浏览器给的一个行为当你在发送请求的时候，会涉及到两个地址1.打开当前页面的地址2.你要请求的地址两个地址中的端口号 域名 传输协议只要有任意一个不一样，就是非同源请求就会触发到浏览器的同源策略不允许你获取这个服务器上的数据触发了同源策略的请求我们叫做 跨域请求私人：请求别人家的服务器第一：真实开发环境页面（html,js,css，静态资源）是在一个服务器上所有的数据，数据库，在一个服务上第二：真实开发环境我自己不具备条件，购买别人家服务器服务
2021-01-21 10:59:28
125
1
原创 Angular实战项目记录（三）------表格换行
表头不换行，表格里面内容换行table td { word-break: break-all; word-wrap:break-word;}
2021-01-19 13:58:58
661
原创 Ajax
ajax必要的步骤1.创建一个实例化对象2.配置你的请求方式和请求地址xhr.open(请求方式，请求url，false/true)第三个参数选填，是否异步3.把请求发送出去xhr.send()参数是请求体如果是get请求，那就空着或者写个null如果是post请求，就直接写请求体 //1.创建一个ajax对象 const xhr = new XMLHttpRequest() //2.配置请求方式和请求地址。这个xhr对象可以帮我们发送ajax请求
2021-01-18 16:00:40
72
原创 Angular实战项目记录（三）------解码和编码
解码和编码从IE10+浏览器开始，所有浏览器就原生提供了Base64编码、解码方法，不仅可以用于浏览器环境，Service Worker环境也可以使用。方法名就是 atob 和 btoa ，具体语法如下：window.btoa('china is so nb') // 编码"Y2hpbmEgaXMgc28gbmI="window.atob("Y2hpbmEgaXMgc28gbmI=") // 解码"china is so nb"部分应用以前的base64编码Base64.encode('
2021-01-18 10:40:20
340
原创 Angular实战项目记录（二）------ 大屏文字滚动（css3实现）
大屏文字滚动html代码在要滚动的后面添加一个一模一样的展示部分<body> <div class="list"> <div class="cc rowup"> <div class="item">1111</div> <div class="item">222</div> <div class="item">3
2021-01-08 10:42:28
412
原创 Angular实战项目记录（一）------登录（传递参数，获取返回值，加密密码，路由守卫，localStorage）
需求：angular登录（传递参数，获取返回值，加密密码，local路由守卫，localStorage）步骤：一，双向绑定input框的账号和密码login.html <input type="text" name="username" placeholder="用户名" autocomplete="off" [(ngModel)]="username" > <input type="password" name="password"
2021-01-08 10:34:17
945
1
原创 CSS3
css3新增属性选择器（元素属性） 其中，id,type,value都为input属性**E[attr^=‘xxx’] **:E标签中的attr属性，以xxx开头**E[attr$=‘xxx’] **:E标签中的attr属性，以xxx结尾*E[attr=‘xxx’] **:E标签中的attr属性，包含xxx匹配.doc文件a[href$='doc']::before{ content.url('img/1.jpg')}结构伪类选择器子元素伪类E:first-childE:las
2020-12-21 09:29:20
263
2
原创 修改echarts中3D地球的自转方向
修改globe的viewControl属性改为ccwglobe: {viewControl: {autoRotateDirection:‘ccw’,autoRotate: true}}
2020-12-16 14:03:38
839
原创 3d地球的引入
效果图第一步：创建一个可以放地球的div <div id='container'></div>第二步，引入文件import 'echarts-gl'import * as echarts1 from 'echarts';第三步，在生命周期里调用earth3D() { var canvas = document.createElement('canvas'); var myChart = echarts1.init(canvas, null, {
2020-11-26 11:51:24
245
原创 前端页面配色
色彩基础知识色彩的三要素：色相，饱和度，明度。色相，可以理解为某种具体的颜色，比如红橙黄绿青蓝紫就代表了七种不同色相。饱和度，简单来说就是色彩的丰富性，饱和度越强色彩越丰富，反之越单一。明度，就是指代颜色的亮与暗用二维的方式表达就是色环，它的特点就是不同角度代表不同色相，不同纵深代表不同明度。了解了色彩的三个基本概念，就可以掌握五种搭配手段了，分别是：单色搭配近似色搭配补色搭配分裂补色搭配原色搭配01/ 单色搭配指的是相通色相下，改变明度和饱和度。比右边的示例，它的主色
2020-11-20 16:41:16
2173
原创 美丽漂亮的线条方格背景
效果图代码如下 background-image: radial-gradient(500px 500px at 50% 50%, rgba(255, 255, 255, 0.09) 0%, rgba(0, 0, 0, 0) 100%), repeating-linear-gradient(0deg, rgba(70, 70, 70, 0.5) 0px, rgba(70, 70, 70, 0.5) 1px, rgba(40, 41, 45, 0.9) 1px, rgba(40, 41, 45, 0.9
2020-11-18 10:43:19
121
原创 echarts的中国地图的展示，vue为例
效果图（无数据）1.创建一个divhtml <!-- 初始化echarts需要个有宽高的盒子 --> <div ref="mapbox" style="width:600px;height:500px;"> </div>2.引入china.js组件import echarts from "echarts";import 'echarts/map/js/china.js'3.echarts初始化 mounted(){ // this.ge
2020-11-17 15:38:17
565
1
原创 vue 打包后如何修改接口地址？提供 config.js 进行配置
背景在 vue 项目中，我们可以通过不同的环境，访问不同的服务器. 虽然可以使用环境的切换，但是在打包成html文件后，想对其进行修改就不行了。// 环境的切换if (process.env.NODE_ENV == 'development') { axios.defaults.baseURL = 'https://localhost:8888';} else if (process.env.NODE_ENV == 'debug') { axios.defaults.
2020-11-17 11:44:49
5651
12
原创 JSON教程
JSON: JavaScript Object Notation(JavaScript 对象表示法)json:是存储和交换文本信息的语法。json是轻量级的文本数据交换格式。JSON语法是javascript语法的子集数据在名称/值对中数据由逗号分隔大括号{}保存对象中括号[ ] 保存数组，数组可以包含多个对象JSON名称/值对json数据的书写格式key : valueJSON值数字（整数或浮点数）字符串（在双引号中）逻辑值（true或false）数组（在中括号[ ]中
2020-11-10 17:24:56
615
原创 AngularJs
AngularJS 指令正如您所看到的，AngularJS 指令是以 ng 作为前缀的 HTML 属性。ng-init 指令初始化 AngularJS 应用程序变量。<div ng-app="" ng-init="firstName='John'"> <p>姓名为 <span ng-bind="firstName"></span></p> </div>AngularJS 表达式AngularJS 表达式写在双大括号内
2020-11-02 11:52:04
97
原创 Node.js
浏览器中的javascript是没有文件操作的能力的但是node中的javascript是具有文件操作的能力fs是file-system的简写，就是文件系统的意思在Node中如果想要进行文件操作，就必须引入fs这个核心模块在fs这个核心模块中，就提供了所有的文件操作相关的API例如：fs.readFile就是用来读取文件的//1.使用require方法加载fs核心模块var fs = require ('fs')//2.读取文件第一个参数就是要读取的文件路径第二个参数是一个回调函数
2020-10-25 22:38:06
95
原创 Linux操作系统
操作系统1.操作系统（operation system,OS）计算机硬件：CPU，内存，硬盘，声卡没有安装操作系统的就三级，通常被称为裸机
2020-10-25 21:20:21
136
原创 2020-10-14
分页效果html <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}" :data="result" style="width: 100%"> <el-table-column prop="ot" label="ot" :width="150"> </el-table-column
2020-10-14 12:59:30
77
原创 element-ui表格表头添加背景，修改字体（表头明显）
原改变后代码<el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}" :data="msg" style="width: 100%,margin-bottom:50px">
2020-10-14 12:47:34
2297
原创 在element-ui的表格里进行换行
效果图html<el-table-column prop="desc" label="" width="780"> <template slot-scope="scope"> <tr v-html="scope.row.desc.join('')"></tr> <!-- <span style="margin
2020-10-14 12:41:10
3217
原创 element-ui分页修改背景颜色
CSS样式element-ui样式修改后修改相关代码::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active { background-color:#009688; //修改后的背景图颜色 color: #fff; }
2020-10-14 11:39:37
3841
6
原创 对象的属性名和属性值
属性名var obj = new Object()//对象的属性名不强制要求遵守标识符obj.name = 'wen sha bi';//如果需要使用特殊的属性名，不能采用 . 的方法//需使用 语法： 对象["属性名"] = 属性值//使用[]这种形式去操作属性，更加的灵活，//在[]中可以直接传递一个变量，这个变量值是多少就会读取那个属性obj["123"]='789';obj["nihao"] = " 你好";var n = "123"; console.log(obj[n]
2020-10-10 15:48:32
1537
原创 Layui
一，下载二，下载文件说明CSS样式font字体image图片lay （modules）对象的内置模块layui.all.js 包含了所有模块的jslayui.js 如果要使用必须使用layui.use([“table”,“layer”,“laydate”,“form”].funtion(){})二，图标图标按钮导航...
2020-09-27 17:58:29
69
原创 网易云app项目
基本typescriptrxjsangular基本api的使用（重要）步骤1.将style.less重命名为index.less2.将index.less剪切到assets/style下3.安装ant design angular组件库4.安装相关样式库 如（npm i minireset.css）5.创建module模块1.ng g m core 核心库coreModule如果只想被app.module引入，其它不可，则exports:[ ShareModule]ex
2020-09-27 17:32:55
239
原创 axios实现搜索，页面跳转,element-ui 表格展示数据
页面布局请求数据1.封装请求（request.js）import axios from 'axios'export function request(config) { // 1.创建axios的实例 const instance = axios.create({ baseURL: 'http://localhost:3000',//后台传递的接口 timeout: 1000 }) // 2.axios的拦截器 // 2.1.请求拦截的作用 instan
2020-09-27 10:52:36
2318
原创 Angular路由
路由就是根据不同的url地址，动态的让根组件挂载其他组件来实现一个单页面应用。安装路由ng generate module app-routing --flat --module=app步骤1.创建项目2.创建需要的组件3.找到app-routing.module.ts配置路由引入组件//将新建的组件引入import { NewsComponent } from './component/news/news.component';import { HomeComponent }
2020-09-20 23:38:39
89
原创 表格相关属性
< table > 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。相关属性border :规定表格边框的宽度。cellpadding:规定单元边沿与其内容之间的空白。cellspacing:规定单元格之间的空白。..
2020-09-18 12:17:28
83
原创 angular数据交互
Rxjs特点：针对异步数据流的编程常见的异步编程的几种方法：回调函数事件监听/发布订阅PromiseRxjsAngular get请求数据get,post和服务器交互使用的HttpClientModule模块。1，在app。module中引入HttpClientModule并注入import { HttpClientModule } from '@angular/common/http'；//依赖注入 imports: [ BrowserModule, For
2020-09-18 11:13:19
271
原创 Angular中的生命周期
组件里的生命周期函数ngOnChanges() 父子组件传值,传值数据发生改变ngOnInit() (重要)请求数据ngDoCheck() 自定义操作ngAfterContentInit() 组件渲染结束后ngAfterViewInit() (重要)进行DOM操作 视图加载完成ngAfterViewChecked() 自定义操作ngOnDestroy() 销毁（重要）export class HeaderComponent implements OnInit {
2020-09-17 17:37:08
167
原创 axios请求数据，饼图动态数据展示
1.先写一个div<template><div> <div id="chartPie"></div></div></template><script>//引用echartsimport echarts from "echarts";//请求数据import {getPieData} from "@/network/cart";export default {name: "Cart", d
2020-09-17 16:46:24
436
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人