项目目录
上一篇写了后端的完整代码
这一篇主要写前端的页面
用的是vue2.0版本
需要环境 elementui node.js axios
安装 Element-UI 模块
npm install element-ui --save
引入Element，前面已经全局安装了element-ui，只需要在Vue项目中引入即
打开项目：src/main.js,添加下面三条
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
安装axios
npm install axios
先创建几个页面，
Index.vue中
<template>
<el-container style="height: 100%; width: auto; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu router :default-openeds="[ '0','1']" >
<el-submenu v-for="(item,index) in $router.options.routes":index="index+''" v-if="item.show" >
<template slot="title"><i class="el-icon-setting"></i>{
{
index}}-{
{
item.name}}</template>
<el-menu-item v-for="(item2,index2) in item.children" :index="item2.path "
:class="$route.path==item2.path?'is-active':''">{
{
item2.name}}</el-menu-item>
<!-- index="item2.path"实现页面的动态跳转, -->
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</template>
<script>
export default {
name: "Index"
}
</script>
<style scoped>
</style>
App.vue中写
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
};
</script>
FlowManager.vue
<template>
<div>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="id"
label="编号"
width="50">
</el-table-column>
<el-table-column
prop="type"
label="类型"
width="100">
</el-table-column>
<el-table-column
prop="version"
label="版本号"
width="100">
</el-table-column>
<el-table-column
prop="enName"
label="英文名字"
width="100">
</el-table-column>
<el-table-column
prop="chsName"
label="中文名字"
width="100">
</el-table-column>
<el-table-column
prop="enName"
label="英文名字"
width="100">
</el-table-column>
<el-table-column
prop="description"
label="描述"
width="100">
</el-table-column>
<!-- fixed="right"-->
<el-table-column
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
<el-button @click="deleteBook(scope.row)" type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- </el-pagination>-->
<!-- size-change pageSize 改变时会触发 每页条数size
current-change currentPage 改变时会触发 当前页currentPage
分页current-page当前页-page-sizes 页面显示个数-->
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="this.params.page"
:page-sizes="[1, 2, 3, 4]"
:page-size="this.params.size"
layout="total, sizes, prev, pager, next, jumper"
:total="total" >
</el-pagination>
</div>
</template>
<script>
export default {
mounted:function() {
this.pagehelper();
},
methods: {
deleteBook(row){
const _this = this
axios.get('http://localhost:8282/flow/delEmp/'+row.id).then(function(resp){
_this.$alert('删除成功！', '消息', {
confirmButtonText: '确定',
callback: action => {
window.location.reload()
}
})
})
},
edit(row) {
this.$router.push({
path:'/update',
query:{
id:row.id
}
})
},
//分页用到的，实时显示
handleSizeChange(val) {
console.log(`每页 ${
val} 条`);
this.params.size = val;
this.pagehelper();
},
handleCurrentChange(val) {
console.log(`当前页: ${
val}`);
this.params.page = val;
this.pagehelper();
},
pagehelper:function(){
console.log("进来了")
const _this = this
axios.get("http://localhost:8282/flow/pagehelper/" + this.params.page + "/" + this.params.size) .then((res) =>
{
console.log(res)
_this.tableData=res.data.list //获取数据
_this.pageSize = res.data.size //每个页面的个数
_this.total = res.data.total //页面总数
console.log(_this.tableData)
})
},
},
data() {
return {
//分页用到的
total:0,
params: {
page: 1,//默认起始页为1，个数为6
size: 6,
},
tableData: [{
id: '3',
type: '',
chsName :'',
enName:'',
uptime:'',
version:'',
description:'',
}]
}
}
}
</script>
FlowUpdate.vue
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="编号" >
<el-input v-model="ruleForm.id" readonly></el-input>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-input v-model="ruleForm.type"></el-input>
</el-form-item>
<el-form-item label="中文名字" prop="chsName">
<el-input v-model="ruleForm.chsName"></el-input>
</el-form-item>
<el-form-item label="英文名字" prop="enName">
<el-input v-model="ruleForm.enName"></el-input>
</el-form-item>
<el-form-item label="版本号" prop="version">
<el-input v-model="ruleForm.version"></el-input>
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input v-model="ruleForm.description"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
ruleForm: {
id: '',
type: '',
chsName:'',
enName:'',
uptime:'',
version:'',
description:'',
},
rules: {
type: [
{
required: true, message: '类型不能为空', trigger: 'blur' },
],
chsName: [
{
required: true, message: '中文名字不能为空', trigger: 'blur' },
],
enName: [
{
required: true, message: '英文名字不能为空', trigger: 'blur' },
],
version: [
{
required: true, message: '版本号不能为空', trigger: 'blur' },
],
description: [
{
required: true, message: '描述不能为空', trigger: 'blur' },
],
}
};
},
methods: {
submitForm(formName) {
const _this=this
this.$refs[formName].validate((valid) => {
if (valid) {
//这里注意换成了put post put get要一一对应
axios.put('http://localhost:8282/flow/update',this.ruleForm).then(function(resp){
if(resp.data == 'success'){
_this.$alert('修改成功！', '消息', {
confirmButtonText: '确定',
callback: action => {
_this.$router.push('/flowmanager')
}
})
}
})
} else {
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
created(){
// alert(this.$route.query.id),测试获取id,get,post不同query也不同
const _this=this
axios.get('http://localhost:8282/flow/findById/'+this.$route.query.id).then(function (resp) {
_this.ruleForm=resp.data
})
}
}
</script>
Add.vue
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="类型" prop="type">
<el-input v-model="ruleForm.type"></el-input>
</el-form-item>
<el-form-item label="中文名字" prop="chsName">
<el-input v-model="ruleForm.chsName"></el-input>
</el-form-item>
<el-form-item label="英文名字" prop="enName">
<el-input v-model="ruleForm.enName"></el-input>
</el-form-item>
<el-form-item label="版本号" prop="version">
<el-input v-model="ruleForm.version"></el-input>
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input v-model="ruleForm.description"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
ruleForm: {
type: '',
chsName:'',
enName:'',
uptime:'',
version:'',
description:'',
},
rules: {
type: [
{
required: true, message: '类型不能为空', trigger: 'blur' },
],
chsName: [
{
required: true, message: '中文名字不能为空', trigger: 'blur' },
],
enName: [
{
required: true, message: '英文名字不能为空', trigger: 'blur' },
],
version: [
{
required: true, message: '版本号不能为空', trigger: 'blur' },
],
description: [
{
required: true, message: '描述不能为空', trigger: 'blur' },
],
}
};
},
methods: {
submitForm(formName) {
const _this=this
this.$refs[formName].validate((valid) => {
if (valid) {
axios.post('http://localhost:8282/flow/add',this.ruleForm).then(function(resp){
if(resp.data == 'success'){
_this.$alert('添加成功！', '消息', {
confirmButtonText: '确定',
callback: action => {
_this.$router.push('/flowmanager')
}
})
}
})
} else {
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
router文件下的路由index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import FlowManager from "../views/FlowManager";
import Index from "../views/Index";
import FlowUpdate from "../views/FlowUpdate";
import AddFlow from "../views/AddFlow";
Vue.use(VueRouter)
Vue.use(ElementUI)
const routes = [
{
path: '/',
name: "流程管理",
component: Index,
show:true,
redirect:"/flowmanager",
children:[
{
path: '/flowmanager',
name:'流程列表',
component: FlowManager
},
{
path: '/addBook',
name:'添加流程',
component: AddFlow
},
{
path:"/update",
name:"",
component: FlowUpdate,
}
]
}
]
const router = new VueRouter({
routes
})
export default router
结束
有需要源码的同学，可以评论留下邮箱