前面我们已经实现了前后两端项目的基础搭建以及前后数据交互，目前的UI页面十分的简陋，所以今天咱们来完善前端项目，让UI更加美观。
如果你的html、js、css的基础很好，那么前端项目研发起来相信不会很困难，不管是传统技术JSTL、JQuery与easyUI、bootstrap等UI框架，还是vue、react、angular与elmentui、layui等新技术，前端底层实现都是大同小异的，无非每项技术的特点各有不同。后期可根据团队人员和项目的基本情况来进行配套组合的技术选型。我们继续以Vue.js和elmentui为例研发本项目。
基础组件整合
为了后续不断完善前端项目，需要一些VUE组件来帮助我们更好的实现前端功能。
页面模块化
require和import的区别
vue编程中最重要的思想就是模块化，import和require都是被模块化所使用。
遵循规范
require 是 AMD规范引入方式。
import是ES6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法。
调用时间
require是运行时调用，所以require理论上可以运用在代码的任何地方。
import是编译时调用，所以必须放在文件开头。
原来得样例中页面引入咱们使用 import login from '@/views/login'的方式。
后续如果页面过多，开发环境如果使用懒加载， 页面太多的话会造成webpack热更新太慢。所以生产环境使用懒加载,开发环境不使用懒加载。
添加模块化工具类
router目录下添加工具类根据不同环境采用不同的模块化方式
import-development.js
module.exports = file => require('@/views/' + file + '.vue').default
import-production.js
module.exports = file => () => import('@/views/' + file + '.vue')
嵌套路由
嵌套路由又称为子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地，URL中各段动态路景观也按某种结构对应嵌套的各层组件，例如我们看Vue的官网教程。
当我们点击左边的项目的时候，我们知道，他左边和上面两个导航栏是不会改变的。改变的只是右边那一块区域。将鼠标放在某个标签上面，我们可以看到，他就是一个路由。或者我们应该说，他就是一个子路由。
index.js 添加路由
const _import = require('./import-' + process.env.NODE_ENV)
//全局路由
const routes = [
{ path: '/login', name:'login',component: _import('login') },
]
// 嵌套路由入口
const mainRoutes = {
path: '/',
component: _import('layout/main'),
name: 'main',
redirect: { name: 'home' },
meta: { title: '主入口整体布局' },
children: [
{ path: '/home', component: _import('demo/list'), name: 'home', meta: { title: '首页' } },
{ path: '/test1', component: _import('demo/test1'), name: 'test1', meta: { title: '选项一', isTab: true } },
{ path: '/test2', component: _import('demo/test2'), name: 'test2', meta: { title: '选项二', isTab: true } },
{ path: '/test', component: _import('demo/add'), name: 'test', meta: { title: '测试功能', isTab: true } },
{ path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题', isTab: true } },
],
}
export default new Router({
routes: routes.concat(mainRoutes)
})
状态管理
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
vuex 包含有五个基本的对象：
state：存储状态。也就是变量；
getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式：store.getters.personInfo()。就和vue的computed差不多；
mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.commit(‘SET_AGE’, 18)。和vue中的methods类似。
actions：和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch(‘nameAsyn’)。this.$store.dispatch(‘user/login’, this.loginForm)
modules：store的子模块，内容就相当于是store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如：store.a.getters.xxx()。
有了Vuex可以实现组件全局状态(数据)的管理,方便的实现组件之间的数据共享。
Sass整合
Sass 是一个 CSS 的扩展，它在 CSS 语法的基础上，允许使用变量 (variables),嵌套规则 (nested rules), 混合 (mixins), 导入 (inline imports) 等功能，令 CSS 更加强大与优雅。使用 Sass 以及 Compass 样式库 有助于更好地组织管理样式文件，以及更高效地开发项目。
npm install node-sass --save-dev //安装node-sass
npm install sass-loader --save-dev //安装sass-loader
npm install style-loader --save-dev //安装style-loader此处安装后可能会因sass-loader版本过高报错，可手动指定版本
npm install sass-loader@7.3.1 --save-dev //版本不能太高也可在package.json中更改版本，然后npm install
基本UI设计
我们先研后台管理系统，管理系统一般有一下几类UI页面。
1、登录页面
这个不多说了用户密码登录页面。
2、主页面
登录验证成功后跳转到本页面，左侧菜单右侧详情的常规布局。
3、功能列表页
4、功能编辑详情
登录页面
登录页面前边我们已经实现了简单表单，样子比较丑陋，登录页比较简单，样式大家可以自行找网上提供的布局样式也可，基础较好的同学可以自己调整布局。这里举一个简单的登录样式的样例。
<template>
<div class="login">
<el-form ref="dataForm" :model="dataForm" :rules="loginRules" size="mini" class="login-form" status-icon>
<h2 class="title">欢迎登录后台管理系统</h2>
<el-form-item prop="username">
<el-input
v-model="dataForm.username"
type="text"
auto-complete="off"
placeholder="账号"
>
<i slot="prefix" class="el-input__icon el-icon-s-custom svg-external-icon"></i>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="dataForm.password"
type="password"
auto-complete="off"
placeholder="密码"
@keyup.enter.native="dataFormSubmit"
>
<i slot="prefix" class="el-input__icon el-icon-s-goods svg-external-icon"></i>
</el-input>
</el-form-item>
<!-- <el-form-item prop="captcha" v-if="captchaOnOff">
<el-input
v-model="dataForm.captcha"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="dataFormSubmit"
>
<i slot="prefix" class="el-input__icon el-icon-menu svg-external-icon"></i>
</el-input>
<div class="login-code">
<img :src="captchaPath" @click="getCaptcha()" style="width: 100%" class="login-code-img"/>
</div>
</el-form-item>-->
<!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>-->
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width:100%;"
@click.native.prevent="dataFormSubmit"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
<div style="float: right;" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
</div>
</el-form-item>
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2021-2022 All Rights Reserved.</span>
</div>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
codeUrl: "",
dataForm: {
username: '',
password: '',
uid: '',
captcha: '',
client_id:'webApp',
client_secret:'webApp',
grant_type:'password'
},
loginRules: {
username: [
{ required: true, trigger: "blur", message: "请输入您的账号" }
],
password: [
{ required: true, trigger: "blur", message: "请输入您的密码" }
],
captcha: [{ required: true, trigger: "change", message: "请输入验证码" }]
},
captchaPath: '',
loading: false,
// 验证码开关
captchaOnOff: true,
// 注册开关
register: false,
};
},
created() {
// this.getCaptcha()
var info=this.$route.params.data
if(info!=null)
this.$message({
showClose: true,
message: info,
type: 'error',
duration:1000
});
},
methods: {
// 提交表单
dataFormSubmit () {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.loading = true;
this.$router.replace({ name: 'home'})
}
})
},
// 获取验证码
getCaptcha () {
this.dataForm.uid = getUUID()
this.captchaPath = this.$http.adornUrl(`/api-auth/captcha/captcha.jpg?uid=${this.dataForm.uid}`)
},
}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
/*background-image: url("../assets/images/login-background.jpg");*/
background: #3a8ee6;
background-size: cover;
}
.title {
margin: 0px auto 20px auto;
text-align: center;
color: #707070;
}
.login-form {
border-radius: 6px;
background: #ffffff;
width: 450px;
padding: 25px 25px 5px 25px;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
width: 33%;
height: 36px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
}
}
.el-login-footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
}
.login-code-img {
height: 38px;
}
.svg-external-icon{
font-size: 12px;
//margin-right: 18px;
margin-left: 3px;
display: flex;
align-items: center;
}
body {
height: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
html {
height: 100%;
box-sizing: border-box;
}
#app {
height: 100%;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
</style>
访问 ：http://localhost:9081/#/login 显示如下
这里先不做后台校验，随便输入用户名、密码后跳转主页面。
主页面实现
主页面是整个后台管理系统的门面，它的重要程度不言而喻。
先实现常规的左侧是菜单、右侧是详情页面，头部有登录人的基础信息提示。更炫酷的要求后面逐步实现。
整体布局我们参考element官网布局容器来实现，我门以这个样例作为参考样例。
新增主页面main.vue
<template>
<div class="site-wrapper" :class="classObj">
<template >
<main-sidebar />
<main-navbar />
<div class="site-content__wrapper" :style="styleObj">
<main-content />
</div>
</template>
</div>
</template>
<script>
import MainNavbar from './main-navbar'
import MainSidebar from './main-sidebar'
import MainContent from './main-content'
export default {
data () {
return {
loading: true,
styleObj: {'min-height': this.documentClientHeight + 'px'}
}
},
components: {
MainNavbar,
MainSidebar,
MainContent
},
computed: {
documentClientHeight: {
get () { return this.$store.state.common.documentClientHeight },
set (val) { this.$store.commit('common/updateDocumentClientHeight', val) }
},
userId: {
get () { return this.$store.state.user.id },
set (val) { this.$store.commit('user/updateId', val) }
},
userName: {
get () {
return this.$store.state.user.name
},
set (val) {
this.$store.commit('user/updateName', val)
}
},
sidebarFold: {
get () { return this.$store.state.common.sidebarFold }
},
clientType() {
let type = this.$store.state.common.clientType;
if (type === 'phone') {
this.styleObj['margin-left'] = '0px';
this.styleObj['padding-top'] = '100px';
} else {
if (this.styleObj['margin-left']) this.$delete(this.styleObj, 'margin-left');
if (this.styleObj['padding-top']) this.$delete(this.styleObj, 'padding-top');
}
return type
},
showScreen() {
if (this.clientType == 'phone' && !this.sidebarFold) return true;
return false;
},
classObj() {
return {
'site-sidebar--hide': this.sidebarFold && this.clientType == 'phone',
'site-sidebar--fold': this.sidebarFold && this.clientType != 'phone',
'tab-phone-top': this.clientType == 'phone'
};
}
},
created () {
},
mounted () {
this.resetDocumentClientHeight()
},
methods: {
}
}
}
</script>
封装Aside、Header、Main-content三个组件，在Main.vue主页面中使用。
Aside组件存放菜单
参照element官网 导航菜单组件
main-sidebar.vue
<template>
<aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
<div class="site-sidebar__inner">
<el-menu
:collapse="sidebarFold"
default-active="home"
:collapseTransition="false"
class="site-sidebar__menu"
>
<el-menu-item index="home" @click="$router.push({ name: 'home' })" v-show="showSidebar">
<i class="el-icon-s-home"></i>
<span slot="title">首页</span>
</el-menu-item>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1" @click="$router.push({ name: 'test1' })">选项1</el-menu-item>
<el-menu-item index="1-2" @click="$router.push({ name: 'test2' })">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</div>
</aside>
</template>
<script>
import { isURL } from '@/utils/validate'
export default {
data () {
return {
dynamicMenuRoutes: [],
menuValue: '',
leafMenu: []
}
},
components: {
},
computed: {
sidebarLayoutSkin: {
get () { return this.$store.state.common.sidebarLayoutSkin }
},
sidebarFold: {
get () { return this.$store.state.common.sidebarFold }
},
menuList: {
get () { return this.$store.state.common.menuList },
set (val) { this.$store.commit('common/updateMenuList', val) }
},
menuActiveName: {
get () { return this.$store.state.common.menuActiveName },
set (val) { this.$store.commit('common/updateMenuActiveName', val) }
},
mainTabs: {
get () { return this.$store.state.common.mainTabs },
set (val) { this.$store.commit('common/updateMainTabs', val) }
},
mainTabsActiveName: {
get () { return this.$store.state.common.mainTabsActiveName },
set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
},
showSidebar() {//在phone模式并且关闭菜单状态下不展示菜单
if (this.$store.state.common.clientType == 'phone' && this.sidebarFold) return false;
return true;
}
},
watch: {
$route: 'routeHandle'
},
created () {
this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
this.routeHandle(this.$route)
this.getLeafMenu(this.menuList);
},
methods: {
getLeafMenu(menuList) {
menuList.forEach((item)=>{
if (item.list) {
this.getLeafMenu(item.list)
} else {
this.leafMenu.push(item)
}
})
},
chose() {
let route = this.dynamicMenuRoutes.filter(item => item.meta.menuId === this.menuValue)
if (route.length >= 1) {
this.$router.push({name: route[0].name})
}
this.menuValue = ''
},
// 路由操作
routeHandle (route) {
if (route.meta.isTab&&this.$store.state.common.navbarTab) {
// tab选中, 不存在先添加
var tab = this.mainTabs.filter(item => item.name === route.name)[0]
if (!tab) {
if (route.meta.isDynamic) {
var globalRoutes=this.$router.options.routes
var mainRoutes
for (var i = 0; i < globalRoutes.length; i++) {
if (globalRoutes[i].children && globalRoutes[i].children.length >= 1 && globalRoutes[i].name == 'main-dynamic') {
mainRoutes = globalRoutes[i].children
}
}
route = mainRoutes.filter(item => item.name === route.name)[0]
if (!route) {
return console.error('未能找到可用标签页!')
}
}
tab = {
menuId: route.meta.menuId || route.name,
name: route.name,
title: route.meta.title,
type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
iframeUrl: route.meta.iframeUrl || ''
}
this.mainTabs = this.mainTabs.concat(tab)
}
this.menuActiveName = tab.menuId + ''
this.mainTabsActiveName = tab.name
}
}
}
}
</script>
Header
<template>
<nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
<div class="site-navbar__header" :style="brandStyle">
<h1 class="site-navbar__brand" :style="brandStyle" @click="$router.push({ name: 'home' })">
<a class="site-navbar__brand-lg" href="javascript:;">后台管理系统</a>
<a class="site-navbar__brand-mini" href="javascript:;"></a>
</h1>
</div>
<div class="site-navbar__body clearfix">
<el-menu
class="site-navbar__menu"
mode="horizontal">
<el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
<i class="el-icon-s-fold"></i>
</el-menu-item>
</el-menu>
<el-menu
class="site-navbar__menu site-navbar__menu--right"
mode="horizontal">
<el-menu-item class="site-navbar__avatar" index="3">
<el-dropdown :show-timeout="0" placement="bottom">
<span class="el-dropdown-link">
欢迎，登录！
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
<el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-menu-item>
</el-menu>
</div>
</nav>
</template>
<script>
export default {
name: 'screenfull',
data () {
return {
updatePassowrdVisible: false,
isFullscreen: false,
}
},
components: {
},
computed: {
navbarLayoutType: {
get () { return this.$store.state.common.navbarLayoutType }
},
sidebarFold: {
get () { return this.$store.state.common.sidebarFold },
set (val) { this.$store.commit('common/updateSidebarFold', val) }
},
mainTabs: {
get () { return this.$store.state.common.mainTabs },
set (val) { this.$store.commit('common/updateMainTabs', val) }
},
userName: {
get () { return this.$store.state.user.name }
},
brandStyle: {
get() {
let type = this.$store.state.common.clientType;
if (type === 'phone') {
return this.brandStyle = {
float: 'none',
width: '100%'
}
} else {
return this.brandStyle = {}
}
},
set() {}
}
},
methods: {
// 修改密码
updatePasswordHandle () {
this.updatePassowrdVisible = true
this.$nextTick(() => {
this.$refs.updatePassowrd.init()
})
},
// 退出
logoutHandle () {
this.$router.push({ name: 'login' })
}
}
}
</script>
右侧主页面
主页面多个tabs标签页组成，
参考官网
main-content.vue
<template>
<main class="site-content" :class="{ 'site-content--tabs': $route.meta.isTab && this.$store.state.common.navbarTab}">
<!-- 主入口标签页 s -->
<el-tabs
v-if="$route.meta.isTab && this.$store.state.common.navbarTab"
v-model="mainTabsActiveName"
:closable="true"
@tab-click="selectedTabHandle"
@tab-remove="removeTabHandle">
<el-dropdown class="site-tabs__tools" :show-timeout="0">
<i class="el-icon-arrow-down el-icon--right"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="tabsCloseCurrentHandle">关闭当前标签页</el-dropdown-item>
<el-dropdown-item @click.native="tabsCloseOtherHandle">关闭其它标签页</el-dropdown-item>
<el-dropdown-item @click.native="tabsCloseAllHandle">关闭全部标签页</el-dropdown-item>
<el-dropdown-item @click.native="tabsRefreshCurrentHandle">刷新当前标签页</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-tab-pane
v-for="item in mainTabs"
:key="item.name"
:label="item.title"
:name="item.name">
<el-card :body-style="siteContentViewHeight">
<iframe
v-if="item.type === 'iframe'"
:src="item.iframeUrl"
width="100%" height="100%" frameborder="0" scrolling="yes">
</iframe>
<keep-alive v-else>
<router-view v-if="item.name === mainTabsActiveName" />
</keep-alive>
</el-card>
</el-tab-pane>
</el-tabs>
<!-- 主入口标签页 e -->
<el-card v-else :body-style="siteContentViewHeight">
<keep-alive>
<router-view />
</keep-alive>
</el-card>
</main>
</template>
<script>
import { isURL } from '@/utils/validate'
export default {
data () {
return {
}
},
computed: {
documentClientHeight: {
get () { return this.$store.state.common.documentClientHeight }
},
menuActiveName: {
get () { return this.$store.state.common.menuActiveName },
set (val) { this.$store.commit('common/updateMenuActiveName', val) }
},
mainTabs: {
get () { return this.$store.state.common.mainTabs },
set (val) { this.$store.commit('common/updateMainTabs', val) }
},
mainTabsActiveName: {
get () { return this.$store.state.common.mainTabsActiveName },
set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
},
siteContentViewHeight () {
var height = this.documentClientHeight - 50 - 30 - 2
if (this.$route.meta.isTab && this.$store.state.common.navbarTab) {
height -= 40
return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
}
return { minHeight: height + 'px' }
}
},
methods: {
// tabs, 选中tab
selectedTabHandle (tab) {
tab = this.mainTabs.filter(item => item.name === tab.name)
if (tab.length >= 1) {
this.$router.push({ name: tab[0].name })
}
},
// tabs, 删除tab
removeTabHandle (tabName) {
this.mainTabs = this.mainTabs.filter(item => item.name !== tabName)
if (this.mainTabs.length >= 1) {
// 当前选中tab被删除
if (tabName === this.mainTabsActiveName) {
this.$router.push({ name: this.mainTabs[this.mainTabs.length - 1].name }, () => {
this.mainTabsActiveName = this.$route.name
})
}
} else {
this.menuActiveName = ''
this.$router.push({ name: 'home' })
}
},
// tabs, 关闭当前
tabsCloseCurrentHandle () {
this.removeTabHandle(this.mainTabsActiveName)
},
// tabs, 关闭其它
tabsCloseOtherHandle () {
this.mainTabs = this.mainTabs.filter(item => item.name === this.mainTabsActiveName)
},
// tabs, 关闭全部
tabsCloseAllHandle () {
this.mainTabs = []
this.menuActiveName = ''
this.$router.push({ name: 'home' })
},
// tabs, 刷新当前
tabsRefreshCurrentHandle () {
var tempTabName = this.mainTabsActiveName
this.removeTabHandle(tempTabName)
this.$nextTick(() => {
this.$router.push({ name: tempTabName })
})
}
}
}
</script>
访问测试
列表页
list.vue
<template>
<div>
<el-form :model="dataForm" ref="dataForm">
<el-row :gutter="20" >
<el-col :xs="24" :sm="6" >
<el-form-item prop="classCode">
<el-input v-model="dataForm.name" placeholder="姓名" maxlength="20" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="6" >
<el-form-item prop="className">
<el-input v-model="dataForm.province" placeholder="省份" maxlength="20" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="{span:24,offset:0}" :sm="{span:6,offset:6}">
<el-form-item style="float: right">
<el-button type="primary" icon="el-icon-search">查询</el-button>
<el-button type="default" plain icon="el-icon-refresh-left">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-divider></el-divider>
<el-row style="padding-bottom: 10px;" align="left">
<el-button type="primary" icon="el-icon-plus" @click="addPage()">新增</el-button>
<el-button type="success" icon="el-icon-mouse" @click="add()">测试</el-button>
<el-button type="info" @click="addPage()">弹框按钮</el-button>
</el-row>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="date"
label="日期"
>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
>
</el-table-column>
<el-table-column
prop="province"
label="省份"
width="120">
</el-table-column>
<el-table-column
prop="city"
label="市区"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="300">
</el-table-column>
<el-table-column
prop="zip"
label="邮编"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<add-page ref="addPage" @refreshDataList="test"></add-page>
</div>
</template>
<script>
import axios from 'axios'
import AddPage from './addPage'
export default {
components: {
AddPage
},
methods: {
handleClick(row) {
console.log(row);
},
test(){
axios
.get('http://127.0.0.1:8888/test', {
params: {
id: 12345
}
})
.then(response => (
// this.info = response
alert(response.data)
// this.info = response
))
.catch(function (error) { // 请求失败处理
console.log(error);
});
},
add(){
this.$router.push({ path:'/add'})
},
addPage(id){
this.$nextTick(() => {
this.$refs.addPage.init(id);
})
}
},
mounted () {
},
data() {
return {
dataForm: {
name: '',
province: ''
},
addPageVisible: false,
tableData: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}]
}
}
}
</script>
<style scoped>
.el-divider--horizontal {
display: block;
height: 1px;
width: 100%;
margin: 12px 0;
}
</style>
演示截图
明细页面
addPage.vue
<template>
<el-dialog
class="custom_dialog"
:fullscreen=false
:show-close=false
:close-on-click-modal=false
:visible.sync="visible">
<div slot="title" class="dialog-title">
<i class="el-icon-edit-outline"></i>
<span class="title-text">数据详情</span>
</div>
<el-form :model="dataForm" :rules="dataRule" ref="dataForm"
label-width="100px">
<el-row :gutter="40">
<el-col :xs="24" :lg="24">
<el-form-item label="姓名：" prop="classCode">
<el-input v-model="dataForm.classCode" maxlength="20" placeholder="类型编码"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :lg="24">
<el-form-item label="省份：" prop="className">
<el-input v-model="dataForm.className" maxlength="20" placeholder="类型名称"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :lg="24">
<el-form-item label="邮编：" prop="dataName">
<el-input v-model="dataForm.dataName" maxlength="20" placeholder="名称"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :lg="24">
<el-form-item label="邮编：" prop="dataName">
<el-input v-model="dataForm.dataName" maxlength="20" placeholder="名称"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :lg="24">
<el-form-item label="市区：" prop="dataCode">
<el-input v-model="dataForm.dataCode" maxlength="20" placeholder="键值"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :lg="24">
<el-form-item label="邮编：" prop="dataName">
<el-input v-model="dataForm.dataName" maxlength="20" placeholder="名称"></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :lg="24">
<el-form-item label="地址：" prop="dataOrder">
<el-input v-model="dataForm.dataOrder" maxlength="10" placeholder="排序"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button icon="el-icon-close" @click="visible = false">取消</el-button>
<el-button icon="el-icon-check" type="primary">提交</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
visible: false,
dataForm: {
id: '',
classCode: '',
className: '',
dataCode: '',
dataName: '',
dataOrder: '',
status: ''
},
dataRule: {
classCode: [
{required: true, message: '类型编码不能为空', trigger: 'blur'}
],
className: [
{required: true, message: '类型名称不能为空', trigger: 'blur'}
],
dataCode: [
{required: true, message: '键值不能为空', trigger: 'blur'}
],
dataName: [
{required: true, message: '名称不能为空', trigger: 'blur'}
],
dataOrder: [
{required: true, message: '排序不能为空', trigger: 'blur'}
],
status: [
{required: true, message: '状态不能为空', trigger: 'blur'}
]
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
init (id) {
// this.dataForm.id = id
this.visible = true
}
}
}
</script>
<style scoped>
</style>
演示样例
以上就是前端系统主要页面及常用组件，有新的组件可通过elementUI官网，查询具体用法，另外样式的底层逻辑是相同的。
关注公众号”小猿架构“，发送 "前后分离架构" ，下载课程视频+课程源码+课件。
版权声明：本文为sundehui01原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。