Vue前后端分离开发-后端：Springboot+SpringMVC+MyBatis 前端：Vue全家桶(2)

最新推荐文章于 2023-09-03 08:03:38 发布
最新推荐文章于 2023-09-03 08:03:38 发布
阅读量2.7k 收藏 3
点赞数 5
分类专栏： Vue 文章标签： vue node axios elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/v3424/article/details/121388269
版权

基于VScode和idea开发


效果如下

在这里插入图片描述

后端开发

https://blog.csdn.net/v3424/article/details/121387816

前端开发

前置配置

下载axios：npm install axios
下载element-ui：npm i element-ui -S
默认都是下载最新版

代码

在这里插入图片描述

book文件夹

book_list.vue

<template>
  <div>
    <router-link to="/">返回首页</router-link> |
    <router-link to="/book_insert">添加图书</router-link>
    <form>
      <table border="1">
        <tr>
          <td>
            类别：<select v-model="book.cid">
              <option value="">--请选择--</option>
              <option
                v-for="(category, index) in categoryList"
                :key="index"
                :value="category.cid"
              >
                {{ category.cname }}
              </option>
            </select>
            书名：<input
              type="text"
              placeholder="请输入书名"
              v-model="book.name"
            />
            价格：<input
              type="text"
              placeholder="请输入最小价格"
              v-model="book.minPrice"
            />
            --
            <input
              type="text"
              placeholder="请输入最大价格"
              v-model="book.maxPrice"
            />
            <input type="button" value="查询" @click="initSearchAllBook()" />
          </td>
        </tr>
      </table>
    </form>

    <table border="1">
      <tr>
        <td>
          全选
          <input type="checkbox" v-model="isCheckAll" @change="change()" />
          <input type="button" value="删除" @click="batchBook()" />
        </td>
        <td>图书ID</td>
        <td>图书名称</td>
        <td>图书价格</td>
        <td>发行时间</td>
        <td>图书类别</td>
        <td>操作</td>
      </tr>
      <tr v-for="(book, index) in pageInfo.list" :key="index">
        <td>
          <input type="checkbox" v-model="ids" :value="book.id" />
        </td>
        <td>{{ book.id }}</td>
        <td>{{ book.name }}</td>
        <td>{{ book.price }}</td>
        <td>{{ book.publishTime }}</td>
        <td>{{ book.category != null ? book.category.cname : "" }}</td>
        <td>
          <router-link :to="'/book_edit/' + book.id">修改</router-link> |
          <a href="#" @click.prevent="deleteBook(book.id)">删除</a>
        </td>
      </tr>
      <tr>
        <td colspan="7">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.pageNum"
            :page-sizes="[5, 7, 9, 11]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total"
          >
          </el-pagination>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      pageInfo: {
        pageNum: 1,
        pageSize: 5,
      },
      isCheckAll: false,
      book: {
        cid: "",
      },
      categoryList: [],
      ids: [],
    };
  },
  methods: {
    initSearchAllBook() {
      this.$axios
        .post(
          `/book/${this.pageInfo.pageNum}/${this.pageInfo.pageSize}`,
          this.book
        )
        .then((res) => {
          let baseResult = res.data;
          this.pageInfo = baseResult.data;
        });
    },
    searchAllCategory() {
      this.$axios.get("/category").then((res) => {
        let baseResult = res.data;
        if (baseResult.code == 1) {
          this.categoryList = baseResult.data;
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val;
      this.initSearchAllBook();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageInfo.pageNum = val;
      this.initSearchAllBook();
    },
    deleteBook(id) {
      if (!confirm("您确定要删除么？")) {
        return;
      }
      this.$axios.delete("/book/" + id).then((res) => {
        let baseResult = res.data;
        if (baseResult.code == 1) {
          alert(baseResult.message);
          this.reload();
        }
      });
    },
    change() {
      if (this.isCheckAll) {
        this.pageInfo.list.forEach((o) => {
          this.ids.push(o.id);
        });
      } else {
        this.ids = [];
      }
    },
    batchBook() {
      if (!confirm("您确定要删除么？")) {
        return;
      }
      this.$axios.delete("/book/" + this.ids.join(",")).then((res) => {
        let baseResult = res.data;
        if (baseResult.code == 1) {
          alert(baseResult.message);
          this.reload();
        }
      });
    },
  },
  created() {
    this.initSearchAllBook();
    this.searchAllCategory();
  },
  watch: {
    ids: function () {
      if (this.ids.length == this.pageInfo.list.length) {
        this.isCheckAll = true;
      } else {
        this.isCheckAll = false;
      }
    },
  },
};
</script>

<style>
</style>

book_edit.vue

<template>
  <div>
    <router-link to="/book_list">返回列表页</router-link>
    <table border="1">
      <tr>
        <td>图书名称</td>
        <td>
          <input type="text" v-model="book.name" />
        </td>
      </tr>
      <tr>
        <td>图书分类</td>
        <td>
          <select v-model="book.cid">
            <option value="">--请选择--</option>
            <option
              v-for="(category, index) in categoryList"
              :key="index"
              :value="category.cid"
            >
              {{ category.cname }}
            </option>
          </select>
        </td>
      </tr>
      <tr>
        <td>图书价格</td>
        <td>
          <input type="text" v-model="book.price" />
        </td>
      </tr>
      <tr>
        <td>出版时间</td>
        <td>
          <input type="date" v-model="book.publishTime" />
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <input type="button" value="提交" @click="updateBook()"/>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      book: {
        cid: "",
      },
      categoryList: [],
    };
  },
  methods: {
    findByIdBook() {
      this.$axios.get(`/book/${this.id}`).then((res) => {
        let baseResult = res.data;
        this.book = baseResult.data;
      });
    },
    searchAllCategory() {
      this.$axios.get("/category").then((res) => {
        let baseResult = res.data;
        if (baseResult.code == 1) {
          this.categoryList = baseResult.data;
        }
      });
    },
    updateBook(){
        this.$axios.put("/book",this.book).then((res) => {
        let baseResult = res.data;
        if (baseResult.code == 1) {
          alert(baseResult.message)
          this.$router.push("/book_list")
        }
      });
    }
  },
  created() {
    this.id = this.$route.params.id;
    this.findByIdBook();
    this.searchAllCategory();
  },
};
</script>

