说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

实例剖析:如何用Foundation For Apps创建完美Web应用

HTML文档下载 WORD文档下载 PDF文档下载
不久前,Zurb推出了单页面App框架Foundation for Apps,其与Foundation 5密切相关。它试图提供一种开发Web应用既快速又简单的方法,本文通过实战案例,分析了该框架的使用方法,是一份综合性指南。

【编者按】本文是Smashing Magazine中《Creating A Complete Web App In Foundation For Apps》一文的简译内容,详细描述了用Foundation For Apps创建完美Web应用“星球大战知识库”的全过程。

Foundation for Apps是Zurb推出的一个新型单页面App框架,与Foundation 5(也称为Foundation for Sites,一个广泛使用的前端框架)密切相关。它围绕AngularJS和弹性网格框架构建而成。它试图让Web应用的开发过程既快速又简单,开发者可以快速开始编写针对应用的独一无二的代码,而非模板文件。

Foundation for Apps于2014年年底发布,尚未被广泛使用,因此有关如何使用这一框架的优质信息源比较少。本文将作为一篇综合指南,对构建一个功能性移动App的全过程进行介绍。文中的技术细节是为客户打造应用程序的基础,本教程也可看作是对AngularJS和单页应用在更广阔范围下如何使用的有力说明。

根据今年后半年即将上映的一部新电影,我们将构建一个“星球大战知识库”。它是一个使用RESTful API、缓存和Foundation for Apps、AngularJS多个特性的响应式Web应用程序。

想要直接跳到干货?

  • DEMO观看;
  • 在GitHub上查看;
  • 文件下载。

入门指南

快速浏览官方文档,其对设计样式进行了很好解释,但并没有对应用程序功能进行详细说明。将这一卓越的AngularJS文档放在手边,并牢牢记住Foundation for Apps提供了一些标准之外的服务,AngularJS的一些功能可能无法直接使用。同样要注意,AngularJS 和Foundation for Apps与生俱来就不太适用于对SEO有要求的App,因为大部分内容需要通过AJAX加载。

我们的应用程序将从Star Wars API(在SWAPI中)中提取数据。先浏览下SWAPI文档,了解其中的数据和结构。为了简单起见,我们的应用程序将建立在这一结构之上。

首先,我们要安装Foundation for Apps并创建项目。请确保您已经安装了Ruby(OS X已默认安装)和Node.js,然后遵循Foundation for Apps详细文档中的四个步骤。即便你以前没使用过命令行,这个过程也十分简单。当你完成该些步骤后,在浏览器中输入“http://localhost:8080/#!/”,即可看到应用程序的默认主页。


Foundation for Apps的默认主页 (浏览大图)

让我们熟悉一下项目里的文件和文件夹。

应用程序根目录中唯一需要我们注意的文件是gulpfile.js,它向Gulp构建过程发送指令,让其为应用启动服务。Gulp是一个构建系统,与Grunt非常相似。稍后,如果我们想添加一些AngularJS模块或插件时,可以通过JavaScript、CSS文件(引用了这些模块或插件)来更新该Gulp文件。

 Cient文件夹里能找到其它我们关注的文件夹:

  •  clients/assets/js/app.js,应用程序的控制器、指令和自定义过滤器在该文件中;
  •  应用程序的所有SCSS文件都存放在clients/assets/scss里;
  •  clients/index.html是应用程序的主页模板;
  • 在clients/templates/中可以找到所有页面的模板,其中大多数还未创建。

构建模板和主页面

让我们开始构建吧!index.html页面无法很好地满足实际应用的需要,所以首先修改该页面。我们针对小尺寸屏幕增加了Off-Canvas菜单、切换按钮及漂亮的淡入淡出效果(利用Foundation for Apps中“Motion UI”的类样式实现)。你可以直接从Github repository中index.html文件里复制这些代码。

在_settings.scss文件中添加一些SCSS变量来设置颜色、字体和断点:

  $primary-color: #000;$secondary-color: #ffe306;$body-background: $secondary-color;$breakpoints: (  small: rem-calc(600),  medium: rem-calc(900),  large: rem-calc(1200),  xlarge: rem-calc(1440),  xxlarge: rem-calc(1920),);$h1-font-size: rem-calc(80);$body-font-family: "brandon-grotesque", Helvetica, Arial, sans-serif;$header-font-family: "flood-std", Helvetica, sans-serif;

