Turbo Rails Tutorial-第六章
Turbo Streams and security
本章我们将学习如何安全的使用Turbo Stream 和 避免广播数据到非法的用户。
Understanding Turbo Streams and security在将Turbo Streams放在线上环境前,我们必须知道如何保证安全,如果把含有私密数据的HTML发送到了不该接收的人那里,这会是一个很大的问题。
让我们想象一下我们的quote编辑器被一个公司使用,公司内有很多的员工,如果有天我们的数据被一个不属于该公司的人获取到了,那这就是个很大安全事故了。
我们将使用Devise gem对用户操作,模拟现实生活来对Turbo Stream security进行学习,并且我们将展示如果我们不够足够重视,将会出现哪些安全问题。
What we will build我们将画一个草图来说明本章结束时系统的样子,我们将对没有登录的用户展示登录页面链接
然后用户通过输入用户名,密码进行登录
我们的用户在登录后跳转到首页,在导航栏中我们将根据电子邮件地址显示公司名称和用户名称,当点击View quotes按钮时,他们便可以操作 ...
Turbo Rails Tutorial-第五章
Real-time updates with Turbo Streams本章节,我们将学习如何使用Action Cable 广播 Turbo Stream templates,来让我们的页面进行实时跟新。
Turbo Stream format 可以仅用几行代码就与 Action Cable结合,来让我们的页面实时更新,当然与:群聊,通知,邮箱服务是类似的。
让我们用邮箱服务来举例,比如当我们收到一封新的邮箱,我们不想去手动的刷新让它显示,相反我们希望它能自己在页面上更新,而不需要我们操作什么。
而实现这一功能对于Rails来说很容易,因为在Rails5时就发布了Active Cable。本章将要讨论的Turbo Rails的一部分是建立在Action Cable之上的,而实现该功能,也就更加简单了。
我们要做什么来想象一下,如果有许多人同时使用我们的quote编辑器,他们更希望实时看到同事们都写了什么。
在Quotes#index页面:
任何时候一个成员创建了新的quote,我们希望该quote立刻被加到我们的quotes列表的最上面
任何时候一个成员修改了一个quot ...
Turbo Rails Tutorial-第四章
Turbo Drive这一章我们将解释Turbo Drive是什么?它是怎么转化Link clicks和Form submissions为Ajax请求来加速Rails系统。
是什么?Turbo Drive是Turbo的第一部分,已经被Rails7默认引入了,可以看一下Gemfile和application.js
# Gemfile
# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"
// app/javascript/application.js
// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
通过Turbo Drive,HTML页面不会被完全重新渲染,当我们的Turbo Drive拦截一个link clikc or a form ...
Turbo Rails Tutorial-第二章
实现简单的增删改查
这一章,我们将要创建quote模型,并关联Controller通过Rails的约定
我们先通过Excalidraw来画一些草图,来描述我们要做的事儿
在Quotes#index页面中,我们将展示quotes集合,并且每个quote都有详情,修改,删除的按钮,并且也有增加的按钮。下面是样式图:
当点击New quote按钮时跳转到Quotes#new页面:
当点击Create quote时跳转到Quotes#index页面,显示存储的数据,并按照时间排序。
当你点击Edit按钮时,就会跳转到Quotes#edit去更新已有的数据
当点击Update quote,还是跳回Quotes#index页面
当点击quote的标题时,则跳转到Quotes#show,现在我们仅仅显示标题,后面增加其他内容。
在开始之前,我们先创建一些测试用例去确保我们构建的内容正常
测试
测试是软件开发的基础部分,如果没有一个强有力的测试,我们将会引入bug,并无意间影响以往的功能。
创建测试文件
bin/rails g system_test quotes
编写 ...
Turbo Rails Tutorial-第一章
我们将学习使用,Rails7默认引入的tubo-rails库,并创建一个响应式的单页面应用,而无需编写任何自定义JavaScript代码。
简介
这一章我们将解释要学习的内容,看下成品的样子,并且开始我们的项目。
线上试用:https://www.hotrails.dev/quotes,类似于一个账单管理器,你可以试着添加数据,并进行编辑。
为什么学习Turbo?伴随着2021年12月7日发布的Rails7,Hotwire整合了Stimulus和Turbo。成为了默认的前端框架。下面我们看看Turbo与Rails整合带来的新的特点:
第一:所有的链接和表单提交转为Ajax请求,通过Turbo Drive可以加速我们的系统,我们只需要简单的引入,而不需要做其他操作,即可获得好处。
第二:通过Turbo Frames几行代码,我们就可以很容易的将页面切割为小的组件,可以替换或延迟加载页面的独立部分。
第三:通过Turbo Stream就可以增加实时更新的特点。你可以做类似的多用户游戏或者实时监控系统。
通过本次教程的学习,你将知道所有的细节关于上面三点。
本教程适用范围本 ...
Turbo Rails Tutorial-第三章
组织CSS文件这一章我们将使用BEM方法论,去设计项目的CSS样式,这里我们将不会使用Bootstrap或者Tailwind,因为作者觉得不好看,并打算展示一些技巧
如果你喜欢CSS,你可以学习到一些技巧,如果你不喜欢,也可直接复制代码,进入下一章的Turbo学习
我们的CSS风格CSS是一个比较难掌握的话题,像其他的编程一样,它需要一些风格和约定才能更好的使用,而学习写CSS最好的办法就是写一个小项目去设计样式
BEM方法论对于命名约定,我们使用BEM方法论,它是简单易懂的,总结为以下三点:
每个 component(or block) 应有有独立的名字,比如系统中的card,.card的CSS类应该定义在card.scss文件中,这就BEM中的B。
每个 block 可能有多个 elements,比如 card 举例,每个card都有 title 和 body,在BEM中我们应该写为 .card_title 和 .card_body,这样就可以避免命名冲突,如果另有一个block为 .box也有 title 和 body,那么这个就是.box_title和.box_b ...
勇闯SAP失败,勇敢转行成功
晚上看到Y总的勇闯腾讯的经历,脑袋一热,往日的经历让我的肾上腺素好像又高了。
我是物流专业,大三的时候,学校请的SAP培训机构来给我们上课,讲关于SAP在供应链上的应用。当时对这个外企很好奇,并且那时候刚会点儿python,正在学韩顺平的Java基础,刚好家旁边就是SAP西安分部,脑袋一热就跑公司楼下问招人吗,也没看boss直聘,到人楼下了,心里怂了,想着自己啥都不会,技术,英语,学历都不行,想还是算了吧,但又觉得既然来了,总得试试吧。
看着一个个员工出来,我愣是一个没敢上去打招呼,刚想抬手,又放下去了,发现有人用异样的眼光看我,让我更不敢上前询问了,最后坐到楼道里深呼吸,让自己放松。时间不等人,出来的员工越来越少,眼看着再不上去,今天就算白来了,等最后剩一个姐姐走门口了,我才鼓起勇气跑过去询问,她也很热情,说可以关注SAP招聘公众号,不过委婉的说基本都是研究生,除非你很优秀。我就连忙道谢,心里特别的开心,就好像已经找到工作了一样😂,之后我就在知乎上查找相关信息,并联系上一个SAP大连分公司研究生刚入职的学生,向他请教,怎么学才能有机会进去呢,人家听我是二本的物流学生,仍鼓励我可以试 ...
从Servlet到SpringMVC
从Servlet 到 SpringMVC我们从最简单的Servlet项目来查看一个请求是如何被处理的: 本案例中使用SpringBoot + Servlet + Tomcat进行演示
<dependencies>
<!-- 添加servlet依赖模块 -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
</dependency>
<!--添加tomcat依赖模块.-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
...
注解开发应用
注解在Java基础中我们都学习过简单的注解开发,但并不没有意识到重要性,直到使用了SpringBoot后,我们看到了注解相比原先配置文件的大量定义的简洁与优雅。在测试中我们也常用注解:@Test ,在方法定义时加上该注解,我们便可以执行这个方法,这到底怎么做的呢? 本文将回顾注解基础,并衍生到具有应用:
基础知识@Target(ElementType.METHOD)
@Retention(RetentionPolicy.SOURCE)
public @interface Override {
}
上面的代码大家都很熟悉,当我们子类重新父类的方法时,会带有该注解。而我们在声明一个注解时,
首先需要使用 @Interface 来定义,这和我们定义 class,Interface 一样,最终编译时也会生成一个 class 文件
其次需要 @Target 和 @Retention 来定义该注解的作用域,这也被称为元注解,下面我们看看它们常用的范围
public enum ElementType {
/** 类, 接口 (包含注解), 枚举
...
SpringBoot自动装配原理
SpringBoot 自动装配原理@SpringBootApplication 启动注解@SpringBootApplication
public class SpringBootBasicLearnApplication {
public static void main(String[] args) {
SpringApplication.run(SpringBootBasicLearnApplication.class, args);
}
}
/**
* to store the base package from the importing configuration
* 也就是获取到我们启动类的包路径
*/
static class Registrar implements ImportBeanDefinitionRegistrar, DeterminableImports {
@Override
public void registerBeanDefinitio ...