<style>
</style>

book_insert.vue

<template>
  <div>
    <router-link to="/book_list">返回列表页</router-link>
    <table border="1">
      <tr>
        <td>图书名称</td>
        <td>
          <input type="text" v-model="book.name" />
        </td>
      </tr>
      <tr>
        <td>图书分类</td>
        <td>
          <select v-model="book.cid">
            <option value="">--请选择--</option>
            <option
              v-for="(category, index) in categoryList"
              :key="index"
              :value="category.cid"
            >
              {{ category.cname }}
            </option>
          </select>
        </td>
      </tr>
      <tr>
        <td>图书价格</td>
        <td>
          <input type="text" v-model="book.price" />
        </td>
      </tr>
      <tr>
        <td>出版时间</td>
        <td>
          <input type="date" v-model="book.publishTime" />
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <input type="button" value="提交" @click="insertBook()" />
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      book: {
        cid: "",
      },
      categoryList: [],
    };
  },
  methods: {
    searchAllCategory() {
      this.$axios.get("/category").then((res) => {
        let baseResult = res.data;
        if (baseResult.code == 1) {
          this.categoryList = baseResult.data;
        }
      });
    },
    insertBook() {
      this.$axios.post("/book", this.book).then((res) => {
        let baseResult = res.data;
        if (baseResult.code == 1) {
          alert(baseResult.message);
          this.$router.push("/book_list");
        }
      });
    },
  },
  created() {
    this.searchAllCategory();
  },
};
</script>

<style>
</style>

category文件夹

category_list.vue

<template>
  <div>
      <table border="1">
          <tr>
              <td>分类名称</td>
              <td>
                  <input type="text" v-model="category.cname">
              </td>
          </tr>
          <tr>
              <td>分类介绍</td>
              <td>
                  <input type="text" v-model="category.cdesc">
              </td>
          </tr>
          <tr>
              <td></td>
              <td>
                  <input type="button" value="添加" @click="insertCategory()">
              </td>
          </tr>
      </table>
  </div>