现在我们要加点儿料美化一下app.scss。你可以直接参考Github repository中的该文件。

接下来,快速重写默认的home.html文件,该文件在clients/templates/ 目录下,此目录列出了所有要建页面的链接菜单:

---name: homeurl: /---<div class="grid-content">  <h1>Star Wars Compendium</h1>  <p class="lead">Foundation for Apps using Star Wars API</p>  <hr>  <ul class="home-list">    <li><a ui-sref="films">Films</a></li>    <li><a ui-sref="species">Species</a></li>    <li><a ui-sref="planets">Planets</a></li>    <li><a ui-sref="people">People</a></li>    <li><a ui-sref="starships">Starships</a></li>    <li><a ui-sref="vehicles">Vehicles</a></li>  </ul></div>

 我们的模板现在看起来已经相当别致——不再是千篇一律的Foundation。


 我们的模板——已经有了些看头(浏览大图)

创建电影列表

我们正大步向前。在templates文件夹中,为首个子页面创建模板文件:films.html。把下面小段代码复制粘贴到顶端:

---name: filmsurl: /films/:id?p=controller: FilmsCtrl---

 这段代码告诉了我们三件事:

  1. Films为该页面名称,在指向该页面的所有链接中可使用;
  2.  URL将有两个可选参数:id(根据我们的数据生成的影片ID)和p(所在电影列表中的页码数);
  3.  我们将使用自定义AngularJS控制器FilmsCtrl,而不是Foundation for Apps自动创建的默认空白控制器。

因为我们要使用自己的控制器,接下来就要在app.js里创建一个(控制器)。浏览下面的控制器,它将被用于电影列表和单个影片页面。你能看到,该控制器保持追踪URL参数,定位我们所在的结果页面,从外部API里获取所需信息(是电影列表还是单个影片的细节,取决于URL参数),并使用$scope变量将这些信息返回到页面视图里。等angular.module声明关闭后,再把它添加到app.js中。

