Vue+SpringBoot实现前后端分离
源码:
前端
一、安装Vue
安装Node.js
先在自己的电脑上安装Node.js,这里就不过多赘述了,毕竟网上的资源有很多,可以自行百度
npm install vue
安装cli
npm install -g @vue/cli
创建项目
vue create my-project
OR
vue ui
二、运行
运行Vue项目
npm run serve
添加的组件
axios
相当于Ajax,像后端发送请求,实现前后端分离
vue add axios
运行中出现的问题解决方案
npm install sass-loader -D
npm install node-sass -D
后端
注意事项
解决跨域问题
:module绑定对象
:rules:绑定校验规则
前端配置
created(){
const _this=this
// 解决跨域问题
axios.get("http://localhost:8181/student/queryall").then(function(resp){
_this.person=resp.data
})
}
<template>
<div id="app">
<!-- el-container 构建整个页面框架 -->
<el-container style="height: 500px; border: 1px solid #eee">
<!-- 构建左侧菜单 -->
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<!-- 构建左侧菜单按钮内容 -->
<!--:default-active:默认选中的菜单 ----- :default-openeds 通过菜单的index值来关联默认打开的菜单 -->
<el-menu :default-openeds="['1', '2','3']" :default-active="'1-1'">
<!-- 可展开的菜单栏:子级菜单 常用属性:index: 菜单的下标,文本类型-->
<el-submenu index="1">
<!-- 对应el-submenu的菜单名 -->
<template slot="title">
<!-- 设置菜单图标 -->
<i class="el-icon-menu"></i>导航一
</template>
<!-- 导航的子菜单组 -->
<!-- <el-menu-item-group> -->
<!-- <template slot="title">分组一</template> -->
<!-- -->
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项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> -->
<!-- 可展开的菜单栏:子级菜单 常用属性:index: 菜单的下标,文本类型-->
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<!-- <el-submenu index="2">
<template slot="title">
<i class="el-icon-menu"></i>导航二
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu> -->
<!-- <el-submenu index="3">
<template slot="title">
<i class="el-icon-setting"></i>导航三
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu> -->
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140"></el-table-column>
<el-table-column prop="name" label="姓名" width="120"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "app",
components: {
HelloWorld
},
data() {
const item = {
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
};
return {
tableData: Array(20).fill(item)
};
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>