springboot+vue项目

于 2023-11-22 10:00:49 发布
阅读量4.6k 收藏 45
点赞数 4
CC 4.0 BY-SA版权
文章标签： vue.js spring boot 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lLlLlL__lL/article/details/134500756

什么是MVVM

MVVM，是Model-View-ViewModel的简写，是M-V-VM三部分组成。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，其中ViewModel将视图 UI 和业务逻辑分开，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

MVVM采用双向数据绑定，view中数据变化将自动反映到viewmodel上，反之，model中数据变化也将会自动展示在页面上。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

MVVM核心思想，是关注model的变化，让MVVM框架利用自己的机制自动更新DOM，也就是所谓的数据-视图分离，数据不会影响视图。

前后端分离

前后端分离就是将一个应用的前端代码和后端代码分开，为什么要这样做？

如果不使用前后端分离的方式，会有什么问题？

传统的JavaWeb开发，前端使用JSP开发，Jsp不是由后端开发者独立完成的

前端写出 ->Html静态页面 ->交给后端 ->后端转为JSP，比较麻烦

这种开发方式效率极低，可以使用前后端分离的方式进行开发，可以完美解决这一问题

前端只需要独立编写客户端代码，后端也只需要独立编写服务端代码提供数据接口即可

前端通过Ajax请求来访问后端的数据接口，将Model展示到view中即可

前后端开发者只需要提前约定好接口文档(URL、参数、数据类型....)

然后分别独立开发即可，前端可以用假数据进行测试，不需要依赖于后端

最后完成前后端集成即可，实现前后端应用的解耦，提升开发效率

单体应用 拆分为 ： 前端应用+后端应用

前端应用 ：负责数据展示和用户交互

后端应用：负责提供数据处理接口

前端HTML -> Ajax ->restful后端数据接口

传统的访问方式

前后端分离方式

就是将一个单体应用拆分成两个独立的应用，前端应用和后端应用以Json格式进行数据交互

实现技术

SpringBoot + Vue

使用SpringBoot进行后端应用开发，使用Vue进行前端应用开发

创建Vue项目

1，使用vue create 创建一个空的vue项目

2，创建一个Book.vue文件

3，写入代码以及假数据

Book.vue

<template>
	<div>
		<table>
			<tr>
				<th>编号</th>
				<th>书籍名称</th>
				<th>书籍作者</th>
				<th>书籍出版社</th>
			</tr>
			<tr v-for="item in books">
				<td>{{item.bookid}}</td>
				<td>{{item.bookname}}</td>
				<td>{{item.author}}</td>
				<td>{{item.publisher}}</td>
			</tr>
		</table>
	</div>
</template>

<script>
	export default{
		data() {
			return{
				books:[
					{bookid:1,bookname:"Java入门",author:"张三",publisher:"江苏出版社"},
				]
			}
		}
	}
</script>

<style>
</style>

index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import HomeView from '../views/HomeView.vue';
import Book from '../views/Book.vue';
import User from '../views/User.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
  },
	{
		path: '/book',
		component: Book
	},
	{
		path: '/user',
		component: User
	}
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

4，数据展示

Springboot创建

vue和springboot数据交互

1，先要在Vue安装一个插件，Axios，通过Axios去完成数据异步交互，和ajax用法差不多

2，先停止vue任务，按ctrl+c停止

3，在项目位置，输入命令 ： vue add axios

4，装好之后，去写请求的代码，在Book.vue中

直接访问后台接口，会产生跨域的问题，需要配置文件去解决这个问题

从源'http://localhost:8080'访问'http://localhost:8088/books'的XMLHttpRequest已被CORS策略阻止:请求的资源上没有'Access- control - allow - origin '标头。

同源问题参考网址：

跨域资源共享 CORS 详解 - 阮一峰的网络日志

package com.web.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * 跨域请求的配置
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

ElementUi的使用

Vue 集成 Element UI

先安装elementUI使用下面的命令

cnpm install element-ui@2.6.3 -S

在main.js中引入elementUI

import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from 'element-ui';


Vue.use(ElementUI);