</template>

<script>
export default {
data() {
    return {
        category:{}
    }
},methods: {
    insertCategory(){
        this.$axios.post("/category",this.category).then(res=>{
            let baseResult = res.data;
            if(baseResult.code == 1){
                alert(baseResult.message)
                this.$router.push("/category_list");
            }
        })
    }
},
created() {
},
}
</script>
<style>
</style>

cateogry_edit.vue

<template>
  <div>
    <table border="1">
      <tr>
        <td>分类名称</td>
        <td>
          <input type="text" v-model="category.cname" />
        </td>
      </tr>
      <tr>
        <td>分类介绍</td>
        <td>
          <input type="text" v-model="category.cdesc" />
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <input type="button" value="修改" @click="updateCategory()" />
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cid: "",
      category: {},
    };
  },
  methods: {
    findByCid() {
      this.$axios.post(`/category/${this.cid}`).then((res) => {
        let baseResult = res.data;
        if (baseResult.code == 1) {
          this.category = baseResult.data;
        }
      });
    },
    updateCategory() {
      this.$axios.put("/category",this.category).then((res) => {
        let baseResult = res.data;
        if (baseResult.code == 1) {
          alert(baseResult.message);
          this.$router.push("/category_list");
        }
      });
    },
  },
  created() {
    this.cid = this.$route.params.id;
    this.findByCid();
  },
};
</script>

<style>
</style>

category_insert.vue

<template>
  <div>
      <table border="1">
          <tr>
              <td>分类名称</td>
              <td>
                  <input type="text" v-model="category.cname">
              </td>
          </tr>
          <tr>
              <td>分类介绍</td>
              <td>
                  <input type="text" v-model="category.cdesc">
              </td>
          </tr>
          <tr>
              <td></td>
              <td>
                  <input type="button" value="添加" @click="insertCategory()">
              </td>
          </tr>
      </table>
  </div>
</template>

<script>
export default {
data() {
    return {
        category:{}
    }
},methods: {
    insertCategory(){
        this.$axios.post("/category",this.category).then(res=>{
            let baseResult = res.data;
            if(baseResult.code == 1){
                alert(baseResult.message)
                this.$router.push("/category_list");
            }
        })
    }
},
created() {
    
},
}
</script>

<style>

</style>

其他配置

main.js

导入element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

导入axios
import axios from 'axios'
axios.defaults.baseURL='http://localhost:8080'
//将axios绑定到Vue中
//$http,$ajax,$axios,$a,$b.....
Vue.prototype.$axios=axios

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/category_list">分类管理</router-link> |
      <router-link to="/book_list">图书管理</router-link>    
    </div>
    <router-view v-if="isRouterView"/>
  </div>
