- 博客(75)
- 收藏
- 关注
RSS订阅原创 自己写的组件中使用v-model双向绑定
多余代码已去除，vue中组件传值具有单向数据流的特性，所以想实现双向绑定，则需要在子组件中重新定义一个变量timeStr。这里的时间选择表单是我写的一个组件，我想用v-model获取到实时的ref值。
2024-04-09 16:02:44
331
2
原创 基于vue-advanced-chat组件自义定聊天（socket.io+vue2）
通过上一篇文章我们已经在vue-advanced-chat中替换掉原有的firebase，用socket.io简单的实现了聊天功能。现在需要自义定该组件，改造成我们想要的样子：先将比较重要的几块提取出来。
2023-12-21 15:23:52
1181
原创 vue-advanced-chat使用指南（socket.io+node+vue实现聊天）
messageSelectionActions: [{ name: 'deleteMessages', title: '你确定要删除嘛？' }]
2023-11-02 11:22:17
1120
原创 日常开发问题汇总
发版时出现的问题：点击报错或提交没有反应排查：点击保存后控制台network没有发起请求，定位问题在前端代码，查看代码发现，代码执行到这一行就没往下执行了这个结果匪夷所思，细看代码后发现是下面代码的问题：然后重新打了个有log信息的生产包重新发版测试：点击保存后发现是下面的这几个table组件报的错，证实了问题最后重新分析代码：这几个table组件都加了key值，每次执行更新信息的操作就会刷新组件，导致保存时第一次给组件的数据被重置，保存调用的还是原来的组件而报错。
2023-10-26 14:45:47
139
原创 websocket+node+vite(vue)实现一个简单的聊天
先在根目录建一个server文件夹，在下面建一个index.js文件(node需要js文件才可以执行，别建ts文件)，然后执行以下两条命令。//因为从后台接收到的数据是blob类型的值，所以转换一下。开启两个窗口就可以测试了,可以基于此代码优化各种细节。执行node index.js。新增一个登录页和聊天室页面。在测试之前需启动后台。
2023-10-16 10:09:29
462
原创 城市级联选择优化：H5使用的vant，后管使用Element
H5使用的vant，后管使用Element，两个组件所使用的的数据源不一样，导致两端的级联选择问题。因为element选择完地址后返回的地址格式为一个数组：结构类似于。h5选择地址后存为两个字段：birthProv, birthCity。解决方案 ：将vant的资源库处理为element需要的数据。所以还需要封装两个函数来转换code和地址中文。现在就可以实现h5和后管同时起作用了！，而且数据库存的值为一个中文字符。
2023-05-10 11:35:57
694
1
原创 前端面试题合集
原型的本质就是一个对象。当我们在创建一个构造函数之后，这个函数会默认带上一个prototype属性，而这个属性的值就指向这个函数的原型对象。当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止（最顶层就是Object.prototype的原型，值为null）。所以通过原型一层层相互关联的链状结构就称为原型链。闭包就是能够读取其他函数内部变量的函数。在本质上，闭包就是将函数内部和外部连接起来的一座桥梁。
2023-02-23 18:21:46
608
原创 用原生js封装的思想写一个购物车
2 准备数据和实现简单的逻辑封装该步骤需要实现能在控制台操作购物车的所有的功能（增加、减少商品数量，计算价格等）以下为控制台控制购物车的基本功能。通过前面两步，我们已经实现了能够在控制台进行操作购物车的逻辑。但是这个界面是需要交给用户去使用的，我们还需要将页面和第二步的逻辑结合在一起。
2023-01-31 16:15:30
129
原创 用electron+vue+ts开发桌面应用
安装electron插件这里安装插件会包如下错：在终端执行：配置参数在vite.config.ts中导入刚才引入的electron插件并配置入口文件：在项目根目录创建electron目录和index.ts文件index.ts现在执行会报错，需要将将pakege.json中的type去掉并增加main再次执行即可打开桌面程序安装插件package.json中build信息更改为再对electron目录下的index.ts修改如下先安装path依赖index.ts再在packag
2022-12-08 11:39:21
669
原创 Vite+Vue3+TS项目创建及基本环境搭建
vscode-文件-首选项-配置用户代码片段-vue.json添加如下代码即可快速创建vue模板{
2022-11-28 17:22:54
1436
原创 JeecgBoot低代码平台+Vue3之新建vue页面的路由配置及权限配置
1.克隆项目安装依赖并将项目跑起来2.查找到需要添加的路由文件3.找到路由文件添加新的模块4.编写新的页面5.在系统管理->菜单管理->里面找到同级模块的配置,然后新建一个跟他类似的配置。同级菜单：新增菜单：增加完成后就可以在同级菜单看到了6.在系统管理->角色管理里面增加用户的权限，这样用户就可以看到该页面了。刷新一下页面就可以看到新增的vue页面了！
2022-06-01 17:30:42
3795
4
原创 JavaScript高级应用
1.原型链构造函数创建一个对象function Dog() {}var dog = new Dog();dog.name = '旺财'console.log(dog);//Dog { name: '旺财' }prototype每个函数都有一个 prototype 属性function Dog() {}//注意：prototype是函数才会有的属性Dog.prototype.name = '小红'var dog1 = new Dog();var dog2 = new Dog(
2022-03-15 18:21:59
686
原创 vue工程化管理axios
1.创建vue项目并配置安装json-server插件npm install json-server -g安装完成后在vue项目的根目录添加一个db.json文件，并在其中加入json数据进入vue项目目录并执行json-server db.json在游览器输入对应api地址就可以拿到相应的数据了2.工程化管理axios文件axios的基本使用给项目安装axios插件npm install --save axios vue-axios引入axiosimport Vue fr
2022-02-14 15:43:37
1706
原创 vue-rouer的基本使用及路由文件工程化管理
测试环境搭建vue-cli搭建一个路由项目需求一实现未登录拦截到登录界面，登录后才可以访问其他界面目录结构：index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [{ path: '/', name: 'Home', comp
2022-02-11 16:02:55
521
原创 vue2.0中组件传值的几种方式
搭建好测试环境app.vue<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> <child></child> </div></template><script>i
2022-02-10 13:36:30
2060
原创 TypeScript入门基础
1.TypeScript安装npm install -g typescript检测ts是否安装成功tsc -v新建一个文件夹用vscode打开并创建一个ts文件因为游览器不支持ts和es6语法，所以需要有一个编译的过程将ts转换成es5语法设置自动编译新建一个文件夹testinit并在cmd中进入这个目录并键入tsc --init命令在该目录就生成了一个tsconfig.json的文件修改该配置文件的outDir部分我这里报了错，因为我的vscode是有用户权限
2021-12-23 14:50:47
1221
原创 vue2.0基础入门
VUE2.02.1入门1 什么是vue？构建用户界面用vue往html页面中填充数据，非常方便框架框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能要学习vue，就是在学习vue框架中规定的用法vue的指令、组件（是对UI结构的复用）、路由、Vuex只有上面罗列的内容掌握以后，才有开发vue项目的能力2 vue特性数据驱动视图双向数据绑定注意：这两个特性的底层原理是MVVM2.1数据驱动视图数据的变化会驱动视图自动更新好处：程序员
2021-11-23 14:34:48
1286
原创 webpack的基本使用知识点总结
webpack1.1 前端工程化1.2 简介1.3 基本使用需求：实现各行换色步骤：1.环境配置1.创建空目录进入目录，输入cmd并回车2.输入命令3.新建src文件4.初始化目录结构5.打开终端npm 安装jQuery出错：解决： 以管理员方式打开cmd重新装安装成功后:2.编码以上准备就绪后开始编码：//1.使用ES6导入语法，导入jqimport $ from 'jquery'//2.定义jq的入口文件$(function
2021-11-23 14:31:39
1492
3
原创 HTML、CSS（补充知识点）
1.超链接与锚点1.a标签代表超级链接2.通过href属性指定要跳转的目的链接或者锚点设置href="#"，代表跳转到页面最顶部通过设置的id，跳转到指定id的位置3.通过target属性指定是否要在新窗口中打开目的链接，target="_self"，默认在当前窗口打开target="_blank"，在新窗口打开target="_parent" ，在父窗口打开target="_top"，使得文档载入包含这个超链接的窗口4.br{$}*100+tab可以快速生成100行
2021-11-23 14:26:30
383
原创 Node.js+Express+Vue+MySQL+axios的项目搭建
1 项目搭建创建vue项目之前需要先安装Node.js和MySQL数据库1.1 vue脚手架安装npm i vue -gnpm i @vue/cli -g//初始化vue项目vue create 项目名1.2 在创建好的项目中创建server文件夹在文件夹内创建这几个文件：新建api文件夹、db.js、index.js、sqlMap.js。（api文件存放相关api接口路径及方法，db.js配置相关数据库，index.js配置后端端口及api路由）index.jsconst u
2021-11-22 10:43:27
1664
1
原创 uni-app+uniCloud开发微信小程序之小功能实现思路(持续更新中...)
1.all页实现筛选显示数据需求：从uniCloud中获取数据渲染到界面上让课程按照课程预约数倒序排序点击每一项分类之后显示对应的课程信息并更改抽屉旁的文字渲染数据用到了unicloud-db组件，倒序排列直接设置属性orderby="appointment desc"<unicloud-db v-slot:default="{data, loading, error, options}" collection="starCourse" :where="fwhere" orderby
2021-11-17 15:12:18
5111
2
原创 Node.js中express框架的使用
1.入门1.1 简介Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站1.2 核心可以设置中间件来响应 HTTP 请求。定义了路由表用于执行不同的 HTTP 请求动作。可以通过向模板传递参数来动态渲染 HTML页面。1.3 安装依赖首先确定有正确安装好node和npm安装express局部安装 npm install --save
2021-11-17 10:29:28
1371
原创 uni-app+uniCloud开发微信小程序BUG总结（持续更新中...）
星空学堂starSchool1.项目搭建2021.11.1bug1(使用less)HbuilderX使用less报错在uni-app官网导入hx也失败解决办法：进入hx安装目录并在控制台执行npm installbug2（组件跳转）组件内使用路由跳转使用相对路径不能跳转，需要使用绝对路径bug3（tabbar1）多用户切换，根据进入的用户不同显示不同的tabbar，因为uni-app只在pages.json里面提供了一个tabbar，且只能写一个。所以要实现上述的效果，只能自义
2021-11-15 11:44:33
1829
原创 Node.js入门笔记整理
1.入门node是一个基于Chrome V8引擎的javascript运行环境，是运行在服务器端的javascript可以使用node搭建服务器，连接数据库。让前端开发人员走向后端开发。Node.js使用了一个事件驱动、非阻塞I/O口，使其轻量且高效Node的包管理工具npm,是全球最大的开源库生态系统1.1 简介1.2 安装检查是否安装好环境1.3 交互式解释器REPLNode 自带了交互式解释器，可以执行以下任务：读取 - 读取用户输入，解析输入了Javascript 数据结构并存
2021-11-11 14:29:22
2418
转载 分享几篇React写的比较好的笔记博客
分享几篇React写的比较好的笔记博客：https://note.youdao.com/s/FDMTDA8Vhttps://blog.csdn.net/Ronychen/article/details/114669364https://blog.csdn.net/zxf_CN/article/details/111425684React配置Lesshttps://www.cnblogs.com/cailijuan/p/13914948.html...
2021-11-03 09:54:28
223
1
原创 uni-app做多端小程序开发的基本项目搭建(二) ——云函数和文件上传的使用
1.前言通过上一篇文章，用uni-app的uniCloud云开发实现了简单的增删查改的操作，要做一个app项目，目前我可能还需要用到的功能有：选择图片上传到云存储，***使用云函数封装***等，本文主要介绍这两个功能的简单实现，其他更强大的API需要去查看官方文档再练习使用。本文还将简单的介绍使用HbuilderX的打包功能和将程序转为微信小程序的实现过程。2.选择图片上传到云存储新建一个页面，并在index.vue页面配置路由跳转，因为在app打包之后，进入app的默认界面是index页面&l
2021-10-29 20:35:29
770
原创 uni-app做多端小程序开发的基本项目搭建(一) ——使用uniCloud实现云开发的增删改查
1.预备知识现在有一个需求：需要编写一套代码，可以将app的内容发布在微信小程序上或者打包成一个apk的安装安装包。要完成这个需求，目前可以借助uni-app+HbuilderX来实现。在使用这个两个工具之前，需要掌握的知识有：必备知识：HTML,CSS的基本使用ES5,ES6语法Vue框架的使用微信小程序的语法锦上添花：CSS预处理计LESS/SCSS数据库的CRUD操作2.前期准备uni-app官网：https://uniapp.dcloud.io/官网可以下载到H
2021-10-29 19:01:36
2540
原创 微信小程序——云开发云函数的使用
1.前期准备新建一个文件夹作为本地云函数根目录2.创建、部署、使用云函数在这个根目录上点击右键->新建Node.js云函数修改index.js中的函数内容修改完成后需要点击addNum文件夹，右键->上传并部署当函数状态变为已部署之后就可以使用了testData(event){ wx.cloud.callFunction({ // 云函数名称 name: 'addNum', // 传给云函数的参数 data: {
2021-10-27 16:33:26
705
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人