<template>
	<div>
		<el-table
		    :data="car"
		    border
		    style="width: 100%">
		    <el-table-column
		      fixed
		      prop="carid"
		      label="车辆编号"
		      width="150">
		    </el-table-column>
		    <el-table-column
		      prop="carname"
		      label="车辆名称"
		      width="120">
		    </el-table-column>
		    <el-table-column
		      prop="color"
		      label="车辆颜色"
		      width="120">
		    </el-table-column>
		    <el-table-column
		      prop="price"
		      label="车辆价格"
		      width="120">
		    </el-table-column>
		    <el-table-column
		      prop="rentprice"
		      label="租金价格"
		      width="150">
		    </el-table-column>
		    <el-table-column
		      prop="description"
		      label="车辆描述"
		      width="120">
		    </el-table-column>
        <el-table-column
          prop="cartype"
          label="车辆类型"
          width="120">
        </el-table-column>
        <el-table-column
          prop="carimg"
          label="头像"
          width="120">
        </el-table-column>
        <el-table-column
          prop="remain"
          label="库存"
          width="120">
        </el-table-column>
		    <el-table-column
		      fixed="right"
		      label="操作"
		      width="100">
		      <template slot-scope="scope">
		        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
		        <el-button type="text" size="small">编辑</el-button>
		      </template>
		    </el-table-column>
		  </el-table>
	</div>
</template>

<script>
  export default{
    data() {
      return{
        car:[]
      }
    },
    created() {
      //将页面全局的this，赋值给_this这个变量
      const _this = this;
      //使用此函数，完成数据异步请求加载，和绑定
      axios.get("http://localhost:8081/car/cars?pageNum=1&pageSize=5").then(function(resp){
        //console.log(resp.data);
        //this.car = resp.data;//直接使用this，在函数中返回的是当前函数对象
        _this.car = resp.data.data;
      })
    }
  }
</script>

<style>
</style>

找到官网资料，复制过来做演示

Element UI 后台管理系统主要的标签：

el-container：构建整个⻚⾯框架。

el-aside：构建左侧菜单。

el-menu：左侧菜单内容，常⽤属性：

:default-openeds：默认展开的菜单，通过菜单的 index 值来关联。

:default-active：默认选中的菜单，通过菜单的 index 值来关联。

el-submenu：可展开的菜单，常⽤属性：

index：菜单的下标，⽂本类型，不能是数值类型。

template：对应 el-submenu 的菜单名。

i：设置菜单图标，通过 class 属性实则。

el-icon-messae

el-icon-menu

el-icon-setting

el-menu-item：菜单的⼦节点，不可再展开，常⽤属性：

index：菜单的下标，⽂本类型，不能是数值类型。

将拷贝过来的组件修改，代码直接放到Car.vue中，修改后的代码

<template>
	<div>

    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
              <el-menu-item index="1-3">选项3</el-menu-item>
              <el-menu-item index="1-4">选项4</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <el-table
              :data="car"
              border
              style="width: 100%">
              <el-table-column
                fixed
                prop="carid"
                label="车辆编号"
                width="150">
              </el-table-column>
              <el-table-column
                prop="carname"
                label="车辆名称"
                width="120">
              </el-table-column>
              <el-table-column
                prop="color"
                label="车辆颜色"
                width="120">
              </el-table-column>
              <el-table-column
                prop="price"
                label="车辆价格"
                width="120">
              </el-table-column>
              <el-table-column
                prop="rentprice"
                label="租金价格"
                width="150">
              </el-table-column>
              <el-table-column
                prop="description"
                label="车辆描述"
                width="120">
              </el-table-column>
              <el-table-column
                prop="cartype"
                label="车辆类型"
                width="120">
              </el-table-column>
              <el-table-column
                prop="carimg"
                label="头像"
                width="120">
              </el-table-column>
              <el-table-column
                prop="remain"
                label="库存"
                width="120">
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                  <el-button type="text" size="small">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
        </el-main>
      </el-container>
    </el-container>


	</div>
</template>

<script>
  export default{
    data() {
      return{
        car:[]
      }
    },
    created() {
      //将页面全局的this，赋值给_this这个变量
      const _this = this;
      //使用此函数，完成数据异步请求加载，和绑定
      axios.get("http://localhost:8081/car/cars?pageNum=1&pageSize=5").then(function(resp){
        //console.log(resp.data);
        //this.car = resp.data;//直接使用this，在函数中返回的是当前函数对象
        _this.car = resp.data.data;
      })
    }
  }
</script>

<style>
</style>

绑定左侧导航

编写4个页面

