vue.js 프런트엔드 및 백엔드 데이터 조작
- php中世界最好的语言원래의
- 2018-06-06 11:23:071311검색
이번에는 vue.js 프론트엔드, 백엔드 데이터 운용 방법을 알려드리겠습니다. vue.js 프론트엔드, 백엔드 데이터 운용 시 주의사항은 무엇인가요? 바라보다.
프런트엔드 초보자가 처음 페이지 만들기를 시작했을 때 우리는 프런트엔드 페이지에서 양식을 자주 사용했기 때문에 양식 제출을 배우는 것도 기본 기술입니다. 사실 Ajax를 사용하면 이룰 수 있지만 원래 구문은 좀 어색하다. . . 이마. . . 복잡하므로 vue-resource를 사용하여 백엔드에 데이터를 제출하는 방법이 있습니다.
(1) 첫 번째 단계는 템플릿에 양식을 작성하는 것입니다.
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm"> <el-form-item label="用户名" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="用户类型" prop="type"> <el-select v-model="ruleForm.type" placeholder="请选择专利类型" style="width:500px;"> <el-option label="一级管理员" value="1"></el-option> <el-option label="二级管理员" value="2"></el-option> <el-option label="三级管理员" value="3"></el-option> <el-option label="普通用户" value="4"></el-option> </el-select> </el-form-item> <el-form-item label="出生日期" prop="date"> <el-input v-model="ruleForm.date"></el-input> </el-form-item> <el-form-item label="备注" prop="intro"> <el-input type="textarea" v-model="ruleForm.intro" :rows="10"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> </el-form-item> </el-form>
(2) 데이터에서 양식 콘텐츠의 필드와 제약 조건 규칙을 정의합니다. to submit the form
data() {
return {
ruleForm: {
name: '',
type: '',
date: '',
intro: '',
}
}
rules: {
name: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 1, max: 20, message: '长度在 1 到20个字符', trigger: 'blur' }
],
type: [
{ required: true, message: '请选择用户类型', trigger: 'change' }
],
date: [
{ required: true, message: '请输入出生日期', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
],
intro: [
{ required: true, message: '请输入备注', trigger: 'blur' },
{ min: 50, max: 500, message: '请输入至少50个字', trigger: 'blur' }
],
}
} 위 제출 기능의 baseURL과 API 소개는 다음과 같습니다.
여기서는 vue-resource를 이용하여 백엔드에서 데이터를 요청하는 방법을 소개하겠습니다.
예를 들어, 백엔드에서 테이블을 요청합니다.
(1) 먼저 msg:[] 배열을 데이터로 반환하여 테이블 데이터를 받습니다.
(2) 다음과 같은 메서드에서 요청 함수를 정의합니다. 여기서 함수 이름은 showDetails로 정의됩니다.
methods:{
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$http.get(baseURL+"api/create?table=user&"+getParamsString(param)).then(function(res){
if(res.body==1){
this.$alert("提交成功", '提交结果', {
confirmButtonText: '确定',
type: 'success',
callback: action => {
},
});
}
else{
this.$alert("提交失败", '提交结果', {
confirmButtonText: '确定',
type: 'warning',
callback: action => {
},
});
}
})
} else {
console.log('error submit!!');
return false;
}
});
}
}
프로젝트가 서버에 배포되는 경우 일반적인 형식은 www.XXX.com/project 이름입니다. api 인터페이스, 조건은 테이블 쿼리, 삭제 및 기타 명령문입니다. 예를 들어, 학생이라는 테이블을 쿼리하고 학생 ID가 40001인 학생의 신뢰도를 얻어야 하는 경우 쿼리 문은 'query?table=student&studentIDeq=40001'과 같이 작성할 수 있습니다. 데이터베이스의 작업 필드(일반인의 관점에서는 백엔드에서 정의한 필드로 이해될 수 있음)는 따옴표로 묶어야 하고 프런트 엔드에서 정의된 필드는 따옴표 밖에 배치해야 합니다. 3) 마지막으로 이 요청 작업은 기본적으로 호출되지 않고 실행되므로 마운트되어 있어야 합니다. 실시간으로 실행됩니다.
methods:{
showDetails:function(){
this.$http.get(baseURL+"api/条件").then(function(res){
this.msg = res.body;
});
}
}
자, 이 기능이 완료되었습니다. 백엔드에서 브라우저 콘솔의 네트워크를 통해 또는 콘솔 출력을 통해서도 볼 수 있습니다! ! !
물론이죠. 전제는 데이터베이스에 user라는 테이블이 있고 이름, 유형, 날짜 및 소개와 같은 여러 필드가 있고 백엔드 인터페이스가 정의되어 있다는 것입니다. 그렇지 않으면 성공하지 못할 것입니다
나는 당신이 이 기사의 사례를 읽은 후 방법을 익혔습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
vuex를 사용하여 상태 객체를 작동하는 방법위 내용은 vue.js 프런트엔드 및 백엔드 데이터 조작의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!