java前后端分离（增删查改）
2024-03-31 17:16:09
学习目标：
例如：spring boot vue
- 掌握 Java 前后端分离 入门知识
学习内容：
- 搭建 Java 开发环境
- 前端页面（首页、插入、显示、删除、修改）
<h1>商品管理</h1>
<a href="insert.html">添加商品</a>
<a href="/list.html">显示商品</a>
插入
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>添加商品</h1>
<div><input type="text" v-model="p.title" placeholder="商品品牌"><input type="text" v-model="p.price" placeholder="商品价格"><input type="text" v-model="p.saleCount" placeholder="商品销量"><input type="button" value="添加" @click="insert()">
</div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>let v = new Vue({el:"div",data:{p:{}},methods:{insert(){axios.post("insert",v.p).then(function (response) {alert("添加完成！");location.href="/";})}}})</script>
</body>
</html>显示、删除
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>商品管理首页</h1>
<table border="1"><tr><th>商品id</th><th>商品标题</th><th>商品价格</th><th>商品销量</th><th>操作</th></tr><tr v-for="p in arr"><td>{{p.id}}</td><td>{{p.title}}</td><td>{{p.price}}</td><td>{{p.saleCount}}</td>
<!-- 废掉超链接的跳转功能 和按钮一样只是显示不一样--><td><a href="javascript:void (0)" @click="del(p.id)">删除</a>
<!-- 实现的效果是一样的 只是显示的效果不一样 -->
<!-- <input type="button" @click="del(p.id)" value="删除" >--><!--点击修改需要跳转页面 所以不能像删除那样废掉跳转功能 --><!--元素的属性里面出现变量 需要进行属性绑定 --><a :href="'/update.html?id='+p.id">修改 </a></td></tr>
</table>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>let v = new Vue({el:"table",data:{arr:[]}, // created vue自带的方法created:function () {//此方法是vue对象创建时执行的方法//一般会把加载页面请求数据的代码 卸载此方法中//发出异步请求获取数据axios.get("/select").then(function (response) {v.arr=response.data;})},methods:{ //自定义的方法 发出异步的删除方法del(id){ //then 然后的意思axios.get("/delete?id="+id).then(function (response) { //灰的没使用可以不使用 写也没事 形参alert("删除完成！");location.reload();//刷新页面})}}})</script>
</body>
</html>修改
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>修改商品页面</h1>
<div><!-- readonly 只读 --><!-- product.id vue里面没有 但是它可以自己生成 --><input type="text" v-model="product.id" placeholder="id" readonly><input type="text" v-model="product.title" placeholder="标题" ><input type="text" v-model="product.price" placeholder="价格" ><input type="text" v-model="product.saleCount" placeholder="销量" ><input type="button" value="修改" @click="update()" ></div>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>let v = new Vue({el:"div",data:{ //scriptproduct:{} //自定义对象 可以动态生成id 等属性},created:function () { //定义好的不能乱写 created//页面加载完之后 得到商品的id 通过id查询商品信息 并显示到页面中//从地址栏中得到参数let id= location.search.split("=")[1];//发出异步请求通过id查询对应商品信息axios.get("/selectById?id="+id).then(function (response) {//把服务器查询回来的商品信息赋值给vue里面的product变量//让页面和product对象进行绑定 当product得到值 页面就会显示出来v.product=response.data;})},methods:{ //自定义的方法都要写在 methods里面update(){//发出异步post请求axios.post("/update",v.product).then(function (response) {alert("修改完成！");location.href="/list.html";})}}})</script>
</body>
</html>- 实体类
public class Product {private Integer id;private String title;private String price;private String saleCount;@Overridepublic String toString() {return "Product{" +"id=" + id +", title='" + title + '\'' +", price='" + price + '\'' +", saleCount='" + saleCount + '\'' +'}';}public Product() {}public Product(Integer id, String title, String price, String saleCount) {this.id = id;this.title = title;this.price = price;this.saleCount = saleCount;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getTitle() {return title;}public void setTitle(String title) {this.title = title;}public String getPrice() {return price;}public void setPrice(String price) {this.price = price;}public String getSaleCount() {return saleCount;}public void setSaleCount(String saleCount) {this.saleCount = saleCount;}
}
控制器
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import java.util.List;@RestController
public class ProductCpntroller {@Autowired(required = false)ProductMapper productMapper;@RequestMapping("/insert")public void insert(@RequestBody Product product){productMapper.insert(product);System.out.println("product = " + product);}@RequestMapping("/select")public List<Product> select(){return productMapper.select();}@RequestMapping("/delete")public void delete(int id){System.out.println("id = " + id);productMapper.deleteByif(id);}@RequestMapping("/selectById")public Product selectById(int id){System.out.println("id = " + id);//当Springmvc框架发现返回的是一个自定义对象会自动转成json字符串再进行网络传输return productMapper.selectById(id);}@RequestMapping("/update") //post请求 @RequestBody 告诉它从请求体里获取数据public void update(@RequestBody Product product){productMapper.update(product);}}
- sql语句
@Mapper
public interface ProductMapper {@Insert("insert into product values(null,#{title},#{price},#{saleCount})")void insert(Product product);@Select("select * from product")@Result(property = "saleCount",column = "sale_count")List<Product> select();@Delete("delete from product where id=#{id}")void deleteByif(int id);@Select("select * from product where id=#{id}")@Result(property = "saleCount",column = "sale_count")Product selectById(int id);@Update("update product set title=#{title},price=#{price},sale_count=#{saleCount} where id=#{id}")void update(Product product);
}
学习时间：
上午 9 点-上午 11 点
学习产出：
- 练习10次掌握前后端分离
java前后端分离（增删查改）相关推荐
- 解决java前后端分离端口跨域问题
解决java前后端分离端口跨域问题 参考文章: (1)解决java前后端分离端口跨域问题 (2)https://www.cnblogs.com/mollie-x/p/10449686.html 备忘一 ...
- 基于JAVA前后端分离健身房管理系统计算机毕业设计源码+数据库+lw文档+系统+部署
基于JAVA前后端分离健身房管理系统计算机毕业设计源码+数据库+lw文档+系统+部署 基于JAVA前后端分离健身房管理系统计算机毕业设计源码+数据库+lw文档+系统+部署 本源码技术栈: 项目架构:B ...
- 微信公众号支付java前后端分离开发
微信公众号支付java前后端分离开发 微信公众号支付java前后端分离开发 我们开发的是基于河北银行的支付,支付宝微信都做了,这里就介绍一下微信公众号支付,这个公众号支付需要配置的东西太多了,官方文档 ...
- 计算机毕业设计Java前后端分离健身房管理系统(源码+系统+mysql数据库+lw文档）
计算机毕业设计Java前后端分离健身房管理系统(源码+系统+mysql数据库+lw文档) 计算机毕业设计Java前后端分离健身房管理系统(源码+系统+mysql数据库+lw文档) 本源码技术栈: 项目 ...
- 基于java前后端分离Erp系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署
基于java前后端分离Erp系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署 基于java前后端分离Erp系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署 本源码技 ...
- 驾校分期-众筹项目java前后端分离项目vue（微信小程序+java前后端源码下载）
可以idea直接打开,mysql数据库项目,前后端分离项目vue,分期可自动设置,自动换算金额 驾校分期-众筹项目java前后端分离项目vue(微信小程序+java前后端源码下载)
- 计算机毕业设计Java前后端分离Erp系统(源代码+数据库+系统+lw文档)
计算机毕业设计Java前后端分离Erp系统(源代码+数据库+系统+lw文档) 计算机毕业设计Java前后端分离Erp系统(源代码+数据库+系统+lw文档) 本源码技术栈: 项目架构:B/S架构 开发语 ...
- 计算机毕业设计JAVA前后端分离在线作业系统mybatis+源码+调试部署+系统+数据库+lw
计算机毕业设计JAVA前后端分离在线作业系统mybatis+源码+调试部署+系统+数据库+lw 计算机毕业设计JAVA前后端分离在线作业系统mybatis+源码+调试部署+系统+数据库+lw 本源码技 ...
- 讲解开源项目：一步步跑起来个 Java 前后端分离的人力资源管理系统
本文适合刚学习完 Java 语言基础的人群,跟着本文可了解和运行项目,本示例是在 Windows 操作系统下演示. 本文作者:HelloGitHub-秦人 大家好!这里是 HelloGitHub 推出 ...
- java前后端分离框架，SpringCloud开发微服务平台
JNPF.java版本采用全新的前后端分离架构模式.前后端分离已成为互联网项目开发的业界标准开发方式,通过 nginx+tomcat 等方式有效的进行解耦合,并且前后端分离会为以后的大型分布式架构.弹 ...
最新文章
- 【Qt】QImage使用总结
- java利用opencv降维_opencv中PCA降维
- POJ2299 Ultra-QuickSort
- linux负载很高是什么原因导致的？
- 97 岁诺奖得主的励志人生：本科学文学，博士转物理，54 岁才开始锂电池研究...
- webapi------宿主程序
- C语言在计算机专业的功能,C语言程序设计在高职院校计算机专业教学中重要作用.pdf...
- 【CF global1 D / CF1110D】 Jongmah
- [家里蹲大学数学杂志]第405期中国科学院数学与系统科学研究院2015年夏令营分析与代数试题...
- Mybatis传入参数类型为ListIntergert作为条件进行查询
- 帧内16*16模式的宏块数据传输顺序
- MacOS安装失败？教你如何使用Mac恢复功能
- 参考文献的类型及标识
- 近期计算机视觉竞赛汇总—总奖池高达344万人民币
- 今天while if wlse..
- 番茄助手文件、函数说明
- 阿里巴巴矢量图标使用
- ogg怎么转mp3格式，ogg转mp3方法
- 网络工程师面试题总结
- 研发人员分层及其工作内容划分