首先页面的整体内容结构以及package.json 里面的内容

package.json
router.js   路由功能import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/login';Vue.use(Router)
let router = new Router({routes: [{path: '/',redirect: {name: 'Login'},},{path: '/Login',name: 'Login',mode: ['登陆'],component: Login,},{path: '/LightBox',name: 'LightBox',component: () =>import('@/LightBox'),children: [{path: 'LightOverview',name: 'LightOverview',mode: ['总览信息'],component: () =>import('@/LightOverview'),}, {path: 'LightSet',name: 'LightSet',mode: ['xx设置'],component: () =>import('@/LightSet'),}]},{path: '/*',name: 'error-404',meta: {title: '404-页面不存在'},component: () => import('@/components/error-page/404'),}]
});router.beforeEach((to, from, next) => {let menuTree = JSON.parse(sessionStorage.getItem('menuTree'));// console.log(from)// console.log(to)if (from.name == null || to.name == "Login") {next();} else {if (menuTree != null) {console.log(from)// if (from.meta[0] && from.meta[0] == 0) {next();// }else{// }} else {console.log('menuTree = null')next({path: '/Login'})}}
})export default router;reset.css/*** Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)* http://cssreset.com*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
input {margin: 0;padding: 0;border: 0;font-size: 100%;font-weight: normal;vertical-align: baseline;box-sizing: border-box;
}/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {display: block;
}body {line-height: 1;
}blockquote,
q {quotes: none;
}blockquote:before,
blockquote:after,
q:before,
q:after {content: none;
}table {border-collapse: collapse;border-spacing: 0;
}/* custom */
a {color: #7e8c8d;text-decoration: none;-webkit-backface-visibility: hidden;
}li {list-style: none;
}button,
select {outline: none;border: none;
}::-webkit-scrollbar {width: 5px;height: 5px;
}::-webkit-scrollbar-track-piece {background-color: rgba(0, 0, 0, 0.2);-webkit-border-radius: 6px;
}::-webkit-scrollbar-thumb:vertical {height: 5px;background-color: rgba(125, 125, 125, 0.7);-webkit-border-radius: 6px;
}::-webkit-scrollbar-thumb:horizontal {width: 5px;background-color: rgba(125, 125, 125, 0.7);-webkit-border-radius: 6px;
}html,
body {width: 100%;height: 100%;font-size: 12px;
}body {-webkit-text-size-adjust: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

封装axios 请求

reques.js

import axios from 'axios'// 创建axios实例
const service = axios.create({baseURL: '',timeout: 25000 // 请求超时时间
});
if (process.env.NODE_ENV === 'development') {service.baseURL = ''
} else {// 测试环境if (process.env.type === 'test') {console.log('测试环境')} else {}
}
// respone拦截器
service.interceptors.response.use(response => {/*** code为非200是抛错 可结合自己业务进行修改*/const res = response.data;return res},error => {return Promise.reject(error)}
)export default service

axiosFn.js (封装的ajax 请求)

import axios from './request.js'
import qs from 'qs';export function getAjax(url) {return new Promise((reslove, reject) => {axios.get(url).then(res => {reslove(res);}).catch(err => {reject(err)})})
}export function postAjax(url, params = {}) {return new Promise((reslove, reject) => {axios.post(url, qs.stringify(params), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {reslove(res);}).catch(err => {reject(err)})})
}
export function http(url, type, params = {}) {return new Promise((reslove, reject) => {axios({method: type,url: url,data: params}).then(res => {reslove(res)}).catch(err => {reject(err)})})
}

main.js中的内容

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import 'babel-polyfill'
import Vue from 'vue'
// import Vuex from 'vuex'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '@/assets/styles/common.scss'
import moment from "moment"
import $ from 'jquery'
import Echarts from 'echarts'
import Highcharts from 'highcharts';Vue.prototype.echarts = Echarts
Vue.prototype.Highcharts = Highcharts
Vue.use(Echarts)
Vue.use(Highcharts)// import store from './store/store'
import {getAjax,postAjax,http
} from './axios/axiosFn.js'Vue.config.productionTip = false
Vue.use(ElementUI);
// Vue.use(Vuex);
Vue.prototype.$moment = moment;
Vue.prototype.$gAjax = getAjax;
Vue.prototype.$pAjax = postAjax;
Vue.prototype.$http = http;/* eslint-disable no-new */
new Vue({el: '#app',router,// store,components: {App},template: '<App/>'
})

在其他页面调用封装的请求函数

this.$gAjax(`../static/getSysCustom.json`).then(res => {if (res.status == 1) {console.log('kkkkk)}})["catch"](() => {console.log('dddd')});

//备注:(1) moment .js 处理时间格式化

使用方法  _this.$moment(time).format("YYYY-MM-DD HH:mm:ss")

(2)、qs 的使用

ajax请求的get请求是通过URL传参的(以?和&符连接),而post大多是通过json传参的。

qs是一个库。里面的stringify方法可以将一个json对象直接转为(以?和&符连接的形式)。

在开发中,发送请求的入参大多是一个对象。在发送时,如果该请求为get请求,就需要对参数进行转化。使用该库,就可以自动转化,而不需要手动去拼接

(3)、vue 需要在行内引入背景图

<div class="isUse" :style="{background:'url(' + require('../assets/img/timeManage/'+(scope.row.tag==0?'off':'on')+'.png') + ') 52% 24% '}"></div>

下面这个文章都很不错 可以阅读

vue,elementUI,less,axios,qs的安装及打包

vue中使用axios发送请求 - 海大导航 - 博客园

vue,elementUI,less,axios,qs的安装及打包​www.jianshu.comvue中使用axios发送请求 - 海大导航 - 博客园​www.cnblogs.com

vue获取tr内td里面所有内容_vue 项目学习相关推荐

  1. vue获取tr内td里面所有内容_vue的v-for循环添加tr,取tr中的某两个td进行运算

    我做一个页面,需要实现以下功能: 1.点击add按钮给表格动态添加一行tr(每行tr含13个td) [需求1实现: ...] 2.每行tr结尾有删除,点击任意行的删除按钮就删除该行整条数据 [需求2实 ...

  2. vue获取tr内td里面所有内容_React中遍历多个数据tr,td

    1,根据后台返回的数据来遍历table中的tr,td 分析:后台返回的数据类型: [ {time: "05-28", value: "3"}, {time: & ...

  3. [简单]js获取tr内td数量及值

    如题,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  4. Jquery 循环遍历table获取tr内指定的元素,并校验查重,删除元素值有相同的tr

    //验证申请子表不能重复 function checksublist() {var idarray = new Array();$("table.table_title1").fi ...

  5. vue获取元素距离页面顶部的距离_VUE实时监听元素距离顶部高度的操作

    效果图如下所示 .html 今日热门 今日热销 .js mounted(){ window.addEventListener('scroll',this.handleScrollx,true) }, ...

  6. vue光标插入内容_vue项目中在可编辑div光标位置插入内容的实现代码

    vue项目中在可编辑div光标位置插入内容 html: @dragstart="dragstart($event, item.labelname)" draggable='true ...

  7. SpringBoot 获取 application.properties 文件中的内容方法 【学习记录】

    1 .  @Value注解来获取配置的值 2.  @ConfigurationProperties注解

  8. vue dve环境static无法被外部访问_vue项目性能优化(代码层面)

    点击上方蓝字关注我哦1v-if与v-show区分使用场景 v-if是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建:也是惰性的:如果在初始渲染时条件为假,则什么 ...

  9. pandas显示全部数据内容_vue项目,当鼠标移入时文本长度超出才显示全部内容

    这是一个UI优化的需求~需求说明需要实现的效果呢,就是下图这个样子(截图的时候光标就会消失,只好拍照咯~). 鼠标滑入显示全部文字内容,就是在文本上加个title属性,而且这是个数组循环出来的列表,这 ...

最新文章

  1. 中国唯一一座没有高楼大厦的新一线城市,也太佛了吧
  2. MySQL查询面试题
  3. cad抛物线曲线lisp_曲线的转弯半径和曲率 - AutoLISP/Visual LISP 编程技术 - CAD论坛 - 明经CAD社区 - Powered by Discuz!...
  4. Git:git-pull的用法总结
  5. ITK:将图像翻转到指定的轴上
  6. php冒泡和选择排序,选择排序vs冒泡排序
  7. 把windows当linux用,把Windows Vista当成Linux系统来使用
  8. NHibernate从入门到精通系列(5)——持久对象的生命周期(下)
  9. 【报告分享】数据资产化之路----数据资产的估值与行业实践.pdf
  10. 去掉 edittext 长按全选_铁力连栋温室大棚骨架质量优规格全免费报价按需定制...
  11. SQL:MySQL创建、删除事件
  12. Code Review 效率低?来试试智能语法服务
  13. 计算机word表格转换,怎么把Word表格转换成Excel表格
  14. 音视频从入门到精通——视频 码率 帧率 分辨率
  15. [无人机学习]无人机学习概论
  16. 如果一只股票退市,那么里面所持有这只股票人的钱该怎么办?
  17. 深入理解流,什么是流?
  18. 利用Matlab判断某些点是否在多边形区域内
  19. perl mysql 数据推拉_科学网—从MySQL数据库中提取序列并进行引物设计的perl脚本 - 闫双勇的博文...
  20. 跳跃的青蛙,C语言实现版本

热门文章

  1. Python字典(Dictionary)的setdefault()方法的详解,字典中的赋值技巧
  2. Linux用户、权限及改变文件所有者及文件所属组多例详解 附python代码
  3. (Navicat for MySQL)利用可视化软件navicat操作mysql,创建一个表举例(基础)
  4. 利用python模拟菜刀反弹shell绕过限制
  5. [51nod1201]整数划分
  6. 鼠标移动或者鼠标点击div消失不见排查
  7. Fiddler中session的请求/响应类型与图标对照表
  8. input hidden用法
  9. noi 2009 二叉查找树 动态规划
  10. 安装sql server 2000