项目知识点汇总-CFANZ编程社区

目标

基本操作（ 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()