前端路由和后端路由
带你理解前端路由和后端路由以及他们的区别
·
前端路由和后端路由的区别
1.映射关系不同。前端路由是一个路径映射一个组件;后端路由是一个路径映射一个处理本次请求的响应函数。
2.前端路由不需要走网络,而后端路由需要走网络。
3.前端路由切换页面不会使得网页刷新,后端路由切换页面会导致网页刷新。
4.前端路由采用的是客户端渲染,后端路由是服务端渲染。
下面分别看看前端路由和后端路由,你会对这个区别有一个更好的理解。
前端路由
下面来看vue的路由配置
const routes = [
{
path:'/',
redirect:'/login'
},
{
path: '/login',
name: 'login',
component: () => import( '../views/login')
},
]
可以很明显的看到,每个路径映射的是一个组件。
我们可以在跳转路由时,打开network看看,很明显的可以看到,路由跳转时是不走网络的,因为单页面应用是在初始时一次性把资源全都请求完成。当然使用路由懒加载的情况除外,使用路由懒加载时,跳转路由时会走dev的内置服务器。
每次跳转之后,我们都可以右键查看页面源代码,可以只有一些脚本的引入,因此是客户端渲染。
后端路由
下面来看express服务器配置的路由。如果对express没有了解的小伙伴,可以这样理解,这就是api接口。
router.get('/detail',(req,res)=>{
const {id}=req.query
res.send({status:1,data:list[id-1]}) // 对本次请求响应一段数据
})
router.post("/add",(req,res)=>{
list.push(req.body)
res.send({status:1,data:list}) // 对本次请求响应一段数据
})
router.get('/pageA',(req,res)=>{
require('fs').readFile('./views/a.html',(err,data)=>{
res.end(data) // 对本次请求响应一个页面
})
})
router.get('/pageB',(req,res)=>{
require('fs').readFile('./views/b.html',(err,data)=>{
res.end(data) // 对本次请求响应一个页面
})
})
可以很明显的看到,每个路径映射的是一个处理请求的响应函数。
我们每次发送请求时,都是走的这个后端路由。
以前的项目都是多页面应用的,页面之间的跳转都是通过超链接、提交表单、location等完成的,而这种形式的跳转会引起页面的刷新。
<a href='http://localhost:5000/pageA'>前往页面a</a>
<a href='http://localhost:5000/pageB'>前往页面b</a>
服务器响应的页面是一个完整的dom树,浏览器得到dom树直接渲染就行了,此时查看页面源代码时,可以看到当前网页完整的dom结构。
更多推荐
已为社区贡献7条内容
所有评论(0)