Vue现在已经是国内前端主流框架，越来越多的人开始专注其中，最近有幸参加了一个小型vue+spring boot项目，做了一些自我总结，希望给入门的同行们一些帮助
我之前做的JSP+Servlet为主，主要掌握模板技术为JSP，Freemarker，Thymeleaf为主
也做过一些angular的一些小型练习
要入门开发一个web项目，主要包含以下几点
前后端如何通信：
1.前端如何访问后端
import { xxxx, xxx } from '@/api/xxx'
const app = {
state: {
},
mutations: {
},
actions: {
xxx ({ commit }, aaaa) {
return xxx(aaaa)
}
}
}
export function getxxx (ddd) {
return request({
url: 'http://localhost:8090/xxx',
method: 'post',
data: ddd
})
}
let that = this
this.$store.dispatch('getVisitorList', this.searchParams).then(
(response) => {
that.tableData = response.data.list
that.searchParams.pageNum = response.data.pageNum + 1
that.searchParams.total = response.data.total
}
)
2.前后端数据传输类型
Json
Vue：
1.页面加载流程：vue生命周期中，主要的触发函数
export default {
name: 'xxx',
data () {
return {
xxx: ''
}
},
methods: {
xxxx (xx) {
}
},
mounted () {
},
watch: {
},
computed: {
...mapGetters([
'xxx'
]),
},
components: {
}
}
2.如何实现数据绑定
数据来源：computed, data
3.如何实现事件绑定
@click=''
4.如何使用路由
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/views/Layout/index'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/aaa',
name: 'aaa',
component: Layout,
meta: {
title: ''
},
children: [
{
path: 'bbb',
name: 'bbb',
component: () => import('@/views/bbb/index'),
meta: {
title: ''
}
}
]
}
]
})
5.路由传参
父页面:
this.$router.push({
path: 'xxxx',
query: {
id: eid
}
})
子页面：
watch: {
$route (to, from) {
this.xxx = to.query.id
}
}
6.如何引用其他的组件
7.如何使用页面组件
<xxx> </xxx>
import xxx from '@/components/xxx'
components: {
xxx
}
8.如何在页面组件中传递，接收参数
主子页面传参
：xxx.sync=’xxxx’
子页面
props: {
xxx: {
default: () => false,
type: Boolean
}
},
子页面回调
<xxx ：xxx.sync="empCanvas" @dddd='empSignture'></xxx>
子页面
this.$emit('dddd', {vvv:''})
9.如何配置跨域
proxyTable: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
访问后端:
export function getVisitorList (searchCond) {
return request({
url: '/api/nonacnVisitor/getVisitorList',
method: 'post',
data: searchCond
})
}
10.如何配置常量
使用vuex的store功能
const getters = {
xxx: state => state.bubble.xxx,
status: () => {
return {
'1': 'ddd',
'2': 'fff',
'3': 'ggg'
}
}
}
export default getters
11.前端字段验证
<el-form ref="xxxForm" :model="aaaa" :rules="rrrr">
<el-row :gutter="20">
<el-col :span="20" :offset="1">
<el-form-item :label="$t('fff')" prop="ddd">
<el-input v-model="ddd"></el-input>
</el-form-item>
</el-col>
</el-row>
visitorRules: {
ddd: [
{
required: true,
message: 'ddd',
trigger: 'blur'
}
]
}
this.$set(this.visitorRules, 'cardNumber', this.notNull)
this.$set(this.visitorRules, 'cardNumber', [{required: false}])
this.$refs.visitorForm.clearValidate()
validateRequired () {
let isValidate = true
this.$refs.visitorForm.validate(valid => {
if (!valid) {
isValidate = false
}
})
return isValidate
}
