项目改造操作（图书管理系统为例）
【摘要】 对于一个前后端项目的MVVM模式改造，可以按照以下步骤进行：梳理项目结构：首先，了解项目的整体结构和组织方式。确定前端和后端代码的位置和职责。引入MVVM框架：选择一个适合的MVVM框架，如Vue.js、React或Angular等。将该框架引入到前端部分的代码中。数据模型设计：在前端部分，定义数据模型对象，用于存储与后端交互的数据。这些数据模型应该反映后端接口的数据结构，并提供对数据进行操...
对于一个前后端项目的MVVM模式改造，可以按照以下步骤进行：
梳理项目结构：首先，了解项目的整体结构和组织方式。确定前端和后端代码的位置和职责。
引入MVVM框架：选择一个适合的MVVM框架，如Vue.js、React或Angular等。将该框架引入到前端部分的代码中。
数据模型设计：在前端部分，定义数据模型对象，用于存储与后端交互的数据。这些数据模型应该反映后端接口的数据结构，并提供对数据进行操作的方法。
视图设计：根据项目需求，使用MVVM框架提供的组件和指令来构建用户界面。将数据模型绑定到视图上，实现数据和界面的双向绑定。
业务逻辑处理：将原有的业务逻辑从前端代码中抽离出来，并将其放置在视图模型（ViewModel）中。视图模型负责处理用户交互、调用后端接口，并更新数据模型。
数据请求和响应：在视图模型中，使用适当的方式（如Ajax、Fetch或Axios）发送HTTP请求到后端，并处理返回的数据。将后端接口的数据转化为前端所需的格式。
前后端接口对接：根据MVVM的设计思想，前后端接口需要进行对接和调整。确保前端与后端之间的数据传递和交互得到正确的支持。
测试与调试：对改造后的MVVM模式进行测试和调试。确保数据的双向绑定、业务逻辑的正确性以及前后端的正常通信。
迭代与优化：根据项目需求和反馈，继续迭代和优化MVVM模式的实现。保持代码的可维护性、可扩展性，并根据实际情况进行性能优化等工作。
需要注意的是，MVVM模式的改造可能需要一些学习和适应过程。在改造过程中，可以参考相关的文档、教程或者寻求专业人士的帮助。
MVVM（Model-View-ViewModel）模式是一种用于构建用户界面的软件设计模式。它将应用程序的界面分成三个关键组件：模型（Model）、视图（View）和视图模型（ViewModel）。每个组件有着不同的职责和功能，以实现松耦合、可维护和可测试的代码结构。
下面是MVVM模式的三个主要组件：
模型（Model）：
- 模型代表应用程序的数据和业务逻辑。
- 它可以是从后端获取的数据、本地数据存储或其他数据源。
- 模型通常包含与数据相关的操作和方法。
视图（View）：
- 视图是用户界面的可视化部分，它展示和呈现数据给用户。
- 视图负责接收用户输入，并将其转发给视图模型进行处理。
- 视图通常由HTML、CSS和其他前端技术构建。
视图模型（ViewModel）：
- 视图模型是视图和模型之间的桥梁，负责协调两者之间的通信和交互。
- 视图模型从模型中获取数据并进行格式化，然后将这些数据绑定到视图上以显示给用户。
- 视图模型也捕获和处理用户的输入，并对模型进行操作或发起后端请求。
- 视图模型通常包含命令、数据绑定和其他逻辑。
MVVM模式的优势包括：
- 分离关注点：通过将界面逻辑与业务逻辑分开，使代码更加模块化和可维护。
- 双向数据绑定：视图与视图模型之间的双向数据绑定使数据的变化可以自动反映在视图和模型中。
- 可测试性：组件的松耦合性以及视图模型的分离使单元测试和集成测试变得更容易。
MVVM模式在许多前端框架中得到广泛应用，如Vue.js、Angular和React。这些框架提供了工具和功能来简化MVVM模式的实现，并使开发者可以更轻松地构建可复用、可扩展的前端应用程序。
后端
概述
本模块主要完成对图书的借阅处理。需要实现三个接口，第一个是获取所有的读者的借阅卡号，第二个是获取所有的未被借阅的图书编号，第三个则是根据借阅卡的卡号和图书编号进行借阅。
获取所有的读者的借阅卡号
接口路径：/users/getAllCardNumber
Query参数：无
返回值形式：JSON 统一封装的对象R进行响应
{
"status": 200,//状态码
"msg": "获取成功",//响应信息
"data": [//返回数据==》所有的读者编号
"65125544"
],
"map": {}
}
UsersController
@GetMapping("getAllCardNumber")
public R getAllCardNumber() {
List<Long> list=usersService.getAllCardNumber();
return R.ok(list,"获取成功");
}UsersService
List<Long> getAllCardNumber();UsersServiceImpl
@Override
public List<Long> getAllCardNumber() {
List<Users> list = this.list();
List<Long> collect = list.stream().map(item -> {
Long cardNumber = item.getCardNumber();
return cardNumber;
}).collect(Collectors.toList());
return collect;
}测试
GET http://localhost:8888/users/getAllCardNumber
获取所有的未被借阅的图书编号
接口路径：/books/getAllNotBorrowBoook
Query参数：无
返回值形式：JSON 统一封装的对象R进行响应
{
"status": 200,//状态码
"msg": "获取成功",//响应信息
"data": [//返回数据==》未被借阅的书籍编号
"65125544"
],
"map": {}
}
BooksController
@GetMapping("getAllNotBorrowBook")
public R getAllNotBorrowBook() {
List<String> list= booksService.getAllNotBorrowBook();
return R.ok(list,"获取成功");
}BooksService
List<String> getAllNotBorrowBook();BooksServiceImpl
@Override
public List<String> getAllNotBorrowBook() {
List<Books> list = this.list();
List<String> collect = list.stream().filter(item -> {
if ("已借出".equals(item.getBookStatus())) {
return false;
} else {
return true;
}
}).map(item -> {
return item.getBookNumber();
}).collect(Collectors.toList());
return collect;
}测试
GET http://localhost:8888/users/getAllCardNumber
进行借阅
接口路径：/booksBorrow/borrowBook
Query参数：BooksBorrowDTO
返回值形式：JSON 统一封装的对象R进行响应
{
"status": 200,//状态码
"msg": "获取成功",//响应信息
"data":true,//成功还是失败的响应
"map": {}
}BooksBorrowController
/**
* 借书
* @param booksBorrowDTO
* @return
*/
@PostMapping("borrowBook")
public R borrowBookByCardNumberAndBookNumber(@RequestBody BooksBorrowDTO booksBorrowDTO) {
System.out.println("1234");
boolean b= booksBorrowService.borrowBook(booksBorrowDTO);
if (b==false){
return R.error("借书失败（请校验数据，IBSN或借书凭证出错，或者该书已借出异常）");
}else {
return R.ok("借书成功");
}
}BooksBorrowService
boolean borrowBook(BooksBorrowDTO booksBorrowDTO);BooksBorrowServiceImpl
@Override
@Transactional(rollbackFor = Exception.class)
public boolean borrowBook(BooksBorrowDTO booksBorrowDTO) {
/**
* 1.接受前端请求中的参数(借阅证号、图书编号、借阅时间)
* 2.先根据借阅证号查询是否有此用户存在，不存在直接返回错误信息
* 3.用户存在，根据图书编号查询图书表，查询是否有图书存在并且该图书的状态是未借出
* 4.用户存在，图书存在，且未借出 说明可以借出该图书
* 5.#获取用户的规则编号#，根据编号查询出规则(判断空),获取规则的可借天数
* 6.设置期限天数为当前时间+规则的可借天数 设置归还日期为空
* 7.调用bookBorrow，进行插入记录
* 8.如果插入成功，修改在图书表中对应图书编号的状态为已借出
* 9.判断是否更新成功
* 10.插入成功+更新成功，则返回请求状态码200和请求信息
*/
// 图书编号
Integer bookNumber = booksBorrowDTO.getBookNumber();
// 借阅证号
Long cardNumber = booksBorrowDTO.getCardNumber();
// 借阅时间
LocalDateTime borrowDate = booksBorrowDTO.getBorrowDate();
LambdaQueryWrapper<Users> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(Users::getCardNumber, cardNumber);
Users users = usersMapper.selectOne(queryWrapper);
if (users == null) {
return false;
}
LambdaQueryWrapper<Books> queryWrapper1 = new LambdaQueryWrapper<>();
queryWrapper1.eq(Books::getBookNumber, bookNumber);
Books book = booksMapper.selectOne(queryWrapper1);
if ((book == null) || (book.getBookStatus().equals(Constant.BOOKDISABLE))) {
return false;
}
// 规则编号
Integer ruleNumber = users.getRuleNumber();
LambdaQueryWrapper<BookRule> queryWrapper2 = new LambdaQueryWrapper<>();
queryWrapper2.eq(BookRule::getBookRuleId, ruleNumber);
BookRule bookRule = bookRuleMapper.selectOne(queryWrapper2);
if (bookRule == null) {
return false;
}
// 可借天数
Integer bookDays = bookRule.getBookDays();
LocalDateTime closeDate = borrowDate.plusDays(bookDays);
BooksBorrow booksBorrow1 = new BooksBorrow();
booksBorrow1.setBorrowId(null);
booksBorrow1.setBookNumber(bookNumber);
booksBorrow1.setCardNumber(cardNumber);
booksBorrow1.setBorrowDate(borrowDate);
booksBorrow1.setCloseDate(closeDate);
booksBorrow1.setReturnDate(null);
boolean flag = this.save(booksBorrow1);
if (!flag) {
return false;
}
book.setBookStatus(Constant.BOOKDISABLE);
int update = booksMapper.update(book, queryWrapper1);
if (update==0) {
return false;
}
Violation violation = new Violation();
BeanUtils.copyProperties(booksBorrow1, violation, "borrowId");
violation.setViolationId(null);
violation.setViolationMessage("");
violation.setBookNumber(book.getBookNumber());
violation.setViolationAdminId(booksBorrowDTO.getBookAdminId());
int save = violationMapper.insert(violation);
if (save==0) {
return false;
}
return true;
}前端
在\compone\BookManage\下建立BorrowBook.vue
在compone\ManageHome.vue中添加
<el-menu-item index="borrowbook" @click="saveNavState('borrowbook')">
<i class="el-icon-collection"></i>
<span slo="title">借阅图书</span>
</el-menu-item>在route下的index.js添加：
import BorrowBook from '../components/BookManage/BorrowBook.vue'
{ path: '/borrowbook', component: BorrowBook },
BorrowBook.vue
<template>
<div class="borrowbook_container">
<div class="header"><p>借阅图书 </p></div>
<div class="banner">
借阅证号:<br> <el-select v-model.number="borrowInfo.cardNumber" placeholder="请选择借阅证号">
<el-option
v-for="item in cardNumbers"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
图书编号:<br> <el-select v-model.number="borrowInfo.bookNumber" placeholder="请选择图书编号">
<el-option
v-for="item in userNumbers"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
<!-- <div class="card_number">
<el-input placeholder="请输入借阅证号" v-model.number="borrowInfo.cardNumber">
<el-button slot="prepend" icon="el-icon-notebook-2"></el-button>
</el-input>
</div> -->
<!-- <div class="book_number">
<el-input placeholder="请输入图书编号" v-model.number="borrowInfo.bookNumber">
<el-button slot="prepend" icon="el-icon-collection"></el-button
></el-input>
</div> -->
<div class="borrow_date">
<el-date-picker
v-model="borrowInfo.borrowDate"
type="datetime"
placeholder="选择日期时间"
default-time="12:00:00"
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
</div>
<div class="borrow_button">
<el-button type="primary" @click="borrowBook">借阅</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
userNumbers:[],
cardNumbers:[],
borrowInfo: {
cardNumber: "",
bookNumber: "",
borrowDate: "",
bookAdminId:0
},
};
},
methods: {
async borrowBook(){
// console.log(this.borrowInfo.borrowDate);
this.borrowInfo.bookAdminId = parseInt(window.sessionStorage.getItem('bookAdminId'))
const {data:res} = await this.$http.post('booksBorrow/borrowBook',this.borrowInfo)
// console.log(res);
if(res.status !== 200){
return this.$message.error(res.msg)
}
this.$message.success(res.msg)
// 清空数据
this.borrowInfo.bookNumber = "";
this.borrowInfo.cardNumber = "";
this.borrowInfo.borrowDate = "";
},
async getAllCardNumber(){
// console.log(this.borrowInfo.borrowDate);
this.cardNumbers=[];
const {data:res} = await this.$http.get('/users/getAllCardNumber')
if(res.status !== 200){
return this.$message.error(res.msg)
}
this.$message.success(res.msg);
this.cardNumbers=res.data;
console.log(123)
console.log(this.cardNumbers)
},
async getAllNotBorrowBook(){
// console.log(this.borrowInfo.borrowDate);
this.userNumbers=[];
const {data:res} = await this.$http.get('/books/getAllNotBorrowBook')
if(res.status !== 200){
return this.$message.error(res.msg)
}
this.$message.success(res.msg);
this.userNumbers=res.data;
console.log(123)
console.log(this.cardNumbers)
}
},
created() {
this.getAllCardNumber();
this.getAllNotBorrowBook();
},
};
</script>
<style lang="less" scoped>
.borrowbook_container {
display: flex;
flex-direction: column;
align-items: center;
.header {
width: 100%;
height: 100px;
// background-color: pink;
p {
color: black;
font-size: 30px;
text-align: center;
line-height: 60px;
}
}
.banner {
display: flex;
flex-direction: column;
align-items: center;
width: 60%;
height: 400px;
// background-color: brown;
div {
margin-top: 15px;
// margin-left: ;
}
.borrow_date {
margin-left: 8px;
}
.borrow_button {
margin-top: 30px;
}
}
}
</style>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）