在router中的index.js下注册

注册完后，访问页面，如下的效果即可，每个页面，显示在右侧的窗口中

浏览器地址中，如果有#号，在router下的index.js中，加入mode:"history"

 将拷贝过来的组件修改，代码直接放到App.vue中，修改后的代码

<template>
	<div>

    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
              <el-menu-item index="1-3">选项3</el-menu-item>
              <el-menu-item index="1-4">选项4</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>


	</div>
</template>

<script>
  export default{
    data() {
      return{
        car:[]
      }
    },
    created() {
      //将页面全局的this，赋值给_this这个变量
      const _this = this;
      //使用此函数，完成数据异步请求加载，和绑定
      axios.get("http://localhost:8081/car/cars?pageNum=1&pageSize=5").then(function(resp){
        //console.log(resp.data);
        //this.car = resp.data;//直接使用this，在函数中返回的是当前函数对象
        _this.car = resp.data.data;
      })
    }
  }
</script>

<style>
</style>

 car.vue

<template>
	<div>

   <el-table
       :data="car"
       border
       style="width: 100%">
       <el-table-column
         fixed
         prop="carid"
         label="车辆编号"
         width="150">
       </el-table-column>
       <el-table-column
         prop="carname"
         label="车辆名称"
         width="100">
       </el-table-column>
       <el-table-column
         prop="color"
         label="车辆颜色"
         width="100">
       </el-table-column>
       <el-table-column
         prop="price"
         label="车辆价格"
         width="100">
       </el-table-column>
       <el-table-column
         prop="rentprice"
         label="租金价格"
         width="100">
       </el-table-column>
       <el-table-column
         prop="description"
         label="车辆描述"
         width="120">
       </el-table-column>
       <el-table-column
         prop="cartype"
         label="车辆类型"
         width="100">
       </el-table-column>
       <el-table-column
         prop="carimg"
         label="头像"
         width="100">
       </el-table-column>
       <el-table-column
         prop="remain"
         label="库存"
         width="100">
       </el-table-column>
       <el-table-column
         fixed="right"
         label="操作"
         width="100">
         <template slot-scope="scope">
           <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
           <el-button type="text" size="small">编辑</el-button>
         </template>
       </el-table-column>
     </el-table>
	</div>
</template>

<script>
  export default{
    data() {
      return{
        car:[]
      }
    },
    created() {
      //将页面全局的this，赋值给_this这个变量
      const _this = this;
      //使用此函数，完成数据异步请求加载，和绑定
      axios.get("http://localhost:8081/car/cars?pageNum=1&pageSize=5").then(function(resp){
        //console.log(resp.data);
        //this.car = resp.data;//直接使用this，在函数中返回的是当前函数对象
        _this.car = resp.data.data;
      })
    }
  }
</script>

<style>
</style>

左侧导航栏和右侧的页面做绑定

先修改router目录下的index.js

配置完成成，发现页面会重复渲染，这是因为我们在index.js中又配置了一次App.vue的访问

需要重新配置一下

1，新建一个Index.vue，将刚才App.vue中的所有代码全部移动到Index.vue中

<template>
	<div>
		<el-container style="height: 500px; border: 1px solid #eee">
		  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
		    <el-menu :default-openeds="['1', '3']">
		      <el-submenu v-for="(item,index) in $router.options.routes" 
						:index="index+''">
		        <template slot="title"><i class="el-icon-message"></i>{{item.name}}</template>
		        <el-menu-item-group>
		          <el-menu-item v-for="(item2,index2) in item.children" 
				  :index="index+'-'+index2">{{item2.name}}</el-menu-item>
		          
		        </el-menu-item-group>
		      </el-submenu>
		    </el-menu>
		  </el-aside>
		  <el-container>
		    <el-main>
		      <router-view></router-view>
		    </el-main>
		  </el-container>
		</el-container>
	</div>
</template>

<script>
</script>

<style>
</style>

2，修改App.vue中的代码

3，在index.js中，注册Index.vue

动态获取index.js中的内容，展示到页面导航

绑定导航按钮，可以实现点击导航跳转页面

步骤 ：

1，在el-menu中添加router属性

2，在el-menu-item中配置:index属性为path值，即可完成跳转

数据的查询功能

修改显示

将之前Book.vue中的代码复制到PageOne.vue中

分页的添加

增加一个page函数

