1.环境准备
1.安装vue（已经安装过npm）
cnpm install vue
2.安装vue-cli：
cnpm install --global vue-cli
3.Web前端开发编辑工具WebStorm下载、安装及破解
激活破解：https://blog.csdn.net/voke_/article/details/76418116
4.git 基础框架代码下载
（如何快速搭建创建的基础框架 http://www.runoob.com/vue2/vue-install.html）
5.打开项目，配置运行方式：
image.png
2.项目目录
image.png
1.目录中的各个文件作用如下：
build:项目构建代码
config：配置目录
node_modules:项目依赖模块，（具体的不是特别清楚）
src：开发目录，写的代码基本都在这个文件夹下面
assets：放图片
components: 放各种组件
pages：放我们的项目组件放在这里，其实可以放到components文件夹下
router：index.js配置路由信息
App.vue:项目入口文件
main.js:项目核心文件
package.json：配置文件文档
2.main.js、APP.vue代码、index.js代码：
main.js：
//引入Vue、ElementUI、element-ui/lib/theme-chalk/index.css、App、router、axios、../config/axios
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import axios from 'axios'
import '../config/axios'
Vue.use(ElementUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
let vm = new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Vue.use({
vm
})
// Vue.prototype.axios=axios;
axios.defaults.headers = {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
}
实例化Vue：
通过var vm = new Vue({
// 选项
})
APP.vue代码:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
这里的id的值app就是main.js中el中的app。
index.js代码：
import Vue from 'vue'
import Router from 'vue-router'
import TestPage from '@/pages/TestPage'
import Group from '@/pages/Group'
import ServerList from '@/pages/ServerList'
import BusinessLine from '@/pages/BusinessLine'
import Login from '@/pages/Login'
import Main from '@/pages/Main'
import Interface from '@/pages/Interface'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/',
component: Main,
children: [
{
path: '',
name: 'Main',
component: Group
},
{
path: '/group',
name: 'Group',
component: Group
},
{
path: '/test',
name: 'TestPage',
component: TestPage
},
{
path: '/businessline',
name: 'BusinessLine',
component: BusinessLine
},
{
path: '/serverlist',
name: 'ServerList',
component: ServerList
},
{
path: '/interfaceinfos',
name: 'Interface',
component: Interface
}
]
}
]
})
@自动映射到src目录下
Vue.use(Router):全局使用vue-router
这里的路径就是浏览器访问的路径
3.BusinessLine.vue之移动功能
BusinessLine.vue文件包含三个部分：template、script、style
template：写html，定义元素
script：主要写各种方法，在template的定义的按钮上点击时会触发这个方法
style：这里可以定义元素格式
BusinessLine.vue中移动业务线功能：
移动业务线：将当前团队下的该业务线移动到其他团队中。
界面如下：
image.png
image.png
image.png
template部分：
<span :name="businessline.id">
<el-button-group style="float: right;padding: 2px 0;vertical-align:middle">
<el-button size="small" type="warning" icon="el-icon-edit"
@click="editBusinessLine(businessline.id,businessline.name,0)"></el-button>
<el-button size="small" type="warning" icon="el-icon-sold-out" @click="showDialog(businessline.id)"></el-button>
<el-button size="small" type="warning" icon="el-icon-delete"
@click="deleteBusinessLine(businessline.id,businessline.name)"></el-button>
</el-button-group>
</span>
这是个button-group，第二个按钮是移动功能
这里用的是element的组件，参数size可以定义大小，type定义类型，icon是button的图标，@click定义点击这个按钮会调用的方法
<span :id="businessline.name">
<el-dialog
title="移动业务线到其他团队"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<el-select style="height:20px;width:330px;" v-model="value" placeholder="选择团队" @change="selectValue(value)">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="moveBusiness(idTemp,value)">确 定</el-button>
</span>
</el-dialog>
</span>
这里主要用了element的对话框el-dialog组件和选择器el-select 组件
title：对话框的标题
:visible.sync：dialogVisible的值为false时不展示该对话框，为true时展示
width：占30%的宽度
:before-close：关闭前的回调，会暂停 Dialog 的关闭
value：选项的值
label：选项的标签
el-option：指每一个选项
v-model：值为当前被选中的el-option的 value 属性值
placeholder：占位符
加冒号的，说明后面的是一个变量或者表达式，没加冒号的后面就是对应的字符串字面量
@click定义点击确定时调用函数moveBusiness(idTemp,value)
script部分：
data () {
return {
businessList: [],
addBusinessResult: '',
editBusinessResult: '',
businessPageSize: '9',
currentPage: 1,
groupId: '',
input10: '',
groupToatal: '',
groupList: '',
options: [],
groupName: '',
dialogVisible: false,
idTemp: '',
value: '',
loading2: true,
getBusinessResult: ''
}
},
定义了options、dialogVisible、value、idTemp的初始值
点击页面的移动按钮会调用showDialog函数，把当前的businessId取出来存到idTemp中，this.dialogVisible = true将对话框设置为可见，然后获取团队的信息。
showDialog (businessId) {
this.idTemp = businessId
this.dialogVisible = true
this.getGroups()
}
调用接口获取团队信息，response.data.data列表的每一项的id和name值循环取出来，存入选择器options的value和label中。
getGroups () {
let currentTime = new Date()
axios({
method: 'get',
url: 'http://localhost:8082/interface/group/all' + '?timestamp=' + currentTime.getTime(),
withCredentials: true,
crossDomain: true
}).then((response) => {
console.log(response.data)
this.groupList = response.data
for (var myArray in this.groupList.data) {
console.log(this.groupList.data[myArray])
this.options.push({
value: this.groupList.data[myArray].id,
label: this.groupList.data[myArray].name
})
}
}).catch(function (error) {
console.log(error)
})
},
再点击确认的时候执行移动操作
moveBusiness (businessId, groupId) {
let currentTime = new Date()
axios({
method: 'post',
url: 'http://localhost:8082/interface/businessline/move/' + businessId + '/' + groupId + '?timestamp=' + currentTime.getTime(),
withCredentials: true,
crossDomain: true
}).then((response) => {
this.editBusinessResult = response.data
switch (this.editBusinessResult.result) {
case 'SUCCESS':
this.$message({
type: 'success',
message: '移动业务线成功'
})
this.getData(this.groupId, this.currentPage)
this.dialogVisible = false
break
default:
this.$message.error('移动业务线失败')
this.dialogVisible = false
}
}).catch(function (error) {
console.log(error)
})
},
4.created和mounted
created () {
// 获取上个页面传递的id,在下面获取数据的时候先提交id
this.groupId = this.$route.query.groupId
this.groupName = this.$route.query.groupName
},
mounted: function () {
this.getData(this.groupId, this.currentPage)
},
created:实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前不可见。我们这里在created中执行了获取上个页面传来的数据
mounted:el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。我们这里在mounted中执行了获取初始数据功能。
网友评论