![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习笔记
文章平均质量分 61
念衢
这个作者很懒,什么都没留下…
展开
-
使用Echarts实现项目数据可视化
1、安装插件,全局引入,页面布局结构如下图。 # echarts 底层依赖 ZRender(ZRender基于canvas),一个轻量级的二维绘制库 封装后端请求重点是地图注册以及数据,至于地图geo组件配置 ,参考官方debugg:南海诸岛不显示,国家主权问题,有点危险 ,如果隐藏还可以参考博文原创 2022-12-06 23:35:06 · 850 阅读 · 0 评论 -
表格数据方法、分页方法及组件的封装和分页组件的复用
1、数据获取与显示的通用方法封装 table.js2、数据转换指令方式: 服务方式: 查看请求后端接口:发现需要两个参数——当页数和每页条数 前端的方法是用公式计算,参考博文 这里用后端的方法:分页由后端完成,所以每次切换页面的数据条数和当前页码时,都要根据接口请求参数,发送请求。debug:总条数和数据页码不显示。 修改添加scss样式后: 在common文件夹下,新建Pagin.vue组件,把上一个页面与分页相关的代码复制过来,修改后如下:原创 2022-12-05 23:35:09 · 515 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅻ——信息管理页(增删改查封装)
在utils下新建table.js拷贝信息列表到信息管理页面,修改根节点的class命名为InfoLists,同时并改scss后,在信息管理页进行使用封装好的getData方法。原创 2022-12-03 01:12:24 · 811 阅读 · 0 评论 -
表单校验规则
使用element-ui的datePicker组件选择时间,传递的表单里用户的时间格式为:,所以这里value=“2022-11-02“校验规则:用户输入时间必须在的当前系统时间之后。1、系统时间如果不转换对象为string,就直接比较的话,结果不对2、因为系统月份是从0开始计算的, 所以获取到的系统的月份会比生活中的少1,所以获取的系统月份需要加一str;把str字符串根据“-”符号,将str字符串进行拆分成数组str.join("-");将str数组中的元素用“-”进行连接。原创 2022-11-28 16:46:29 · 470 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅺ——信息列表页(弹窗复用增改、CRUD前端基础实现)
因为需求发生了点变化,所以把之前的代码稍改一下,把之前的信息列表全复制到用户列表中,最后效果一样。调整一下页面元素布局和样式:按钮、图标等。调整后。原创 2022-11-27 01:20:53 · 904 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅹ——前端数据表格的删除、查找
1、拿到id或者行数据对象2、查看后端接口方法,写api方法,将操作连接上后端后端请求操作成功,但是前端数据表格未更新,最简单的一种方法数据删除后要重新获取数据===》依旧显示成功,但是前端数据表格未变化,排查后,看封装请求方法的api.js文件,发现:1、方法没有获取参数;原创 2022-11-24 23:00:33 · 1149 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅸ——数据表格渲染及处理+前端分页
在页面添加table表格,从element-ui官网查找,包括数据一起复制过来,查看显示没有问题后,把tableData清空为空数组。原创 2022-11-21 22:54:45 · 1723 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅷ——公用组件之面包屑
新建共用组件Breadcrumb.vue,从element-ui官网找组件。导入面包屑到Home.vue显示使用。原创 2022-11-21 21:54:13 · 334 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅶ——公用组件(Header+Footer+Menu)
components下新建文件夹common,新建三个组件:Header.vue Footer.vue Menu.vue从element-ui官网找到想要的组件,粗略写好后,挂载在主页Home.vue上,原创 2022-11-19 00:10:43 · 1061 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅵ——首页、登录页、404页面
1、为了方便起见,先将element-ui的使用改为全局引入的方式。2、写登陆页面:2.1、components文件夹下新建Login.vue2.2、从找需要的组件:+3、修改路由:启动项目(使用重定向)和输入http://localhost/login,进入的页面都是为登录页面运行结果:4、登录验证4.1 简易版,适用于小项目和简单的验证规则,实现:将验证规则直接写在html中当输入框失去焦点时,会自动进行表单校验4.2登录验证进阶版。原创 2022-11-17 23:02:03 · 3278 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅴ——axios使用与封装、配置路由和路由懒加载
如果不应用懒加载的话,很多页面都会打包到同一个js文件中,文件将会异常的大。造成进入首页时,需要加载的内容过多,时间过长,在浏览器中可能会出现短暂的空白页,从而降低用户体验,而运用路由懒加载是将各个模块分开打包,用户查看的时候再加载对应的模块,减少加载用时。2、在 main.js导入使用axios,因为是用的比较多,所以采用的是全局引入,挂载到原型的方式。实现2、: 使用Vue异步组件,修改router文件夹下的index.js文件为下。实现1、:修改router文件夹下的index.js文件为下。原创 2022-11-17 13:11:26 · 526 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅳ——图标库的使用
在main.js中引入。原创 2022-11-17 12:35:52 · 205 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅲ——使用CSS预处理器
使用(scss可以嵌套使用。在App.vue的style中进行引入使用。的scss改为less,两者语法通用的。重置之后:会更紧凑,看起来更舒服。原创 2022-11-17 12:26:53 · 190 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅱ——按需配置element-ui
①作为一个独立的模块进行引入,在项目下新建plugins文件夹,再新建element.js文件(更推荐)②直接在main.js文件进行引入。使用element-ui。原创 2022-11-17 11:54:29 · 273 阅读 · 0 评论 -
通用后台管理系统前端界面
##安装指定版本的vue脚手架工具 或者是已安装了,该命令则为使用4.5.15版本的vue/cli。2.1 效果:自动打开项目,终端输入“npm run serve”后自动弹出项目主页。③使用Vue Project Manager ,使用命令行输入。1.1 局部安装vue-cli 工具,方便不同版本进行切换。后续项目还可以看到使用的依赖、module,对启动速度等进行优化。局部安装vue-cli 4.5.15 和创建项目。###查看当前vue脚手架工具版本。会弹出vue项目托管器。原创 2022-11-16 22:44:39 · 1014 阅读 · 0 评论 -
vue3使用element-plus
1、下载包2、引入全局引入+挂载:引入记得有css文件(下载不下来可能是项目正在运行,先关掉)按需引入:先下载两个插件修改vue.config.js文件。原创 2022-11-16 16:40:05 · 3209 阅读 · 0 评论 -
vue3新特性 Ⅱ
▣ provide() / inject()实现嵌套组件之间的数据传递。以前外层只允许一个根节点,即最外层会包一个div,现在可以不用。在生命周期钩子前加上on来访问 并且需要保持小驼峰的命名方式,▣子组件中使用inject()获取上层传递过来的数据。▣父组件中使用provide()向下传递数据。(只能父组件向子组件传递数据,不能反向)▣只能在setup()函数中使用。原创 2022-11-15 22:37:00 · 2734 阅读 · 0 评论 -
Nginx
该权重值,主要是针对实际工作环境中不同的后端服务器硬件配置进行调整的。:修改配置文件nginx.conf后,重新生成新的worker进程,当然会以新的配置进行处理请求,而且新的请求必须都交给新的worker进程,至于老的worker进程,等把那些以前的请求处理完毕后,kill掉即可。为了加快服务器的解析速度,把静态资源、放到Nginx上,由Nginx管理,动态请求转发给后端,可以把动态页面和静态页面交给不同的服务器来解析,加快解析速度,降低原来单个服务器的压力,方便管理维护。(有点valatile的味道)原创 2022-11-15 16:26:32 · 917 阅读 · 0 评论 -
Sass 和 SCSS
▣Sass (Syntactically Awesome StyleSheets),是由编写的一款,和html一样有,和css编写规范有着很大的出入,是不使用花括号和分号的,所以不被广为接受。Sass 是一款强化 CSS 的辅助工具,是对,它在 CSS 语法的基础上增加了(mixins)、(extend)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。原创 2022-11-14 23:02:13 · 10637 阅读 · 1 评论 -
keepalived
Keepalived是一款由C编写的软件,一般解决负载均衡器的高可用性问题,提供了负载均衡、健康检查和高可用的功能,高可用功能是由VRRP协议来实现的。keepalived起初是为LVS( Linux Virtual Server )设计的专门用来监控集群系统中各个服务节点的状态如果某个服务节点出现异常或者工作出现故障,keepalived将检测到,并将出现故障的服务节点从集群系统中剔除,而在故障节点恢复正常后,keepalived又可以自动将该服务节点重新加入集群中,这些工作全部自动完成。原创 2022-11-14 22:41:18 · 244 阅读 · 0 评论 -
npm和npx的区别
npx是一个工具,它是npm v5.2.0引入的一条命令(npx),是npm的一个包执行器,只要为了提高从npm注册表使用软件包的体验。就像npm极大地提升了我们安装和管理包依赖的体验,在npm的基础之上,npx让npm包中的命令行工具和其他可执行文件在使用上变得更加简单。也就是说 npx 会自动查找当前依赖包中的可执行文件,如果找不到,就会去环境变量里面的 PATH 里找。4、可以指定node版本、命令的版本,解决了不同项目使用不同版本的命令的问题。2、可以执行依赖包中的命令,安装完成自动运行。原创 2022-11-14 22:20:42 · 2497 阅读 · 0 评论 -
JS和TS的异同
TypeScript :是JavaScript 的超集(ts是微软开发的开源编程语言,vue3的底层代码也是ts),即包含JavaScript 的所有元素,能运行JavaScript 的代码,并扩展了JavaScript 的语法。js有的类型:boolean类型、number类型、string类型、array类型、undefined、null。ts新增的类型:tuple类型(元组类型)、enum类型(枚举类型)、any类型(任意类型)4、ts增加了接口interface、泛型、类、类的多态、继承等。原创 2022-11-05 15:38:26 · 3231 阅读 · 0 评论 -
vue状态管理——Vuex
Vuex 是一个专为 Vue.js 应用程序开发的。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单理解vuex就是把组件共享状态抽取出来以一个全局单例模式管理,把共享的数据函数放进vuex中,任何组件都可以进行使用。什么时候我们该使用它?Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。原创 2022-11-05 00:33:31 · 1566 阅读 · 0 评论 -
vue引入路由——帮助管理页面跳转逻辑
1、安装路由2、准备两个存在相互跳转逻辑的页面新建文件夹views新建文件 AboutViews.vue HomeViews.vue3、配置独立文件新建文件夹router 新建文件 index.jshistory 表示访问方式4、在main.js文件进行全局导入和挂载5、最后使用或 router-link 标签——的声明式导航,并router-link标签添加to属性值 ==》来是router文件夹下的index.js文件中的配置,最后运行显示。原创 2022-11-03 17:18:06 · 393 阅读 · 0 评论 -
跨域问题 —— 前端解决方案
【代码】跨域问题 —— 前端解决方案。原创 2022-11-02 16:24:36 · 86 阅读 · 0 评论 -
axios 网络封装
网络请求有很多,但终归是发送和接收,并且axios发送的数据不能是对象,只能是字符串的形式,所以可以使用统一的工具类对axios发送请求的数据进行处理;以此类推,接收返回的请求,可以通过判断不同的状态码,进行不同的处理(500服务器内部错误、404访问地址不存在等)新建如下: index里封装所有的网络请求 path里放所有的路径。原创 2022-11-02 16:11:06 · 450 阅读 · 1 评论 -
电脑更新后,突然node、npm无法识别
可以用 nvm use 14.10.0 进行证实,exit status1:目前绝大部分问题是权限不足导致的,正常运行。但此时返回的没有星号,证明node版本下载好后,使用切换出现问题。所以点击菜单,右键,使用管理员身份打开,再进行nvm ues。如果还是不行,可能需要检查npm或者环境变量的配置。1、cmd 输入 nvm list 检查。正常应如下图,带星号返回。原创 2022-11-02 15:09:52 · 1043 阅读 · 0 评论 -
vue3——使用axios
浏览器页面在向服务器请求数据时,因为返回的是整个页面的数据,页面都会强制刷新一下,这对于用户来讲并不是很友好。简单一点:可以理解为ajax i/o system,这不是一种新技术,本质上还是对原生XMLHttpRequest的封装,可用于浏览器和nodejs的HTTP客户端,只不过它是基于Promise的,符合最新的ES规范。实现ajax的方式有多种,如jQuery封装的ajax,原生的XMLHttpRequest,以及axios。的(即同一套代码可以运行在浏览器和node.js中)。原创 2022-11-01 22:19:27 · 5973 阅读 · 3 评论 -
vue使用第三方例子 —— swiper
纯js打造的开源 、强大的触摸滑动插件 ,面向移动端。可实现触屏焦点图、触屏Tab切换、触屏轮播图切换等效果。1.1.1 使用终端执行命令,进行安装,save命令进行保存到package.json中。1.1.2新建轮播图组件。效果:多了显示当前位置的指示器,高亮显示。1.1.4 添加指示器。1.1.3主组件引入。原创 2022-11-01 18:06:52 · 1638 阅读 · 0 评论 -
vue3事件处理 组件 组件交互 数据传递
3.2 ◉父组件从子组件取值 数据从子组件传递到父组件 使用自定义事件 $emit。v-model.lazy 只有当用户提交或enter键后才触发,去同步数据。◉创建时:beforeCreate、created(组件创建完成不代表,已显示)一般把 定时器和性能消耗的组件 放在beforeUnmount 函数中销毁,处理掉。◉ 渲染时:beforeMount、mounted。同时父组件想要显示子组件传递过来的数据,则。2、组件的组织——嵌套的组件树。页面一启动就会自动调用该函数。原创 2022-10-30 21:56:49 · 1229 阅读 · 0 评论 -
v-if 和 v-show 的区别
v-if 和 v-show 都能实现元素的显示隐藏 1. v-show 只是简单的控制元素的 display 属性,而 v-if 才是条件渲染(条件为真,元素将会被渲染,条件 为假,元素会被销毁); 2. v-show 有更高的首次渲染开销,而 v-if 的首次渲染开销要小的多; 3. v-if 有更高的切换开销,v-show 切换开销小; 4. v-if 有配套的 v-else-if 和 v-else,而 v-show 没有 5. v-if 可以搭配 template 使原创 2022-10-30 16:52:19 · 352 阅读 · 0 评论 -
vue3创建项目
ps:项目名不能大写,必须全小写,可以用-进行分割。安装好后,查看是否安装成功。保存为将来项目的预置?原创 2022-10-30 16:45:12 · 371 阅读 · 0 评论 -
搭建vue2的项目
Rollup也是一款ESModule打包器,可以将项目中的细小模块打包成整块代码,使得划分的模块可以更好的运行在浏览器环境或者是Nodejs环境。webpack结合插件可以完成前端工程化的绝大多数工作,而Rollup仅仅是一款ESM打包器,没有其他功能,例如Rollup中并不支持类似HMR这种高级特性。:他能让开发者在开发过程中,直接使用各类方言(如 TS、Flow、JSX)或新的语法特性,而不需要考虑运行环境,因为 Babel 可以做到按需转换为低版本支持的代码;原创 2022-10-30 15:57:43 · 133 阅读 · 0 评论 -
nvm安装node,但npm和node不识别
1、先安nvm(node version management),可以帮助管理node版本,实现一台电脑安装多个版本的node,通过 nvm use node版本号,实现node版本切换。2、用nvm命令安装node:nvm install node版本号 eg:nvm install 14.10.0node或npm命令不识别。原创 2022-10-27 11:33:04 · 13751 阅读 · 2 评论 -
vue组件化开发
在main.js文件里如果导入了组件,并挂载在html标签上,那么在html页面就可以渲染。2)在index.html页面的标签进行绑定id,就可以使用。1)写好hello.vue文件后。写好的模块组件vue文件放在components文件下。2)在App.vue里。1)在main.js里先导入。1、模块组件之间的引用。原创 2022-10-04 20:10:23 · 194 阅读 · 0 评论 -
Vue2和Vue3的区别上课浅析记录
vew3:在main.js里进行导入,相当于全局导入。vue2:用render函数。原创 2022-10-04 19:47:58 · 181 阅读 · 0 评论 -
前后端数据交互常见问题:JSON parse error: Unrecognized token ‘phoneNum‘
后端:加上@RequestBody用String接收,后再一一对多参数进行处理,subString()方法:根据字符的下标位置进行分割,不包前,但包后,eg:第9个字符是“=”,所以从第九个字符开始分割,到第20个字符结束,包括了第二十个。(是对发送过去的数据格式限制),dataType是对接收数据的格式限制。原理不清楚,有大佬的话,求求路过看一眼,顺带告诉我一下,真心感恩~传参结果:正常,第一个手机号,第二个前端MD5加密后的密码。,没有传值的参数,会自动成null。去掉contentType属性。原创 2022-09-24 15:01:03 · 1224 阅读 · 0 评论 -
springboot项目用easycode自动生成代码,配置、问题及解决
捋一下流程:controller——》service(接口)——》serviceImp(通过@Service注解和implements service的方式,里面用.方法发调用dao层方法)——》dao层(通过properties文件的配置找到mapper目录下 xxDao.xml文件) ——》xxDao.xml文件,里面有sql语句。意思差不多是bean注入失败,即@Resource @Autowired这两种注解,失败,检查发现UserServiceImp层没有加。多的是问题,等我捋明白了库😭。原创 2022-09-20 20:51:36 · 623 阅读 · 0 评论 -
解决前后端跨域问题
【代码】解决前后端跨域问题。原创 2022-09-18 22:39:10 · 120 阅读 · 0 评论 -
第一次运行Vue项目 怎么运行别人的Vue项目
这里是因为node_modules文件下装的是项目依赖文件,相当于maven下的插件,如果拿来的文件没有node_modules文件,是无法使用的,用这个npm语句可以下载依赖文件。如果新建终端失败,就在项目右侧,找到最外层文件夹,右键,“在集成终端打开”,在输入 “ npm install ”,最外层文件夹如下:非“login-register-vue”1、在编译器将项目打开,如果已有以下两个文件夹,先删掉,这个是别人编译器运行后生成的,所以不用怕删掉。7、其他问题(安装node.js,vue),原创 2022-09-18 14:15:36 · 11123 阅读 · 2 评论