springboot + vue + iview 2.利用iview画个简单好看的页面 mac版

Z时代
2024-01-10
分类：综合

vue

上一篇文章中，已经搭建了一个简易的vue项目，但是页面很单调，这次就研究一下怎么利用iview让页面充实起来。

（本篇文章只属于个人研究，如果有不规范，你打我啊，谁让我只是个后端）

定制主题

1.因为vue项目是webpack编译的，所以利用iview官网中的第一种方法。需要引用less文件，先下载两个东西。

cnpm install less --save

cnpm install less-loader --save

2.创建一个目录，我的名字起为theme，里面创建一个文件，index.less，里面内容如下

@import '~iview/src/styles/index.less';
// Here are the variables to cover, such as:@primary-color: #8c0776;

3.在main.js中引入

import './theme/index.less';

4.这时会报错

需要更改utils中return里和less相关的内容改成

less: generateLoaders('less',{ javascriptEnabled: true })

5.重启运行

npm run dev

通用设置

1.在index.less中，我把主题改成了粉色，所以整体的字体我也要适应一个粉色的字，更改一下App.vue中的style，没用的被我去掉了，加了下字体颜色

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #93939c;}

2.整体的控件，我使用了iview大控件的模式，在main.js中更改下Vue.use(iView)，改成下面，可以参照官方文档

Vue.use(iView, {
  transfer: true,
  size: 'large'});

编辑页面

1.更改Login.vue的代码，写成一个简单的登陆页面，使用的是iview的响应式布局，可以参照官方文档，简单应用有一个回答

<style>
  html,body {
    width: 100%;
    height: 100%;
    background: url("../assets/background.jpg");
    /*background-size: 120%, 100%;*/
  }
  .from-wrap{
    width: 100%;
    height: 260px;
    border-radius: 10px;
    background-color: #fff;
    padding: 20px 30px;
    margin-top: 60%;
  }
  h1 {
    text-align: center;
    margin-bottom: 20px;
  }
  FormItem {
    margin-bottom: 30px;
  }
  .form-footer {
    text-align: right;
  }
</style>
<template>
    <Row>
      <Col :xs="{ span: 20, offset: 2 }" :md="{ span: 6, offset: 16 }">
        <div class="from-wrap">
          <h1>登录</h1>
          <Form ref="loginData" :model="loginData" :rules="ruleValidate" >
            <FormItem prop="acct">
              <Input type="text" v-model="loginData.acct" placeholder="请输入用户名">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem prop="pass">
              <Input type="password" v-model="loginData.pass" placeholder="请输入密码">
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem class="form-footer">
              <Button type="primary" @click="handleSubmit('loginData')">Submit</Button>
            </FormItem>
          </Form>
        </div>
      </Col>
    </Row>
</template>
<script>
  export default {
    data () {
      return {
        loginData: {
          acct:'',
          pass:''
        },
        ruleValidate: {
          acct: [
            { required: true, message: '账号不能为空', trigger: 'blur' },
            { min: 3, max: 16, message: '账号长度3-16个字符', trigger: 'blur' }
          ],
          pass: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { type: 'string', min: 6, max: 16, message: '密码长度6-16个字符', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('提交成功!')
          } else {
            this.$Message.error('表单验证失败!')
          }
        })
      }
    }
  }
</script>

效果图

2.编辑管理端的页面，我利用iview中案例中的布局，稍微改动，因为管理端中有通用的部分，所以需要创建一个独立的Layout.vue，作为通用部分，在content中加入其它的component

<style scoped>
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }
  .layout-header-bar{
    background: #f4b1df;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
  }
  .layout-logo-left{
    width: 90%;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    margin: 15px auto;
  }
  .menu-icon{
    transition: all .3s;
  }
  .rotate-icon{
    transform: rotate(-90deg);
  }
  .menu-item span{
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }
  .menu-item i{
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }
  .menu-item .ivu-menu-item{
    color: darkgray;
  }
  .collapsed-menu span{
    width: 0px;
    transition: width .2s ease;
  }
  .collapsed-menu i{
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }
  .layout-logo{
    width: 200px;
    height: 50px;
    /*background: white;*/
    border-radius: 3px;
    float: right;
    position: relative;
    top: 5px;
    right: 20px;
    text-align: center;
    background: url("../../assets/logo.png");
    background-size: 200px 50px;
  }
