VUE开发项目遇到的一些问题(一)

遍历树形json数据

var root = [{
            name:'D盘',
            children:[{
                    name:'学习',
                    children:[
                        {
                            name:'电子书',
                            children:[
                                {
                                    name:'文学',                                         
                                    children:[
                                        {
                                            name:'茶馆'                                                   
                                        },
                                        {
                                          name:'红与黑'
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    name:'电影',
                    children:[
                        {
                            name:'美国电影'
                        },
                        {
                            name:'日本电影'
                        }
                    ]                  
                }
            ]
        }
    ]

function getMenuName(menus){
    for (var value of menus) {

        if (value.children) {
            getMenuName(value.children)
        }
        value.name = '遍历'
        value.value = value.name
        console.log(value.name);
    }

}
getMenuName(root);
console.log(JSON.stringify(root, null, 4))

mockjs生成假数据

var Random = Mock.Random;
    var data = Mock.mock({
         'list|3': [{
            'id|+1': 1,
            'age|1-100': 100,
            // 英文姓名
            'name' :'@name',
            // 颜色
            'color': '@color',
            // 英文标题
            'title': '@title',
            // 链接
            'url': '@url("http")',
            // 邮箱
            'email': '@email',
            // 图片
            'image': Random.image('200x200', '#50B347', '#FFF', 'Mock.js'),
            // 时间
            'date': '@date("yyyy-MM-dd HH:mm:ss")',
            'date2': '@dateTime',
            // 汉字
            'ctitle': '@ctitle(8)',
            // 汉字姓名
            'canme': '@cname()',
            // 地址
            'cadd': '@province' + '@city' + '@county',
            // 手机号
            'phone': /^1[385][1-9]\d{8}/

         }]
     });
     console.log(JSON.stringify(data, null, 4))

vuecli升级之后找不到devserver.js配置文件之后

//首先
const express = require('express')
const app = express()
var appData = require('../data.json') // 引入数据
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

//找到devServer,添加
before(app) {
  app.get('/api/seller', (req, res) => {
    res.json({
      // 这里是你的json内容
      errno: 0,
      data: appData.seller // json里面对应的键名
    })
  }),
  app.get('/api/goods', (req, res) => {
    res.json({
      // 这里是你的json内容
      errno: 0,
      data: appData.goods
    })
  }),
  app.get('/api/ratings', (req, res) => {
    res.json({
      // 这里是你的json内容
      errno: 0,
      data: appData.ratings
    })
  })
}

http-proxy-middleware 代理设置

config里面的proxyTable
修改成

不需要动build里面的dev-server.js里面的代码

 proxyTable: {
     '/api': {
        target: 'http://crm.tonyliangli.cn/api',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

监听事件的参数传递

一个子组件使用$emit('eventName', param);发送事件, 在父组件通过@eventName="listenEvent(父组件事件名字)"

// 父组件
export default {
    methos: {
        listenEvent (data) {
            // data 即为子组件传递过来的参数
        }
    }
}

vue-resource的使用

• 安装

npm i vue-resource --save-dev

• 引入

import Vueresource from 'vue-resource'

• 注册

Vue.use(Vueresource)

• 使用

// 便捷方法
this.$http.get({url:'api/index', headers:{Authorization:'Basic Yxsdlfjui'}})
.them((data) => {
    // 请求成功
}, (error) => {
    // 请求失败
})

// 底层方法
Vue.http({
    url:'api/index2',
    method: 'POST',
    data: {
        param: 1
    }
})
.then((data) => {
    // 请求成功
}, (error) => {
    // 请求失败
})

• 便捷方法

便捷方法是对底层方法的封装

this.$http.get(url,{data},{opation})

• 参数

  • url: 字符串, 请求地址
  • data: 对象或者字符串
  • opation: 对象, 传入的对象来控制请求

• 返回的response对象

  • data(对象或者字符串): 服务器返回的数据, 已用JSON.parse解析
  • ok(布尔值): 当HTTP响应码在200-299区间是true, 表示响应成功
  • status(数值): HTTP响应码
  • statusText(字符串): HTTP响应状态文本描述

  - headers(函数): 响应头信息

• 返回Promise对象
  执行HTTP调用后会返回一个Promise对象, 该对象提供了then, catch, finally注册回调函数

var promise = this.$http.post('api/index');
promise.this(function(response){
    // 成功回调
}, function(error){
    // 失败回调
})

promise.catch(function(error){
    // 失败回调
})
promise.finally(function(){
    // 失败或者成功后都会执行此函数
})
// 所有回调函数的`this`都指向组件实例

• JSONP请求

  • 设置methos的值为JSONP即可
  • this.$http.jsonp()也可以

• 修改发给服务器端的数据类型

默认情况下, 发送给服务器请求头的Content-Type为application/json

有时我们需要将数据提交为指定的类型

1. 全局headers配置

Vue.http.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

1. 实例配置

this.$http.post(
    'api/index',
    // 成功回调
    function(data, status, request) {
        if(status === 200) {
            // 成功
        }
    },
    // 实例配置
    {
        headers: {
            'Content-Type':'multipart/form-data'
        }
    }
)

实力配置优先于全局配置

post请求变成OPTIONS请求的解决方案

Vue.http.options.emulateJSON = true
// 

其他细节知识点

• 引入的组件名字不能为Index
• components: {}
• a标签的href属性写 href="#/rouer"
• router-link标签的to属性写 to="./"

- Vue.use(插件名称); 注册插件, 注册到Vue对象本身上面

VUE修改数组内元素, 页面不更新问题解决

由于 JavaScript 的限制， Vue 不能检测以下变动的数组：

• 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
• 当你修改数组的长度时，例如： vm.items.length = newLength

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果， 同时也将触发状态更新：

editNum(index) {
    console.log(this.carts[index].editState);
    let obj = this.carts[index];
    obj.editState = !obj.editState;

    this.$set(this.carts, index, obj);
    console.log(this.carts[index].editState);
}