</template>
<script>
export default {
  provide(){
    return{
      reload:this.reload
    }
  },
  data() {
    return {
      isRouterView:true
    }
  },
  methods: {
    reload(){
      this.isRouterView=false
      this.$nextTick(function(){
        this.isRouterView=true
      })
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
Rich D
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SpringBoot+SpringMvc+Spring+MyBatis项目全程实战开发(附完整源码)
06-18
全程实战讲解，附源码 数据库脚本和项目...核心技术：SpringBoot+SpringMvc+Spring+MyBatis+Mysql+Thymeleaf+Jquery+Ajax+HTML+CSS，使用Maven完成项目的构建！ 项目前台点餐系统部分截图： 项目后台管理系统部分截图：
图书管理系统（vue2 + springboot +mybatis-Plus）前后端分离项目
XiaoSongDADA的博客
05-15 1602
前后端分离的项目
Vue+springmvc+mybatis前后端分离学习---(二)Spring与Mybatis整合思路总结
你在此地别动的博客
07-18 1132
上节单独测通了Mybatis与Spring框架，发现可以将诸如sqlSessionFactory等不是我们自己写的对象交给spring去管理以便我们使用时可以进行注入，顺着这个思路现在我们来进行整合 第一章传送门–>S与M各自单独搭建使用总结 一、Spring整合Mybatis 思路：既然在Spring中我们有个类Student拥有name与age属性时可以在spring配置文件中通过bean标签中的property标签将这两个属性赋值，那么同样我们可以将sqlSessionFactory对象所需的
SpringBoot+Mybatis+SpringMVC+Vue简单实现登录功能
weixin_44145156的博客
02-22 583
用户登录功能实现
Vue前后端分离开发-后端：Springboot+SpringMVC+MyBatis 前端：Vue全家桶(1)
v3424的博客
11-17 2866
基于VScode和idea开发后端开发idea中的项目结构config配置跨域文件controller控制器dao持久层domain实体类service业务层接口实现类Voresource配置文件pom文件前端开发 后端开发 idea中的项目结构 config配置跨域文件 import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; impor
Springboot+Springcloud+springmvc+vue实战笔记
weixin_42847626的博客
10-21 1050
1.使用jpa dao类必须继承JpaRepository<Label,String>, JpaSpecificationExecutor public interface LabelDao extends JpaRepository<Label,String>, JpaSpecificationExecutor<Label>{ // JpaReposit...
ssm-demo：Spring + SpringMVC + Mybatis + easyUI实现简单的后台管理系统
02-02
：前扩展分离+部署部署（springboot + vue） ：dubbo服务化 ：springcloud技术栈实现微服务化 特别提示：数据库sql脚本文件在resources / db目录下！ 本项目为ssm系列的第一篇， Spring + SpringMVC + mybatis + ...
xmljava系统源码-learn:Spring+SpringMVC+MyBatis+Bootstrap+Vue开发在线学习系统
06-05
SSM（Spring+SpringMVC+Mybatis）等相关技术开发网站系统。 使用的开发环境是以MyEclipse为开发环境，采用Tomcat服务器作为Web应用容器，并应用MySQL为系统的数据库管理。 在MVC模式中，应用程序被划分成了模型...
基于springboot+vue的商城管理系统：前端 vue2、elementui，后端 springmvc、mybatis
最新发布
05-20
该项目利用了基于springboot + vue + mysql的开发模式框架实现的课设系统，包括了项目的源码资源、sql文件、相关指引文档等等。 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理...
基于SpringBoot2+MybatisPlus+SpringSecurity+jwt+redis+Vue的前后端商城系统源码
05-13
SpringBoot2+MybatisPlus+SpringSecurity+jwt+redis+Vue的前后端分离的商城系统， 包含分类、sku、运费模板、素材库、小程序直播、拼团、砍价、商户管理、 秒杀、优惠券、积分、分销、会员、充值、多门店等功能，更...
java基于SpringBoot+Vue的自媒体社区交流平台 element
QQ860234001的专栏
09-29 893
近几年来自媒体平台的发展越来越迅猛，并逐渐成为新闻信息传播的主流模式，自媒体平台的内容构成没有主要的核心，新闻信息的探讨和传播环境比较自由，与此同时自媒体平台概念的应用与发展,赋予了普通民众发表自己感想的权利，与从事新闻传播的专业工作人员相比，普通民众从更加客观真实的角度描述了新闻事实，减少了新闻信息传播预设的偏见和立场特点，在最大限度上保持了新闻传播的公正性和有效性。前台：首页、需求通告、优质案例、帮助中心、意见反馈、个人中心、后台管理、在线咨询。用户：首页、个人中心、接单信息管理、申请信息管理。
springMVC&VUE
weixin_43645809的博客
04-21 2741
springMVC运行流程： 当用户发送请求（ip+端口/项目名/类地址/方法地址） ​ 首先到达servlet（DispatcherServlet）配置的时候地址为/，表示所有的请求都可以进入到此servlet。DispatcherServlet是springMVC中的调度者。 调用映射处理器（HandlerMapping），解析请求中的地址，找到对应的Controller及方法。 回到DispatcherServlet，调用HandlerAdapter对请求中的数据进行处理。 到达自己
SpringMVC+vue实现前后端分离的药品管理系统
Q_55318293的博客
09-03 428
本论文药品管理系统主要牵扯到的程序,数据库与计算机技术等。覆盖知识面大,可以大大的提高系统人员工作效率。1、管理员账号：admin密码：admin2、开发环境为Eclipse/idea，数据库为mysql 使用java语言开发。3.配置好Tomcat并点击启动按钮即可运行4.数据库连接src\main\resources\application.yml中修改5.maven包版本apache-maven-3.3.9.开发语言：Java框架：SSM/spring boot。
SpringMVC+vue实现前后端分离的毕业设计管理系统
分享技术热点，看天下大事
04-23 2263
文末获取源码 开发语言：Java 开发工具:IDEA /Eclipse 数据库:MYSQL5.7 应用服务:Tomcat7/Tomcat8 使用框架ssm+vue JDK版本：jdk1.8 21世纪的今天，随着社会的不断发展与进步，人们对于信息科学化的认识，已由低层次向高层次发展，由原来的感性认识向理性认识提高，管理工作的重要性已逐渐被人们所认识，科学化的管理，使信息存储达到准确、快速、完善，并能提高工作管理效率，促进其发展。 论文主要是对毕业设计管理系统,进行了介绍，包括研究的现状，..
springmvc + vue 简单系统搭建
热门推荐
mannix_lei的博客
01-31 2万+
1、使用的软件分别是idea和webstorm，用springmvc做前后端分离其实挺不好的，但是毕竟尝试一下挺不错的，写的不好的地方请指正 2、后端基本的框架结构（不完全按照springmvc走的，其中加了点自己的想法） 3、这是vue的基本架子 4、从后端到前端遇到的问题给大家罗列一下，希望不要重蹈覆辙。 4.1、配置mybatis-config.xml    配置顺序依次...
SpringMVC+Vue实现前后端分离的校园兼职平台
分享技术热点，看天下大事
05-10 2162
末获取源码 开发语言：Java 开发工具:IDEA /Eclipse 数据库:MYSQL5.7 应用服务:Tomcat7/Tomcat8 使用框架ssm+vue JDK版本：jdk1.8 前言介绍 本文从学生的功能要求出发，建立了校园兼职系统 ，系统中的功能模块主要是实现管理员；首页、个人中心、专业管理、商家管理、热门兼职管理、学生管理、兼职接单管理、学生咨询管理、兼职任务管理、完成评价管理、管理员管理、系统管理，学生；首页、个人中心、兼职接单管理、学生咨询管理、兼职任务管理、完成评...
SpringMVC+vue实现前后端分离的高校网课管理系统
分享技术热点，看天下大事
04-15 2099
文末获取源码 开发语言：Java 开发工具:IDEA /Eclipse 数据库:MYSQL5.7 应用服务:Tomcat7/Tomcat8 使用框架:ssm+vue JDK版本：jdk1.8 随着移动应用技术的发展，越来越多的学生借助于移动手机、电脑完成生活中的事务，许多的行业也更加重视与互联网的结合，以提高教学的教育水平和寻求更高的经济利益。针对高校网课管理系统，课堂信息、作业信息等问题，结合学生的实际需求，本论文设计了高校网课管理系统 ,学生可以此系统实现课程考核查看，管理员通过后台会.
SpringMVC+VUE开发环境搭建
weixin_37390956的博客
09-11 1万+
    简单记录一下springmvc+vue搭建 1，准备好springmvc项目 重点不在这不讲太多，搭建好的结构如下： 2，新建front目录用于存放前端项目 进入front目录命令行 # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack fron...
Vue+SpringMVC简单交互实践入门
srfanqie的博客
08-21 4879
Vue+SpringMVC简单交互实践入门前言Vue前端编写后台基于SpringMVC搭建过程 前言 vue环境搭建与入门，请点击以下链接进入参考：https://blog.csdn.net/srfanqie/article/details/99413233 Vue前端编写 vue目录结构 App.vue的编写 <template> <div id="app"> ...
SpringBoot+Vue二手车交易系统答辩PPT.pptx
09-08
"二手车交易系统的设计与实现是一个基于SpringBoot、SSM（Spring、SpringMVC、MyBatis）和Vue.js技术栈的计算机毕业设计项目。该项目旨在利用现代信息技术优化二手车交易流程，提高信息处理效率，确保信息安全，并...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值