今天完成的事：
1.给新增项目添加表单验证
原理就和登录页面相似，使用Angular的表单验证
<span>
<span class="redstar">*</span>标题名称
</span>
<input type="text" name="addTitle" ng-model="addTitle" required>
<div ng-messages="addForm.addTitle.$error">
<div class="add-error" ng-message="required">标题不能为空</div>
</div>
但是select我使用了ng-show的方法
<div class="add-error" ng-show="selError">请选择类型</div>
这种方法就需要在JS里进行判断然后控制。也可以达到表单验证的效果。
2.传输新建的数据到后台
①首先需要判断是否可以传输，也就是必填信息都填了没，我直接用了一大串与连接起来，不知道还有没有更简洁的方法。
if ($scope.addTitle !== undefined && $scope.addType !== undefined && $scope.addType !== null && $scope.addUrl !== undefined && $scope.furl !== undefined)
如果有必填信息未填则弹出警告框
②然后使用post方法，传输数据到服务端
$http({
method: 'post',
url: '/carrots-admin-ajax/a/u/article',
params: {
title: $scope.addTitle,
type: $scope.addType,
status: 2, //点上线按钮，状态为上线
img: $scope.furl, //获取上传到服务端的图片地址
content: $scope.htmlcontent,//富文本编辑器内容
url: $scope.addUrl,
industry: $scope.addInd,
},
③按照接口文档的要求，要加上请求头。
headers: {
'Content-Type': "application/x-www-form-urlencoded"
}
然后跳转回列表页
.then(function () {
$state.go('PageTab.Page1', {})
})
至于保存草稿其实和直接上线唯一区别就是status的不同，其他原理一致。
3.写出编辑功能
①编辑需要首先在列表页获取ID，传至新增页（编辑页和新增页是同一页面）
思路就是先获取当前点击按钮的一个索引号，这个索引号即为这一页渲染列表项目的索引号，然后通过这个索引号获取这个点击项目的ID，再通过state.go传递参数。
$scope.edit = function () { //编辑按钮点击事件
console.log(this.$index); //当前点击按钮的索引号
var editId = $scope.tablelists[this.$index].id //获取点击项目的ID
console.log(editId);
$state.go("PageTab.Page2", { //使用state.go传递参数
id: editId
})
}
不要忘了在路由里加上id
.state("PageTab.Page2", {
url: "/Page2?id", //传输id数据至新增页面
templateUrl: "Page2.html"
这样就能在新增页使用$stateParams.id获取到传递过来的id了。
②获取到ID后，需要通过判断ID是否未定义这个页面是该进行新增项目还是编辑项目。
if ($stateParams.id !== undefined) {
如果id为未定义则进行新增，id不是未定义则进行编辑
③如果为编辑页面，首先需要获取这个点击项目得数据，使用get获取后再进行渲染页面。
这里有个大坑就是createAt，任务给的接口文档中是没写的，但是实际是需要的。。
$http({
method: 'get',
url: '/carrots-admin-ajax/a/article/' + $stateParams.id,//加上ID
}).then(function (alt) {
console.log(alt);
$scope.addTitle = alt.data.data.article.title; //渲染标题
var typeAlt = alt.data.data.article.type;
$scope.addType = typeAlt.toString(); //由于类型为数字，需转化为字符串
$scope.htmlcontent = alt.data.data.article.content; //渲染说明
$scope.addUrl = alt.data.data.article.url; //渲染链接
$scope.furl = alt.data.data.article.img //渲染图片
var createTime = alt.data.data.article.createAt;//这个接口文档中没写，但是实际是需要的
④渲染页面后，更改后，使用put方法上传到服务器替换之前的数据。
这一步和之前新增差不多，区别就是方法是put
method: 'put',
明天计划的事：
1.把删除写好，还有完善其他一些小功能。
2.检查bug，修改bug
遇到的问题：
1.对接口文档看的不仔细
获取单个article的请求地址是/a/article/{id}
而编辑article的请求地址是/a/u/article/{id}
没仔细看，然后一直以为别的地方出了问题。
2.编辑页面获取到的type数据类型为number
alt.data.data.article.type
我发现它不能直接使下拉选择框的选择改变。
后来发现是需要转化为字符串形式
var typeAlt = alt.data.data.article.type;
$scope.addType = typeAlt.toString(); //由于获取到的类型为数字，需转化为字符串
转化成字符串和即可和select绑定起来。
收获：
1.对于Angular和服务端的交互感觉更加清楚一点了。开始看接口文档看的不仔细，有点随便看看的感觉，结果吃了很多亏，这个东西还是要仔细看清楚，可以节省不少时间。
返回列表
评论