vue-admin-study1学习总结

git地址

一、登录页

1、使用登录拦截

　　登录成功后，使用JSON.stringify将用户数据解析成字符串，并使用sessionStorage存起来，所以可在登录成功那里看到这么一句

sessionStorage.setItem('user', JSON.stringify(user));

　　在main.js中判断用户是否登录进行拦截，vue-router提供了导航钩子来拦截导航

router.beforeEach((to, from, next) => {if (to.path == '/login') {sessionStorage.removeItem('user');}let user = JSON.parse(sessionStorage.getItem('user'));if (!user && to.path != '/login') {next({ path: '/login' })} else {next()}
})

sessionStorage.removeItem("key");删除指定key本地存储的值sessionStorage.getItem("key"); 获取指定key本地存储的值

二、主页

　　在首页中，侧边栏可使用this.$router.options.routes读取所有路由，但是有些页面不想展示在侧边栏中（比如说登录页），那么可以在配置路由的时候加一个hidden: true

{path: '/login',component: Login,name: '',hidden: true}

这样在home.vue调用的时候可以用v-f进行判断，这样侧边栏就可以不再显示登录页了

<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
</template>

在配置侧边栏的时候，可以加一些小图标，可以是elementui也可以是阿里图标库的，在配置路由的时候进行配置

{path: '/',component: Home,name: '导航一',iconCls: 'el-icon-message',//图标样式class
        children: [{ path: '/main', component: Main, name: '主页', hidden: true },{ path: '/table', component: Table, name: 'Table' },{ path: '/form', component: Form, name: 'Form' },{ path: '/user', component: user, name: '列表' },]}

三、表格页

　　1、查询功能

　　elementui表格有个filters可以对数据进行过滤，所以可以在el-form上面加:model="filters"，data中return时

filters: {name: ''},

在查询按钮上面加点击事件v-on:click="getUsers"其中getUsers是获取表格数据的方法。

　　2、新增

　　在使用elementui时候发现所参考的代码和elementui些许不同，在使用了官网的例子后发现点击关闭按钮不起作用，此次加上:close-on-click-modal="false"可以完美的关闭。

　　3、男女转换

　　在前后端交互的时候，一般后台对于男女性别这类数据吐的是布尔类型的值，所以就需要前端自己进行转换。

　　首先在所要转换的行加上:formatter="formatSex"　

<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
</el-table-column>

在methods方法中进行转换

formatSex: function (row, column) {return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
}

　　4、编辑

　　进入编辑页面时页面会显示已有的值，之前做项目的时候是把编辑页分成一个单独的页面去请求后台，但是这里发现用this.editForm = Object.assign({}, row);这么一句就可以得到表格所展示的值。

　　Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。我所理解的就是复制值。

　　5、批量删除

var ids = this.sels.map(item => item.id).toString();

　　获取所有选中行的id组成的字符串，以逗号分隔

四、图表

安装echarts需要选择版本，之前有一次没有选择版本安装，结果echarts调用不了

npm install  echarts@^3.3.2

之前一直分不清dependencies和devDependencies

dependencies：在生产环境中需要用到的依赖
devDependencies：在开发、测试环境中用到的依赖

使用echarts时，先在当前页面定义一个div容器，需要给宽和高

<div id="chartBar" style="width:100%; height:400px;"></div>

在script中引入echarts

import echarts from 'echarts'

由于charts.vue中有多个图表，所以在mounted钩子函数中调用drawCharts函数

 mounted: function () {this.drawCharts()}

在drawCharts函数中可以调用多个图表

drawCharts() {this.drawBarChart()    }

需要在data中retrun

data() {return {chartBar: null,}}

在methods中写drawBarChart函数

            drawBarChart() {this.chartBar = echarts.init(document.getElementById('chartBar'));this.chartBar.setOption({title: {text: 'Bar Chart',subtext: '数据来自网络'},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {data: ['2011年', '2012年']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'value',boundaryGap: [0, 0.01]},yAxis: {type: 'category',data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']},series: [{name: '2011年',type: 'bar',data: [18203, 23489, 29034, 104970, 131744, 630230]},{name: '2012年',type: 'bar',data: [19325, 23438, 31000, 121594, 134141, 681807]}]});}

转载于:https://www.cnblogs.com/Ljshu/p/7994880.html

vue-admin-study1学习总结相关推荐

拥抱开源，Vue Admin Work后台管理系统免费开源啦
前言各们前端开发的小伙伴们,你们好,我是Vue Admin Work后台管理系统的主要开发者和维护者,从今年6月份开始我们一直在开发一套后台管理系统,旨在帮助更多的小伙伴学习提升和给许多中小型公司节 ...
Vue 第九天学习
Vue 第九天学习 1.实现发表评论功能 1.把文本框做双向数据绑定 v-model ="msg" 2.为发表按钮绑定一个事件 @click="post_Comment ...
Vue 第一天学习 ---2018.06.28
Vue 第一天学习 ---2018.06.28 1.引包 2.学会控制元素.显示数据,基本框架建立 <title>Document</title> <script sr ...
vue - blog开发学习6
vue - blog开发学习6 1.问题,如下图,使用iviewui中的card导致页面不能出现滚动条(不太会弄,在网上查了一个vue组件vuescroll,因此使用这个做滚动条) 2.安装vuesc ...
vue - blog开发学习5
vue - blog开发学习5 基本功能和后台联调 1.首页的所有博客因为是前后台都是本地开发,所以前端vue需要设置proxy:修改/config/index.js中的这个proxyTable p ...
vue - blog开发学习4
vue - blog开发学习4 1.新建页面的修改,集成富文本编辑 edit-post.vue(新建和修改都用该组件) <template><div class="edit ...
vue - blog开发学习3
vue - blog开发学习3 1.添加less 和less-loader支持 npm install less less-loader --save-dev 2.新建main.less,将这个样式添 ...
vue - blog开发学习2
vue - blog开发学习2 首页博客列表的开发 1.修改index.vue,使能够支持列表功能 <template><div><PostList v-for=&quo ...
vue - blog开发学习1
vue - blog开发学习1 1.安装vue-cli vue intall -g vue-cli 2.创建项目 vue init webpack nblog 3.按提示要求配置项目 ? Projec ...
vue源码学习--vue源码学习入门
本文为开始学习vue源码的思路整理.在拿到vue项目源码的之后看到那些项目中的文件夹,会很困惑,不知道每个文件夹内的世界,怎么变换,怎样的魔力,最后产生了vue框架.学习源码也无从学起.我解决了这些困 ...

vue-admin-study1学习总结

vue-admin-study1学习总结相关推荐

最新文章

热门文章