- 博客(34)
- 收藏
- 关注
RSS订阅原创 最新-vue使用echarts可视化实现省地图下钻及返回（以山西省为例）
最近在项目实际业务中为了更清晰的展示省市的数据，使用echarts实现了地图的下钻和返回。因为里面加了实际业务，所以代码有些冗余。先来看下效果图。
2023-08-21 10:39:47
1915
1
原创 vue实现v-model双向数据绑定实现原理
Vue中使用v-model可以实现表单元素和数据之间的双向绑定，即修改表单的值，data中对应变量的值也会被修改。在data对应变量中修改值，被绑定的表单值也会被修改；所以称之为双向绑定。
2022-04-29 11:06:02
4361
原创 浏览器输入url经历了什么
做为学前端的同学，每天到在和浏览器打交道，当浏览器输入一个url会显示出对应的页面等，那当输入url时浏览器都做了什么？页面是如何显示到浏览器上面的？来这里一次搞清楚！！！
2022-04-28 21:50:52
1611
原创 普歌-uni-app基础知识(三)
uni-app的基本使用条件注释实现跨段兼容组件的条件注释api的条件注释uni中的导航跳转利用navigator进行跳转利用编程式导航进行跳转导航跳转传递参数uni-app中组件的创建组件的生命周期函数组件的通讯父组件给子组件传值子组件给父组件传值兄弟组件通讯uni-ui的使用条件注释实现跨段兼容条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。写法：以 #ifdef 加平台标识 开头，以 #endif 结尾。平台标识值平台参考文档
2020-12-11 12:04:01
170
原创 普歌-uni-app基础知识(二)
uni-app的基本使用uni-app中的数据绑定插值表达式的使用v-bind动态绑定属性v-for的使用uni中的事件事件绑定事件传参uni的生命周期应用的生命周期页面的生命周期下拉刷新开启下拉刷新通过配置文件开启通过API开启监听下拉刷新关闭下拉刷新上拉加载网络请求数据缓存uni.setStorageuni.setStorageSyncuni.getStorageuni.getStorageSyncuni.removeStorageuni.removeStorageSync上传图片、预览图片上传图片预览
2020-12-06 10:29:09
152
原创 普歌-uni-app基础知识(一)
uni-app的基本使用uni-app介绍环境搭建利用HbuilderX初始化项目运行项目介绍项目目录和文件作用全局配置和页面配置通过globalStyle进行全局配置链接: [详细文档](https://uniapp.dcloud.io/collocation/pages?id=globalstyle).创建新的message页面通过pages来配置页面配置tabbarcondition启动模式配置组件的基本使用text文本组件的用法view视图容器组件的用法button按钮组件的用法image组件的使用
2020-12-06 09:31:29
237
原创 普歌-Git下载、安装和配置及常用命令
Git下载、安装和配置及常用命令Git下载、安装和配置git下载与安装常用命令创建本地仓库修改文件撤销修改删除文件Git下载、安装和配置git下载与安装百度git官网， 下载链接.，根据自己电脑系统下载相应的安装包点击下载好的安装包安装这个软件一直点击next，直到出现install，点击install，安装完成后点击finish：安装好后在桌面界面点击鼠标右键，会出现如下界面检查git是否安装OK键盘Ctrl+r，然后在弹出框中出入cdm，弹出如下界面，输入git，
2020-11-24 21:14:30
160
原创 普歌—解读vue-element-admin登录逻辑permission.js
解读vue-element-admin登录逻辑permission.js- vue-element-admin中，permission主要负责全局路由守卫和登录判断，希望通过以下注释说明，帮助大家理解这个文件的逻辑import router from './router'import store from './store'import NProgress from 'nprogress' // Progress 进度条import 'nprogress/nprogress.css'// Pro
2020-11-21 11:28:37
993
1
原创 普歌—Vue实现简单Oauth2.0内部第三方登录
Vue实现简单Oauth2.0内部第三方登录Oauth2.0认证授权过程Vue具体实现操作前端拿到token数据存cookie里取cookie中的token实现登录拿token放请求头（请求拦截器）并根据提供的接口发请求返回用户信息对象，拿到用户信息存到cookie里拿到用户信息渲染到页面上实现前端登出详细请见: 普歌-OAuth2.0认证和授权原理.Oauth2.0认证授权过程Vue具体实现操作前端拿到token数据存cookie里先创建中间页middlepage，并在router/inde
2020-11-21 11:00:09
1615
原创 普歌-OAuth2.0认证和授权原理
Vue登录功能vue获取路径中的参数的两种形式二级目录vue获取路径中的参数的两种形式路径：http://localhost:3000/edit/123取值123的方式：this.$route.params.id路径：http://localhost:3000/?token=123取值123的方式：this.$route.query.token二级目录...
2020-11-21 08:48:54
209
原创 普歌-Vue富文本使用总结
Vue富文本使用总结下载插件和依赖下载Vue-Quill-Editor下载quill（Vue-Quill-Editor需要依赖）在模块中引用自定义菜单下载插件和依赖下载Vue-Quill-Editornpm install vue-quill-editor --save下载quill（Vue-Quill-Editor需要依赖）npm install quill --save在模块中引用 <template> <div class="app-conta
2020-11-13 21:54:35
80
原创 普歌-码上鸿鹄团队-Vue后台管理系统项目实战之登录功能实现
登录功能实现修改项目基地址修改对应的login.js文件修改user.js文件修改项目基地址config文件下 env文件修改文件中的基地址注意路由地址更改正确修改对应的login.js文件改为正确的路由地址改为正确的路由地址修改user.js文件修改为正确的参数改为正确的路由地址链接: 参考地址文档....
2020-10-28 21:57:45
100
原创 普歌-码上鸿鹄团队-Nuxt服务端渲染(三)
nuxt.config.js 配置nuxt.config.js 配置知识点总结nuxt.config.js 配置知识点总结如下图所示build：应用依赖第三方模块cache：该配置项让你开启组件缓存策略以提升渲染性能。css：该配置项用于定义应用的全局（所有页面均需引用的）样式文件、模块或第三方库。dev：该配置项用于配置 Nuxt.js 应用是开发还是生产模式。env：该配置项用于定义应用客户端和服务端的环境变量。generate：该配置项用于定义每个动态路由的参数，Nuxt.js 依
2020-10-28 20:59:20
146
原创 普歌-码上鸿鹄团队-Nuxt服务端渲染(二)
Nuxt服务端渲染Nuxt的路由配置和参数传递二级目录三级目录Nuxt的路由配置和参数传递二级目录三级目录
2020-10-22 20:57:56
116
原创 普歌-码上鸿鹄团队-Nuxt框架服务器端渲染（一）
Nuxt框架服务器端渲染参考地址Nuxt 框架安装-开发-打包-环境目录结构分析生命周期参考地址参考地址: Nuxt.js.Nuxt 框架安装-开发-打包-环境初始化Nuxt模板npx create-nuxt-app .安装完成输入运行启动命令 npm run dev输入打包命令 npm run build npm run start目录结构分析生命周期在服务器端执行按如下顺序执行这三个钩子asyncDatabeforeCreatecreated在客户
2020-10-21 21:34:25
177
1
原创 普歌-码上鸿鹄团队-vuex基本用法总结
vuex基本用法总结基本使用安装vuex的依赖包导入vuex包创建store对象将store对象挂载到vue实例中核心概念StateMutation可在触发mutations时传递参数：ActionGetter基本使用安装vuex的依赖包npm install vuex -save导入vuex包import Vuex from 'vue'Vue.use(vuex)创建store对象const store = new Vuex.Store({//state 中存放的就是全局共享的数据s
2020-10-07 17:51:20
143
原创 普歌-码上鸿鹄团队-Vscode克隆项目
Vscode克隆项目新建空项目文件进入空项目文件打开Vscode在左侧栏打开源代码管理点击初始化存储库生成git本地仓库点击右上角...选择克隆复制git仓库地址到Vscode克隆框生成项目文件即可完成下载依赖新建空项目文件进入空项目文件打开Vscode在左侧栏打开源代码管理点击初始化存储库生成git本地仓库点击右上角…选择克隆复制git仓库地址到Vscode克隆框生成项目文件即可完成下载依赖用Vscode打开项目文件运行npm install参考: Vscode
2020-09-21 19:54:14
108
原创 普歌-码上鸿鹄团队-Vue的环境搭建、项目创建及项目运行
Vue的环境搭建、项目创建及项目运行1.搭建Vue环境node.js的安装cnpm的安装vue-cli的安装快速创建一个基于webpack的项目框架运行一个已经存在的项目参考: vue.js.1.搭建Vue环境Vue运行环境的搭建需要具备的东西：node.js环境：npm包管理器cnpm：npm的淘宝镜像vue-cli：脚手架构建工具node.js的安装note：npm包管理器是集成在node中的，安装了node也就有了npm，输入npm -v命令，会显示npm的版本信息。cnpm的
2020-09-20 12:34:44
157
原创 普歌-码上鸿鹄团队-Git如何在GitHub/码云上建立分支，合并，删除
Git如何在GitHub/码云上建立分支，合并，删除git常用简单命令以下name可更换为自定义名称查看分支：git branch创建分支：git branch name切换分支：git checkout name创建+切换分支：git checkout -b name合并某分支到当前分支：git merge name删除分支：git branch -d name删除远程(GitHub/码云)分支：git push --delete origin name初始化版本库：git init
2020-09-18 22:19:59
125
原创 普歌-码上鸿鹄团队-Vue项目增删改查功能整理
Vue项目增删改查功能整理增加功能删除功能更改功能查询功能增加功能v-model绑定的数据为input.xxx<!--提示框--><el-button class="btnAdd" type="primary" @click="dialogVisible = true">新增自提点</el-button><el-dialog title="新增自提点：" :visible.sync="dialogVisible" width="35%" :before-c
2020-09-17 19:38:36
105
原创 普歌-码上鸿鹄团队-Vscode 快捷键及小技巧
VsCode快捷键及小技巧当前文件内搜索，直接按「Ctrl + F」，可直接填写搜索内容，界面如下：当选中文本时直接按「Ctrl + D」，可直接同时选中其他相同文本（按一次 ‘D’，选中一个，可按住不放），可进行同时编辑，界面如下：「Ctrl + G」行数跳转当前文件内按「Ctrl + E」,输入文件名可快速打开其他文件「F2」重命名一个变量选中一个变量，然后按F2，弹出一个小窗口，在里面输入内容后按回车，所有该变量都会被重命名。（注意：在js文件中，如果这个变量没
2020-09-15 21:17:27
96
原创 普歌-码上鸿鹄团队-Vscode 代码格式化整理
vs code 代码格式化整理1、代码格式化为eslint风格2、HTML格式化代码缩进vs code格式化代码的快捷键如下： (来源地址)On Windows Shift + Alt + FOn Mac Shift + Option + FOn Ubuntu Ctrl + Shift + I1、代码格式化为eslint风格链接: (安装插件参考这里)需要插件：eslint在设置中添加："eslint.autoFixOnSave": true,"eslint.validat
2020-09-15 21:00:17
102
原创 普歌-码上鸿鹄团队-简单使用git和GitHub（三）
简单使用git和GitHub（三）git版本回退git撤销修改git查看工作区和版本库里面最新版本的区别git rm删除文件git版本回退参考: https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/0013744142037508cf42e51debf49668810645e02887691000.git 的版本回退操作步骤git log 查看提交记录git log从提交记录里面
2020-09-13 21:26:28
72
原创 普歌-码上鸿鹄团队- 简单使用Git与github(二)
简单Git与github(二)Create New RepositoryClone Existing RepositoryOpen Existing RepositoryClone Existing Repository把GitHub上的代码clone到本地，“Git GUI Here”选择路径，如下图：增加远程代码仓库选择Remote->add添加远程服务器，远程服务器有两种填写方式，填写https地址或ssh地址。http地址输入你的github帐户和密码，这种方
2020-09-12 18:03:12
302
原创 普歌-码上鸿鹄团队-简单使用Git和GitHub（一）
简单使用Git与github（一）参考: https://my.oschina.net/bxxfighting/blog/378196.- 条件：在GitHub注册有一个账号，自己电脑安装有git。GitHub没有的账号的同学自己去注册：https://github.com/git下载地址：https://git-scm.com/download使用git指令管理配置git点击“Git Bash Here”进行配置。输入ssh-keygen –t rsa –C “邮箱地址”,
2020-09-11 23:18:02
131
原创 普歌—码上鸿鹄团队 winSCP和Xshell 基本配置用法
链接: Nginx安装配置.打开安装配置网址按照上面的命令顺序一次在Xshell上依次运行在winSCP新建文件目录在winSCP导入项目的目录打开下面文件配置路径配置路径修改代码位置1.修改为自己的域名或公用ip地址2.删除/app3.删除/ /之间的空格导入项目后运行其他命令查看是否正常[root@bogon conf]# /usr/local/webserver/nginx/sbin/ngin正常运行情况最后在浏览器搜索自己的域名或公用ip地址...
2020-09-06 21:45:37
110
原创 普歌-码上鸿鹄团队 vue.js(3)
vue基础 3十一. 生命周期keep-alive:动态组件nextTick十二. 自定义指令二级目录二级目录二级目录二级目录十一. 生命周期keep-alive:动态组件当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 <div id="app"> <button @click="comp=(comp==='my-a'?'my-b':'my-a')">实现组件切换</button>
2020-08-19 14:13:41
234
原创 普歌-码上鸿鹄团队 vue.js(2)
vue.js 基础 2九. 数据请求(1) vue-resource请求(2) fetch请求（规范）(3) axios请求(1)组件化(2)组件创建组件：全局注册：简便写法：局部注册：简便写法：templateis切换(3)过滤器1.全局定义2.局部定义(5) 组件之间的通信props传递数据prop验证匿名插槽具名插槽v-slot在使用时，需要在template标签内，这点大家要注意接受props的具名槽口transition过渡(1)单元素/组件过渡(2)多个元素的过渡列表过渡（设置key）过渡模式
2020-08-19 09:46:43
135
原创 普歌-码上鸿鹄团队 vue.js(1)
vue.js基础一.模板语法(1) 插值(2) 指令(3) 缩写二.class与style(1) 绑定HTML Class(2) 绑定内联样式三. 条件渲染一.模板语法(1) 插值a.文本 {{ }} 声明一条数据，然后用特殊的模板语法将其渲染出来（声明式渲染）let vm = new Vue({ //vue实例的配置项 el:"#app",//指代挂载点 data:{ //vue所管理的数据 msg2:`&l
2020-08-18 20:29:02
232
原创 普歌-码上鸿鹄团队 $Ajax方法
$Ajax方法详解项目Valueurl:要求为String类型的参数，（默认为当前页地址）发送请求的地址。type:要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。timeout:要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。async:要求为Boolean类型的参数，默认设置为true，所有
2020-08-17 16:10:14
108
原创 普歌-码上鸿鹄团队 Ajax的三种实现方式
jQuery的Ajax实现load方法1 实现load方法中只有url参数的效果load(url)2 load方法中带三个参数 url data function第一个参数 url：表示请求路径第二个参数 传递数据第三个参数 接收到servlet返回的相关的数据，里面有三个数据值第一个是 servlet返回内容第二个是 状态码描述 success第三个是 XMLHttpRequest对象$.get()发送get请求$.post()$.Ajax()发送异步操作常用的
2020-08-15 13:33:55
150
原创 普歌-码上鸿鹄团队Ajax入门基础
Ajax基础Ajax概述Ajax应用场景Ajax运行原理及实现Ajax运行原理Ajax的实现步骤服务器端响应数据的格式请求参数传递请求报文请求参数的格式获取服务端的响应Ajax状态码onreadystatechange 事件两种获取服务器端相应方式的区别Ajax错误处理低版本IE浏览器的缓存问题Ajax异步编程Ajax封装Ajax概述它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。Ajax应用场景页面上拉加载更多数据列表数据无刷新分页表单项离
2020-08-08 21:33:11
275
5
原创 普歌-码上鸿鹄团队node.js从零开始关键知识点梳理
NodeJs基础Node安装环境首先，我们参考官方的用例构建 http 服务，首先引入http模块，如下构建基础服务：/**request 获取客户端传来的信息response 给客户端响应信息*/http.createServer(function (request, response) {//设置响应头response.writeHead(200, { “Content-Type”: “text/plain” });//表示给我们页面上输出一句话并且结束响应response.e
2020-07-22 21:16:29
123
原创 普歌-码上鸿鹄团队jQuery关键内容复习总结
jQuery的关键内容复习总结jQuery关键内容复习总结jQuery插件的基本运用jQuery和Dom对象的不同使用方法和不同性质jQuery选择器内容总结jQuery筛选择器
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人