vue+elementui+springboot实现前后端分离的小例子(前端部分)

智慧包
617 阅读2分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路

前端部分

1、创建vue初始化项目

打开终端，切换到要创建项目的目录，输入下面的语句，然后根据自己的需要进行选择

（install vue-router一定要选择yes，会免去后面很多不必要的麻烦，use eslint这一项选择了yes的话会帮你代码规范，你的代码少了一个空格他都会给你揪出来，我就直接选no了）

vue init webpack 项目名

20200408105657177.png

创建完成后目录结构如下：

20200408110315225.png

在src下新建一个pages文件，并添加四个vue文件

在这里插入图片描述

2、设置路由跳转

在router下的index.js中添加语句，完整代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/Home'
import Find from '@/pages/Find'
import One from '@/pages/One'
import Two from '@/pages/Two'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '主页',
      component: Home
    },
    {
      path: '/find',
      name: '查询学生',
      component: Find
    },
    {
      path: '/One',
      name: '添加学生',
      component: One
    },
    {
      path: '/Two',
      name: '修改学生',
      component: Two
    }
  ]
})

3、导入elementUI，axios

官网入口

在终端输入以下语句来安装elementUI和axios（解决跨域的问题）

npm i element-ui -S
npm install axios -S

在main.js中添加语句

import './plugins/axios'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

完整代码如下：

import Vue from 'vue'
import App from './App'
import router from './router'
import './plugins/axios'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI)

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在elementUI中选择需要的组件添加到自己的代码中

在这里插入图片描述

找到自己需要的布局容器后点击显示代码，将代码复制App.vue中，根据自己的需要做一点修改

在这里插入图片描述

App.vue完整代码如下：

<template>
  <div id="app">
     <el-container style="height: 500px; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu router> 
                  <el-submenu >
                    <template slot="title"><i class="el-icon-message"></i>学生管理</template>
                    //从我们设置的路由路径中遍历，动态显示在左侧的导航栏中
                     <el-menu-item v-for="item in $router.options.routes" :key="item" :index="item.path" :class="$route.path==item.path?'is-active':''">{{item.name}}</el-menu-item>
                  </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header style="text-align: right; font-size: 12px"></el-header>  
                <el-main>
                //这里加上了路由才能渲染出页面
                <router-view/>
                </el-main>
            </el-container>
        </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {}
}
</script>
<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
</style>

编写Home.vue主页面

这里就随便写一点东西显示在主页面上，完整代码如下：

<template>
    <div>
    this is home
    </div>
</template>

<script>
  export default {
    name: 'Home'
  }
</script>

<style>
</style>

编写Find.vue查询页面

找一个table表格组件，复制到Find.vue文件中，根据自己的需要做一点修改 在这里插入图片描述

完整Find.vue代码如下：

<template>
    <div>
    <el-table :data="student" border style="width: 100%">
        <el-table-column fixed prop="studentId" label="学号" width="120"></el-table-column>
        <el-table-column prop="studentName" label="姓名" width="120"></el-table-column>
        <el-table-column prop="studentSex" label="性别" width="120"></el-table-column>
        <el-table-column prop="studentClass" label="班级" width="120"></el-table-column>
        <el-table-column prop="studentPhone" label="联系方式" width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
                <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
                <el-button @click="deleteStudent(scope.row)" type="text" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    //分页功能的实现
    <el-pagination background layout="prev, pager, next" :page-size="2" :total="10" @current-change="page"></el-pagination>
    </div>
</template>

<script>
    export default {
        name: 'Find',
        methods: {
            edit(row) {
                this.$router.push({
                    path: '/Two',
                    //点击修改时，把studentId传给修改页面
                    query: {
                        studentId: row.studentId
                    }
                })
            },
            deleteStudent(row){
                 const _this =this
                 //调用后端的接口
                axios.post('http://localhost:8080/delete/'+row.studentId).then(function(resp){
                    _this.$alert('delete!!!' , 'message',{
                        confirmButtonText: 'yes',
                        //回调函数，操作完成后刷新该页面
                        callback: action => {
                           window.location.reload()
                        }
                    })
            })
            },
            page(currentPage){
                alert(currentPage)
            }
        },
        data(){
            return{
                 student:[]
            }
        },
        //进入这个页面后自动加载我们生成的数据
        created(){
            const _this = this
            //调用后端的接口
            axios.get('http://localhost:8080/getAll').then(function(resp){
                _this.student = resp.data
            })
        }
    }
</script>

<style  scoped>
</style>

编写One.vue添加页面

找一个表单组件，复制到One.vue文件中，根据自己的需要做一点修改，这个表单验证组件还可以进行数据的检验

在这里插入图片描述 完整One.vue代码如下：

