- 博客(44)
- 收藏
- 关注
RSS订阅转载 记一次jquery: select下拉框默认设置选中项（利用数据回显）
1. 用selected属性默认增加选中项：<select name="" id=""> <option value="1">主航线</option> <option value="2" selected>备航线</option></select> -->2.根据后台返回值进行回显，设置选中项（假设后台返回被选中的下拉框数据为optionType为2）❤ 法一参考：关于select下拉框的数据回显.
2022-05-11 09:58:16
9965
原创 html单选按钮默认选中VSreact单选按钮默认选中
html单选按钮默认选中：添加一个checked属性<input type="radio" name="radio" value="1">单选1<input type="radio" name="radio" value="2" checked>单选2<input type="radio" name="radio" value="3">单选3<input type="radio" name="radio" value="4">单选4reac
2022-04-25 14:42:23
2771
原创 npm install安装失败，报错记录之The operation was rejected by your operating system.
今天在执行npm install的时候一直报如下错误：npm ERR! code EPERMnpm ERR! syscall renamenpm ERR! path F:\Demo Practise\一些小demo练习\vue练习\vue3\vue3-demo\node_modules\@vue\cli-servicenpm ERR! dest F:\Demo Practise\一些小demo练习\vue练习\vue3\vue3-demo\node_modules\@vue\.cli-serv.
2022-03-30 15:03:35
18173
10
原创 如何查看vue版本和vue/cli的版本
经常有人以为vue -V是查看vue的版本，但其实不是，一开始自己迷迷糊糊也以为是，后来查文档之后才知道正确答案，特此在这里总结一下，那么这条博客就当是开启学习vue3之路的第一条笔记叭~如果查看vue版本和vue/cli脚手架的版本，这里共有两种方式：一、命令行vue版本npm list vuevue/cli版本vue -V部分截图：二、package.json文件查看package.json文件相关依赖版本号：...
2022-03-29 11:55:08
26971
翻译 配置离线地图的方法
前半部分文章参考：Mapbox本地离线部署 - 简书一 离线部署说明从官网抄一个HelloWorld的例子，完整代码如下：<!DOCTYPE html><html><head> <meta charset='utf-8' /> <title>Display a map</title> <meta name='viewport' content='initial-scale=1,maxi..
2022-03-16 11:59:56
2944
原创 message提示框的三种显示方式
message提示框的三种显示方式 在store.js中使用封装的message提示组件 /*提示信息封装组件*/export function messageTips (message, str, type) { if (str !== '') { message.destroy() message.config({ top: document.documentElement.clientHeight - 200, duration...
2022-03-16 11:45:12
734
转载 HTTP请求中的传参方式form data、 request payload、query string parameters三者对比
目录一、GET请求Query String Parameters二、POST请求2.1 FormData2.2 Request Payload补充：Post请求总结：HTTP请求中不同的请求方式和设置不同的Content-Type时，参数传递的方式会不一样，以下对这三种形式做个总结：Query String Parameters、Form Data、Request Payload；一、GET请求Query String ParametersGET请求时，参数会
2021-09-10 11:36:10
8590
1
原创 2021-09-09 黑马移动端头条项目-day10
目录小爱同学模块一、WebSocket介绍二、使用原生WebSocket（了解）三、Socket.IO(了解)3.1介绍3.2基本使用3.3总结四、小爱同学4.1准备4.2布局4.3建立连接4.4收发消息并展示消息列表4.5 消息列表自动滚动到底部功能优化补充：1.组件缓存1.1介绍1.2使用keep-alive缓存组件1.3解决缓存带来的滚动问题2.处理token过期 ***3.登录成功跳转回原来...
2021-09-09 17:50:22
845
原创 2021-09-08 黑马移动端头条项目-day09
目录编辑用户资料一、创建组件并配置路由二、页面布局三、展示用户信息四、修改昵称五、修改性别六、修改生日七、修改头像7.1图片上传预览7.2头像裁切7.3保存更新编辑用户资料一、创建组件并配置路由创建views/user-profile/index.vue路由配置// 路由配置 { path: '/user/profile', name: 'user-profile', component: () => ...
2021-09-09 09:42:11
481
原创 2021-09-07 黑马移动端头条项目-day08
目录文章评论模块-P136一、展示文件评论列表1.1准备组件1.2获取数据并展示1.3文章评论项二、评论点赞三、发布文章评论3.1准备弹出层3.2封装组件3.3请求发布3.4发布成功处理四、评论回复4.1准备回复弹出层4.2处理点击回复按钮4.3传递当前点击回复的评论项4.4展示评论回复列表4.5解决弹出层中组件内容不更新问题4.6发布回复文章评论模块-P136一、展示文件评论列表1....
2021-09-08 14:05:19
718
原创 2021-09-06 黑马移动端头条项目-day07
文章详情一、创建组件并配置动态路由// 配置动态路由，文章详情 { path: '/article/:articleId', name: 'article', component: () => import('@/views/article/') }在components/article-item.vue列表项组件中添加路由导航 to=" "跳转至对应页面在article/index.vue组件中获取动态路由参数：方式一：th...
2021-09-07 15:08:12
518
2
原创 vue.js 黑马移动端头条项目API
目录一、查询所有已实现接口基本信息接口描述：请求参数返回数据二、用户-刷新用户token基本信息接口描述：请求参数返回数据一、查询所有已实现接口基本信息Path：/mp/Method：GET接口描述：线上接口地址http://ttapi.research.itcast.cn/mp/返回已上线接口地址，形如：{ "user.Authorization": "/v1_0/authorizations", "user...
2021-09-06 14:46:53
1753
原创 2021-09-03 黑马移动端头条项目-day06
目录文章搜索模块一、创建组件并配置路由二、页面布局三、处理页面显示状态四、搜索联想建议4.1基本功能4.2防抖优化 ***4.3搜索关键字高亮五、搜索结果六、搜索历史记录6.1 添加历史记录6.2展示历史记录6.3删除历史记录6.4数据持久化文章搜索模块一、创建组件并配置路由1.创建src/views/search/index.vue2.然后把搜索页面的路由配置到根组件路由（一级路由）{ path: '/s...
2021-09-06 10:35:22
675
原创 2021-09-02 黑马移动端头条项目-day05
首页-频道编辑一、处理页面弹出层在home/index.vue组件页面中使用van-popup组件制作弹出层页面<van-popup v-model="isChannelEditShow" position="bottom" class="channel-edit-popup" closeable close-icon-position="top-right" get-container="body" s
2021-09-03 10:18:40
682
原创 2021-09-01 黑马移动端头条项目-day04
目录首页-文章列表一、页面布局二、频道列表三、文章列表四、文章列表项首页-文章列表一、页面布局1.导航栏NavBar 导航栏2.文章频道列表 Tab标签页二、频道列表1.联调接口-获取文章频道列表数据，在utils/user.js中封装好请求方法// 获取文章频道export const getUserChannels = () => { return request({ method: 'GET', url: ...
2021-09-01 17:58:50
594
原创 2021-08-31 黑马移动端头条项目-day03
”我的“模块一、页面布局 1.1未登录头部状态 1.2已登录头部 1.3宫格导航<van-grid :column-num="2"> <!-- 使用组件提供的图标 --> <!-- <van-grid-item icon="star-o" text="文字" /> <van-grid-item icon="browsing-history-o" text=...
2021-09-01 09:36:12
662
原创 2021-08-30 黑马移动端头条项目-day02
目录登录注册准备实现基本登录功能登录状态提示表单验证验证码处理登录注册准备创建组件并配置路由布局结构布局样式实现基本登录功能登录状态提示表单验证验证码处理验证手机号使用倒计时组件发送验证码...
2021-08-30 17:56:57
1257
1
原创 vue 用户点击不同的导航菜单，显示对应菜单所展示的区域
情景：导航栏在一个单独组件NavigationBar/index.vue，中间的内容区也是一个单独组件ContentComponents/index.vue，但这个组件都是属于Home子组件，NavigationBar和ContentComponents属于兄弟级组件需求：用户通过点击NavigationBar组件里每一个导航菜单，把所点击的导航菜单名称value和类型type（该类型可控制中间的内容区划分的是一半区域，整个区域或默认初始区域）传给ContentComponents组件，Co
2021-08-27 09:55:25
2452
原创 gulp自动化构建工具的使用
安装：1.下载node.js2.启动node.js window开始键-nodejs文件夹-prompt3.全局安装命令行安装 npm install gulp -g，查看版本gulp -v4.项目开发安装 我的项目文件夹结构：F:\gulpProject全局安装完gulp查看是否安装成功，gulp -v进入gulpProject文件夹执行npm init 一路回车生成package...
2021-08-26 13:50:37
128
原创 2021-08-25 黑马移动端头条项目-day01
目录使用vue-cli创建项目加入git版本管理调整初始目录结构导入图片素材引入Vant组件库*移动端Rem适配封装请求模块使用vue-cli创建项目配置一些预设选项，参考有道云笔记的步骤：加入git版本管理新建仓库 检查日志是否有本地仓库 git log，下方已有仓库了在本地仓库中添加了一个远程仓库地址// 添加了一个远程仓库地址git remote add origin https://gitee.com/panxia...
2021-08-26 13:48:54
515
原创 vue 中使用vue-quill-editor富文本编辑器
使用过的类似编辑器，参考这篇博客：1.安装：在vue可视化面板中安装-》依赖-》查找插件-》安装使用npm命令行进行安装npm install vue-quill-editor --save2.注册：// 导入富文本编辑器import VueQuillEditor from 'vue-quill-editor'// 导入富文本编辑器样式import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.cs
2021-08-24 15:09:22
437
原创 设置导航路由
业务：实现导航路由的切换（采用路由跳转，不采用a链接跳转）。用户在点击”农业资讯“导航时，地址栏会有相应的url地址，若将该地址复制发送给别人，别人通过该地址访问能够显示对应的导航页如：Url地址为实时气象与农情http://localhost:8082/AgrometeorologyPage/RealMeteorologyAndAgricultural复制发送，新页签打开：效果如下 ：具体实现：1.使用ant design vue中的menu导航组件渲染页面 ..
2021-08-24 09:25:19
658
转载 设置CSS: body{font-size: 62.5%；}的原因是什么？
1.如何根据不同设备的分辨率设置字体。在pc端想要做一个全屏适配的项目，但得根据分辨率的来随着放大缩小。移动端用过flexible来解决，不知道在pc端怎么处理比较好.字体的单位使用rem（root element根元素）1rem就是根元素的font-size的值。然后使用多媒体查询@media screen and （min-width=value）{html{font-size：value px}}直接设置根元素的字体大小，已达到自己所需。举栗：html{font-size:625%
2021-08-20 17:49:18
1149
原创 vue中使用wangeditor富文本编辑器
需要实现的效果，见红色框，用户可以对文本进行各种各样的编辑：实现：1.这里我安装的wangeditor插件是2.x版本的，因此借助下方手册进行开发：wangeditor2使用手册：https://www.kancloud.cn/wangfupeng/wangeditor2/1139662.安装npm install wangeditor@2.1.23 --save3.使用<div id="websiteEditorElem" style="height: 250p..
2021-08-20 17:15:02
549
原创 vue slot使用（提取页面公共部分）
页面中有多处的标题是一样的，因此可以使用slot插槽单独写在一个组件中，其他页分别引入步骤：1.写公共部分的组件页面，HeadSlot.vue<template> <div class="head"> <p> <slot></slot> </p> <img v-show="imgShow" :src="imgUrl" alt="" /> </div>.
2021-08-10 10:55:45
593
翻译 页面布局方式
网址：https://www.bilibili.com/video/BV1r64y1T7J8?p=236rem布局em：根据当前元素是否有font-size，若没有，则1em等于父元素的font-size rem：根元素+em，与根元素html的font-size有关 vw/vh：把屏幕分成100份，1vw等于屏幕宽的1%用rem实现自适应原理：动态设置font-size，即在小屏幕下的html根元素设置小的font-size，大屏幕下设置大的font-size如何动态设置font-
2021-07-28 15:38:17
104
转载 vue实时显示当前时间且转化为“yyyy-MM-dd hh:mm:ss”格式
methods:{ //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化 dateFormat(time) { var date=new Date(time); var year=date.getFullYear(); /* 在日期格式中，月份是从0开始的，因此要加0 * 使用三元表达式在...
2021-07-28 10:32:53
1709
原创 vue 组件使用vuex中的mutations方法报错，报unknown mutation type的错误
报错：【vuex】 unknown mutation type: mutationvuex如果分为几个模块，方法是在某个模块中的话，如果直接在组件中通过this.$store.commit('方法名')是获取不到的，必须要在前面加上模块名，如this.$store.commit('模块名/方法名')才可以获取到。在项目当中，我当前组件的vuex写在store/DataMonitorStore/DataMonitorStore.js里的，所以这里必须加上模块名。当前组件是sliderBar.vue
2021-07-27 10:49:40
13042
1
原创 vue项目将所有px单位在浏览器显示时是rem
效果：步骤：1.安装npm i postcss-pxtorem@5.1.1 22.保存postcss.config.js文件postcss.config.js内容：module.exports = { plugins: { autoprefixer: { browsers: ['Android >= 4.0', 'iOS >= 7'] }, 'postcss-pxtorem': { ...
2021-07-22 18:01:25
378
转载 js 将日期格式转换为数字格式
业务需求：通常我们获得的时间格式是这样的：2021-07-1609:00:00但后台要求将2021-07-1609:00:00转换为数字形式作为url参数进行传值给后端开始的时候并没有注意到时间的传值，一直用的是2021-07-1609:00:00传给后台，控制台就开始报错了调用changeTime()方法 // 开启按钮，单点查询 getPoint() { debugger // this.timevalue...
2021-07-16 10:51:58
4523
原创 vue 配置路由导航守卫
业务需求：当一个用户成功登录系统之后，不同的用户都有各自的菜单权限，不同角色用户登录会显示该用户对应的可访问的权限菜单1.新建（注册）一个用户，会默认分配一个角色2.回到登录页，登录新（注册）的用户 ---> token3.渲染home组件的侧边栏时，使用header头部中的token4.发送获取菜单的请求时，也会使用header头部中的token导航守卫：1.如果用户没有正确登录，则不让跳转到主页2.在路由配置生效之前，统一判断token3.路由，导航，守卫4
2021-07-15 18:21:14
581
原创 vue 对系统管理模块下的用户管理，角色管理的实现之个人总结
参考网址：https://www.bilibili.com/video/BV15y4y1B7gA?p=481.获取权限列表并在页面上渲染展示postman数据结构：业务需求：用户在点击“修改”按钮时获取到所有权限列表的值。// 修改按钮的点击事件<template slot="operation" slot-scope="text, record"> <a @click="editShow(record)">修改</a></tem
2021-07-15 18:20:11
1851
原创 vue 不同用户登录系统拥有不同查看菜单导航的权限
业务需求：不同的登录用户进入系统后可以查看不同的菜单权限比如：admin用户进入系统有四个权限：预报产品、预警产品、防灾减灾、系统管理，如下图：而aaaa用户进入系统只有三个查看权限：预报产品、预警产品、系统管理，如下图：具体实现：1.postman提供的接口数据形式如下。当然期间我也参考了其他的项目，在别的项目中是单独写了一个接口，在这个项目中是把该用户所拥有的权限直接和登录接口写一起了。2.简要介绍下项目的结构情况，导航栏部分我写在了header.vue里，用户登..
2021-07-15 17:16:56
4392
原创 vue 根据后台提供的值判断登录、未登录状态
接口中的数据情况如下：该功能实现后的效果：表格组件的列名columns中operateType字段是对应页面上的操作类型，该字段的dataIndex要与接口的字段值保持一致一开始我的想法是给dataIndex用个三目运算符：//dataIndex: 'operateType ==1 ? '登录' : '未登录'',，发现并不能这样做，因为dataIndex是接收接口的字段值 columns: [ { ..
2021-07-13 17:08:41
1172
原创 antd design vue分页组件
我们在使用分页组件的时候可以有两种方法：第一种是直接用表格()的自定义:pagination属性最方便；如下图所示：第二种是分页组件这里我总结的是第二种方法的使用，由于是 Ant Design Vue 的组件，所以必须安装Ant Design Vue才能使用，具体的安装请看官网~1.添加分页组件 <div class="seaTable"> <a-table :columns="columns" :dat
2021-07-13 10:24:57
2472
3
原创 vue 用户列表，请求接口中数据并渲染页面，分页
参考：https://www.bilibili.com/video/BV15y4y1B7gA?p=35&spm_id_from=pageDriver用户列表-渲染数据-一般数据1.接口请求数据格式，get方式，传入参数：page,rows2.初始化定义变量3.联调接口// 1.created() // 2.methods: 发送请求 // 3.接口文档中除了登录之外的所有请求都需要进行授权--设置请...
2021-07-13 09:51:43
2343
原创 vue 注册页面的实现
一、登录组件表单的数据绑定1.为a-form-model加上 :model="form"属性进行数据绑定在a-form-model表单上填写的数据自动同步到form对象上 :model="form"在当前组件的行为区有data数据，在data数据里面设置一个form对象，即为表单的数据绑定对象2.为每一个表单项的文本输入框通过v-model属性绑定form对象上具体的属性中为了看到测试效果，我在这里先在form对象初始化一个值，用户在页面上可以看到以用户名和密码等...
2021-07-12 13:54:16
2757
原创 antd design vue 日期组件汉化
使用antd design vue组件库时，一些默认提示为英文，要将英文汉化，以DatePicker为例这里未把Today，select time等汉化的效果：后来查找了很多文档，按照文档把其中一个日期选择框的Today给汉化了，具体的步骤如下：1.引入 import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn');2.在data中初始化定义，并把自己想汉化的内容重新设置
2021-07-08 18:52:38
4388
3
翻译 vue 登录与退出的实现
一、登录组件表单的数据绑定1.为a-form-model加上 :model="form"属性进行数据绑定在a-form-model表单上填写的数据自动同步到form对象上 :model="form"在当前组件的行为区有data数据，在data数据里面设置一个form对象，即为表单的数据绑定对象2.为每一个表单项的文本输入框通过v-model属性绑定form对象上具体的属性中为了看到测试效果，我在这里先在form对象初始化一个值，用户在页面上可以看到以用户名和密码，但是密码一般
2021-07-08 14:15:44
1634
原创 vue cesium地图分屏联动
根据项目要求：用户在点击切换下方卡片式的“时次”时候，下方左侧和右侧的地图可以进行联动，即用户点击、放大左侧时，右侧会有同等操作具体的实现：在components组件中添加index.vue文件，该组件作为子组件，里面是一些地图的初始化操作使用props属性去接收父组件rainCheckContent.vue中的data和container值写initViewer方法，并在页面加载时mounted要调用该方法根据小哥哥提供的cesium双屏联动总结了下：1.实现思路：...
2021-07-07 19:43:53
1555
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人