controller('FilmsCtrl',  ["$scope", "$state", "$http",function($scope, $state, $http){  // Grab URL parameters - this is unique to FFA, not standard for  // AngularJS. Ensure $state is included in your dependencies list  // in the controller definition above.  $scope.id = ($state.params.id || '');  $scope.page = ($state.params.p || 1);  // If we're on the first page or page is set to default  if ($scope.page == 1) {    if ($scope.id != '') {      // We've got a URL parameter, so let's get the single entity's      // data from our data source      $http.get("http://swapi.co/api/"+'films'+"/"+$scope.id,          {cache: true })        .success(function(data) {          // If the request succeeds, assign our data to the 'film'          // variable, passed to our page through $scope          $scope['film'] = data;        })    } else {      // There is no ID, so we'll show a list of all films.      // We're on page 1, so the next page is 2.      $http.get("http://swapi.co/api/"+'films'+"/", { cache: true })        .success(function(data) {          $scope['films'] = data;          if (data['next']) $scope.nextPage = 2;        });    }  } else {    // Once again, there is no ID, so we'll show a list of all films.    // If there's a next page, let's add it. Otherwise just add the    // previous page button.    $http.get("http://swapi.co/api/"+'films'+"/?page="+$scope.page,      { cache: true }).success(function(data) {        $scope['films'] = data;        if (data['next']) $scope.nextPage = 1*$scope.page + 1;      });      $scope.prevPage = 1*$scope.page - 1;  }  return $scope;}])  // Ensure you don't end in a semicolon, because more     // actions are to follow.

保存完app.js后,你需要通过终端(Control+ C用来取消操作,然后再运行foundation-app watch)重启服务,以保证应用程序包含该新模板(files.html)文件,而该文件中都创建了新控制器(app.js)。

就是这样,我们有了一个功能完整的控制器,它能从外部RESTful API资源中获取数据,将结果缓存至浏览器的session中,并把数据返回到视图页面中。

再次打开films.html,开始构建可以访问的数据视图。首先增加展示电影列表的视图内容。我们可以访问所有添加到$scope变量中的属性,无需加前缀$scope,如本例中的films、prevPage和nextPage。在模板现有内容下添加如下代码:

<div class="grid-content films" ng-show="films">  <a class="button pagination"    ng-show="prevPage"    ui-sref="films({ p: prevPage })">    Back to Page {{prevPage}}  </a>  <div class="grid-content shrink">    <ul class="menu-bar vertical">      <li ng-repeat="film in films.results">        {{film.title}}      </li>    </ul>  </div>  <a class="button pagination"    ng-show="nextPage"    ui-sref="films({ p: nextPage })">    To Page {{nextPage}}  </a></div>

非常明显!如果有多页的数据,我们就会得到一个电影名称列表和页码数。但这些数据还没有特别明显的用途,接下来我们把影片名称换成了影片页面所对应的链接。

我们计划将影片ID作为URL的id参数。我们已访问影片的url属性,正好包含了影片ID,即最后一个斜杠前的最后一个参数。然而,我们如何才能从访问的URL中获取唯一的ID?AngularJS通过自定义过滤器使其变得很容易。把{{film.title}}封装在一个链接里,为该连接添加ui-sref属性(用来设置内部链接),其值为包含定制过滤器的film.url数据,示例代码如下:

<a ui-sref="films({ id:( film.url | lastdir ), p:'' })">  {{film.title | capitalize}}</a>

现在页面仍处于不可用状态,因为应用无法识别lastdir和capitalize过滤器是什么。我们需要在app.js文件中控制器的后面定义这些过滤器:

.filter('capitalize', function() {  // Send the results of this manipulating function  // back to the view.  return function (input) {    // If input exists, replace the first letter of    // each word with its capital equivalent.    return (!!input) ? input.replace(/([^\W_]+[^\s-]*) */g,      function(txt){return txt.charAt(0).toUpperCase() +        txt.substr(1)}) : '';  }}).filter('lastdir', function () {  // Send the results of this manipulating function  // back to the view.  return function (input) {    // Simple JavaScript to split and slice like a fine chef.    return (!!input) ? input.split('/').slice(-2, -1)[0] : '';  }})

 搞定!现在我们有了电影列表,每部电影都能链接到各自的电影页面。


电影链表:不知为什么,总对前面部分有些担心(浏览大图)。

然而,点击链接后进入的却是一个空白页,因为films.html还只是个完整的电影信息列表,还没有被构建成可以显示具体电影信息的页面。展示电影细节是我们下一步的工作。

展示一部电影的细节

FilmsCtrl控制器里的$scope.film变量(与$scope['film']相同)中已包含了单个影片页面所需的所有数据。所以,重新使用films.html,并增添另一部分内容,该内容只有在单个file变量被设置时才可见。接着我们会为<dl>中的每组<dt>和<dd>中设置一个键值对(key-value pair)。同时要记住film中某些字段,如characters在数组中有多个值,需通过ng-repeat嵌套一一显示出来。为了把每个演员与该演员的页面连接起来,我们将使用在影片列表中用到的同样方法:用lastdir过滤器,根据他/她/它的ID,链接至每个演员对应的people页面。

<div class="grid-content film"  ng-show="film" ng-init="crawl = 'false'">  <h1>Episode {{film.episode_id | uppercase}}:     {{film.title}}</h1>  <hr>  <dl>    <dt>Opening Crawl</dt>    <dd ng-class="{'crawl':crawl === true}"       ng-click="crawl === true ? crawl = false : crawl = true">      {{film.opening_crawl}}</dd>    <dt>Director</dt>    <dd>{{film.director | capitalize}}</dd>    <dt>Producer</dt>    <dd>{{film.producer | capitalize}}</dd>    <dt>Characters</dt>    <dd ng-repeat="character in film.characters"      ui-sref="people({ id:(character | lastdir), p:''})">      {{character}}    </dd>  </dl></div>

可是,当我们浏览每部电影的条目时,演员列表仅显示了与该演员相关的URL,而不是演员的名字。


这些人物到底是谁?这样可不行(观察大图)。

我们需要用演员名字来替换这些URL文本,但是我们还没有这些关键性数据。或许在我们获取film的URL中会包含演员的名字。我们再次打开app.js,并增加getProp命令。

.directive("getProp", ['$http', '$filter', function($http, $filter) {  return {    // All we're going to display is the scope's property variable.    template: "{{property}}",    scope: {      // Rather than hard-coding 'name' as in 'person.name', we may need      // to access 'title' in some instances, so we use a variable (prop) instead.      prop: "=",      // This is the swapi.co URL that we pass to the directive.      url: "="    },    link: function(scope, element, attrs) {      // Make our 'capitalize' filter usable here      var capitalize = $filter('capitalize');      // Make an http request for the 'url' variable passed to this directive      $http.get(scope.url, { cache: true }).then(function(result) {        // Get the 'prop' property of our returned data so we can use it in the template.        scope.property = capitalize(result.data[scope.prop]);      }, function(err) {        // If there's an error, just return 'Unknown'.        scope.property = "Unknown";      });    }  }}])

getProp每次从$http.get返回的数据中返回单一属性,从中我们可以提取出所需要的属性。为了使用该指令,需要把它添加到ng-repeat循环内,就像这样:

<span get-prop prop="'name'" url="character">{{character}}</span>

很好!现在我们有了每个演员的名称及对应页面的链接,而不只是一个不明所以的URL。数据字段的其它数据添加到file页面后,这个页面就算完成了(Github Repository中查看films.html的其余代码)。


这样就好多了(观看大图)

为了重用而重构代码

通过SWAPI文档和应用程序其余部分的规划,我们清楚地看到,所有其它页面的控制器与这个极为相似,只是在获取的数据分类上有些许不同。

根据这一想法,我们把file控制器中代码移至称为genericController的功能函数,并放在app.js最后一个右括号的前面。同时还需要用变量multiple(五个实例)来替换字符串里的'films',用single(一个实例)替换'film',因为它们代表了每个页面实体的复数和单数形式。这正好让我们DRY,是一种易于读取和理解、具有可重用性的代码。

现在我们可以利用新的genericController函数(包含变量数据的复数和单数形式)新建并调用FilmsCtrl控制器,像参数那样:

.controller('FilmsCtrl', function($scope, $state, $http){  $scope = genericController($scope, $state, $http, 'films', 'film');})

很棒!我们有一个可重用的控制器,它能够提取任何给定页面所需的数据,并在一定的样式呈现出来!现在可以在FilmsCtrl后以相同的方式创建其他页面的控制器。

.controller('SpeciesCtrl', function($scope, $state, $http){  $scope = genericController($scope, $state, $http, 'species', 'specie');}).controller('PlanetsCtrl', function($scope, $state, $http){  $scope = genericController($scope, $state, $http, 'planets', 'planet');}).controller('PeopleCtrl', function($scope, $state, $http){  $scope = genericController($scope, $state, $http, 'people', 'person');}).controller('StarshipsCtrl', function($scope, $state, $http){  $scope = genericController($scope, $state, $http, 'starships', 'starship');})

接下来,采用与创建films.html相同的方式,为planets、species、people、starships和vehicles创建模板HTML文件。创建时要参考SWAPI文档里每类数据中的各个字段。

瞧!现在所有页面都显示出正确的数据并相互关联!


完整的应用程序(观看大图)

结束语

应用程序完成了!我们的应用DEMO(下文有链接)由Aerobatic托管,专门针对前端Web应用。在资源库里,你会看到我们增加了一些特殊选项,以利用Aerobatic API网关,该网关设置了一个代理,可以缓存服务器上被请求的API数据。在没有缓存的情况下,该应用即要进行延迟限制又要尽情请求数限制(SWAPI对每个域的请求数量有限制,跟其他APIs一样),因为我们的数据不经常变化,所以在第一次加载之后,服务器缓存使得一切变得非常高速。因为我们限制了onload请求和图像(数量),第一次加载速度较慢也可以接受,而且,在每个加载页面上,为了使应用速度更快,标题菜单会留在该页面上。

在DEMO和资源库里,你能看到我们在详细页面中添加了另一个API调用,它通过Google自定义搜索在Wookieepedia和StarWars.com中抓取每个实体的图像URI。因此,现在每个详细页面上都显示了动态且相关性极高的图像。

看看下面的演示,或者仔细分析隐藏部分和特定Foundation技巧的源代码,或者把仓库下载下来,然后在本地构建并改进它。

  • Star Wars Compendium,Foundation for Apps DEMO展示;
  • Star Wars Compendium Using Foundation for Apps,GitHub上;
  • 源文件下载(ZIP)。

原文链接:Creating A Complete Web App In Foundation For Apps

欢迎加入CSDN前端交流群:218126086,进行前端技术交流。 

Windows Server 2012域服务的六大改进 如何编写出优美的JavaScript代码? Unity CEO:不会因赌博游戏谋取金钱利益 云领域:且看亚马逊、Rackspace、微软及谷歌四国争霸 十一位EMC高管读2013技术趋势 你准备好了吗? Yahoo:拥抱Hadoop和HTML5 苹果聘女黑客为系统安全员 曾让Vista推迟发布 移动游戏定价之谜:0.99美金行不通 9.99美金和19.99美金才是王道 2012末日年:《时代》评选年度十大App 使用HTML5 Web存储实现离线工作 紧跟亚马逊、谷歌步伐 微软下调Azure云服务价格 云计算一周热点回顾:Hadoop专家分享大数据技术工具与最佳实践 Python之父Guido Van Rossum离开谷歌 一月加盟Dropbox 图灵奖获得者Butler Lanpson:计算机在做些什么 华为高级技术经理Anoop Sam John:HBase的二级索引 秦令今:技术是竞争的核心,形成自己的特色! 兰旭:拒绝同质化,做自己的真材实料! Cloud Foundry直面PaaS对手 初具商用能力 IndieBros访谈:探寻《2+18+200万》背后的故事 移动周报:生存还是毁灭 HTML5未来路在何方? 开发者的新机遇:微软生态系统打开开源大门 阻碍创新:谷歌、Facebook请求驳回抽象专利概念 Apple专利战分析:战火不停 创新不止 史上最牛独立开发者:花20美元狂赚100万美元 Twitter VS. Instagram:照片分享大战爆发 第二届“龙芯杯”中国开源软件设计大赛圆满落幕 TUP Masters第六期实录:Jeffrey Richter讲解Win8应用开发与.NET4.5 [简讯]Bootstrap 2.2.2发布 官博宣布新特性 我们正处于API的黄金时代吗? 敏捷开发的26条至理名言 12月10日:1815年首位程序员Augusta Ada出生 可不可以让 CppWebBrowser1的背景不是白色? 热热热!!!热疯了!!! 我的喇叭哪儿去了? 我的PB程序出了问题了!!! sql server中哪个函数是用于字符串与整型之间转换的? 我想限定文本输入框只能输入10个汉字或20个英文字符,但文件输入框却只能输入10个英文字符,如何解决? 当我将这样的字符串“dsdsdsdfsdffsdsdfsdfsfdsdfsdfsfsfdsdffs.....”放入我的表格中时,无论怎样设置也不折行,影响了部局,如何解决? MFC中视图(view)是怎样随着主窗口的大小改变而改变的。 急!请教!!猫猫连接,用数据管道同时访问两库,访问不到对方的网络库(sybase) 关于电影下载 我已经把一个exe文件加入到我自己的程序中了,请问在我的程序中应该样调用该exe文件呢? 哪位高手知道RTF格式的含义?或者更好,知道Rxlib中的RXRICHEDIT控件中识别RTF格式的方法? Delphi编写的DLL在VC下不能使用 请问哪儿有电工的<>的电子版下载?我只有这么多了 msdn2001年4月版的讨论 请问哪儿有电工的<>的电子版下载? 请教高手!!!! 请进 各位:周末愉快!为何我的多表查询用updatebatch提交时总是报错? 我不明白!!!! 请问,BAS 与 VBJ 有什么区别吗?为何他们安装在同一个目录呢? 如何得到系统进程的列表? vi下如何撤销操作? 我们知道MFC中的对象序列化做得很好,不知在DELPHI中怎样来实现对象的序列化? 我已经学过C++,想学VC++请问哪本书入门比较好啊? 欢迎使用技巧酷skillstore beta 1.00 有个可以显示IP的QQ,很不可思议,讨论一下好吗? 怎样在程序运行的时候加上参数,比如说双击文本文件打开记事本 谁有运行后烧硬件的程序 用VC开发如何实现网页的同步浏览呢? 动态产生的datawindow怎样调整它的显示? 怎么从ORACLE白痴到高手 怎样通过程序员考试??????? 庆祝北京成功 COM基础问题 感谢huangguanshu回答我的问题,请进来拿这200分 老问题了,access to SQLserver 关于的js问题(高分相送) 谁有运行后烧硬件的程序,要多少分都给. 请高手赐教, DDDW 的问题 ?谁有运行后烧硬件的程序,要多少分都给. hotmail box怎么用不了? sql的image型字段内容如何输入? 谁有运行后烧硬件的程序,要多少分都给 谁有运行后烧硬件的程序??要多少分都给 谁有运行后烧硬件的程序???要多少分都给 Linux是不是不支持POSIX IPC啊? 关于red hat 7.0与WIN98 共存的问题 关于用PostMessage发消息时所遇到的问题 火急,关于netxray的打印问题? ???????大问题。。。。。那位知道Delphi6企业版的SN? 试用适当方法表示由二元二次方程组y=x+2,y=x²的解组成的集合 求教求教QAQ 方程x²-9=0的解集是? 如果a²-4b²=20,且a+2b=-5,则a-2b的值是() A.5 B.4 C.-4 D.-5求结果 思路 速求~ 1:已知m=x-y,n=xy,试用m,n表示(x³+y³﹚²,2:当x=-1时,x³+2x²﹣5x-6=0,请根据这一事实,将x³+2x²-5x+6分解因式.没分了,不好意思, 方程x²+x+1=0所有实数解的集合,用描述法表示. 因式分解4ab²-4ab+a² A.4b(b-a)+a² B.(2b-a)² C.(2b-a)(2b-a) D.(2b+a)² 设Y=X²-ax+b,A={x|x-y=o},B={X|y-ax=0},若A={1,-3},求集合B(用列举法表示) 用公式法解下列方程(1)x²-6x+1=0(2)2t2-t=6 (3)4x2-3x-1=x-2 (4)3x(x-3)=2(x-1)(x 1) 已知a、b满足a(a+1)-(a²+2b)=1,求a²-4ab+4b²-2a+4b的值. 设集合A={x|x²-2x-3=0},B={x|x²-ax-a²+1=0}(1)若a=-1,求A∪B(2)若A∩B={3},求实数a的值 方程x²+x+1+2根号(x²+x+4)=0用换元法解题,设y=___________,则所得方程为_______ 已知a-b满足a(a+1)-(a05+2b)=1,求a²-4ab+4b²-2a+4b 若集合A={-1,3}集合B={x|x²+ax+b=0}且A=B求实数a,b 用列举法表示集合 B={y∈N}|y=—x平方+6,x∈N} C={(x,y)|y=—x平方+6,x∈N,Y∈N} 用平面图形的面积来解释恒等式(a+2b)(a-2b)=a²-4b² 其中(a>0,b>0) 已知实数ab 分别满足a²+2a=2 b²+2b=2 求a分之1 + b分之1 的值 请用图形面积说明(a+2b)(2a+b)=2a²+5ab+2b²恒成立,画出图形 设A={(x,y)|y=x²+2x+5},B={(x,y)|y=ax+1},问:(1)a为何值集合A∩B有两个元素?(2)a为何值时,集合A∩B至少有一个元素? 已知实数a,b满足a(a+1)-(a^+2b)=1,求a^-4ab+4b^-2a+4b的值 我们可以用几何图形来解释一些恒等式,请构图解释(a-2b)²=a²-4ab+4b² 用列举法表示集合A={y/y=X²,-1≤x≤1,x属于N},-1≤x我知道-1≤x≤1 中x=-1,0,1 因为x属于N,所以x=0,1 x的值用集合可表示为{0,1}.当x=0时 y=0 ,当x=1时 y=1 所以A={0,1}.亲 这是为什么呢 已知实数a,b满足a²+2a=2,b²+2b=2,且a≠b,求b/a+a/b的值 在这个反比例函数y=ax²+bx+c的图像中如何证明c-4b>0图图 集合P={(x,y)| y=x²+2,|x|≤1,x∈Z},用列举法表示集合P 已知实数a、b满足a²+2a-1=0,b^4-2b²-1=0,且ab²1,(在下面补充题目)求[﹙ab²+b²+1﹚/a]²º¹º的值上面打错了,是“且ab²≠1”,不是“且ab²1” 已知a^2+2ab+b^2=0,求代数式a(a+4b)-(a+2b)(a-2b) 集合﹛﹙x,y﹚│y=-x²+6,x∈N,y∈N﹜怎样用列举法表示?问题在于它没给符号,那我怎么表示? 已知2b-b=7,求代数式[a²+b²-(a-b)²+2b(a-b)]÷4b的值 已知a^2+2ab+b^2=0,求代数式a(a+4b)-(a+2b)(a-2b)的值 '用列举法表示下列集合 (1)A={x∈N∈0 已知a²+b²+2a+4b+5=0.求代数式[(a+b/2)+(a-b/2)²]·(2a²-1/2b²)的值. 已知a+2ab+b=0,求代数式a(a+4b)-(a+2b)(a-2b)的值. 用列举法表示下列集合 ①A={x|x²=9} ②B={x∈N|1≤x≤2} ③C={x|x²-3x+2=0} 若实数a,b满足a+b²=1 ,则a²+4b² 的最小值是..? (a²+b²)-4a²b² 已知a²+2ab+b²=0,求代数式a(a+4b)-(a+2b)(a-2b)的值第二道详解 2x²-3x=2 2x²-4根号下2x+3=0 3x²+2x=0 用配方法解方程 已知a,b为实数,则a²+ab+b²-a-2b的最小值 已知a²+2ab+b²=0,求代数式a(a+4b)–(a+2b)(a–2b)的值 用配方法说明代数式中x平方-12x+40的值恒大于零 解方程:2x²+2/x²-7x+2=0 已知实数a,b满足a(a+1)-(a²+2b)=1,求a²-4ab+4b²-2a+4b的值 用配方法说明:无论x取何值,代数式2x-x的平方-3的值恒小于0. 写出由方程x²-(a+1)x+a=0的解组成的集合中的元素答案清楚,就是不知道怎样描述这个集合,希望过程能写详细点 设a.b为实数,求a²+2ab-2b²-4b+5的最小值,并求此时a与b的值.急用阿 用配方法说明代数式X平方--5X+7的值恒大于0 以方程x²-4x+4=0和方程x²-x-2=0的解为元素的集合中含有___个元素. 已知a-2b=7,ab=-3求a²+4ab+b²急需. 代数式x^2+2mx+2m^2+1的值恒大于零 以方程x²-4x+4=0和方程x²-x-2=0的解为元素的集合中含有几个元素 A-2B=7 AB=3 求 A²+4AB+B² 设a=1/2m+1,b=1/2m+2,c=1/2m+3,求代数式a²+2ab+b²-2ac-2bc+c²的值.要过程! 用列举法写出方程 x²-(a+1)x+a=0 的解集 已知(a+2b)²=7,(a-2b)²=3,求:⑴a²+b²的值,⑵ab的值 若代数式mx²+2(3-2m)x+1(m≠0)是关于x的完全平方式,求m值 用列举法表示下列方程x²-2x+1=0的解集 计算:[﹙ab-2b﹚²×﹙2a﹚²-﹙4ab﹚²]÷[16a×﹙ab﹚²]还有一题,把下列个多项式分解因式(m²+3)²-8(m²+3)+16还有一题,当y-x=5时,求x²-y²+5x+5y+2009的值 试用适当的方法表示由二元二次方程组{y=X+2} 组成的集合 { y=X²}试用适当的方法表示由二元二次方程组{y=X+2} 组成的集合{ y=X²} 用公式法解关于x的方程ab(x²+1)=a²x+b²x(a²>b²) 已知a-2b=½,ab=2.求a³b-4a²b²+4ab³的值.
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn