前后端分离

1.1后端

1.1.1配置generatorConfig.xml中的mysql文件目录,自动生成代码

 <!--指定数据库jdbc驱动jar包的位置--><classPathEntry location="F:\repository\mvn\mysql\mysql-connector-java\5.1.44\mysql-connector-java-5.1.44.jar"/>

1.1.2mapper层

mapper.xml中查询所有的SQL：select <include refid="Base_Column_List"/> from t_book where 1=1 <if test="bookname!=null"> and bookname like concat('%',#{bookname},'%') </if>

package com.zking.spboot.mapper;import com.zking.spboot.model.Book;
import org.springframework.stereotype.Repository;
import org.springframework.web.bind.annotation.RequestMapping;import java.util.List;@Repository
public interface BookMapper {/*** 根据书本名称查询所有书籍* @param book* @return*/List<Book> queryAll(Book book);int insert(Book record);}

1.1.3BookService-->将BookMapper复制到Service

package com.zking.spboot.service;import com.zking.spboot.model.Book;import java.util.List;public interface BookService {/*** 根据书本名称查询所有书籍* @param book* @return*/List<Book> queryAll(Book book);int insert(Book record);
}

1.1.4BookServiceImpl（业务逻辑层）

package com.zking.spboot.service.impl;import com.zking.spboot.mapper.BookMapper;
import com.zking.spboot.model.Book;
import com.zking.spboot.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class BookServiceImpl implements BookService {@Autowiredprivate BookMapper bookMapper;@Overridepublic List<Book> queryAll(Book book) {return bookMapper.queryAll(book);}@Overridepublic int insert(Book record) {return bookMapper.insert(record);}
}

1.1.5BookController层

package com.zking.spboot.controller;import com.zking.spboot.mapper.BookMapper;
import com.zking.spboot.model.Book;
import com.zking.spboot.service.BookService;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.List;@RestController
@RequestMapping("/book")
public class BookController {@Autowiredprivate BookService bookService;@RequestMapping("/addBook")public JsonResponseBody<?> addBook(Book book){bookService.insert(book);return new JsonResponseBody<>();}@RequestMapping("/queryAll")public JsonResponseBody<List<Book>> queryAll(Book book){List<Book> books = bookService.queryAll(book);return new JsonResponseBody<>(200,"OK",books);}@Data@AllArgsConstructor@NoArgsConstructorclass JsonResponseBody<T>{private int code=200;private String msg="ok";private T data;}}

1.2前端

1.2.1在cmd中下载依赖npm i(install)

1.2.2在api中action.js配置请求路径

/*** 对后台请求的地址的封装，URL格式如下：* 模块名_实体名_操作*/
export default {//服务器'SERVER': 'http://localhost:8080/spboot', 'ADD':'/book/addBook','ALL':'/book/queryAll',//获得请求的完整地址，用于mockjs测试时使用'getFullPath': k => {return this.SERVER + this[k];}
}

1.2.3前端views写前端页面功能代码

<template><div><!-- <h1 align="center">SpringBoot阶段机试，ts={{ts}}</h1> --><!--搜索框--><el-form :inline="true"><el-form-item label="书本名称"><el-input v-model="bookname" placeholder="书本名称"></el-input></el-form-item><el-form-item><el-button type="primary" @click="query">查询</el-button><el-button type="primary" @click="open">新增</el-button></el-form-item></el-form><!--数据表格--><el-table :data="tableData" style="width: 100%"><el-table-column prop="id" label="日期" width="180"></el-table-column><el-table-column prop="bookname" label="书本名称" width="180"></el-table-column><el-table-column prop="price" label="书本价格"></el-table-column><el-table-column prop="booktype" label="书本类型"></el-table-column></el-table><!--弹出框--><el-dialog title="新增" :visible.sync="dialogFormVisible" @close="close"><el-form :model="book" :rules="rules" ref="book"><el-form-item prop="bookname" label="书本名称" label-width="90px"><el-input v-model="book.bookname" autocomplete="off"></el-input></el-form-item><el-form-item prop="price" label="书本价格" label-width="90px"><el-input v-model="book.price" autocomplete="off"></el-input></el-form-item><el-form-item prop="booktype" label="书本类型" label-width="90px"><el-select style="width: 100%;" v-model="book.booktype" placeholder="请选择书本类型"><el-option label="玄幻" value="玄幻"></el-option><el-option label="文学" value="文学"></el-option></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="save">确 定</el-button></div></el-dialog></div>
</template><script>export default {data: function() {return {ts: new Date().getTime(),//搜索框bookname: '',//表格数据tableData: [],//弹出框是否显示dialogFormVisible: false,//弹出框数据book: {bookname: '',price: '',booktype: ''},//表单验证rules: {bookname: [{required: true,message: '请输入书本名称',trigger: 'blur'}, ],price: [{required: true,message: '请输入书本价格',trigger: 'blur'}, ],booktype: [{required: true,message: '请选择书本类型',trigger: 'change',}, ]}};},methods: {close: function() {//清空表单数据this.book = {bookname: '',price: '',booktype: ''};//清空表单验证this.$refs['book'].resetFields();},//新增方法save: function() {this.$refs['book'].validate((valid) => {if (valid) {let url = this.axios.urls.ADD;this.axios.post(url, this.book).then(resp => {let data = resp.data;if (data.code == 200) {//关闭弹出框this.dialogFormVisible = false;//再次查询列表方法this.query();} else {this.$message.error('新增失败！');}}).catch(err => {})} else {console.log('error submit!!');return false;}});},//查询方法query: function() {//1.定义查询参数let params = {bookname: this.bookname};//2.获取请求路径let url = this.axios.urls.ALL;//3.发起ajax请求this.axios.post(url, params).then(resp => {let data = resp.data;console.log(data);this.tableData = data.data;}).catch(err => {})},//打开弹出框的方法open: function() {this.dialogFormVisible = true;}}}
</script><style>
</style>

1.2.4在cmd中跑起来npm run dev

Vue+Element之SpingBoot书本管理系统相关推荐

vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
Vue + Element UI 实现权限管理系统前端篇（八）：管理应用状态
使用 Vuex 管理应用状态 1. 引入背景像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题.收缩 ...
Vue + Element UI 实现权限管理系统：页面权限控制（菜单 + 按钮）
权限控制方案既然是后台权限管理系统,当然少不了权限控制啦,至于权限控制,前端方面当然就是对页面资源的访问和操作控制啦. 前端资源权限主要又分为两个部分,即导航菜单的查看权限和页面增删改操作按钮的操作 ...
Vue + Element UI 实现权限管理系统前端篇（七）：功能组件封装
组件封装为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构组件封装重构后,试图组件结构如下图所示代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...
Vue + Element UI 实现权限管理系统（更换皮肤主题）
自定义主题命令行主题工具 1.安装主题工具首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动. yarn add ele ...
Vue + Element UI 实现权限管理系统前端篇（六）：更换皮肤主题
自定义主题命令行主题工具 1.安装主题工具首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动. yarn add ele ...
vue+element ui 项目后台管理系统
前端界面 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
计算机毕业设计node.js+vue+Element电商后台管理系统
项目介绍网络的广泛应用给生活带来了十分的便利.所以把电商后台管理与现在网络相结合,利用node技术建设电商后台管理系统,实现电商后台管理的信息化.则对于进一步提高电商后台管理发展,丰富电商后台管理经 ...
Vue + Element UI 实现权限管理系统前端篇（九）：接口格式定义
接口请求格式定义前台显示需要后台数据,我们这里先把前后端交互接口定义好,没有后台的时候,也方便用mock模拟. 接口定义遵循几个规范: 1. 接口按功能模块划分. 系统登录:登录相关接口用户管理: ...

Vue+Element之SpingBoot书本管理系统

前后端分离

1.1后端

1.1.1配置generatorConfig.xml中的mysql文件目录,自动生成代码

1.1.2mapper层

1.1.3BookService-->将BookMapper复制到Service

1.1.4BookServiceImpl（业务逻辑层）

1.1.5BookController层

1.2前端

1.2.1在cmd中下载依赖npm i(install)

1.2.2在api中action.js配置请求路径

1.2.3前端views写前端页面功能代码

1.2.4在cmd中跑起来npm run dev

Vue+Element之SpingBoot书本管理系统相关推荐

最新文章

热门文章