手机商城笔记3--实现后台第一个页面

接下来我们来制作后台,因为后台也有login登陆之类的页面,为了和前台区分开,我们都添加一个前缀back好了。

  1. 我们创建后台管理员的控制器,添加login动作

  1. 创建对应的视图文件夹并把后台纯净模板的login页面代码放入

添加路由:

  1. 创建后台css和img目录并把后台使用的样式和图片放入,如下图

  1. 设置后台引用样式文件和图片的路径常量11行和12行

  1. 用路径常量替换掉后台的login页面对样式和图片的引用地址

第9行的href原来为

替换后为:

?

然后图片引用用Ctrl+R来实现全部替换:

?

(6)结果如图所示,那么我们就要让该页面不去使用布局文件:

  1. 考虑到后台应该有自己的布局,而不是和前台使用同一个布局,那么设置后台的页面完整步骤如下,如下:

第一步,创建一个使用admin_application布局的基类,如下第二行代码设置了要渲染的布局,这样就不会去使用application.html.erb这个前台使用的布局文件了。我们为了区分开,新建了一个admin目录,把这个基类放入该目录

  1. 修改后台backmanager_controller.rb文件,让它去继承我们创建的基类,注意继承时Admin::这个不能少不然报错,这样就能实现渲染的布局只是admin_application。而且不继承这个类的话就不会去渲染admin_application布局,这样能让前台不会因为添加了一个新的布局而发生改变,因为前台不会去使用这个布局。

(8)我们还没有admin_application这个布局文件,所以我们去新建这个布局文件如下,就是把最原始的application布局文件代码复制过来就行,如下图。甚至我们只要留下<%= yield %>这行代码就可以了,因为我们使用的纯净页面都包含了那些<html>、<head>必要的标签,如下

(9)没有使用前台的布局,而是使用后台自己的布局文件admin_application.html.erb之后,效果如下

?

如上页面显示应该是缺少一些图片而且Console又没报错,但是我们根据我们在制作前台的经验中也知道可能是样式文件中有引入一些图片但是路径我们还没修改,我们根据前台页面的经验(就是审查元素查看浏览器解析路径然后就知道怎么改了)把../img全部替换成../../img如下就是替换后的,因为登陆页面只使用了User_Login.css这个样式文件,所以修改这个就正确了,但是我们还是把全部样式文件中的图片引用路径全部按照这个改了,防止后面忘记修改了(不过不用改了,因为另外两个样式文件中没有引用图片)

?

修改后效果如下:

?

实现后台的首页

后台框架使用frameset标签实现品字形布局

  1. 定义控制器

  1. 添加路由

  1. 创建与控制器对应的视图文件夹,并创建4个页面模板,把纯净页面代码复制到这4个页面中去,然后替换样式目录为后台样式的目录常量,然后在全部替换图片目录为后台样式的目录常量,这些步骤跟前面全部一样。

目录结构如下,以head.html.erb为例代码如下:

访问头部页面效果为下图(在引用了样式还没引入图片时就只有几张无法显示的图片,看起来几乎都没有,不过没错,因为头部其实就是几张图片组成的而已)

  1. 按照同样方式去修改另外left和right页面,结果如下图:

  1. index页面的修改跟前几个页面不一样,就是修改对前3个页面的引用的路劲而已也很简单

原来的index页面代码:

修改对3个页面的引用路径,这个很简单但是不能写错,就是/控制器/页面名,记住页面名不要使用后缀html.erb不然页面会是空白,结果代码如下:

  1. 如上页面引用没有使用后缀,格式也是正确,还是空白,这是因为布局的原因

因为后台页面都使用admin_application.html.erb这个布局文件,我们知道每个子页面都有html的声明,引用的布局也有html5的声明,因为子页面是替换<%= yield %>,所以合并后的页面是html5的声明<!DOCTYPE html>…然后才是子页面html的声明,因为html5的声明在开头所以默认页面是html5的形式而不是老版本的html的形式。前面做的页面都没错是因为兼容,而html5不能使用frameset了,所以导致index页面空白
				

修改方法就是删除布局中和子页面html声明部分作用相同的代码即可,修改后如下:

  1. 注意:前面我们因为使用共同的页头页脚,所以老版本形式的html声明替换掉了布局文件中的html5声明,页面不会乱。以后要是使用老版本的html页面声明的话,那么最好都把布局文件中的html5声明删除掉,不然代码没错,但是页面看起来有可能不协调。

?

这样一来,后台的大体框架已经完成了,其他页面和功能后面慢慢完善就行。

时间: 2024-12-18 11:17:30

手机商城笔记3--实现后台第一个页面的相关文章

手机商城笔记6

