13--Rails的ActiveView1

前面我们花了4节课讲了数据交互也就是ActiveRecord的使用方法,但是我们一直先回避rails中前端开发的一些问题比如注册和登陆页面及其他的视图代码。我们将用两节课来讲解rails中前端开发的一些基本知识来掌握简单的rails前端开发。

前面我们讲过rails中MVC每一个rails中都有与之对应的组件,C就是控制器对应的rails组件是ActiveController,M对应的rails组件ActiveRecord,V则对应的rails组件ActiveView。

ActiveView是rails中提供给用户用来处理视图用的

Rails的前端模板就是rails用来规定视图的格式和使用方法,ActiveView就是用来解析这个模板,解析结果就是服务器返回给用户最终的html文件。

我们之前的视图文件发现文件后面都.erb,这个erb后缀就是rails用来产生模板的方式,erb全称Embedded Ruby(内嵌的Ruby,这个很好理解比如php的网页后缀也是php它里面的代码就是html代码也嵌入了php代码)

我们给微博的show页面添加第1行代码如下,第一行<%= Time.now.to_s %>不是html代码,但是我们在浏览器中看到的结果是页面能够显示当前时间(也就是代码被解析并返回显示时间的html代码,这个就是ActiveView帮我们完成的,跟php的html代码里面添加<$ php代码 $>一样)

还有先记住我们的第一条微博访问会出错,但是后面添加的微博访问没错,这个是因为后来微博表发生改变

如下错误不用管

我们访问第二个微博就不会报错

<%= %>就是rails中非常常用的erb标识符,在里面可以直接写入ruby代码,它包含的代码就叫模板代码,都会被解析并返回html形式的结果。

常用的erb标识符还有一个<% %>,少了个等于号

区别是:如果你想将标识符中的内容输出到屏幕就要使用<%= %>,比如我们需要将解析后的时间显示到浏览器就要加=(不加会报错,比如<%=
							@post.content %>不加的话会当成ruby代码去执行,但是它并不是一段执行代码所以执行会报错,加上=就是显示到屏幕是可以的)。如果我们只是需要执行一段ruby代码,不需要把结果输出到屏幕就可以使用<%  %>,比如判断语句就可以写在<%  %>里面。
				

<%= @post.content %>中即前端页面(微博显示页面)的@post这个变量是哪来的呢?这个涉及到控制器和前端模板变量传递的问题,我们通过posts控制器的show动作来讲解就很清晰了(因为微博的显示页面就是对应控制器的show动作)

@post、Post、params这些都是变量,那么rails会把哪种变量传递给前端让前端可以使用呢(控制器中不会有变量传递代码,rails自动帮我们完成了)答案就是rails会把控制器中某一动作中我们可以看到的全部变量都提供给该动作对应视图去使用,其他还没试过但是加@肯定可以。

如下我们在posts控制器的show动作中定义两个变量(第14、15行),其他什么都不变

在show页面可以直接使用show动作中新定义的两个变量,我们在show动作对应的show视图中添加一行显示代码(第7行),其他都不变:如下

结果如下:

也就是只要在动作中出现的变量,我们在该动作对应的视图就可以使用这些变量,不需要其他传递变量的代码,就这么简单。如果想指定哪些变量传递不传递,这个用得不多,就先不讲。

最后我们来给前端视图添加一小段判断语句来加强我们对前端模板的理解,现在我们就可以理解为模板就是后缀erb的文件,模板就是html内嵌ruby代码的文件,它能够解析内嵌的ruby代码并返回html形式的结果。

我们先把前面添加的两个新变量@test和@test2、视图中显示时间和两个新变量的代码删掉(这些只是为了帮助理解前端模板,微博应用不需要这些)。

我们回到微博的show视图,添加判断语句:

我们添加的代码是第6、7、8、10,其实就是ruby代码的if else end,只不过ruby代码需要添加<% %>来包围起来(跟其他语言不同,ruby的if语句最后记得加上end来结束)

还有记住在<%%>里面输入变量的时候编译工具没有自动提示(不是我们写错,而是不提示),这个要注意。

如果这条微博的创建者是当前登录的用户,那我们就将微博创建者显示为"我自己"三个字,否则就显示创建者名称

刷新页面发现结果还是sundi,因为我们还没登陆,我们先进入login页面登陆,在输入路由http://localhost:3000/posts/2访问show的id为2的页面,不是登陆后自动跳转的页面(记住)

可以看到后面的sundi已经变成我自己,还有代码中换行在页面没变还是同一行,要屏幕换行还是需要加<br>.

判断语句的实现很简单,就是我们将@post变量中的user对象(数据关联后可以直接拿到关联的对象,这个数据交互3里面讲到了)的id属性(这个是微博的发布者id),与会话保持的当前用户user_id进行比较(这个是当前登陆用户),如果两个一样就说明该微博发布者是当前登录用户。

 

posted @ 2016-02-19 15:13  SixEvilDragon  阅读(265)  评论(0编辑  收藏  举报