created函数中做修改

后台代码分页功能修改

增加功能

增加页面代码,从模板拷过来后，直接修改模板中内容

<template>
	<div>
		<h1 style="text-align: center;">添加图书</h1>
		<el-form :model="books" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		  <el-form-item label="书籍名称" prop="bookname">
		    <el-input v-model="books.bookname"></el-input>
		  </el-form-item>
		  <el-form-item label="书籍出版社" prop="publisher">
		    <el-input v-model="books.publisher"></el-input>
		  </el-form-item>
		  <el-form-item label="书籍作者" prop="author">
		    <el-input v-model="books.author"></el-input>
		  </el-form-item>
		  
		  <el-form-item>
		    <el-button type="primary" @click="submitForm()">添加</el-button>
		    <el-button @click="resetForm('books')">重置</el-button>
		  </el-form-item>
		</el-form>
	</div>
</template>


<script>
  export default {
    data() {
      return {
        books: {
          bookname: '',
          publisher: '',
          author: ''
        },
        rules: {
          bookname: [
            { required: true, message: '书籍名称未写', trigger: 'blur' }
          ],
		  publisher: [
		    { required: true, message: '书籍出版社未写', trigger: 'blur' }
		  ],
		  author: [
		    { required: true, message: '作者未写', trigger: 'blur' }
		  ]
        }
      };
    },
    methods: {
      submitForm() {
		  const _this = this;
		  axios.post("http://localhost:8088/book",this.books).then(function(resp){
			  //判断结果
			  if(resp.data == "success"){
				  alert("添加成功！");
				  _this.$router.push("/pageOne");
			  }else{
				  alert("添加失败")
			  }
		  })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

编写后台接口

修改删除功能

修改、删除按钮修改

修改按钮默认已经给了一个函数，并且传入一个参数，先测试函数中参数弹出的内容

测试发现，这里的row直接就是点击数据行的数据

重新编写修改函数，当我们点击修改的时候，直接将页面跳转到修改页面，并将当前行的数据携带过去

使用$router.push()方法，传入path表示 跳转的页面 ，传入query表示携带的参数

编写修改页面 PageThree

拿一个表单模板，修改为需要的内容

created函数中去获取传递过来的数据

submitForm()函数中，编写axios，完成数据修改提交

<template>
	<div>
		<h1 style="text-align: center;">修改图书</h1>
		<el-form :model="books" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		  <el-form-item label="书籍名称" prop="bookname">
		    <el-input v-model="books.bookname"></el-input>
		  </el-form-item>
		  <el-form-item label="书籍出版社" prop="publisher">
		    <el-input v-model="books.publisher"></el-input>
		  </el-form-item>
		  <el-form-item label="书籍作者" prop="author">
		    <el-input v-model="books.author"></el-input>
		  </el-form-item>
		  
		  <el-form-item>
		    <el-button type="primary" @click="submitForm()">修改</el-button>
		    <el-button @click="resetForm('books')">重置</el-button>
		  </el-form-item>
		</el-form>
	</div>
</template>


<script>
  export default {
    data() {
      return {
        books: {
		  bookid:'',
          bookname: '',
          publisher: '',
          author: ''
        },
        rules: {
          bookname: [
            { required: true, message: '书籍名称未写', trigger: 'blur' }
          ],
		  publisher: [
		    { required: true, message: '书籍出版社未写', trigger: 'blur' }
		  ],
		  author: [
		    { required: true, message: '作者未写', trigger: 'blur' }
		  ]
        }
      };
    },
	created() {
		// alert(this.$route.query.id);
		//通过id去查询所有图书
		this.books = this.$route.query.book;
	},
    methods: {
      submitForm() {
		  const _this = this;
		  axios.post("http://localhost:8088/update",this.books).then(function(resp){
			  //判断结果
			  if(resp.data == "success"){
				  alert("修改成功！");
				  _this.$router.push("/pageOne");
			  }else{
				  alert("修改失败")
			  }
		  })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

后台接口

删除功能

删除按钮

点击事件汇总，传入当前行数据

函数编写拿到当前行数据，并获取对应的id值，写入axios，完成数据删除，删除后刷新当前页面

后台代码

模糊查询+分页

添加搜索框及按钮

编写对应的提交事件

page函数修改，携带参数

后台代码修改

默认访问、导航隐藏

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值