公司建设网站首页,福田公司怎么样,宿迁公司企业网站建设,丰城网站建设公司目录
springboot配置相关
依赖配置
yaml配置 MySQL创建与使用
#xff08;可拿软件包项目系统#xff09;
创建数据库
创建数据表
mybatis-plus相关 Mapper配置
编辑
启动类放MapperScan
启动类中配置
添加config配置文件
Springboot编码
实体类
mapperc(Dao…目录
springboot配置相关
依赖配置
yaml配置 MySQL创建与使用
可拿软件包项目系统
创建数据库
创建数据表
mybatis-plus相关 Mapper配置
编辑
启动类放MapperScan
启动类中配置
添加config配置文件
Springboot编码
实体类
mapperc(Dao)层
Service层
Sevice接口
Controller层
vue相关
界面展现
代码展现
解决跨域问题
config包中添加一个跨域请求允许 springboot配置相关
依赖配置 dependenciesdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-jdbc/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdoptionaltrue/optional/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependencydependencygroupIdcom.baomidou/groupIdartifactIdmybatis-plus-boot-starter/artifactIdversion3.5.7/version/dependencydependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdversion8.0.33/version/dependency/dependencies yaml配置
spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/你的数据库名字?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneUTCallowPublicKeyRetrievaltrueusername: 你的数据库账号password: 你的数据库密码mybatis-plus:configuration:#这个配置会将执行的sql打印出来在开发或测试的时候可以用log-impl: org.apache.ibatis.logging.stdout.StdOutImplcall-setters-on-nulls: trueglobal-config:db-config:logic-delete-value: 1logic-not-delete-value: 0id-type: auto #ID自增 MySQL创建与使用
可拿软件包项目系统
用 Navicat软件那些数据库软件(公棕号 wmcode 自取) 随便搞个数据表
我这里就以日记系统(需要可以点进去看看)为例吧、
创建数据库 创建数据表 这里插个题外话就是数据库有数据 删除部分之后 索引还是递增的解决方法
MySQL | 恢复数据表内的索引为初始值1有兴趣点击查看 mybatis-plus相关
可以去官网复制也行
MyBatis-Plus 为简化开发而生 Mapper配置
继承Mybatis-Plus的接口 启动类放MapperScan
复制Mapper文件夹路径 启动类中配置 添加config配置文件
创建一个config包并创建类名任意这里以官网给的为例
Configuration//这里启动类有的话 就不用写了 完全可以删了
MapperScan(scan.your.mapper.package) public class MybatisPlusConfig {Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor new MybatisPlusInterceptor();// 这里一定要选好数据库类型interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));return interceptor;}
}
Springboot编码 实体类
package com.diarysytem.entity;import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;Data
NoArgsConstructor
AllArgsConstructor
ToString
TableName(diary)
public class Diary {TableField(value diary_pid)private Integer tasksPid;TableField(value diary_title)private String diaryTitle;TableField(value diary_content)private String diaryContent;TableField(value diary_mood)private double diaryMood;TableField(value diary_body)private double diaryBody;TableField(value diary_time)private String diaryTime;TableField(value diary_delete)private int diaryDelete;}mapperc(Dao)层
package com.diarysytem.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.diarysytem.entity.Diary;
import org.apache.ibatis.annotations.Mapper;Mapper
public interface DiaryMapper extends BaseMapperDiary {
} Service层
package com.diarysytem.service;import com.diarysytem.entity.Diary;public interface DiaryService {public boolean userInsertDiary(Diary diary);
}Sevice接口
package com.diarysytem.service.Impl;import com.diarysytem.entity.Diary;
import com.diarysytem.mapper.DiaryMapper;
import com.diarysytem.service.DiaryService;
import lombok.AllArgsConstructor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;Service
public class DiaryServiceImpl implements DiaryService {private DiaryMapper diaryMapper;Autowiredpublic DiaryServiceImpl(DiaryMapper diaryMapper) {this.diaryMapper diaryMapper;}Overridepublic boolean userInsertDiary(Diary diary) {return diaryMapper.insert(diary) 0;}
}Controller层
package com.diarysytem.controller;import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.diarysytem.entity.Diary;
import com.diarysytem.entity.WebDiary;
import com.diarysytem.mapper.DiaryMapper;
import com.diarysytem.service.DiaryService;
import lombok.AllArgsConstructor;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;RestController
AllArgsConstructor
public class DirayController {private DiaryMapper diaryMapper;private DiaryService diaryService;// 写入日记PostMapping(write)public Boolean userWriteDiary(RequestBody WebDiary webDiary){Diary tempDiary new Diary();tempDiary.setTasksPid(null);tempDiary.setDiaryTitle(webDiary.getDiaryTitle());tempDiary.setDiaryContent(webDiary.getDiaryContent());tempDiary.setDiaryMood(webDiary.getDiaryMood());tempDiary.setDiaryBody(webDiary.getDiaryBody());tempDiary.setDiaryTime(webDiary.getDiaryTime());tempDiary.setDiaryDelete(0);return diaryService.userInsertDiary(tempDiary);}//分页查询这里方便演示就直接注入 service 了GetMapping(fpage)public PageDiary fenPages(int current,int size){PageDiary page new Page(current,size);return diaryMapper.selectPage(page, null);}}vue相关
以我项目为例 有需要了解下面自取
Springbootvue自制可爱英语日记系统
界面展现 代码展现
script
import dayjs from dayjs;
import axios from axios;export default {data() {return {userDiaryList: [],currentPage: 1, // 当前页面totalPages: 0, // 总页面pageSize: 3 // 每个页面的数量};},created() {axios.get(http://127.0.0.1:8887/fpage, {params: {current: this.currentPage, // 页数 sum / sizesize: this.pageSize //每页显示多少条}}).then(res {console.log(res.data);const { records, pages, current } res.data;this.userDiaryList records;this.totalPages pages;this.currentPage current;});},methods: {getUpPage(){this.currentPage--;axios.get(http://127.0.0.1:8887/fpage, {params: {current: this.currentPage, // 页数 sum / sizesize: this.pageSize //每页显示多少条}}).then(res {console.log(res.data);const { records, pages, current } res.data;this.userDiaryList records;this.totalPages pages;this.currentPage current;});},getNextPage(){this.currentPage;axios.get(http://127.0.0.1:8887/fpage, {params: {current: this.currentPage, // 页数 sum / sizesize: this.pageSize //每页显示多少条}}).then(res {console.log(res.data);const { records, pages, current } res.data;this.userDiaryList records;this.totalPages pages;this.currentPage current;});},userDiaryListClick(index){console.log(index);this.currentPage index;axios.get(http://127.0.0.1:8887/fpage, {params: {current: this.currentPage, // 页数 sum / sizesize: this.pageSize //每页显示多少条}}).then(res {console.log(res.data);const { records, pages, current } res.data;this.userDiaryList records;this.totalPages pages;this.currentPage current;});},TImeZhuanHuan(time){try {console.log(time)const date dayjs(time);if (!date.isValid()) {throw new Error(Invalid timestamp);}return this.formattedDate date.format(YYYY-MM-DD HH:mm:ss);} catch (error) {console.error(Error formatting timestamp:, error);return this.formattedDate Invalid timestamp;}}}
}
/scripttemplatedivmain classreadh1 classam_r_top_1 h1sSearch for diaryspan classpagsNumber({{this.currentPage}}/{{ this.totalPages }})/span/h1div classsearch am_r_1spanSearch/spaninput typetext placeholderSearch for diary classsearch_input/divdiv classuserDiaryItemsdiv classuserDiaryList am_r_5 v-for(item, index) in userDiaryList :keyindexdiv classuserDiaryList_leftspan classuserDiaryList_left_numberNo.{{ item.tasksPid }}/spanh2{{ item.diaryTitle }}/h2span classuserDiaryList_left_timespan{{ TImeZhuanHuan(item.diaryTime) }}/span span classuserStatusImgimg src/public/xiai.png alt {{ item.diaryMood}}/spanspan classuserStatusImgimg src/public/tizhizhishu.png alt {{ item.diaryBody }}/span/span/divdiv classuserDiaryList_rightspanbrowse/spanspan------/spanspandelete/span/div/div/div/main!-- 分页导航 --div classpages am_r_3button clickgetUpPage classbuts上一页/buttonel-scrollbar stylewidth: 80%;padding: 10px 0;ul classscrollbar-flex-contentli v-forindex in totalPages :keyindex classscrollbar-demo-item clickuserDiaryListClick(index){{index}}/li/ul/el-scrollbarbutton clickgetNextPage classbuts下一页/button/div/div/templatestyle scoped
.userStatusImg{padding: 0 10px;
}
.userStatusImg img{margin: 0 0 -2px 0;width: 20px;
}
.pagsNumber{padding: 0 10px;font-size: 22px;
}
.pages{display: flex;justify-content: space-evenly;align-items: center;}
.buts{border-radius: 10px;padding: 10px 5px;border: 0;background-color: rgb(248, 189, 144);color: #fff;}
.buts:hover{cursor: pointer;background-color: rgb(254, 133, 40);}.scrollbar-flex-content {padding: 15px 0;display: flex;
}
.scrollbar-demo-item {padding: 5px 15px;display: flex;align-items: center;justify-content: center;margin: 0 5px;text-align: center;border-radius: 4px;font-size: 18px;color: rgb(159, 100, 32);background-color: rgb(255, 233, 209);}
.scrollbar-demo-item:hover{cursor: pointer;background-color: rgb(255, 220, 183);}.userDiaryItems{height: 50vh;
}.pagination a{text-decoration: none;font-weight: bold;font-size: 18px;color: rgb(212, 147, 77);}
.userDiaryList{display: flex;justify-content: space-between;padding: 10px 10px 10px 10px;border-radius: 10px;margin: 10px 0;align-items: center;background-color: rgb(255, 233, 209);
}.userDiaryList_left_number{font-size: 18px;font-weight: bold;color: rgb(204, 175, 141);
}
.userDiaryList_left h2{overflow: hidden;padding: 10px 0 0px 10px;font-size: 25px;font-weight: bold;color: rgb(159, 100, 32);
}.userDiaryList_left_time{display: flex;padding: 5px 0 10px 10px;font-size: 18px;color: rgb(204, 175, 141);
}
.userDiaryList_right{display: flex;flex-direction: column;justify-content: center;align-items: center;
}
.userDiaryList_right span{font-size: 18px;font-weight: bold;color: rgb(204, 175, 141);
}
.search{display: flex;padding: 10px 10px 10px 10px;border-radius: 10px;margin: 10px 0;align-items: center;background-color: rgb(255, 233, 209);
}
.search span{display: flex;justify-content: center;align-items: center;width: 15%;padding: 10px 0;margin: 0 5px 0 0;border-radius: 10px;font-weight: bold;font-size: 25px;color: rgb(255, 255, 255);background-color: rgb(254, 133, 40);box-shadow: 0 3px 10px rgba(201, 102, 27, 0.525);}
.search input{width: 85%;border-radius: 10px;border: 0;padding: 15px;outline: none;font-size: 18px;font-weight: bold;color: rgb(121, 91, 33);}
/style解决跨域问题
我前端是localhost:8888,后端是127.0.0.1:8887
我直接在后端进行跨域操作了
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 WebConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping(/**).allowedOrigins(http://localhost:8888).allowedMethods(GET, POST, PUT, DELETE).allowedHeaders(*).allowCredentials(true);}
} (到底啦)
