码迷,mamicode.com
首页 > 其他好文 > 详细

angular05

时间:2017-06-19 13:13:58      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:otherwise   android   function   服务器   产品经理   

基本流程:

产品经理:根据客户的需求,编写需求文档,原型图。

开发人员:根据原型图做开发

①前端:(web、android、iOS) 与后端约定好需要的接口和数据格式

②后端:写API


先去模拟json数据,能否正常显示,再与后端联合调试,交给测试部门,部署到线上,配合着运营部门,进行开发的迭代




项目的技术架构:

SPA应用:采用angularJS实现SPA应用(路由、MVC、$http)

响应式:bootStrap(视图)

服务器端:php实现与数据库的交互(数据库)







使用ngRoute搭建SPA应用的基本步骤:

①引入angular.js angular-route.js

②创建模块,指定依赖于ng、ngRoute

③ng-view

④创建代码片段

⑤路由词典

app.config(function($routeProvider){


$routeProvider.when(‘/start‘,{

templateUrl:‘tpl/start.html‘,

controller:‘startCtrl‘

})

.otherwise({redirectTo:‘/start‘})

})


跳转:

① <a href=‘#/start‘></a>

② $location.path(‘/start‘);


参数传递:

方式1:

①明确发送和接收 ②配置接收方的路由 $routeParams.id 

③<a href=‘#/start/12‘></a> $location.path(‘/start/12‘);

方式2:

借助父控制器或者$rootScope

方式3:

localStorage/sessionStorage...


1、项目的搭建

2、所有静态页面的编写---》运行通畅,数据静态死数据

3、调用php页面,联调。



代码片段:start  main detail order myOrder


一、搭建项目框架


1、创建项目,添加css、js、img、tpl文件夹,添加必须引用的css、js文件,添加自定义的css、js文件以及img图片,并创建完整的引导页面kaifanla.html;


2、编写kaifanla.html文件:

  定义模块ng-app=”kaifanla”

  引入bootstrap.css以及自定义的css文件

  定义用于替换模板的视图

  引入angular.js angular-route.js文件,并引入自定义的js文件。


3、添加模板文件:添加 start/main/detail/order/myorder页面,每个页面中删掉原有内容,添加一个文字;


4、编写 kaifanla.js 文件

  定义各自的控制器

  定义路由:为所有模板定义路由,默认跳转到start


5、测试:跳转是否正常,是否有错误







基本流程:

产品经理:根据客户的需求,编写需求文档,原型图。

开发人员:根据原型图做开发

①前端:(web、android、iOS) 与后端约定好需要的接口和数据格式

②后端:写API


先去模拟json数据,能否正常显示,再与后端联合调试,交给测试部门,部署到线上,配合着运营部门,进行开发的迭代




项目的技术架构:

SPA应用:采用angularJS实现SPA应用(路由、MVC、$http)

响应式:bootStrap(视图)

服务器端:php实现与数据库的交互(数据库)







使用ngRoute搭建SPA应用的基本步骤:

①引入angular.js angular-route.js

②创建模块,指定依赖于ng、ngRoute

③ng-view

④创建代码片段

⑤路由词典

app.config(function($routeProvider){


$routeProvider.when(‘/start‘,{

templateUrl:‘tpl/start.html‘,

controller:‘startCtrl‘

})

.otherwise({redirectTo:‘/start‘})

})


跳转:

① <a href=‘#/start‘></a>

② $location.path(‘/start‘);


参数传递:

方式1:

①明确发送和接收 ②配置接收方的路由 $routeParams.id 

③<a href=‘#/start/12‘></a> $location.path(‘/start/12‘);

方式2:

借助父控制器或者$rootScope

方式3:

localStorage/sessionStorage...


1、项目的搭建

2、所有静态页面的编写---》运行通畅,数据静态死数据

3、调用php页面,联调。



代码片段:start  main detail order myOrder


一、搭建项目框架

1、创建项目,添加css、js、img、tpl文件夹,添加必须引用的css、js文件,添加自定义的css、js文件以及img图片,并创建完整的引导页面kaifanla.html;

2、编写kaifanla.html文件:

  定义模块ng-app=”kaifanla”

  引入bootstrap.css以及自定义的css文件

  定义用于替换模板的视图

  引入angular.js angular-route.js文件,并引入自定义的js文件。

3、添加模板文件:添加 start/main/detail/order/myorder页面,每个页面中删掉原有内容,添加一个文字;

4、编写 kaifanla.js 文件

  定义各自的控制器

  定义路由:为所有模板定义路由,默认跳转到start

5、测试:跳转是否正常,是否有错误


二、静态页面的编写


1、起始页 start

2、菜单列表 main

header/footer/菜品列表

3、详情页 detail

4、表单提交页 order

5、个人中心页 myOrder



三、编写php页面

分析

main:

①分页查询 dish_getbypage.php(每次读5条)

②根据关键词进行搜索  dish_getbykw.php


detail:

①根据id获取详情 dish_getbyid.php


order:

①将提交的用户数据插入到数据库中 order_add.php


myOrder:

①获取当前用户的订单信息 order_getbyphone.php








三、SQL语句的基本语法


1、MySQL分页查询

分页查询的语法如下:

  SELECT 列名 FROM 表名  LIMIT  起始行, 行数 ;


提示:起始行从0开始;行数指定此次返回的最多可能数。


2、MySQL查询

精确查询:

SELECT 列名 FROM 表名 WHERE did=3;

SELECT 列名 FROM 表名 WHERE name=‘鸡蛋‘;


模糊查询:

SELECT 列名 FROM 表名 WHERE 列名 LIKE ‘%关键字%‘



3、MySQL获取自增长的键值

获取最近的一条INSERT语句产生的自增主键,代码如下:

$id = mysqli_insert_id( $conn );


4、MySQL跨表查询/多表查询


跨表查询时,代码如下所示:


  SELECT 表1.列1,表1.列2, 表2.列3, 表2.列4    FROM 表1, 表2   WHERE 表1.列=表2.列;


注意事项:

①初始化数据库,启动apache和mySql

②工程放在C:/xampp/htdocs/...

③调试要访问php文件,端口:80. 

访问php的时候,直接将php文件内容返回了,说明访问的方式是不对的!

④写完php文件之后,浏览器先去访问,如果测试没问题,接着实现具体的模型数据、视图。


1、dish_getbypage.php

分页加载的实现


解析参数start

连接数据库

sql语句,从start开始读取5条数据

将结果返回


2、dish_getbykw.php

根据用户在输入框输入的关键字,从数据库中找原材料或者菜品名称 包含关键字的数据,将数据返回。


模糊查询:

SELECT 列名 FROM 表名 WHERE 列名 LIKE ‘%关键字%‘



3、dish_getbyid.php

根据用户点击的菜品的id,从数据库kf_dish表中读取did和参数一致的一行数据,然后返回。


SELECT 列名 FROM 表名 WHERE did=3;


4、order_add.php

将用户所输入的信息,判断信息是否都传过来了,添加到kf_order,

返回信息:msg:succ/error



5、order_getbyphone.php

根据手机号去查找所有的订单信息。


解析参数拿到手机号

连接数据库

跨表查询

将结果返回


跨表查询时,代码如下所示:


  SELECT 表1.列1,表1.列2, 表2.列3, 表2.列4    FROM 表1, 表2   WHERE 表1.列=表2.列;






















本文出自 “祝融与火” 博客,谢绝转载!

angular05

标签:otherwise   android   function   服务器   产品经理   

原文地址:http://notezr.blog.51cto.com/9424982/1939609

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!