做前端开发,大多数情况下,都需要跟后端打交道,而最常见的方式则是通过http请求,进行通信. 在openresty中,通过http跟后端整合通信的方式又很多种,各有各的好处,可以根据情况交叉使用 1.直接proxy 这种方式最简单,也是我们最熟悉的,直接配置一个反向代理,跟nginx的用法一致 比如我们有一个后端服务,提供用户相关接口,是java写的,端口8080,为了简单起见,我直接在openresty里面配置一个server,模拟java端,通过一个简单的案例的来说明情况 nginx.con…

openresty 前端开发入门五之Mysql篇 这章主要演示怎么通过lua连接mysql,并根据用户输入的name从mysql获取数据,并返回给用户 操作mysql主要用到了lua-resty-mysql库,代码可以在github上找得到 而且上面也有实例代码 由于官网给出的例子比较基本,代码也比较多,所以我这里主要介绍一些怎么封装一下,简化我们调用的代码 lua/mysql.lua local mysql = require "resty.mysql" local config =…

还记得第一次尝试前后端分离的时候,是使用nginx + react 构建的spa应用,后端是java,主要处理业务逻辑逻辑部分,返回json数据,在nginx里面配置好html + js纯静态文件,再通过反向代理到java后端,解决跨域问题,然后使用ajax来进行交互,模型很简单,也很有效 主要解决了几个问题 一.独立,由于前后端分离,在开发的时候完全可以互相独立,所谓独立,其实就是说前后端是属于两个项目,保存在各自的git仓库,提交代码既不会冲突,也不需要合并 二.解耦合,后端开发完成之后只需…

这一章主要介绍怎么使用模板,进行后端渲染,主要用到了lua-resty-template这个库,直接下载下来,放到lualib里面就行了,推荐第三方库,已经框架都放到lualib目录里面,lua目录放项目源码,比较好管理,可以知道那些是项目的,哪些是第三方库,可复用的 下载解压到lualib目录之后,就算安装完成了,下面来试用一下,更详细的可以到github上面看文档 conf/nginx.conf worker_processes 1; error_log logs/error.log not…

OpenResty ™ 是一个基于 Nginx 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库.第三方模块以及大多数的依赖项.用于方便地搭建能够处理超高并发.扩展性极高的动态 Web 应用.Web 服务和动态网关. OpenResty 通过汇聚各种设计精良的 Nginx 模块(主要由 OpenResty 团队自主开发),从而将 Nginx 有效地变成一个强大的通用 Web 应用平台.这样,Web 开发人员和系统工程师可以使用 Lua 脚本语言调动 Nginx 支持的各种…

通过前面几章,我们已经掌握了一些基本的开发知识,但是代码结构比较简单,缺乏统一的标准,模块化,也缺乏统一的异常处理,这一章我们主要来学习如何封装一个轻量级的MVC框架,规范以及简化开发,并且提供类似php所见即所得的能力 统一入口 通常来说一个mvc框架会有一个统一的入口点,类似于spring mvc的DispatcherServlet,会拦截所有的请求,也就是/,于是我们可以得出我们的入口点 conf/nginx.conf worker_processes 1; error_log logs/…

大多数情况下,调试信息,都可以通过ngx.say打印出来,但是有的时候,我们希望打印调试日志,不影响到返回数据,所以系统打印到其它地方,比如日志文件,或者控制台 这里主要用到一个方法就是ngx.log,这个方法可以将日志输出到error.log里面,支持多种级别消息,如下: ngx.STDERR ngx.EMERG ngx.ALERT ngx.CRIT ngx.ERR ngx.WARN ngx.NOTICE ngx.INFO ngx.DEBUG 可以通过以下方式输出调试信息,大多数情况下我们只要…

这章主要演示怎么通过lua连接redis,并根据用户输入的key从redis获取value,并返回给用户 操作redis主要用到了lua-resty-redis库,代码可以在github上找得到 而且上面也有实例代码 由于官网给出的例子比较基本,代码也比较多,所以我这里主要介绍一些怎么封装一下,简化我们调用的代码 lua/redis.lua local redis = require "resty.redis" local config = { host = "127.0.0…

这一章主要介绍介绍怎么获取请求参数,并且处理之后返回数据 我们知道http请求通常分为两种,分别是GET,POST,在http协议中,GET参数通常会紧跟在uri后面,而POST请求参数则包含在请求体中,nginx默认情况下是不会读取POST请求参数的,最好也不要试图使改变这种行为,因为大多数情况下,POST请求都是转到后端去处理,nginx只需要读取请求uri部分,以及请求头 由于这样的设计,所以获取请求参数的方式也有两种 GET local args = ngx.req.get_uri_ar…

写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的. CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-heig…

这章主要介绍一下,lua怎么返回一个json字符串,怎么把一个table转成json字符串,又怎么把一个json字符串转成json 其实很简答,直接使用cjson库的encode.decode方法即可 lua/hello.lua local cjson = require "cjson" -- 先定义一个json字符串 local json_str = '{"name": "Bruce.Lin", "age": 25}' --…

个人作业week7——前端开发感想总结 1. 反思 首先要谈谈在这次团队项目的工作中,我这边出现过的较为严重的一个问题:我和HoerWing (后端担当)合作时,最初因为我没有使用github(始终连不上,最后才确认是宿舍有线网的问题,没错就我那一个位置这样= =),所以导致我和后端这块对于代码进展的情况严重不同步,因为我们要同时写一个网页,同时又因为是敏捷的工作模式,所以经常会需要做一些小的修饰,而在这个时候就会冲掉对方先前写的一些逻辑.整个项目中前后端对接是比较后期的一件事儿,所以这个问题最…

 Web前端开发高手进阶 js框架+Ajax技术01.初识javascript及其语言基础(一)02.初识javascript及其语言基础(二)03.初识javascript及其语言基础(三)及js原始数据类型(一)04.javascript原始数据类型(二)05.javascript原始数据类型(三)06.javascript原始数据类型(四)07.javascript原始数据类型(五)及数组(一)08.javascript 数组(二)09.javascript 数组(三)10.函数.Math…

我在阿里这仨月 Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间.回想这三个月做过的事情,很多很杂,但还是有重点. 本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我对前端进阶学习的一点思考. 一.漫谈 刚入职不久阿里巴巴就上市了,这是件振奋人心的事情.实际上在正式入职之前,我就已经在淘宝UED实习了三个月,所以这边的工作环境和开发流程都比较熟悉了. 在工作中,遇到了很多这样的场景: 1. 线上 bug 处理 运营:“嘿,小胡子,有客户反馈这个提交表单的页面中,…

情景:     领导:小吴啊,最近在忙什么啊?     前吴:(心想:我擦勒,难道划水被领导发现了?也不能怪我啊,后台的哥们接口还没给呢,但要是实话实说不就对不起后台哥们了吗?)                 领导,我在学习关于mock相关的文章,可以用来模拟AJAX请求,让前后端更专注于自己的工作.     领导:不错不错.     前吴:呵呵,:   以上场景应该在开发中大家都有过这样的经历吧,重构完成,再书写交互时遇到后台接口尚未完成,无法得到接口返回的测试数据,但是我们又需要一些数据来…

一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手的地方可以用firebug, chrome调试工具分析网站结构样式.如果技术熟练自信可以自己先写,写完之后在对比,以其来找寻自己的差距.结构是网站的骨架,如果写的不合理,将是bug产生的重要根源,所以学习分析大型网站的布局样式对初学者来说帮助是很大的.大多数初学者由于对技术的不自信,html结构往往…

web前端分为网页设计师.网页美工.web前端开发工程师 首先网页设计师是对网页的架构.色彩以及网站的整体页面代码负责 网页美工只针对UI这块儿的东西,比如网站是否做的漂亮 web前端开发工程师是负责交互设计的,需要和程序猿进行交互设计的配合. web前端需要掌握的有脚本技术javascript DIV+CSS现下最流行的页面搭建技术,ajax和jquery以及简单的后端程序等. 后端的话可供开发的语言有 asp.php.jsp..NET 这些后端开发语言的话搭建环境都不一样,具体如果你想学的话…

直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <scrip…

前端开发的过程中,我们免不了和后端进行联调,这时候就会出现以下的尴尬场景: 接口没写好,没法做接下来的功能 功能写好了,接口没写好,没法测这个功能 联调了,除了BUG,不知道锅在谁身上,只得陪后端耗时间 要解决这个问题,可以使用功能强大的mockjs,它能拦截AJAX请求并返回规定好的假数据.但是这需要学习mockjs的语法,且由于我之前不知道这个强大的东西的存在,只好自己摸索出了一种让前端开发不再依赖于后端的方法: 需要的工具:jQuery, tomcat, webstorm(可选) 这个方法…

IDT,一个基于Nodejs的,旨在脱离后端环境的前端开发套件,目的就是能让前端开发完全脱离后端的环境,无论后端是什么模板引擎(主流),都能应付自如. IDT主要包括两大部分:Server + Build,这一篇主要介绍Server篇. 为了辅助前端开发,一个本地的类似于Apache的服务器是少不了的,但是有个问题,如果项目中的html,是php的smarty模板怎么办?使用纯粹的静态服务器是不行的,因为对前端开发来说,这个html必须由php的smarty模板引擎来解析,前端人员不懂php怎么…

IDT,一个基于Nodejs的,旨在脱离后端环境的前端开发套件,目的就是能让前端开发完全脱离后端的环境,无论后端是什么模板引擎(主流),都能应付自如. IDT主要包括两大部分:Server + Build,这一篇主要介绍Server篇. 为了辅助前端开发,一个本地的类似于Apache的服务器是少不了的,但是有个问题,如果项目中的html,是php的smarty模板怎么办?使用纯粹的静态服务器是不行的,因为对前端开发来说,这个html必须由php的smarty模板引擎来解析,前端人员不懂php怎么…

Web前端开发规范文档你需要知道的事 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 文件规范 1. html, css, js,…

前端开发的过程中,我们免不了和后端进行联调,这时候就会出现以下的尴尬场景: 接口没写好,没法做接下来的功能 功能写好了,接口没写好,没法测这个功能 联调了,出了BUG,不知道锅在谁身上,只得陪后端耗时间 要解决这个问题,可以使用功能强大的mockjs,它能拦截AJAX请求并返回规定好的假数据.但是这需要学习mockjs的语法,且由于我之前不知道这个强大的东西的存在,只好自己摸索出了一种让前端开发不再依赖于后端的方法: 需要的工具:jQuery, tomcat(http-server也可以,但要注…

最近看到前端趋势2013大会上的一篇文章,题目是<各位快看,不用后端>,觉得有点意思,恰好近期的一次讨论及半年前的一次开发实践也涉及到这种模式,简单谈谈我的想法. 不得不说,文章的题目确实很吸引眼球,开发应用可以不用后端了?前端同学完全自己搞定?那服务器.数据库.服务接口神马的怎么办? 说到这,大家可能会想到开放平台,开放平台不就是这种的架构模式吗?服务器.底层数据.OpenAPI大公司都给你提供了,前端同学完全可以通过JS来操作各种数据,把注意力集中在显示层上,独自完成一个应用的开发. 纵观…

后端拜拜,用不到你了,前端开发数据模拟神器nodejs 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javaman.cn/vue/nodejs 一.引入express和mysql模块组件,并初始化express组件 const express = require("express"); const mysql = require("mysql&…

http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@163.com),经过评级审核后邀请进入 一. css 40分 1. 什么是盒模型?    2. Doctype的几种类型?   3. 如何布局左不动右边自适应的两列布局? 4. 如何布局两列等高?    5. 如何布局右侧定宽,左侧或中间自适应? 6. 如何布局三列自适应?  7. gif,png,j…

红花还得绿叶陪衬.vue前端开发离不开数据,这数据正来源于请求web api.为什么采用.net core web api呢?因为考虑到跨平台部署的问题.即使眼下部署到window平台,那以后也可以部署到Linux下. .net core web api与mvc的web api类似.我把遇到的问题归纳下: 1.部署问题 都说.net core web api,后面我简称api.它有两种部署方式,一个是在iis上部署,另外一个是自托管,类似控制台,通过dotnet  run 命令启动的. 1.1…

regex:(?isx)^http://127.0.0.1:3000(/dlscene)?/order/(\w*) http://127.0.0.1:8080/dlscene/order/$2 上面这段正则既可以匹配 http://127.0.0.1::3000/dlscene/order/xx 也可以匹配 http://127.0.0.1::3000/order/xx 实在是非常好用 2018.3.22更新一个自己用的正则 在前端开发中经常会用到的fiddler,来做接口调试. 在使用auto…

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具.基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为"片段".虽然片段能很好地推动你的生产力,但大多数的实现都有这样一个缺点:你必须先定义你的代码片段,并且不能在运行时进行拓展.Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS形式的能够动态被解析的表达式,然后根据你所输入的缩写来得到相应的内容.Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前…

前端开发需要了解的工具集合:webpack, eslint, prettier, ... 前端开发需要了解的一些工具,这些工具能够帮助你在项目开发中事半功倍. 1. nrm: npm registry 管理器 registry: npm 远程仓库的地址. 由于众所周知的原因,npm 官方仓库在国内特别的慢,所以我们需要用一些替代性方案,一种方案就是切换 npm registry 到国内的镜像仓库. 所以,一般我们会这样做: # 切换到淘宝 npm 仓库 npm config set regist…