php txt实现增删改查,增删改查的步骤.txt

准备工作：安装wampserver,并执行SQL文件夹下的SQL语句，创建对应的数据库

第一步:

引入所有的JS文件，包括了

bootstrap的CSS样式

表格的样式

JQ的文件

angular的文件

让angular支持动画操作

angular路由的支持

angular中提供了支持boostrap的功能

angular设计表格

分页

动画样式

我们自定义的一些样式

启动核心代码

动画

所有的控制器

所有的过滤器

所有的服务

第二步：

创建angular模块，并配置路由

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.run(function($rootScope, $state, $stateParams) {

$rootScope.$state = $state;

$rootScope.$stateParams = $stateParams;

});

routerApp.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/index');

$stateProvider

});

第三步:

我们首先要创建我们的首页路由,让用户在打开这个项目的时候，进入登录页面

在index.html中添加

在$stateProvider中添加首页路由

.state('index',{

url:'/index',

views:{

'':{

templateUrl:'tpls/home.html'

},

'main@index':{

templateUrl:'tpls/login.html'

}

}

})

在home.html中添加main视图

最后创建login.html用户登录页面

这里，我们要说明一下，任何一个页面都需要一个单独的模块来进行管理才行,一个页面对应一个模块

angularJS 前端MVC开发实例

用户名

密码

提交

第四步:

完成我们登录的业务逻辑

创建登录模块loginApp,创建登录模块下的登录控制器loginController,让它来管理整个登录逻辑,并选择在app.js中注入这个模块.

//创建login模块

var loginApp = angular.module('loginApp',[]);

loginApp.controller('loginController',function($scope,$http){

$scope.formData = {};

$scope.postForm = function(){

//这句话必须加

$scope.formData.action='login';

$http({

method:'POST',

url:'./get.php',

data: $.param($scope.formData),

headers:{'Content-Type':'application/x-www-form-urlencoded'}

}).success(function(data){

console.log(data);

if(!data.success){

if(!data.errors){

$scope.message = data.message;

}else{

$scope.errorUsername = data.errors.username;

$scope.errorPassword = data.errors.password;

}

}else{

window.location.href = '#/0';

}

})

}

})

最后完成错误信息的显示

{{ errorUsername }}

{{ errorPassword }}

{{ message }}

第五步:跳转到列表页面

1、首先创建列表路由

.state('list', {

url: '/{type:[0-9]{1,4}}',

views: { //注意这里的写法，当一个页面上带有多个ui-view的时候如何进行命名和视图模板的加载动作

'': {

templateUrl: 'tpls/list.html'

},

'type@list': {

templateUrl: 'tpls/type.html'

},

'grid@list': {

templateUrl: 'tpls/grid.html'

}

}

})

2、完善列表页面

angularJS 前端MVC开发实例

分类加载中..

列表加载中...

3、完善type.html

类别名称

全部

{{list.typename}}

4、创建pageList模块，创建ListTypeCtrl控制器,并加载到routerApp中去.

var pageList = angular.module('pageList',[]);

pageList.controller('ListTypeCtrl',function($scope,$http){

$http({

method:'GET',

url:'get.php?action=get_arctype&where=reid=0'

}).success(function(data,status,headers,config){

$scope.lists = data;

}).error(function(data,status,headers,config){

console.log('error...');

})

})

5.创建arcListCtrl控制器

totals = 0;

