学习NodeJs + VueJs (Express + ElementUI)制作王者荣耀 记录

一些方法值得学习

• 下载使用element-ui

• 控制全局滚动条的样式, 直接添加在App.vue里面即可

• element-ul里面的el-rate组件有:max显示几颗星, show-score显示分数的属性

• element-ul里面的el-select有个multiple可以进行多选

  ::-webkit-scrollbar {
       
    width: 5px;
    height: 5px;
  }
  ::-webkit-scrollbar-thumb {
       
    background-color: #a1a3a9;
    border-radius: 3px;
  } 
  

• 模型Category,分为name: String, parent: mongoose.SchemaTypes.ObjectId,在前端的vue里面就只需要定义一个cateValue为空对象即可,在双向绑定数据的时候直接v-model=cateValue.name,v-mdoel=cateValue.parent。就不能像下面这样定义了。

  data () {
       
    return {
       
      cateValue: {
       
        name: '',
        parent: ''
      }
    }
  }
  

  或者写成下面的形式也可以, 不过好像很少见

  data () {
       
    return {
       
      cateValue: {
       
        name: null,
        parent: null
      }
    }
  }
  

  因为这样会使parent的值类型变成了String类型而当parent为空时就无法提交新的分类。就会出现无法强制转换类型的错误

• 在写上返回状态码之后只有200才可以被前端接受到, 而403, 404的状态码返回就会直接在控制台报错

	res.json({
   }) // 可以获得res
	res.status(403).json({
   }) //报错

• 使用axios这个插件的时候如果每个单文件请求都写http://localhost...之类的就太长了, 所以就直接使用它的一个方法

  const axios = require('axios')
  const http = axios.create({
       baseURL: 'http://localhost:8000'})
  module.exports = http
  
  /****/
  
  Vue.prototype.$http = http 
  
  /****/
  
  this.$http.get('/rest/...')
  

  将导出的方法变成Vue原型对象上的方法, 这样在其它vue单文件组件里就可以直接使用了, 而不需要再引入axios这个包, 这里获取这个默认根地址是$http.defaluts.baseURL

• 有专门的富文本编辑插件vue2-editor

• axios 拦截器

• vue使用插槽slot

  1.  //子组件
      <slot :item="item"></slot>
      //父组件
      <template slot-scope="prop">
        <div>{
            {
            prop.item}}</div