</style>
<template>
  <div class="layout">
    <Layout>
      <Header :style="{padding: 0}" class="layout-header-bar">
        <Icon @click.native="collapsedSider" color="white" :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu" size="24"></Icon>
        <a style="color: white">退出登录</a>
        <div class="layout-logo" ></div>
      </Header>
      <Layout :style="{minHeight: '100vh'}">
        <Sider :style="{background: '#fff'}"  breakpoint="md" ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed" theme="light" >
          <Menu active-name="1-1" theme="light" width="auto" :class="menuitemClasses">
            <router-link to="/manage/page1">
              <MenuItem name="1-1">
                  <Icon type="ios-navigate"></Icon>
                  <span>Option 1</span>
              </MenuItem>
            </router-link>
            <router-link to="/manage/page2">
              <MenuItem name="1-2">
                  <Icon type="ios-search"></Icon>
                  <span>Option 2</span>
              </MenuItem>
            </router-link>
            <router-link to="/manage/page3">
              <MenuItem name="1-3">
                <Icon type="ios-settings"></Icon>
                <span>Option 3</span>
              </MenuItem>
            </router-link>
          </Menu>
        </Sider>
        <Layout :style="{background: '#fff'}">
          <!--<Header :style="{padding: 0}" class="layout-header-bar">-->
            <!--<Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu" size="24"></Icon>-->
          <!--</Header>-->
          <Content :style="{margin: '20px', background: '#fff', minHeight: '260px'}">
            <router-view></router-view>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        isCollapsed: false
      }
    },
    computed: {
      rotateIcon () {
        return [
          'menu-icon',
          this.isCollapsed ? 'rotate-icon' : ''
        ];
      },
      menuitemClasses () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    },
    methods: {
      collapsedSider () {
        this.$refs.side1.toggleCollapse();
      }
    }
  }
</script>

index.js中的路由添加

{
      path: '/manage',
      component: Layout}

访问路径http://localhost:8080/#/manage 样式展示

在这一段代码中也利用了<router-view></router-view>，就是将这个页面作为父路由，然后在他的下面增加子路由，这样就可以把其他的component代替这个<router-view></router-view>。而左边栏嵌套在<MenuItem></MenuItem>外面的<router-link to="/manage/page1">就是点击时要跳转的路由。具体在下一步中讲解。

3.首先创建3个vue，Page1.vue、Page2.vue、Page3.vue，引入index.js，创建子路由，在index.js中更改manage的路由，整体代码如下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'
import Layout from '@/components/common/Layout'
import Page1 from '@/components/Page1'
import Page2 from '@/components/Page2'
import Page3 from '@/components/Page3'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/hello',
      component: HelloWorld
    },
    {
      path: '/manage',
      component: Layout,
      children: [
        {
          path: '/manage/page1',
          name: 'page1',
          component: Page1
        },
        {
          path: '/manage/page2',
          name: 'page2',
          component: Page2
        },
        {
          path: '/manage/page3',
          name: 'page3',
          component: Page3
        }
      ]
    }
  ]
})

这3个页面中，我只写了Page1的代码，只是利用了iview官网的一些案例，只是静态页面，如下

<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem >用户管理</BreadcrumbItem>
    </Breadcrumb>
    <Divider />
    <Row>
      <Button icon="md-add" type="primary">添加</Button>
    </Row>
    <Table size="default" :columns="columns7" :data="data6" style="margin-top: 20px"></Table>
    <Page style="margin-top: 20px"  :total="100" show-sizer />
  </div>
</template>
<script>
  export default {
    data () {
      return {
        columns7: [
          {
            title: 'Name',
            key: 'name',
            render: (h, params) => {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'person'
                  }
                }),
                h('span', params.row.name)
              ]);
            }
          },
          {
            title: 'Age',
            key: 'age'
          },
          {
            title: 'Address',
            key: 'address'
          },
          {
            title: 'Action',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, '查看'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],
        data6: [
          {
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park'
          },
          {
            name: 'Jim Green',
            age: 24,
            address: 'London No. 1 Lake Park'
          },
          {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park'
          }
        ]
      }
    },
    methods: {
      show (index) {
        this.$Modal.info({
          title: 'User Info',
          content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
        })
      },
      remove (index) {
        this.data6.splice(index, 1);
      }
    }
  }
</script>

访问http://localhost:8080/#/manage/page1，预览样式

4.更改样式，我发现有一些通用的样式和我的小粉主题很不搭，就改了一些配色和样式，因为是通用的，所以我建了一个css文件夹，里面创建了一个common.css文件

button span a{
  color: darkgray;
}
/*table表头颜色*/
.ivu-table-header th{
  color:white;
  font-weight: bold;
  background-color: #f4b1df;
  /*border: none;*/
}
/*浮在某行颜色*/
.ivu-table-row-hover td {
  background-color: #fff0f8!important;
}
/*表格去掉边框*/
div.ivu-table-wrapper {
  border: none;
}
.ivu-table:before{content:'';width:100%;height:0px;position:absolute;left:0;bottom:0;z-index:1}
.ivu-table:after{content:'';width:0px;height:100%;position:absolute;top:0;right:0;z-index:3}