这恐怕是"前后端混写"的3p家族在"前后端分离"大流中的最后一块阵地

前言

  • 前后端分离的风从我第一天当开发的时候
  • 就已经在我耳边吹得呼呼作响了
  • 听着各种前后端分离的各种牛X,心里还是有点痒痒
  • 后来因为各种原因转向前端,慢慢地了解起来了前后端分离
  • 虽然说转向了前端,但是小公司,人不多,后端接口还是要我写一点
好了,上面都是些废话,下面开始正题

正文

在几个项目开发过程中,可能是我水平不够吧
我就发现前后端分离有时候相较于前后端混写"蠢"

各位先放下你们提起的40M大刀,且听我慢慢道来.

不知道各位开发时发现没,
有些请求是需要在页面刚刚加载完时候,
就要用ajax之类的向服务器发起一或者多个请求.

比如,一些可自定义因素较多的项目,需要请求,

  1. 网站的LOGO
  2. 网站的主色调
  3. 网站的CopyRight信息
  4. 等等

再比如,微信公众号网页的开发
从后端请求回微信公众号的一些东西

上述的那些一般做法就是刚刚加载完页面的时候就得向后端发起请求
然后再赋值到页面上或者执行请求返回的信息之类的

觉不觉得这样的方式有点"蠢"呢?

我明明向后端发起了一次请求,
为什么不把我要的东西给全?
反而要我多跑两趟腿?

这下能把你的刀放回刀鞘了吧

所以,我就在想,应该怎么解决这个问题?

后来用了几次JSONP,恍然大悟

其实完全没必要在页面请求回来之后
多写几段ajax之类的来请求刚刚说的那些东西

下面开始正题中的正题

突然之间不知道怎么表述我想说的这是个什么东西了

举几个栗子来说明吧
(前端代码都在vue-cli里的模板文件里写)

(后端代码都是php代码,当然你可以改成jsp,asp等等)

一、用户自定义皮肤

HTML代码

<!--href可以指向任何你可自定义代码文件链接-->
<!--且能在服务器端跑起来的php,jsp,asp文件-->
<link rel="stylesheet" type="text/css" href="./skin.php" />
是的,你没看错,是请求一个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代码

<!--同样的src可以指向任何你可自定义代码文件链接-->
<!--且能在服务器端跑起来的php,jsp,asp文件-->
<script type="text/javascript" src="./wx.config.php"></script>

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文件"的度还是需要把握下

就说到这里

大家有任何疑问/想法都可以在评论里交流
有对我上述内容的指正更好
感谢各位花费这么多时间看一个页面仔的思考


又一个轮子
也许这里的都是轮子吧
703 声望
303 粉丝
0 条评论
推荐阅读
vue3 uni-app vite构建流程(h5简易版)
看不清的话,可以按浏览器ctrl++放大查看 {代码...}

643104191阅读 331

封面图
怎样用 PHP 来实现枚举?
在数学和计算机科学理论中,一个集的枚举是列出某些有穷序列集的所有成员的程序,或者是一种特定类型对象的计数。这两种类型经常(但不总是)重叠。枚举是一个被命名的整型常数的集合,枚举在日常生活中很常见,...

唯一丶25阅读 6.4k评论 4

PHP转Go实践:xjson解析神器「开源工具集」
我和劲仔都是PHP转Go,身边越来越多做PHP的朋友也逐渐在用Go进行重构,重构过程中,会发现php的json解析操作(系列化与反序列化)是真的香,弱类型语言的各种隐式类型转换,很大程度的减低了程序的复杂度。

王中阳Go10阅读 2.1k评论 3

封面图
图片防盗链破解 解决图片防盗链问题 反向代理
当客户端(浏览器)向服务器请求内容的时候,会提交一个header,这个header中包含了如:浏览器信息、cookie等内容,那么有一个叫referer的东东,也包含在这里面。

TANKING7阅读 11.3k评论 5

Git操作不规范,战友提刀来相见!
年终奖都没了,还要扣我绩效,门都没有,哈哈。这波骚Git操作我也是第一次用,担心闪了腰,所以不仅做了备份,也做了笔记,分享给大家。问题描述小A和我在同时开发一个功能模块,他在优化之前的代码逻辑,我在开...

王中阳Go5阅读 2.4k评论 2

封面图
Hyperf 3.0 发布,PHP 新时代
在过去的一年半时间里,Hyperf 2.2 共发布了 35 个小版本,使 Hyperf 达到了一个前所未有的高度,这里也获得了一些不错的数据反馈。

huangzhhui4阅读 1.1k评论 1

封面图
微信公众号开发:自动回复文本/图片/图文消息/关键词回复/上传素材/自定义菜单
对接流程1、申请微信公众号测试账号URL:[链接]2、登录,配置开发者服务器URL和Token开发者服务器配置代码:config.php {代码...} URL是config.php在你服务器的URLToken是上面代码自己设置的Token搞定之后,就能完...

TANKING2阅读 10.2k

703 声望
303 粉丝
宣传栏