补充说明:前面我们修改和增加都使用了goods_id,没有像表单页面中需要的那些字段一样设置成attr_accessible,是因为我们数据库中该商品号字段设计为自增所以不需要在表单中添加该字段的输入框.而添加商品或修改商品都涉及到我们去修改数据库中的数据,而商品号我们在add页面没有去修改,是数据库自增的,在edit页面也没有修改商品号商品号仍然是原来的.至于我们根据goods_id来找到修改的链接页面这个我们只是读取,没有写,所以不设置attr_accessible,默认为protected

手机商城第二天,各个功能按钮的切换与显示不同界面

这几天晚上练习科目三,一般都到10点多回来,所以更新比较晚. 代码已上传到码云上,有兴趣的可以下载看看 https://git.oschina.net/joy_yuan/ShoppingMall 上个项目中,页面切换,是做了一个BasePage,然后在里面利用了构造方法,调用构造时,就初始化其中的控件,然后在切换具体的页面时,再加载其中的数据. 在本项目中,是做了一个BaseFragment extends Fragment,然后按照Fragment的生命周期: 1.onCreate() 2.o

手机卫士 笔记

1. BroadcastReceiver 广播接受者 每次广播到来时 , 会重新创建 BroadcastReceiver 对象 , 并且调用 onReceive() 方法 , 执行完以后 , 该对象即被销毁 . 当 onReceive() 方法在 10 秒内没有执行完毕, Android 会认为该程序无响应 . 所以在BroadcastReceiver 里不能做一些比较耗时的操作 , 否侧会弹出 ANR(Application NoResponse) 的对话框 .如果需要完成一项比较耗时的工作

[读书笔记]算法(Sedgewick著)·第一章(1)

到家放松之后就开始学习算法了,手里拿的是拿的是一本Robert Sedgewick的橙皮书<算法(第四版)>的.这本书与导论那本书的不同之处在于轻数学思想.重实现,也就是说这是一本很不错的基础编程书.拿来做书中的练习还是蛮不错的,封面说有50种算法哦.思维导图如下,就且学且更新吧. 1.基本编程模型 第一章开始讲述用程序实现算法的优点:程序是对算法精确.优雅和完全的描述:可以通过运行程序来学习算法的各种性质:可以在应用程序中直接使用这些算法.还有这种学习算法的缺点缺点:分离思想和实现细节的困难

汇编入门学习笔记 (三) —— 第一个程序

疯狂的暑假学习之  汇编入门学习笔记 (三)-- 第一个程序 参考:<汇编语言> 王爽  第四章 1.一个源程序从写到执行的过程 第一步:编写汇编源程序 第二步:对源程序进行编译连接 第三步:在操作系统中执行 2.源程序 代码: assume cs:first first segment start: mov ax,2 add ax,ax add ax,ax mov ax,4C00H int 21H first ends end start 代码解释: assume .segment.ends

商城系统没有这些后台功能,就是渣渣!

随着微信市场的不断扩大,各种微信商城系统也层出不穷.在众多的商城系统中,无论好坏,有些后台功能都是必不可少的.有些功能,有没有都不会影响商城系统的正常运作.有的功能缺失了之后,商城系统是没有办法正常的运作. 要想商城系统正常的运作,有些功能是必须不能少的.少了之后,商城系统真的就会"玩不转"的. 商城系统的哪些后台功能是必不可少的呢? 商品管理 做商城系统,如果缺少商品,那是真的什么都做不了.商品管理功能,是商城系统最基本的一个功能.商品管理一般包括基本的商品介绍.价格.数量.上下架等

Android编程权威指南-读书笔记(二)-第一个小程序

Android编程权威指南-读书笔记(二) -第一个小程序 第一个例子介绍 应用名为GeoQuiz.用户通过单击True或False按钮来回答屏幕上的问题,GeoQuiz可即时反馈答案正确与否. 这个例子为我们简单介绍了几个基本组件的使用,以及基本的事件监听.让我们对基本组件的使用和事件的监听有一个基本的了解. 这篇文章分为2个部分,第一部分就是创建简单的UI.第二个部分就是对这个UI增加代码来响应一些操作. (注:所有不明白或者不理解的东西其实都不重要,后面都会有更详细的介绍.) 本章的目标

Django的第一个页面

1.创建目录 django-admin startproject myblog 2.项目结构: (1)manage.py 与项目进行交互的命令行工具集的入口(项目管理器) 里面有一个命令 runserver(我们可以通过它来执行程序) 在runserver后面加端口号 python manage.py runserver 9999 (2)myblog目录(默认和项目是一样的) (1)__init__.py 声明模块的文件,内容默认为空(myblog变成了一个模块,可以直接在电脑中使用) (2)s

TabHost和ViewPager结合第一个页面不显示

============问题描述============ 我使用TabHost和ViewPager想实现滑动切换的效果,但一打开程序,ViewPager的第一个页面是不会显示的(空白),只有点击了其他Tab,再点回第一个Tab,才会显示ViewPager的第一个页面,我在一开始已经用了mViewPager.setCurrentItem(0)指令,但还是无效,请哪位大侠指点一下!!! package com.product.shiningbaby.fragment; import android.