1、使用Vue Cli创建VUE项目
vue create myvue
2、添加vue-router,element-ui,axios类库
npm install vue-router
npm install element-ui
npm install axios
3、添加list.vue列表页面
<template>
<div>
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="query.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="query.age1"></el-input>
</el-form-item>
<el-form-item label="至">
<el-input v-model="query.age2"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="doquery">查询</el-button>
<el-button type="primary" @click="doadd">添加</el-button>
<el-button type="primary" @click="dodelete">批量删除</el-button>
</el-form-item>
</el-form>
<el-table
:data="tableData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
style="width: 100%"
max-height="550" @selection-change="handleSelectionChange">
<el-table-column
prop="id"
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="provinceName"
label="省份"
width="120">
</el-table-column>
<el-table-column
prop="cityName"
label="市区"
width="120">
</el-table-column>
<el-table-column
prop="countyName"
label="地址"
width="300">
</el-table-column>
<el-table-column
prop="age"
label="年龄"
width="120">
</el-table-column>
<el-table-column
prop="dt"
label="日期"
width="150">
</el-table-column>
<el-table-column
prop="ts"
label="时间"
width="150">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120">
<template slot-scope="scope">
<el-button
@click="doedit(scope.$index, tableData)"
type="text"
size="small">
修改
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes, prev, pager, next, jumper"
:page-sizes=[4,8,16,32]
:page-size="pagesize"
:current-page="currentpage"
:total="tableData.length">
</el-pagination>
</div>
</template>
<script>
import axios from 'axios'
export default {
methods: {
doedit(index, rows) {
var id = rows[index].id;
this.$router.push('/add/'+id);
},
handleSelectionChange(sels) {
this.chkid=[];
if(sels.length>0)
{
for(var i=0;i<sels.length;i++)
this.chkid.push(sels[i].id);
}
},
loadstudent(){
var _this = this;
axios.post('http://localhost:6060/findstud',_this.query)
.then(function(resp){
console.log(resp.data);
_this.tableData=resp.data.list;
})
},
dodelete:function()
{
var _this = this;
axios.post('http://localhost:6060/deletestud?ids='+_this.chkid)
.then(function(result){
if(result.data)
{
alert("Delete Successfully");
//重新装载列表
_this.loadstudent();
}
})
},
doadd:function()
{
this.$router.push('/add');
},
doquery:function()
{
this.loadstudent();
},
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function (size) {
this.pagesize = size;
console.log(this.pagesize) //每页下拉显示数据
},
handleCurrentChange: function(currentpage){
this.currentpage = currentpage;
console.log(this.currentpage) //点击第几页
}
},
mounted:function(){
this.loadstudent();
},
data() {
return {
pagesize:4,
currentpage:1,
tableData: [],
chkid:[],
query:{
name:'',
age1:'',
age2:''
}
}
}
}
</script>
4、添加页面add.vue
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="student.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="student.age"></el-input>
</el-form-item>
<el-form-item label="日期">
<el-col :span="11">
<el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="student.dt" style="width: 100%;"></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="时间">
<el-col :span="11">
<el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间" v-model="student.ts" style="width: 100%;"></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="省份">
<el-select v-model="student.province" placeholder="请选择省份" @change="selectprovince" style="width: 100%;">
<el-option v-for="p in provincelist" :label="p.name" :value="p.code">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="地区">
<el-select v-model="student.city" placeholder="请选择地区" @change="selectcity" style="width: 100%;">
<el-option v-for="c in citylist"
:label="c.name"
:value="c.code">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="县市">
<el-select v-model="student.county" placeholder="请选择县市" style="width: 100%;">
<el-option v-for="c in countylist"
:label="c.name"
:value="c.code">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
provincelist:[],//所有省份集合
citylist:[],//选中省份之后对应地区集合
countylist:[],//选中地区之后对应县市集合
student:{//添加或修改时用到的学生对象
id:'',//学生ID
name:'',//学生姓名
age:'12',//学生年龄
province:'',//省份代码
city:'',//地区代码
county:'',//县市代码
dt:'',//日期
ts:''//时间
}
}
},
mounted() {
var id = this.$route.params.id;
this.openbyid(id);
this.doloadaddress();
},
methods: {
onSubmit() {
console.log('submit!');
this.dosave();
},
//通过学生ID,获取学生对象
openbyid:function(id)
{
var _this = this;
axios.get('http://localhost:6060/findstudbyid?id='+id)
.then(function(result){
_this.student=result.data;
//调用VUE方法,初始化三级联动地址
_this.doloadaddress(_this.student.province,_this.student.city,
_this.student.county);
})
},
dosave:function()
{
console.log('dosave...');
var _this = this;
//将VUE对象student提交到后台
axios.post('http://localhost:6060/savestudent',_this.student)
.then(function(result){
if(result.data)
{
alert('Successfully');
_this.$router.push('/list');
}
else
alert('Failure');
})
},
selectprovince:function()//省份下列框选择事件
{
//选择地区,只输入省份Code
this.doloadaddress(this.student.province);
},
selectcity:function()//地区下列框选择事件
{
//选择县市,输入省份Code,地区Code
this.doloadaddress(this.student.province,this.student.city);
},
//初始化三级联动地址下列框
//province 省份代码 可空
//city 地区代码 可空
//county 县市代码 可空
doloadaddress:function(province,city,county)
{
console.log('doloadaddress...');
//定义_this记录VUE实例,应用axios中this代表
var _this = this;
//加载省份列表
axios.get('http://localhost:6060/getprovice')
.then(function(result){
_this.provincelist = result.data;
if(province != '' && province != null)
{
console.log('province...'+province);
_this.student.province = province;
}
else
{
//如果没有省份初始值,选择第一省份作为初始值
_this.student.province = result.data[0].code;
}
//根据省份Code,加载地区列表,发起请求,在下面语句中捕捉返回数据
return axios.get('http://localhost:6060/getcity?code='+_this.student.province);
})
.then(function(cityResult){
//捕捉地区列表数据
_this.citylist = cityResult.data;
if(city != '' && city != null)
{
console.log('city...'+city);
_this.student.city = city;
}
else
{
//如果没有地区初始值,选择第一地区作为初始值
_this.student.city = cityResult.data[0].code;
}
//根据地区Code,加载县市列表,发起请求,在下面语句中捕捉返回数据
return axios.get('http://localhost:6060/getcounty?code='+_this.student.city);
})
.then(function(countyResult){
//捕捉县市列表数据
_this.countylist = countyResult.data;
console.log('county...'+countyResult.data);
if(county != '' && county != null)
{
console.log('county...'+county);
_this.student.county = county;
}
else
{
//如果没有县市初始值,选择第一县市作为初始值
_this.student.county = countyResult.data[0].code;
}
})
}
}
}
</script>
5、添加路由JS
import List from '@/components/list.vue'
import Add from '@/components/add.vue'
export default{
routes:[
{path:"/list",component:List},
{path:"/add",component:Add},
{path:"/add/:id",component:Add}
]
}
6、修改main.js,引入所需JS
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import VueRouter from 'vue-router'
import myrouter from './myrouter'
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(VueRouter)
const router = new VueRouter(myrouter);
new Vue({
router,
render: h => h(App),
}).$mount('#app')
7、修改App.vue首页面
<template>
<div id="app">
<router-link to="/add">添加</router-link>
<router-link to="/list">列表</router-link>
<router-view></router-view>
</div>
</template>
<script>
import StudentList from './components/list.vue'
export default {
name: 'app',
components: {
StudentList
}
}
</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;
}
</style>
SpringBoot后台代码
https://pan.baidu.com/s/1ccsIhEs_TY8qQbP_Mt5Rkg 提取码t2bi
前端VUE项目
https://pan.baidu.com/s/10NMyDAgu5Gceg2iRsE0TKw 提取码vrx4