前端面试题:1.B/S架构和C/S架构;2定义vue-router的动态路由

简介: CS:C是英文单词Client首字母,即客户端的意思,C/S就是"Client/Server"的缩写,即"客户端/服务器"模式,主要用于局域网内。它是一种软件系统体系结构,它是将需要处理的的业务合理的分配到客户端和服务器端,这样可以降低通信成本,但是升级相对困难,就像我们手机中安装的微信,qq,王者农药等应用程序都是C/S结构的。C/S架构软件有一个特点,就是如果用户要使用的话,要下载一个客户端,安装后就可以使用

文章目录
讲一下B/S架构和C/S架构的区别是什么
4、怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
讲一下B/S架构和C/S架构的区别是什么
B/S: B是英文单词Browser的首字母,即浏览器的意思; S是英文单词Server的首字母,即服务器的意思。B/S就是Browser/Server的缩写,即浏
览器/服务器模式。
这种模式统一了客户端,让核心的业务处理在服务端完成.只要在电脑或手机上安装浏览器,就可以通过web Server与数据库进行数据交互了

CS:C是英文单词Client首字母,即客户端的意思,C/S就是"Client/Server"的缩写,即"客户端/服务器"模式,主要用于局域网内。
它是一种软件系统体系结构,它是将需要处理的的
业务合理的分配到客户端和服务器端,这样可以降低通信成本,但是升级相对困难,就像我们手机中安装的微信,qq,王者农药等应用程序都是C/S结构的。
C/S架构软件有一个特点,就是如果用户要使用的话,要下载一个客户端,安装后就可以使用

区别:
1.硬件环境不同.C/S通常是建立在专用的网络上,小范围的网络环境,而B/S是建立在广域网.上的,适应范围强,通常有操作系统和浏览器就行。
2.C/S比B/S结构更安全,因为用户群相对固定,对信息的保护更强。
3.B/S结构维护升级比较简单,而C/s结构维护升级相对困难。

4、怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
在路由path上配置动态参数,在前往的路由页面使用this.$route. .params截取携带过来的路由参数。

一.字符串写法
1.query参数

this.$router.push("/login/?k=1")
//跳转后的页面通过$route.query.k接收
1
2
2 params参数

this.$router.push("/login/" +this.keyword)
path: '/search/:keyword”
4 | //通过$ route.params.keyword接收
1
2
3
二对象写法
1.query参数

this.$router.push( {name : "login" , query: {keyword:this .keyword}})
//注意query传参对象写法必须给路由组件命名(加name属性)
1
2
2 params参数

this.$router.push({name:"login" ,params ; {keywo rd :this .keyword}}
//注意params传参对象写法必须给路由组件命名(加name属性)
1
2
三指定params参数可传可不传
1.在占位后面加个问号,就不会出现路径有问题

path: '/search/:keyword? '
1
2.如果传递的是空字符串,可以用undefined解决

this.srouter.push({

name: "login" , 
params:{ikeyword:this .keyword| lundefined}

})
1
2
3
4

目录
相关文章
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
1178 1
|
移动开发 前端开发 JavaScript
Vue与React两大前端框架的主要差异点
以上就是Vue和React的主要差异点,希望对你有所帮助。在选择使用哪一个框架时,需要根据项目的具体需求和团队的技术栈来决定。
695 83
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
729 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
JavaScript 前端开发 编译器
Vue与TypeScript:如何实现更强大的前端开发
Vue.js 以其简洁的语法和灵活的架构在前端开发中广受欢迎,而 TypeScript 作为一种静态类型语言,为 JavaScript 提供了强大的类型系统和编译时检查。将 Vue.js 与 TypeScript 结合使用,不仅可以提升代码的可维护性和可扩展性,还能减少运行时错误,提高开发效率。本文将介绍如何在 Vue.js 项目中使用 TypeScript,并通过一些代码示例展示其强大功能。
504 22
|
JavaScript 前端开发 搜索推荐
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同?
总的来说,Vue 的数据驱动视图在诸多方面展现出独特的优势,其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
600 157
|
存储 NoSQL Redis
阿里面试:Redis 为啥那么快?怎么实现的100W并发?说出了6大架构,面试官跪地: 纯内存 + 尖端结构 + 无锁架构 + EDA架构 + 异步日志 + 集群架构
阿里面试:Redis 为啥那么快?怎么实现的100W并发?说出了6大架构,面试官跪地: 纯内存 + 尖端结构 + 无锁架构 + EDA架构 + 异步日志 + 集群架构
阿里面试:Redis 为啥那么快?怎么实现的100W并发?说出了6大架构,面试官跪地: 纯内存 + 尖端结构 +  无锁架构 +  EDA架构  + 异步日志 + 集群架构
|
存储 智能硬件
CPU的定义与功能与架构
CPU(中央处理器)是计算机的核心部件,负责执行程序指令、控制数据传输和进行运算。它能处理算术与逻辑运算,并协调其他硬件协同工作。x86架构源于英特尔,适用于PC和服务器,采用复杂指令集;ARM架构则由Acorn等公司开发,广泛用于移动设备和嵌入式系统,采用精简指令集,功耗低且能效比高。
1738 5
|
人工智能 JavaScript 前端开发
Vue 性能革命:揭秘前端优化的终极技巧;Vue优化技巧,解决Vue项目卡顿问题
Vue在处理少量数据和有限dom的情况下技术已经非常成熟了,但现在随着AI时代的到来,海量数据场景会越来越多,Vue优化技巧也是必备技能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
438 10