前端面试题: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

目录
相关文章
|
11月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
726 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
10月前
|
存储 智能硬件
CPU的定义与功能与架构
CPU(中央处理器)是计算机的核心部件,负责执行程序指令、控制数据传输和进行运算。它能处理算术与逻辑运算,并协调其他硬件协同工作。x86架构源于英特尔,适用于PC和服务器,采用复杂指令集;ARM架构则由Acorn等公司开发,广泛用于移动设备和嵌入式系统,采用精简指令集,功耗低且能效比高。
1301 5
|
移动开发 缓存 前端开发
深入理解前端路由:原理、实现与应用
本书《深入理解前端路由:原理、实现与应用》全面解析了前端路由的核心概念、工作原理及其实现方法,结合实际案例探讨了其在现代Web应用中的广泛应用,适合前端开发者和相关技术人员阅读。
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
511 1
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
286 3
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
270 1
|
缓存 监控 API
微服务架构下RESTful风格api实践中,我为何抛弃了路由参数 - 用简单设计来提速
本文探讨了 RESTful API 设计中的两种路径方案:动态路径和固定路径。动态路径通过路径参数实现资源的 CRUD 操作,而固定路径则通过查询参数和不同的 HTTP 方法实现相同功能。固定路径设计提高了安全性、路由匹配速度和 API 的可维护性,但也可能增加 URL 长度并降低表达灵活性。通过对比测试,固定路径在性能上表现更优,适合微服务架构下的 API 设计。
288 1
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
|
JavaScript 前端开发 API
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
2147 0
|
JavaScript 前端开发 UED
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
694 1

热门文章

最新文章