a full-stack web application for users to understand java web system

• 书城业务需求
  • 业务需求
  • 数据库设计
  • index 页面
  • 金额的精度问题
  • 过滤器判断是否是合法用户
• Vue
• Axios
  • Axios 执行 Ajax 操作的步骤

书城业务需求

业务需求

1. 需求分析
2. 数据库设计

• 实体分析
  • 图书 Book
  • 用户 User
  • 订单 OrderBean
  • 订单详情 OrderItem
  • 购物车项 CartItem
• 实体属性分析
  • 图书 : 书名、作者、价格、销量、库存、封面、状态
  • 用户 : 用户名、密码、邮箱
  • 订单 : 订单编号、订单日期、订单金额、订单数量、订单状态、用户
  • 订单详情 : 图书、数量、所属订单
  • 购物车项 : 图书、数量、所属用户

数据库设计

index 页面

• 新建 BookDAO 、 BookDAOImpl ： getBookList()
• 新建 BookService 、 BookServiceImpl : getBookList()
• 新建 BookController : index()
• 编辑 index.html

金额的精度问题

double vs bigdecimal

过滤器判断是否是合法用户

• 解决方法：新建 SessionFilter ， 用来判断 session 中是否保存了 currUser
• 如果没有 currUser，表明当前不是一个登录合法的用户，应该跳转到登录页面让其登录

Vue

1. {{}} - 相当于 innerText

2. v-bind:attr 绑定属性值。例如，v-bind:value - 绑定 value 值 简写： :value

3. v-model 双向绑定

v-model:value , 简写 v-model

4. v-if , v-else , v-show

v-if 和 v-else 之间不能有其他的节点

v-show 是通过样式表 display 来控制节点是否显示

5. v-for 迭代

v-for={fruit in fruitList}

6. v-on 绑定事件

7. 其他

• trim:去除首尾空格 , split() , join()
• watch 表示侦听属性
• 生命周期

Axios

Axios 是 Ajax 的一个框架,简化 Ajax 操作

Axios 执行 Ajax 操作的步骤

• 1. 添加并引入 axios 的 js 文件
• 2. 客户端向服务器端异步发送普通参数值

• 基本格式： axios().then().catch()
• 示例

axios({
method:"POST",
url:"....",
params:{
    uname:"lina",
    pwd:"ok"
}
})
.then(function(value){})          //成功响应时执行的回调        value.data可以获取到服务器响应内容
.catch(function(reason){});       //有异常时执行的回调          reason.response.data可以获取到响应的内容

reason.message / reason.stack 可以查看错误的信息

• 3. 客户端向服务器发送 JSON 格式的数据

• 什么是 JSON

JSON 是一种数据格式

XML 也是一种数据格式

XML 格式表示两个学员信息的代码如下：

<students>
<student sid="s001">
    <sname>jim</sname>
    <age>18</age>
</student>
<student sid="s002">
    <sname>tom</sname>
    <age>19</age>
</student>
</students>

JSON 格式表示两个学员信息的代码如下：

[{sid:“s001”,age:18},{sid:“s002”,age:19}]

• JSON 表达数据更简洁，更能够节约网络带宽
• 客户端发送 JSON 格式的数据给服务器端

1. 客户端中 params 需要修改成：ata:
2. 服务器获取参数值不再是 request.getParameter()…

StringBuffer stringBuffer = new StringBuffer("");
BufferedReader bufferedReader = request.getReader();
String str = null ;
while((str=bufferedReader.readLine())!=null){
    stringBuffer.append(str);
}
str = stringBuffer.toString() ;

3. 我们会发现 str 的内容如下：

{“uname”:“lina”,“pwd”:“ok”}

• 服务器端给客户端响应 JSON 格式的字符串，然后客户端需要将字符串转化成 js Object

javaweb2

javaweb3

javaweb4

javaweb5

spring

springmvc