关于我们网站设计,电子商务主要学什么就业方向工资,网站建设php文件html文件,wordpress稳定版本1.创建项目
流程与之前的项目一致#xff0c;不再进行赘述。
2.需求定义
需求: 1. 登录: ⽤⼾输⼊账号,密码完成登录功能 2. 列表展⽰: 展⽰图书
3.前端界面测试
无法启动#xff01;#xff01;#xff01;---记得加入mysql相关操作记得在yml进行配置
配置后启动…1.创建项目
流程与之前的项目一致不再进行赘述。
2.需求定义
需求: 1. 登录: ⽤⼾输⼊账号,密码完成登录功能 2. 列表展⽰: 展⽰图书
3.前端界面测试
无法启动---记得加入mysql相关操作记得在yml进行配置
配置后启动成功
我们在测试前端的时候同时可以对用户的需求进行分析。
3.1 需求分析
3.1.1 用户登录 3.1.2 图书列表 根据需求可以得知, 后端需要提供两个接口 1. 账号密码校验接口: 根据输入用户名和密码校验登录是否通过 获取参数用户名和密码 返回true或者false 2. 图书列表: 提供图书列表信息 直接返回所有的图书数据 4.接口定义
4.1 登录接口 [URL] POST /user/login [ 请求参数 ] nameadminpasswordadmin [ 响应 ] true // 账号密码验证成功 false// 账号密码验证失败 4.2 图书列表展示 [URL] POST /book/getList [ 请求参数 ] ⽆ [ 响应 ] 返回图书列表 [ { id: 1, bookName: 活着 , author: 余华 , count: 270, price: 20, publish: 北京⽂艺出版社 , status: 1, statusCN: 可借阅 }, ... ] 5.服务器代码
5.1 建包 目前我们先建立四个包
由于现在还没有引入数据库
dao是mock的数据。
controller是表现层
model是图书类
逻辑是controller调用service写一些逻辑代码service调用controller。
5.2 建立数据类
5.2.1 图书添加接口
5.2.1.1 图书类(model)
//Data 注解会帮助我们⾃动⼀些⽅法, 包含getter/setter, equals, toString等
package com.example.demo.model;
import lombok.Data;
import org.springframework.stereotype.Component;import java.math.BigDecimal;
import java.util.Date;
Data
Component
public class BookInfo {//图书IDprivate Integer id;//书名private String bookName;//作者private String author;//数量private Integer count;//定价private BigDecimal price;//出版社private String publish;//状态 0-⽆效 1-允许借阅 2-不允许借阅private Integer status;private String statusCN;//创建时间private Date createTime;//更新时间private Date updateTime;
}5.2.1.2 数据层(dao/mapper)
//数据访问层: 负责数据访问操作包括数据的增、删、改、查
//mock了一些假信息
package com.example.demo.dao;import com.example.demo.model.BookInfo;import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;public class BookDao {public ListBookInfo mockData(){ListBookInfo books new ArrayList();for (int i0;i5;i){BookInfo book new BookInfo();book.setId(i);book.setBookName(书籍i);book.setAuthor(作者i);book.setCount(i*53);book.setPrice(new BigDecimal(new Random().nextInt(100)));book.setPublish(出版社i);book.setStatus(1);books.add(book);}return books;}
}5.2.1.3 业务逻辑层service
业务逻辑层: 处理具体的业务逻辑
package com.example.demo.service;import com.example.demo.dao.BookDao;
import com.example.demo.model.BookInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.awt.print.Book;
import java.util.List;Service
public class BookService {BookDao bookDaonew BookDao();public ListBookInfo getBookList(){ListBookInfo bookInfosbookDao.mockData();for(BookInfo bookInfo:bookInfos){if(bookInfo.getStatus()1){bookInfo.setStatusCN(可借阅);}else{bookInfo.setStatusCN(不可借阅);}}return bookInfos;}
}
5.2.1.4 控制层controller
RestController
RequestMapping(/book)
public class BookController {RequestMapping(/getList)public ListBookInfo getList(){BookService bookServicenew BookService();return bookService.getBookList();}
}
5.2.1.5 测试前端接口
上面完成了图书页面展示我们先来测试以下前端接口 成功
5.2.1.6 前后端交互
我们想要页面加载时就显示图书信息可以直接写ajax相关语句
为了美观我们定义一个函数在函数内部写相关语句在进行调用。 getBookList();function getBookList() {$.ajax({type: post,url: /book/getList,//我们想把相关语句存入tbody内循环success: function(result){console.log(result);//控制台进行打印方便我们进行检查看我们是否从服务器拿到信息可以定位错误if(result!null){var finalHtml;for(var book of result){finalHtml tr;finalHtml tdinput typecheckbox nameselectBook value1 idselectBook classbook-select/td;finalHtml td book.id /td;finalHtml td book.bookName /td;finalHtml td book.author /td;finalHtml td book.count /td;finalHtml td book.price /td;finalHtml td book.publish /td;finalHtml td book.statusCN /td;finalHtml tddiv classop;finalHtml a hrefbook_update.html?bookId book.id 修改/a;finalHtml a hrefjavascript:void(0) onclickdeleteBook(book.id)删除/a;finalHtml /div/td;finalHtml /tr;}}$(tbody).html(finalHtml);}});}
正确 5.2.2 用户登录接口
5.2.2.1 控制层 RequestMapping(/login)public Boolean login(String password, String admin, HttpSession session){//账号为空错误if(!StringUtils.hasLength(password)||!StringUtils.hasLength(admin)){return false;}if(admin.equals(admin)password.equals(password)){session.setAttribute(admin,admin);return true;}return false;}
5.2.2.2 测试 成功
5.2.2.3 前后端交互 function login() {$.ajax({type: post,url: /user/login,data:{admin: $(#userName).val(),password: $(#password).val()},success: function(result){if(resulttrue){location.href book_list.html;}else{alert(账号或密码不正确!!!);}}});} 输入密码正确成功
未完
