目标
- 基本操作（ crud）
- 组件使用
- 组件交互
- axios
1、查询--form的使用- 主要用于列表
:data="tableData"
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
export default {
data() {
return {
tableData: [],
。。。。。
}
}
mounted() {
//调用查询所有用户的方法
this.findAll();
},
findAll() {
//请求后台，查询所有用户
this.$axios.get("http://localhost:8082/vue-servlet/findAllUser", 。。。。。。
})
.then(response => {
let data = response.data; //后台的responseBean
//用响应数据去更新
this.tableData = data.list;
})
.catch()
}
分页相关
页面部分
<el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="changePage">
</el-pagination>
数据部分
data() {
return {
。。。。。
//以下三个是分页相关的属性
total: 0, //查询得到
pageSize: 2, //每页条数
currentPage: 1,
dialogFormVisible: false
}
}
请求后台
findAll() {
//请求后台，查询所有用户
this.$axios.get("http://localhost:8082/vue-servlet/findAllUser", {
params: {
currentPage: this.currentPage,
pageSize: this.pageSize
}
})
.then(response => {
let data = response.data; //后台的responseBean
//用响应数据去更新
this.tableData = data.list;
this.total = data.page.count;
})
.catch()
}
2、添加功能
验证：我们采取的是定义验证规则
:rules="rules"
页面部分：
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
js部分
rules: {
//required是否必填项 trigger:触发方式 blur：表示离开焦点时 message：错误提示
username: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
],
pass: [
{ validator: validatePass, trigger: 'blur' },
{ required: true, message: '请输入密码', trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' },
{ required: true, message: '请输入确认密码', trigger: 'blur' }
],
//trigger: 'blur' trigger: ['blur', 'change']
email:[
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
],
idcard:[
{ min: 15, max: 18, message: '长度在 15 到 18 个字符', trigger: ['blur'] }
]
}
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
验证成功的逻辑
//step 2如果影响后，我们再做后处理 --json
} else {
console.log('error submit!!');
return false;
}
});
}
修改
修改的步骤先查询getobjectbyid----》修改update***
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
this.$axios.get("http://localhost:8082/vue-servlet/getUserById?id=" + row.id)
.then(response => {
console.log(response);
//查询成功之后，携带用户信息进修改页
this.$router.push({
path: '/updateUser',
query: response.data.list[0]
})
})
.catch(error => {
console.log(error);
})
}
update页
ruleForm: {
id:this.$route.query.id,
username: this.$route.query.userName,
email: this.$route.query.email,
idcard: this.$route.query.idCard,
power:this.$route.query.power
}
删除
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
handleDelete(index, row) {
this.$axios.get("http://localhost:8082/vue-servlet/delUserServlet?id="+row.id)
.then(response=>{
alert(response.data.msg)
this.$router.push({
path:'/findalluser'
})
})
}
控件使用
-- 树
<el-tree
:props="props"
:load="loadNode"
node-key="id"
ref="tree"
lazy
show-checkbox
@check-change="getCheckedNodes"
>
props: {
id:0,//新增加的，将来这部分就放菜单的id
label: 'name',//菜单名字
children: 'zones',//子菜单
isLeaf: 'leaf'
},
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ id:0,name: 'root' }]);
}else{//无限级的菜单
let selid = node.data.id;
this.$axios.get("http://localhost:8082/vue-servlet/getMenuData?id=" + selid)
.then(response => {
resolve(response.data.list);
})
}
}
getCheckedNodes() {
//清空原来的id列表
this.menuids.splice(0,this.menuids.length);
//console.log("select",this.$refs.tree.getCheckedNodes());//element-ui提供的获取所有被选中的结点
//获取选中的节点集合
let checks=this.$refs.tree.getCheckedNodes();
//循环集合的每一个节点
//bug修正，全选中时因为有0,外键错误，需要把0去除
for(let i=0;i<checks.length;i++){
//把每个节点的id存放到专用数组里
if(checks[i].id!=0){
//alert(checks[i].id);
this.menuids.push(checks[i].id);
}
}
//console.log("menuids",this.menuids);
//console.log("menuids_str",this.menuids.join());//1,2,3
//所数组转换成用逗号分隔的字符串
let menuids_str=this.menuids.join();
//alert(menuids_str);
//给父组件传过去
this.$emit("getIds",menuids_str);
}
-- 富文本
安装 main.js引用略
<div class="edit_container">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
<!-- <button @click="toParent">确认</button> -->
</div>
onEditorBlur(){
alert(this.content);
this.$emit("toParent", this.content);
}
-- radio
<el-form-item label="显示状态" prop="visible">
<el-radio v-model="form.visible" label="0">显示</el-radio>
<el-radio v-model="form.visible" label="1">隐藏</el-radio>
</el-form-item>
-- number
<el-input-number v-model="form.orderNum" :min="0" :max="50" label="排序"></el-input-number>
-- select
<el-form-item label="角色">
<el-select v-model="ruleForm.power" placeholder="请选择角色">
<el-option
v-for="role in roleList"
:key="role.roleId"
:label="role.roleName"
:value="role.roleId">
</el-option>
</el-select>
</el-form-item>
return {
roleList:[],
.......
mounted(){
this.$axios.get("http://localhost:8082/vue-servlet/findAllRole")
.then(response=>{
console.log(response);
this.roleList=response.data.list;
})
}
其他
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
<el-input v-model="ruleForm.username"></el-input>
组件交互
第一种：子组件触发父组件事件，进行传参emit
子组件tree.vue 触发父组件addMenu事件
子组件 this.$emit(eventname,params)
<el-tree
:props="props"
:load="loadNode"
node-key="id"
@node-click="handleNodeClick"
lazy
>
</el-tree>
handleNodeClick(data) {
console.log(data.id);
this.$emit("getParentId",data.id)
}
父组件引用组件和响应子组件事件
import menutree from '@/components/common/menutree'
components:{
menutree
}
<menutree @getParentId="getId"></menutree>
getId(id){
//alert("parentid:"+id);
this.form.parentId=id;
}
第二种应用quill-editor子组件
子组件部分
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
onEditorBlur(){
alert(this.content);
this.$emit("toParent", this.content);
}
父组件addnotice
import quill from '@/components/common/quill'
components:{
quill
}
<quill v-model="ruleForm.newscontent" @toParent="getcontent"></quill>
getcontent(content){
this.ruleForm.newscontent=content;
}
第二种 父组件给子组件传参
路由传参
name--params route.query.属性名
this.$router.push({
path: '/updateUser',
query: response.data.list[0]
}
id:this.$route.query.id,
axios
post--json
let obj=this.$qs.stringify(this.form);//json转换
alert(obj);
//step 2计划在这里用axios去给后台发送注册请求 (url,data) data-json
this.$axios.post('http://localhost:8082/vue-servlet/addMenu',obj)
.then(response=>{
alert(response.data.msg);
})
get方式：
this.$axios.get("http://localhost:8082/vue-servlet/getUserById?id=" + row.id)
.then(response => {
console.log(response);
//查询成功之后，携带用户信息进修改页
this.$router.push({
path: '/updateUser',
query: response.data.list[0]
})
})
.catch(error => {
console.log(error);
})
//请求后台，查询所有用户
this.$axios.get("http://localhost:8082/vue-servlet/findAllUser", {
params: {
currentPage: this.currentPage,
pageSize: this.pageSize
}
})
.then(response => {
let data = response.data; //后台的responseBean
//用响应数据去更新
this.tableData = data.list;
this.total = data.page.count;
})
.catch()
网友评论