一方通行00-CSDN博客

原创 html简单组件（九）：简洁的商城订单列表显示（带状态）

html简单组件（九）：简洁的商城订单列表显示（带状态）效果图为：HTML代码 <div class="textDiv"> <div class="head"> <b>订单编号：</b> 2021032610194432 </div> <div class="context"> <b>订单时间：</b> 2021-03-26 10:11:23 &l

2021-03-26 14:22:20 2467 1

原创 html简单组件（八）：公告/广告自动轮播效果实现

html简单组件（八）：公告/广告自动轮播效果实现实现效果：HTML代码 <div class="list"> <ul> <li class="lt">广告1..........</li> <li class="lt">广告2..........</li> <li class="lt">广告3..........</li> <li class="lt">

2021-03-08 11:39:36 1422

原创 html简单组件（七）：使用transform实现轮播图

html简单组件（七）：transform实现图片轮播实现效果图：HTML代码 <div class="box"> <div class="list"> <ul> <li id="g0" class="center"><img src="img/1.jpg" alt="" /></li> <li id="g1" class="right"><img src="img/2

2021-02-09 17:31:46 2568 1

原创 html简单组件（六）：移入div放大特效（scale）

html简单组件（六）：点击Div放大特效（scale）实现效果图：完整代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>点击放大div</title> <style> .demo{ width: 500px; height: 260px; border: 1px solid black;

2021-02-09 09:27:02 1511

原创 html简单组件（五）：点击旋转箭头

html简单组件（五）：点击旋转箭头实现效果图：完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>test</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style>

2021-02-08 12:41:03 2525

VUE3.0学习系列随笔（十）：省市区选择组件1、数据来源使用的依赖数据为：element-china-area-data，总共有六种数据模式详情请参考官网为：https://www.npmjs.com/package/element-china-area-data（1）命令行窗口安装依赖，命令为：npm install element-china-area-data -S（2）Vue3.0 UI管理界面安装：数据格式为：2、采用ElementUI-plus实现（1）采用el-cas

2021-02-05 14:48:24 4493 7

原创 VUE3.0学习系列随笔（九）：防止按键多次点击多次触发事件

VUE3.0学习系列随笔（九）：防止按键多次点击多次触发事件按键在点击过程中，如果不加以限制，就会出现多次点击多次生效的情况。本文主要是实现VUE3.0中防止按键多次点击触发事件。演示效果为：1、定义全局按键限制函数新建common文件夹和common.js文件存放全局限制函数，函数代码为：// 防止处理多次点击全局函数// methods是点击后需要执行的函数， param是函数需要传的参数，可传可不传function noMulClicks (methods, param) { con

2021-01-27 15:24:00 5054

原创 VUE3.0学习系列随笔（八）：实现导航守卫模式的个人登录界面

VUE3.0学习系列随笔（八）：实现导航守卫模式的个人登录界面本文所使用到的VUE3.0依赖：链接路径管理（vue-router）：4.0版本Vue状态管理（vuex）：4.0版本前端UI渲染管理（element-plus）：1.0.2-beta.30版本这些依赖可以通过VUE3.0 UI管理界面进行安装，安装方式见博客：https://blog.csdn.net/qq_26666947/article/details/113105946演示效果1、登录界面登录界面一切从简，效果为：

2021-01-26 20:18:25 6266

原创 VUE3.0学习系列随笔（七）：定义单个VUE页面的背景图

VUE3.0学习系列随笔（七）：定义单个VUE页面的背景图VUE属于单页面应用，如果直接采用CSS设置Body的背景图，会让造成所有的VUE页面都会被设置同一个背景图，因此需要采用另外的方式来设置单个页面的背景图，本文采用js动态设置单个VUE页面的背景图，整个效果如下图：1、主要思路主要是利用VUE3.0的生命周期钩子函数mounted()和beforeUnmount()。mounted()是在实例被挂载后调用，beforeUnmount()是在在卸载组件实例之前调用。1、进入VUE页面，执行m

2021-01-26 16:42:15 6966 2

原创 VUE3.0学习系列随笔（六）：ElemenUI的安装和使用

VUE3.0学习系列随笔（六）：ElemenUI的安装和使用经过实际测试，VUE2.0版本对应的ElementUI并不适用于VUE3.0，需要将安装版本更换为：Element-Plus，官网地址为：https://element-plus.gitee.io/#/zh-CN/guide/design，Element-Plus可以完美支持VUE3.0。1、Element-Plus安装（1）Vue3.0 UI管理界面安装在依赖中搜做element-plus，即可找到依赖包，点击安装即可（2）命令行界面

2021-01-26 11:31:42 6253

原创 VUE3.0学习系列随笔（五）：自定义组件使用

VUE3.0学习系列随笔（五）：自定义组件使用VUE2.0和VUE3.0虽然在工程目录结构上存在较大差异，但是具体的代码实现逻辑相同，本文所使用的自定义组件方法，同样适用于VUE2.0。1、无参子组件的自定义和调用（1）定义无参子组件自定义组件已办存放在VUE工程结构的component文件夹下，新建自定义组件的方式和新建普通vue文件一样，整个VUE代码结构，本文自定义head组件，主要是作为页面的顶部div使用，代码如下：<template> <div class="he

2021-01-25 16:56:18 9742 1

原创 VUE3.0学习系列随笔（四）：VUE-UI管理界面使用之依赖和插件管理

VUE3.0学习系列随笔（四）：VUE-UI管理界面使用之依赖和插件管理VUE3.0 UI管理界面的运行项目见博客：https://blog.csdn.net/qq_26666947/article/details/112986393本节是主要介绍VUE3.0 ui界面安装依赖和插件的使用方法。1、依赖管理主界面VUE3.0-UI的依赖界面主要包括展示包依赖，安装和卸载包依赖。包依赖包含用户自定义安装的包和项目默认包。以element-ui为例，展示VUE3.0-UI安装包依赖的全过程（1）进

2021-01-25 12:58:35 6363 2

原创 VUE3.0学习系列随笔（三）：VUE-UI管理界面使用之运行和打包

VUE3.0学习系列随笔（三）：VUE-UI管理界面使用vue-ui是VUE3.0中新增的项目管理可视化工具，在这个工具中，我们可以管理当前项目的启动、编译和打包，以及查看项目的运行状态，这走

2021-01-22 17:40:13 6257

原创 VUE3.0学习系列随笔（二）：VUE3.0和VUE2.0工程结构对比

VUE3.0学习系列随笔（二）：VUE3.0和VUE2.0工程结构对比VUE3.0相对于VUE2.0的提升，最显著的特点在于：文件目录结构的优化。1、VUE2.0初始工程结构VUE2.0工程目录中存在构建工程配置目录、环境配置目录，静态资源存放目录，以及各种功能配置文件，而且index.html主页也是存放于根目录之中，在加入个人配置的组件、页面和路由配置文件之后，工程结构会比较冗杂繁多。2、VUE3.0初始工程结构VUE3.0目录工程极大简化了项目结构，将修改频率极低的环境配置文件目录和构建工

2021-01-22 11:17:31 5748 1

原创 VUE3.0学习系列随笔（一）：VUE3.0项目初始化

VUE3.0学习系列随笔（一）：VUE3.0项目初始化1、VUE3.0简介VUE3.0相对于VUE2.0的提升主要有以下几点：Performance：性能更比Vue 2.0强。Tree shaking support：可以将无用模块“剪辑”，仅打包需要的。Composition API：组合API Fragment, Teleport,Suspense：“碎片”，Teleport即Protal传送门，“悬念”Better TypeScript support：更优秀的Ts支持Custom

2021-01-20 15:16:41 10769 9

原创 VUE项目学习（八）：引用axios进行后端接口请求

VUE项目学习（八）：引用axios进行后端接口请求axios是一个基于 promise 的 HTTP 库，是vue中比较常用的后端接口请求方法。演示效果为：1、引入axios包（1）执行命令，在vue项目中安装axiosnpm install axios --save安装完成结果图为：（2）在main.js中添加以下代码，全局引入axiosimport axios from 'axios'Vue.prototype.$axios = axios（3）在具体的vue文件中，直接

2021-01-15 18:02:35 6897

原创 VUE项目学习（七）：引用element-ui和进行简单页面布局

VUE项目学习（七）：引用element-ui和进行简单页面布局1、element-ui介绍Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，目前广泛应用于vue应用之中。本文使用的vue项目的GItHub地址为：https://github.com/CoderPlayer0/CsdnVue.git2、页面布局效果3、引入element-ui（1）在vue项目中安装element-ui，命令为：npm i element-ui -S安装完成之后为：

2021-01-15 11:49:31 10491 1

原创 VUE项目学习（六）：自定义间隔进度条

VUE项目学习（六）：自定义间隔进度条网上有很多种进度条，但是我没找到这种间隔进度条，索性自己弄一个1、进度条演示：2、VUE代码template代码：<div class="progressbar"> <div class="title"> <span>自定义进度条:</span> </div> <div class="progress"> <div class="g

2021-01-12 20:21:59 7925 2

原创 VUE项目学习系列博文

VUE项目学习系列博文VUE项目学习（1）VUE项目学习（一）：搭建VUE前端项目（2）VUE项目学习（二）：学习项目文件结构（3）VUE项目学习（三）：win10版nginx部署vue项目（4）VUE项目学习（四）：编写个人页面和配置路由（5）VUE项目学习（五）：引用echarts组件VUE项目学习笔记（1）VUE项目学习笔记：关闭代码检查（2）VUE项目学习笔记：页面无法铺满整个屏幕VUE项目代码持续更新整个项目所在的GitHub地址：https://github.com/Cod

2021-01-12 16:06:14 6993

原创 VUE项目学习笔记：页面无法铺满整个屏幕

VUE初始项目页面整体无法铺满整个屏幕1、出现的问题在VUE初始项目运行后，页面整体无法铺满整个屏幕，如下图所示2、出现问题的原因和解决（1）主要是因为vue-cli脚手架搭建的vue项目中的App.vue作为页面的核心，存在默认设定样式间隔，造成无法顶格显示解决办法：删除这段样式代码即可。（2）删除完成之后发现，页面还是无法铺满整个屏幕，如下图所示：解决办法：重新设定App.vue的间隔样式，如下图所示：3、解决完成之后的效果：4、整个App.vue文件的代码<templ

2021-01-12 14:58:52 13367 4

原创 VUE项目学习（五）：引用echarts组件

vue项目创建简单echarts图表演示效果图：1、在vue项目中导入echarts（1）在Hbuilder中打开项目终端的方式如下：（2）在vue项目终端中，输入以下命令，下载和安装echarts组件npm install echarts --save下载成功效果为：2、在vue中引入echarts（1）因为是只在局部使用echarts，因此只在单个vue文件中引用。import * as echarts from 'echarts'（2）定义一个固定大小的div作为echa

2021-01-11 15:30:18 9236 4

原创 VUE项目学习（四）：编写个人页面和配置路由

VUE项目配置路由准备工作先配置好node.js开发环境，并使用VUE-Cli下载好VUE项目，具体流程可以参考博客https://blog.csdn.net/qq_26666947/article/details/111929871本文使用HBuilderX作为VUE项目开发工具，也可以使用VSCode工具。删除初始VUE项目的Logo...

2021-01-11 10:44:37 8034 1

原创 VUE项目学习（三）：win10版nginx部署vue项目

win10 nginx部署vue项目niginx的安装和启停操作参照博客：https://blog.csdn.net/qq_26666947/article/details/1122720581、打包vue项目（1）在前端编译工具的终端界面中，使用命令：npm run build，对vue项目进行打包，如下图所示。（2）打包完成之后，vue项目中会生成一个dist文件夹，里面放置打包完成的前端项目dist文件夹中的内容为：2、编辑配置文件（1）在nginx的根目录下，点击conf文件夹，

2021-01-08 11:05:12 8755

原创 win10 nginx部署前端项目（静态资源服务器和HTML）

win10 nginx部署前端项目（静态资源服务器和HTML）niginx的安装和启停操作参照博客：https://blog.csdn.net/qq_26666947/article/details/1122720581、nginx部署静态资源服务器（1）在nginx的根目录下，点击conf文件夹，编辑nginx.conf配置文件；（2）增加sever配置，我这里因为还要配置前端服务器，所以就新建一个server，并配置对应的端口 server { listen 900

2021-01-07 10:51:16 11338 1

原创 win10 nginx安装和使用

win10 nginx安装和使用1、下载windows版nginx安装包（1）以最新的稳定版为例，下载地址为：http://nginx.org/en/download.html（2）下载完成之后，选择自己想要解压的位置，解压安装包，nginx的目录结构如下。2、启动nginx（1）方法一：双击nginx.exe，会闪过黑色的弹窗。（2）方法二：使用cmd命令窗，切换到安装根目录，输入命令 nginx.exe 或者 start nginx ，回车，闪过黑色的弹窗，即可完成启动。3、验证是否

2021-01-06 15:09:07 9041 1

原创 html简单组件（四）：滚动条显示隐藏和更改滚动条样式

HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式实现效果图：HTML代码 <div class="list scroll"> <div class="list-item">测试滚动条</div> <div class="list-item">测试滚动条</div> <div class="list-item">测试滚动条</div> <div class="list-item

2021-01-06 14:23:14 8001

原创 VUE项目学习（二）：学习项目文件结构

VUE项目中文件介绍VUE项目结构：index.html：主页，项目入口App.vue：根组件main.js：入口文件router文件夹下的index.js：路由配置文件当点开浏览器访问项目，最先访问的是index.html，上面有一个id为app的挂载点，之后我们的Vue根实例就会挂载到该挂载点上。 <body> <div id="app"></div> </body>main.js作为项目的入口文件，在main.js中

2020-12-31 11:30:01 7325

原创 VUE项目学习笔记：关闭代码检查

VUE项目关闭代码检查进入vue项目根目录中，选择config，打开index.js，搜索Eslint，更改useEslint值为false，如下图所示：

2020-12-31 09:52:16 9160

原创 html简单组件（三）：简洁美观的搜索框

html+jquery简洁美观的搜索框搜索框效果图：HTML代码： <div class="main"> <div class="pannel-div search"> <input type="text" class="in" id="in" placeholder="请输入查询内容" /> <button class="btn_search" onclick="showInput()">搜索</button>

2020-12-30 20:44:44 14574

原创 html简单组件（二）：简洁弹窗

html+jquery实现简洁弹窗代码实现效果图为：html代码 <div> <button class="btn" onclick="show()">点击弹窗</button>  <div class="dialog">  <div class="content"> <div class="aclose"&g

2020-12-30 19:31:18 16804 3

原创 java简单工具（一）：JSON文件读取和写入

项目场景：目前，JSON数据应用较为广泛，本文主要是展示采用JAVA读取JSON文件的最简洁方法JSON文件格式文件内容如下，文件名称为：data.json{ "id": 1, "uName": "张三", "idNumber": 410121199804064431, "books": [ "水浒传", "三国演义" ]}局部变量：jsonPath为json文件的绝对地址，例如：D:\data\data.json，返回值为字

2020-12-30 16:43:22 22752 3

原创 VUE项目学习（一）：搭建VUE前端项目

新手搭建VUE前端项目1、安装node.js环境（1）下载node.js，下载地址为：https://nodejs.org/en/（2）按照默认选项安装node，检查安装版本（3）配置下载镜像，镜像地址为：http://npm.taobao.org/，安装成功后，可以直接使用cnpm代替npm命令npm install -g cnpm –registry=https://registry.npm.taobao.org检查cnpm是否安装成功2、搭建vue项目（1）全局安装VUE脚手架v

2020-12-29 17:12:19 7623

原创 html简单组件（一）：最简单的右侧导航栏

html+jquery+CSS实现最简单的右侧导航栏效果一直在百度上没找到最简单实现右侧导航栏效果的代码，索性自己做一个最简单的demo最简单的效果图废话不多说，直接上代码html+jquery代码html主代码<div class="mobile-nav"> <ul> <li class="nav_menu"><a onclick="change(1)">首页</a></li> <li cla

2020-12-29 09:49:55 14455 4