网页建站素材模板,济南冰河世纪网站建设,全国小学网站建设,哪个网站做头像比较好文章目录 前言后端关键代码前端关键代码完整代码 前言 1、项目不使用前后端分离。 2、在创建SpringBoot的时候要注意各个插件间的版本问题。 3、后端技术SpringBootMyBatisPlusMySql。 4、前端技术vue2elementUi。 后端关键代码
简单介绍 1、数据库名称ssm_db 2、表名称tbl_bo… 文章目录 前言后端关键代码前端关键代码完整代码 前言 1、项目不使用前后端分离。 2、在创建SpringBoot的时候要注意各个插件间的版本问题。 3、后端技术SpringBootMyBatisPlusMySql。 4、前端技术vue2elementUi。 后端关键代码
简单介绍 1、数据库名称ssm_db 2、表名称tbl_book 数据表对象文件(Book.java) package com.example.domain;import lombok.Data;Data
public class Book {private Integer id;private String type;private String name;private String description;
}配置文件(application.yml) server:port: 80spring:datasource:druid:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/ssm_db?serverTimezoneUTCusername: rootpassword: rootmybatis-plus:global-config:db-config:table-prefix: tbl_id-type: autoconfiguration:log-impl: org.apache.ibatis.logging.stdout.StdOutImpl创建项目后在resources文件夹下把application的后缀名改为yml。 接口文件(BookController.java) 写到这个文件就可以使用Postman进行接口测试了。 package com.example.controller;import com.baomidou.mybatisplus.core.metadata.IPage;
import com.example.controller.utils.R;
import com.example.domain.Book;
import com.example.service.IBookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.io.IOException;RestController
RequestMapping(/books)
public class BookController {Autowiredprivate IBookService bookService;GetMappingpublic R getAll() {return new R(true, bookService.list());}PostMappingpublic R save(RequestBody Book book) throws IOException {
// R r new R();
// boolean flag bookService.save(book);
// r.setFlag(flag);// 上面的三行代表这一行
// new R(bookService.save(book));
// return r;// 抛出异常测试
// if (book.getName().equals(123)) throw new IOException();boolean flag bookService.save(book);return new R(flag, flag ? 添加成功^_^ : 添加失败-_-);}PutMappingpublic R update(RequestBody Book book) throws IOException {boolean flag bookService.modify(book);return new R(flag, flag ? 编辑成功^_^ : 编辑失败-_-);}DeleteMapping({id})public R delete(PathVariable Integer id) {boolean flag bookService.delete(id);return new R(flag, flag ? 删除成功^_^ : 数据同步失败自动刷新-_-);}GetMapping({id})public R getById(PathVariable Integer id) {// 数据同步失败自动刷新return new R(true, bookService.getById(id));}// 分页
// GetMapping({currentPage}/{pageSize})
// public R getPage(PathVariable int currentPage, PathVariable int pageSize) {
// IPageBook page bookService.getPage(currentPage, pageSize);
// if (currentPage page.getPages()) {
// page bookService.getPage((int) page.getPages(), pageSize);
// }
// return new R(true, page, 查询成功^_^);
// }// 分页加查询GetMapping({currentPage}/{pageSize})
// 可以单独接收也可以使用集合
// public R getPage(PathVariable int currentPage, PathVariable int pageSize, String name, Book book) {
// 直接使用集合接收参数public R getPage(PathVariable int currentPage, PathVariable int pageSize, Book book) {IPageBook page bookService.getPage(currentPage, pageSize, book);if (currentPage page.getPages()) {page bookService.getPage((int) page.getPages(), pageSize, book);}System.out.println(page);return new R(true, page);}
}技术整合文件(pom.xml)
?xml version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion2.7.15/versionrelativePath//parentgroupIdcom.example/groupIdartifactIdsingleFableFullStack/artifactIdversion0.0.1-SNAPSHOT/versionpropertiesjava.version1.8/java.version/propertiesdependenciesdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdcom.baomidou/groupIdartifactIdmybatis-plus-boot-starter/artifactIdversion3.4.3/version/dependencydependencygroupIdcom.alibaba/groupIdartifactIddruid-spring-boot-starter/artifactIdversion1.2.6/version/dependencydependencygroupIdcom.mysql/groupIdartifactIdmysql-connector-j/artifactIdscoperuntime/scope/dependencydependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependency/dependenciesbuildpluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactId/plugin/plugins/build
/project前端关键代码
!DOCTYPE html
htmlhead!-- 页面meta --meta charsetutf-8meta http-equivX-UA-Compatible contentIEedgetitleSpringBootMyBatisPlus整合的SSM案例/titlemeta contentwidthdevice-width,initial-scale1,maximum-scale1,user-scalableno nameviewport!-- 引入样式 --link relstylesheet href../plugins/elementui/index.csslink relstylesheet href../plugins/font-awesome/css/font-awesome.min.csslink relstylesheet href../css/style.css
/headbody classhold-transition
div idappdiv classcontent-headerh1图书管理/h1/divdiv classapp-containerdiv classboxdiv classfilter-containerel-input placeholder图书类别 v-modelpagination.type stylewidth: 200px;classfilter-item clearable inputhandleInput($event,type)/el-inputel-input placeholder图书名称 v-modelpagination.name stylewidth: 200px;classfilter-item clearable inputhandleInput($event,name)/el-inputel-input placeholder图书描述 v-modelpagination.description stylewidth: 200px;classfilter-item clearable inputhandleInput($event,description)/el-inputel-button typeinfo plain classdalfBut clickhandleSearch查询/el-buttonel-button typesuccess plain classbutT clickhandleDialog(undefined, 1)新建/el-button/divel-tablesizesmallcurrent-row-keyid:datadataListstripehighlight-current-rowel-table-column typeindex aligncenter label序号/el-table-columnel-table-column proptype label图书类别 aligncenter/el-table-columnel-table-column propname label图书名称 aligncenter/el-table-columnel-table-column propdescription label描述 aligncenter/el-table-columnel-table-column label操作 aligncentertemplate slot-scopescopeel-button typeprimary plain sizemini clickhandleDialog(scope.row, 2)编辑/el-buttonel-button typedanger plain sizemini clickhandleDelete(scope.row)删除/el-button/template/el-table-column/el-table!--分页组件--div classpagination-containerel-paginationclasspagiantioncurrent-changehandleCurrentChangesize-changehandlePageSize:current-pagepagination.currentPage:page-sizepagination.pageSize:page-sizes[5, 10, 15, 30]layouttotal, sizes, prev, pager, next, jumper:totalpagination.total/el-pagination/div!-- 新增/编辑标签弹层 --div classadd-formel-dialog :titledialogTitle1?新增图书:编辑图书 :visible.syncisDialogAddEditclosehandleCloseel-form :modelformData :rulesrules refrefForm label-positionrightlabel-width100pxel-rowel-col :span12el-form-item label图书类别 proptypeel-input v-modelformData.type//el-form-item/el-colel-col :span12el-form-item label图书名称 propnameel-input v-modelformData.name//el-form-item/el-col/el-rowel-rowel-col :span24el-form-item label描述el-input v-modelformData.description typetextarea/el-input/el-form-item/el-col/el-row/el-formdiv slotfooter classdialog-footerel-button clickisDialogAddEditfalse取消/el-buttonel-button typeprimary clickhandleSave()保存/el-button/div/el-dialog/div/div/div
/div
/body!-- 引入组件库 --
script src../js/vue.js/script
script src../plugins/elementui/index.js/script
script typetext/javascript src../js/jquery.min.js/script
script src../js/axios-0.18.0.js/script
scriptnew Vue({el: #app,data: {// 当前页要展示的列表数据dataList: [],// 添加表单是否可见isDialogAddEdit: false,dialogTitle: 1,// 表单数据formData: {},// 校验规则rules: {type: [{required: true,message: 图书类别为必填项,trigger: blur}],name: [{required: true,message: 图书名称为必填项,trigger: blur}]},// 分页相关模型数据pagination: {// 当前页码currentPage: 1,// 每页显示的记录数pageSize: 5,// 总记录数total: 0,type: ,name: ,description: },// 整页加载fullPageLoading: undefined},// 钩子函数VUE对象初始化完成后自动执行created() {// 调用查询全部数据的操作this.getAll();},methods: {// 列表加分页查询getAll() {let {currentPage,pageSize,type,name,description} this.pagination,param ;param ?type${type}name${name}description${description};this.handleFullPageLoading(start);// 发送异步请求axios.get(/books/${currentPage}/${pageSize}${param}).then(({data: {flag, data: {records, total, size, current}}}) {if (flag) {this.pagination.currentPage current;this.pagination.pageSize size;this.pagination.total total;this.dataList records;} else {this.$message.error(出错了);}}).finally(() {this.handleFullPageLoading(stopping);}).catch(() {this.$message.error(出错了);});},// 整页(页面)加载handleFullPageLoading(type) {if (type start) {this.fullPageLoading this.$loading({lock: true,text: 加载中,spinner: el-icon-loading,background: rgba(0, 0, 0, 0.5)});} else if (type stopping this.fullPageLoading) {this.fullPageLoading.close();this.fullPageLoading undefined;}},// 打开新增/编辑面板handleDialog(row, str) {this.dialogTitle str;this.isDialogAddEdit true;if (str 2) this.getById(row);},// 关闭新增/编辑面板handleClose() {this.$refs.refForm.resetFields();this.$refs.refForm.clearValidate();this.formData {};},// 保存handleSave() {this.$refs.refForm.validate(valid {if (!valid) return this.$message.warning(必填项内容为空);if (this.dialogTitle 1) {this.handleAdd();} else {this.handleEdit();}});},// 添加handleAdd() {axios.post(/books, this.formData).then(({data: {flag, msg}}) {if (flag) {this.$message.success(msg);this.getAll();this.isDialogAddEdit false} else {this.$message.error(msg);}}).catch(() {this.$message.error(出错了);});},// 删除handleDelete(row) {this.$confirm(此操作永久删除当前信息是否继续,提示,{type: warning}).then(() {axios.delete(/books/ row.id).then(({data: {flag, msg}}) {// 判断当前操作是否成功if (flag) {this.$message.success(msg);this.getAll();} else {this.$message.error(msg);}}).catch(() {this.$message.error(出错了);});}).catch(() {this.$message.info(已取消);});},// 通过id获取数据getById(row) {axios.get(/books/ row.id).then(({data: {flag, data}}) {if (flag data ! null) {this.formData data;} else {this.$message.error(出错了);}}).catch(() {this.$message.error(出错了);});},// 编辑handleEdit() {axios.put(/books, this.formData).then(({data: {flag, msg}}) {// 判断当前操作是否成功if (flag) {this.$message.success(msg);this.getAll();this.isDialogAddEdit false} else {this.$message.error(msg);}}).catch(() {this.$message.error(出错了);});},// 切换页码handleCurrentChange(currentPage) {if (this.pagination.currentPage currentPage) return false;this.pagination.currentPage currentPage;this.$nextTick(() this.getAll());},// 页码大小handlePageSize(pageSize) {if (this.pagination.pageSize pageSize) return false;this.pagination.pageSize pageSize;this.$nextTick(() this.getAll());},// 搜索输入框值变化handleInput(e, searchField) {if (!e) {this.pagination[searchField] e;this.$nextTick(() this.getAll());}},// 查询handleSearch() {let {type,name,description} this.pagination;if (type || name || description) this.getAll();}}});
/script/html完整代码
下载
git clone -b back-end-services https://gitee.com/mssj200224/open-resources.git项目 1、找到仓库中名为singleFableFullStack文件夹复制出来。 2、使用idea打开项目即可运行。