<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" >
          <el-form-item label="学号" prop="studentId">
            <el-input v-model="ruleForm.studentId"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="studentName">
            <el-input v-model="ruleForm.studentName"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="studentSex">
            <el-input v-model="ruleForm.studentSex"></el-input>
          </el-form-item>
          <el-form-item label="班级" prop="studentClass">
            <el-input v-model="ruleForm.studentClass"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="studentPhone">
            <el-input v-model="ruleForm.studentPhone"></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-button @click="test">test</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>

<script>
  export default {
    name: 'One',
     data() {
      return {
        ruleForm: {
          studentId: '',
          studentName: '',
          studentSex: '',
          studentClass: '',
          studentPhone: ''
        },
        //校验规则
        rules: {
          studentId: [
            { required: true, message: '请输入学号', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          studentName: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          studentSex: [
            { required: true, message: '请输入性别', trigger: 'blur' }
          ],
          studentClass: [
            { required: true, message: '请输入班级', trigger: 'blur' }
          ],
          studentPhone: [
            { required: true, message: '请输入电话', trigger: 'blur' }
          ],
        }
      };
    },
    methods: {
      submitForm(formName) {
        const _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
            //调用后端的接口
            axios.post('http://localhost:8080/addStudent',this.ruleForm).then(function(resp){
                _this.$alert('add!!!' , 'message',{
                        confirmButtonText: 'yes',
                        //回调函数，操作完成后自动转入查找页面
                        callback: action => {
                            _this.$router.push('/Find')  
                        }
                    })
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      test(){
        console.log(this.ruleForm)
      }
    }
  }
</script>

<style>
</style>

编写Two.vue修改页面

逻辑与One.vue页面相似，完整代码如下：

<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" >
          <el-form-item label="学号" prop="studentId">
            <el-input v-model="ruleForm.studentId"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="studentName">
            <el-input v-model="ruleForm.studentName"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="studentSex">
            <el-input v-model="ruleForm.studentSex"></el-input>
          </el-form-item>
          <el-form-item label="班级" prop="studentClass">
            <el-input v-model="ruleForm.studentClass"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="studentPhone">
            <el-input v-model="ruleForm.studentPhone"></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-button @click="test">test</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>

<script>
  export default {
    name: 'two',
     data() {
      return {
        ruleForm: {
          studentId: '',
          studentName: '',
          studentSex: '',
          studentClass: '',
          studentPhone: ''
        },
        rules: {
          studentId: [
            { required: true, message: '请输入学号', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          studentName: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          studentSex: [
            { required: true, message: '请输入性别', trigger: 'blur' }
          ],
          studentClass: [
            { required: true, message: '请输入班级', trigger: 'blur' }
          ],
          studentPhone: [
            { required: true, message: '请输入电话', trigger: 'blur' }
          ],
        }
      };
    },
    created(){
        const _this = this
        //调用后端接口，获取查找页面点击修改时传过来的studentId
        axios.get('http://localhost:8080/findById/'+this.$route.query.studentId).then(function(resp){
          _this.ruleForm = resp.data
        })
      },
    methods: {
      submitForm(formName) {
        const _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            _this.$alert('successbefore')
            _this.$alert(this.ruleForm)
            //调用后端接口
            axios.post('http://localhost:8080/updateStudent',this.ruleForm).then(function(resp){
                _this.$alert('change!!!' , 'message',{
                        confirmButtonText: 'yes',
                        //回调函数，执行完毕返回查询页面
                        callback: action => {
                            _this.$router.push('/Find')
                        }
                    })
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      test(){
        console.log(this.ruleForm)
      }
    }
  }
</script>

<style>
</style>

四、效果展示

1、首页在这里插入图片描述

2、查询

在这里插入图片描述

3、添加

自动校验功能

在这里插入图片描述 添加成功 在这里插入图片描述

4、修改

点击修改表单会自动添加相应的信息

在这里插入图片描述 通过这个案例能够大致体会到前后端分离究竟是怎么一回事了

avatar
文章
阅读
粉丝
相关推荐
一个界面现代美观，色彩年轻化的Vue3+SpringBoot3前后端分离中后台管理脚手架
16k阅读
 · 
205点赞
听说前端出大事儿了
368k阅读
 · 
1.4k点赞
Vue3.3 + Vite+ Element-Plus + TypeScript 从0到1搭建企业级后台管理系统（前后端开源）
154k阅读
 · 
1.0k点赞
2023高频前端面试题合集之Vue（上篇）
200k阅读
 · 
1.3k点赞
SpringBoot可以同时处理多少请求？
78k阅读
 · 
1.0k点赞
总是跳转到国内版(cn.bing.com)？New Bing使用全攻略
473k阅读
 · 
146点赞
2023前端面试系列-- Vue 篇
106k阅读
 · 
1.5k点赞
Vue3.2 + Element-Plus 二次封装 el-table（Pro版🚀🚀）
148k阅读
 · 
844点赞
若依框架入门(前后端分离版本)
38k阅读
 · 
38点赞
作为一名前端工程师，我浪费了时间学习了这些技术
221k阅读
 · 
843点赞

友情链接：