笔试题

https://zhuanlan.zhihu.com/p/21551758

一、vue组件传参的方式
1、有父子关系的
1）父给子传 子这侧用props定义参数列表，父这侧用参数名直接给参数赋值 （类似于java里的有参构造）
定义子组件时，用ref="组件名"给子组件命名，用$refs.组件名 可以获取子组件

2）子给父亲 $emit(触发父组件事件）多用于调用父组件方法

2、没有父子关系可以通过路由传参
最典型的例子，getObjByID获取信息之后想把信息传到更改页updata.vue
通过query或者params把数据传过来

query传：this.router.push({name: '/updateConType',query: response.data})
获取：this.$route.query.constantTypeCode
其实底层是用get ?username=&password=

params传：this.route.params.userId

params相当于发post请求 url/:id/:username

二、v-if 和v-show异同

相同点：v-if和v-show 都能够实现对一个元素的隐藏和显示操作,
不同点：但是v-if是将这个元素添加或者移除到dom中，而v-show 是在这个元素上添加 style="display:none"和移除它来控制元素的显示和隐藏的

三、@component 和@Bean
https://www.jianshu.com/p/67ed3bdc215c

四、axios get/post传参

get传参两种方式##

1、this.$axios.get('http://localhost:8082/sys/constanttype/findAll', {
params: {
currentPage: this.currentPage,
pageSize: this.pageSize
}
})

例子：

findAll() {
//用axios请求后台，查询所有数据
this.$axios.get('http://localhost:8082/sys/constanttype/findAll', {
params: {
currentPage: this.currentPage,
pageSize: this.pageSize
}
})
.then(response => {
//如果响应成功，把列表数据放到tableData里
//alert(response);
this.tableData = response.data.content;
this.total = response.data.totalElements;
//this.pagerCount = response.data.totalPages;
})

            }

2、this.$axios.get('http://localhost:8082/sys/constanttype/findAll?currentPage=?&pageSize=?')

post/put/patch请求

一、传参格式为 raw (JSON格式)
request的Header:'Content-Type'= 'application/json;charset=UTF-8'
1、添加
this.$axios.post('http://localhost:8082/sys/constanttype/add',this.ruleForm,{headers: {
'Content-Type': 'application/json;charset=UTF-8'
}})

    @RequestMapping("add")
    public ResponseBean add(@RequestBody Constanttype type){
        ResponseBean result=new ResponseBean();
        Constanttype db_type=constantTypeServiceImpl.save(type);
        if(db_type!=null){
            result.setCode("0");
            result.setMsg("操作成功");
        }else{
            result.setCode("-1");
            result.setMsg("操作失败");
        }
        return result;
    }

2、批量删除时

            handleSelectionChange(val) {
                var $this = this;
                //每次要清空
                this.multipleSelection = [];
                val.forEach(item => {
                    //alert(item.id);
                    $this.multipleSelection.push(item.id);

                })
                //alert(this.multipleSelection.toString())
            }

            delBatch() {
                alert("批量删除" + this.multipleSelection.toString());
                this.$axios.get('http://localhost:8082/sys/constanttype/delBatch?ids=' + this.multipleSelection.toString())
                    .then(response => {
                        //alert(response.data.msg);
                        this.findAll();
                    })
                    .catch(error => {
                        alert(error);
                    })
            }

@RequestMapping("delBatch")
public ResponseBean delBatch(String ids){
    ResponseBean result=new ResponseBean();
    //System.out.println(ids);
    int i=  constantTypeServiceImpl.delBatch(ids);
        if(i>0){
    result.setCode("0");
        result.setMsg("操作成功");
        }else{
        result.setCode("-1");
        result.setMsg("操作失败");
        }
    
    return result;
}

3、批量添加

        gzSave() {
            //alert("规则名称"+this.ruleForm1.gzmc);
            //alert("挂号级别:"+this.ruleForm1.registLeId)
            //alert("deptId:"+this.ruleForm1.deptId)
            let selItems = this.multipleSelection; //选中的排班人员
            var $this = this;
            this.gzArrays = []; //清空用于入库的规则对象数组
            for (var i = 0; i < selItems.length; i++) {
                $this.weeks[i] = "";
                $this.weeks[i] = selItems[i].X10 + selItems[i].X11 + selItems[i].X20 + selItems[i].X21 + selItems[i].X30 +
                    selItems[i].X31 + selItems[i].X40 + selItems[i].X41 + selItems[i].X50 + selItems[i].X51 + selItems[i].X60 +
                    selItems[i].X61 + selItems[i].X70 + selItems[i].X71;
                //alert("拼装后的串："+$this.weeks[i]);
                //alert("用户编号:"+selItems[i].id);
                $this.gzArrays.push({
                    "deptID": 1,
                    "ruleName": $this.ruleForm1.gzmc,
                    "userID": 1,
                    "week": $this.weeks[i]
                });
            }
            //挂号规则入库
            this.$axios.post('http://localhost:8082/neusys/rule/add', {
                    rules: $this.gzArrays
                }, {
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8'
                    }
                })
                .then(response => {
                    alert(response.data.msg);
                })
        }

    @RequestMapping("/add")
    public ResponseBean add(@RequestBody RulesVo vo) {
        ResponseBean result = new ResponseBean();
        int i = RuleServcieImpl.addBatch(vo);
        if(i==vo.getRules().size()){
        result.setCode("0");
        result.setMsg("添加成功");
        }else{
            result.setCode("-1");
            result.setMsg("添加失败");
        }
        return result;

    }

                
    public class RulesVo {
        private List<Rule> rules;
    
        public List<Rule> getRules() {
            return rules;
        }
    
        public void setRules(List<Rule> rules) {
            this.rules = rules;
        }
    
    }

二、传参格式为 query 形式

使用$qs.stringify(key/value)

request的Header:'Content-Type'= 'application/x-www-form-urlencoded'

    import Qs from 'qs'   //引入方式
    Vue.prototype.$qs = Qs  //全局加载
    this.$qs.stringify(data);  //使用方式
    this.$qs.parse(data);  //使用方式

    var readyData=this.$qs.stringify({
        id:1234,
        name:user
    });
    axios.post("/notice",readyData)
         .then((res) => {return res})
         .catch((err) => {return err})

生命周期

https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

(before)created
(before)mounted
(before)updated
(before)detoryed