pageList.controller('arcListCtrl',function($scope,$http,$location){

//首先先获取到当前的路径

$scope.typeid = $location.path().replace('/','');

//获取文章的总数

if($scope.typeid==0){

$get_total_url = 'get.php?action=get_total';

}else{

$get_total_url = 'get.php?action=get_total&where=typeid=' + $scope.typeid;

}

//发送请求

$http({

method:'GET',

url:$get_total_url

}).success(function(data,status,headers,config){

$scope.paginationConf.totalItems = data.total;

}).error(function(data,status,headers,config){

console.log('error....');

})

//获取到总的文章数量之后，我们其实就可以开始设置分页显示内容了.

$scope.paginationConf = {

currentPage:1,

itemsPerPage:5,

pagesLength:5,

//这里一定要注意有一个空格

perPageOptions:[10, 20, 30, 40, 50],

rememberPerPage:'perPageItems',

onChange:function(){

//获取分页的开始数

if($scope.paginationConf.currentPage == 1){

$scope.limit = 0;

}else{

//比如这里从第二页开始，那么每页显示五条数据，那么第二页就应该从第五条数据后显示五条才行.

$scope.limit = $scope.paginationConf.currentPage * $scope.paginationConf.itemsPerPage - $scope.paginationConf.itemsPerPage;

}

//根据当前的type类型，显示不同的栏目里面的内容,先显示的就是第一页的五条数据

if($scope.typeid == 0){

$geturl = 'get.php?action=get_list&offset=' + $scope.limit + 'rows=' + $scope.paginationConf.itemsPerPage + '&orderField=id&orderBy=DESC';

}else{

$geturl='get.php?action=get_list&offset='+$scope.limit+'&rows='+$scope.paginationConf.itemsPerPage+'&where=typeid='+$scope.typeid+'&orderField=id&orderBy=DESC';

}

$http({

method:'GET',

url:$geturl,

}).success(function(data,status,headers,config){

$scope.lists = data;

console.log(data);

}).error(function(data,status,headers,config){

console.log('error....')

})

}

}

6、完善grid.html页面

{{meg_success}}

{{meg_error}}

新增内容

标题	操作
{{list.title}}	详情 修改 删除

第六步:新增

1、创建新增路由

.state('add',{

url:'/add',

views: {

'': {

templateUrl: 'tpls/add.html'

},

'type@add': {

templateUrl: 'tpls/type.html'

},

'addcon@add': {

templateUrl: 'tpls/addcon.html'

}

}

})

2、创建新增页面

Angularjs 前端MVC开发实例

分类加载中...

列表加载中...

3、创建新增表单页面addcon.html

新增内容

{{meg_success}}

{{meg_error}}

标题:

内容：

类别：

-- 选择分类 --

取消

4、创建新增模块addCont,创建新增控制器AddContCtrl,别忘了添加到routerApp模块

var addCont = angular.module('addCont',[]);

addCont.controller('AddContCtrl',function($scope,$http){

//获取分类的列表

$http({

method:'GET',

url:'get.php?action=get_arctype&where=reid=0'

}).success(function(data,status,headers,config){

$scope.lists = data;

}).error(function(data,status,headers,config){

console.log('get type is error');

})

//执行写入数据的操作

$scope.formData = {};

$scope.formData.action = 'add_article';

$scope.postForm = function(){

$http({

method:'POST',

url:'get.php',

data: $.param($scope.formData),

headers:{'Content-Type':'application/x-www-form-urlencoded'}

}).success(function(data){

$scope.errorBye = function(){

$('#errorbox').fadeOut();

}

$scope.errorShow = function(){

$('#errorbox').fadeIn();

}

if(!data.errors){

$scope.meg_success = '插入成功！正在返回列表页面..';

$scope.meg_error = '';

setTimeout(function(){location.href='#/0'},1000);

}else{

//添加失败

$scope.meg_success = '';

var get_error = '';

if(data.errors.hasOwnProperty('title')){

get_error=data.errors.title;

}

if(data.errors.hasOwnProperty('content')){

get_error=get_error+(get_error?"&":"")+data.errors.content;

}

if(data.errors.hasOwnProperty('typeid')){

get_error=get_error+(get_error?"&":"")+data.errors.typeid;

}

$scope.meg_error=get_error;

}

})

}

})

第七步:修改数据

1.创建修改的路由

.state('modify', {

url: '/modify/:Id',

views: {

'': {

templateUrl: 'tpls/modify.html'

},

'type@modify': {

templateUrl: 'tpls/type.html'

},

'modifycon@modify': {

templateUrl: 'tpls/modifycon.html'

}

}

})

2、创建修改页面modify.html

Angularjs 前端MVC开发实例

分类加载中...

列表加载中...

3、创建修改的列表modifycon.html

修改内容

{{meg_success}}

{{meg_error}}

标题：

内容：

{{lists.content}}

类别：

{{lists.typename}}

{{type.typename}}

取消

4.创建修改的模块modifyCont,创建修改的控制器ModifyContCtrl,别忘了添加到routerApp 中去

//修改模块

var modifyCont = angular.module('modifyCont',[]);

modifyCont.controller('ModifyContCtrl',function($scope,$http,$stateParams){

//获取分类列表

$http({

method: 'GET',

url: 'get.php?action=get_arctype&where=reid=0'

}).success(function(data, status, headers, config) {

$scope.types=data;

}).error(function(data, status, headers, config) {

console.log("get type list error...");

});

//读取这一条数据

console.log($stateParams);

$http({

method: 'GET',

url: 'get.php?action=get_article&id='+$stateParams.Id

}).success(function(data, status, headers, config) {

$scope.lists=data;

}).error(function(data, status, headers, config) {

console.log("error...");

});

//更新数据

$scope.formData = {};

$scope.postForm = function() {

$scope.formData.action = 'update_article';

$scope.formData.id = $stateParams.Id;

$scope.formData.title = form.title.value;

$scope.formData.content = form.content.value;

$scope.formData.typeid = $("#typeid option:selected").val();//待优化取值方式

$http({

method : 'POST',

url : 'get.php',

data : $.param($scope.formData),

headers : { 'Content-Type': 'application/x-www-form-urlencoded' }

})

.success(function(data) {

console.log(data);

if (data.code==101) {

//添加成功

console.log('修改成功');

$scope.meg_success="修改成功! 正在返回列表页...";

$scope.meg_error="";

setTimeout(function(){location.href='#/0'}, 1000);

} else {

//添加失败

console.log('修改失败');

var get_errors="";

$scope.meg_success="";

//信息提示框状态

$scope.errorBye=function(){

$('#errorbox').fadeOut();

}

$scope.errorShow=function(){

$('#errorbox').fadeIn();

$scope.meg_error='';

}

if(data.errors){

console.log("有错误信息");

if(data.errors.hasOwnProperty('title')){

get_errors=data.errors.title;

}

if(data.errors.hasOwnProperty('content')){

get_errors=get_errors+(get_errors?"&":"")+data.errors.content;

}

$scope.meg_error=get_errors;

}else{

console.log("无错误信息");

$scope.meg_error="修改失败，无改动！";

}

}

});

};

})

第八步:查询数据的内容

1、创建查询数据的路由

.state('show', {

url: '/show/:Id',

views: {

'': {

templateUrl: 'tpls/show.html'

},

'type@show': {

templateUrl: 'tpls/type.html'

},

'showcon@show': {

templateUrl: 'tpls/showcon.html'

}

}

})

2.创建show.html页面

Angularjs 前端MVC开发实例

分类加载中...

列表加载中...

3.创建showcon.html查看列表

{{lists.title}}

{{lists.content}}

4、创建查看模块showCont,创建查看控制器ShowContCtrl,别忘了添加到routerApp中去

var showCont = angular.module("showCont", []);

showCont.controller('ShowContCtrl', function($scope, $http, $stateParams) {

console.log($stateParams.Id);

$http({

method: 'GET',

url: 'get.php?action=get_article&id='+$stateParams.Id

}).success(function(data, status, headers, config) {

console.log("success...");

console.log(data);

$scope.lists=data;

}).error(function(data, status, headers, config) {

console.log("error...");

});

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史