摘要：前言前后端分离的风从我第一天当开发的时候就已经在我耳边吹得呼呼作响了听着各种前后端分离的各种牛心里还是有点痒痒后来因为各种原因转向前端慢慢地了解起来了前后端分离虽然说转向了前端但是小公司人不多后端接口还是要我写一点好了上面都是些废话下面开始
前言
前后端分离的风从我第一天当开发的时候
就已经在我耳边吹得呼呼作响了
听着各种前后端分离的各种牛X,心里还是有点痒痒
后来因为各种原因转向前端,慢慢地了解起来了前后端分离
虽然说转向了前端,但是小公司,人不多,后端接口还是要我写一点
好了,上面都是些废话,下面开始正题正文
在几个项目开发过程中,可能是我水平不够吧
我就发现前后端分离有时候相较于前后端混写挺"蠢"的
各位先放下你们提起的40M大刀,且听我慢慢道来.
不知道各位开发时发现没,
有些请求是需要在页面刚刚加载完时候,
就要用ajax之类的向服务器发起一或者多个请求.
比如,一些可自定义因素较多的项目,需要请求,
网站的LOGO
网站的主色调
网站的CopyRight信息
等等
再比如,微信公众号网页的开发
从后端请求回微信公众号的一些东西
上述的那些一般做法就是刚刚加载完页面的时候就得向后端发起请求
然后再赋值到页面上或者执行请求返回的信息之类的
觉不觉得这样的方式有点"蠢"呢?
我明明向后端发起了一次请求,
为什么不把我要的东西给全?
反而要我多跑两趟腿?
这下能把你的刀放回刀鞘了吧
所以,我就在想,应该怎么解决这个问题?
后来用了几次JSONP,恍然大悟
其实完全没必要在页面请求回来之后
多写几段ajax之类的来请求刚刚说的那些东西
突然之间不知道怎么表述我想说的这是个什么东西了
(前端代码都在vue-cli里的模板文件里写)(后端代码都是php代码,当然你可以改成jsp,asp等等)
HTML代码
是的,你没看错,是请求一个php(jsp,asp...)文件
PHP代码
// 假设已经一顿操作,得到了一些用户自定义的皮肤数据
$skin = array(
"background"=> "#F00",
"font"=> "#0F0",
// 等等配置
);
// 设置header头,说明MIME类型和字符编码
header("Content-Type: text/css;charset=utf-8");
// 生成css代码(当然,你可以选择更好的字符串拼接方式)
echo "body{background-color: ". $skin["background"] .";color: ". $skin["font"] .";}";
然后,打开你的页面,打开浏览器控制台
就能在network选项卡的css请求里看到拼接好的css代码
body{background-color: #F00;color: #0F0;}
当然,页面样式也会像拼接好的css代码描述那样,背景呈现红色,文字是绿色
主要是wx.config方面的简化
HTML代码
PHP代码
// 假设已经经过一顿操作,得到了微信公众号的一些签名,标识之类的东西
$data = array(
"appId"=> "0123456789",
"nonceStr"=> "qwertyuiop",
// 等等其他配置
);
// 设置header头,说明MIME类型和字符编码
header("Content-Type: text/javascript;charset=utf-8");
// 生成js代码(当然,你可以选择更好的字符串拼接方式)
// 配置有点多,就不一一写出来了
echo "wx.config({
debug: true,
appId: "". $data["appId"] ."",
nonceStr: "". $data["nonceStr"] ."",
jsApiList:["onMenuShareAppMessage","onMenuShareTimeline"]
});";
然后,打开你的页面,打开浏览器控制台
就能在network选项卡的js请求里看到拼接好的js代码
wx.config({
debug: true,
appId: "0123456789",
nonceStr: "qwertyuiop",
jsApiList:["onMenuShareAppMessage","onMenuShareTimeline"]
});
然后你就可以不用在ajax之类请求成功之后再执行wx.config
直接wx.ready即可
举了两个例子,不知道大家有没有明白我在说什么
就是想说,大部分那种刚刚请求到页面就向后端发起的ajax请求
都可以不用费太多js代码去获取
直接让后端生成就好了
当然用法很多,不拘泥于上面两种用法目前发现的缺陷比如可以请求用户信息之类的
比如请求自定义皮肤,请求回来的"css文件"不能被缓存,
下次刷新页面又得重新请求,
所以不适合请求大量的非自定义的css代码,
需要自己对css代码量进行控制,
但是我觉得这不算坏事,比如在请求wx.config的时候,
每次必定有信息是不相同的,
在这时候,还是不要缓存的好^_^
----------------------------------
还有个就是请求"js文件"的时候,
浏览器中,跨js文件进行交互,
必须有个挂在window下的全局的中间变量
比如微信公众号开发中的wx
个人认为js中暴露在window下的全局变量越多,越不安全
所以,使用上述方法请求"js文件"的度还是需要把握下
就说到这里大家有任何疑问/想法都可以在评论里交流
有对我上述内容的指正更好
感谢各位花费这么多时间看一个页面仔的思考
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/30805.html
此篇文章通常是详细介绍了pyecharts结合flask架构，通常是详细介绍怎样在Flask架构使得用pyecharts，文中根据实例编码为大家介绍得非常详尽,需用的小伙伴可以参考一下 详细介绍 文中通常是详细介绍怎样在Flask架构使得用pyecharts，有关Flask架构应用这儿不去做详细详细说明~ Flask模版3D渲染 首先要建立一个flask项目，flask项目对目录结构要...
摘要：服务器端渲染用通俗的话来讲就是是由服务端写出，可以动态改变页面内容，也可以叫做所谓的动态页面。总的来说，服务器端渲染就是说由服务侧完成页面的结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。服务器端渲染(Server-Side Rendering)用通俗的话来讲就是html是由服务端写出，可以动态改变页面内容，也可以叫做所谓的动态页面。像早期的php、...
本文关键阐述了python前后文管理工具合同的完成，在python中所有完成了前后文管理工具协议书目标都能用应用with实际操作，with开启了目标前后文管理工具 序言 在前后文管理工具协议书的过程当中，牵涉到2个魔术师方式__enter__方法与__exit__方式 在python中所有完成了前后文管理工具协议书目标都能用应用with实际操作 with开启了目标前后文管理工具 前后...
本文主要是给大家介绍了python上下面管理工具适用场景及错误处理实例详细说明，感兴趣的小伙伴可以参考去了解一下，希望可以有一定的帮助，祝愿大家多多的发展，尽早涨薪 前言 应用前后文管理工具，能让编码更为雅致简约。自然，前后文的管理工具的功效不仅于此，它内部进行体制，能够很好地解决编码出现异常，提高编码的复用性 1、先看一下最典型的例子，with句子 #创建一个文件载入字符串数组Pyt...
阅读 884·2021-10-27 14:19
阅读 1101·2021-10-15 09:42
阅读 1524·2021-09-14 18:02
阅读 737·2019-08-30 13:09
阅读 2981·2019-08-29 15:08
阅读 2081·2019-08-28 18:05
阅读 948·2019-08-26 10:25
阅读 2777·2019-08-23 16:28
