遍历树形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
有时我们需要将数据提交为指定的类型
- 全局headers配置
Vue.http.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
- 实例配置
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);
}