开发文档.md

[TOC]

---

1. 项目需求

• 实现右击鼠标展示菜单栏的功能
• 用react写一个最简易的财务系统，系统又添加，删除，更改数据并计算出金额的变化

2. 项目分析

• 前端
  • 右键菜单栏
  • CURD
• 后端
  • 数据模拟

3.实现要点

• 右键菜单栏

需要调用鼠标事件（oncontextmenu），阻止浏览器的默认行为，展示自定义菜单

• CURD

1. 确定财务系统显示信息

[{
    id:1,				// Big Number 		- 标识符
    name:'xx',			// String			- 财物名字
    value:11,			// Number			- 财务价值
    isDelete: false		// Boolean			 - 是否被软删除
},{
    id:2
    name:'xx',			
    value:11,			
    isDelete: false	
}]

2. UI设计
3. 实现逻辑

4. 开发逻辑确定

• 一个小页面，内含数据列表，右键展示添加的功能
• 其中数据列表要展示当前财务的总金额
• 列表项要包含，财物的id、名字、价值以及修改和删除两个按钮

5. 模拟后端api文档

序号	接口	方法	参数	功能说明
1	/App	get	无	获取财物列表
2	/App/:id	delete	财物的id:Number	软删除选中的财物
3	/App	post	name:String,value:Number	添加财物
4	/App/:id	post	name:String,value:Number,id:Number	修改财物信息

• 接口演示

const baseurl = '127.0.0.1:8080'
// 1. get
$axios.get(baseurl+'/App')

// 2. delete
$axios.delete(baseurl+'/App/3')


// 3. 添加
$axios({
    url:'/App',
    data:{
        name:xx,
        value:12
    },
    method:'POST'
})


// 4. 修改
$axios({
    url:`${baseurlk}/App/${id}`,
    method:'POST',
    data:{
        name:xx,
        value:8
    }
})