day53(mvc模式，前后端分离，json，服务端与客户端数据传输，商品管理项目)

day53(mvc模式，前后端分离，json，服务端与客户端数据传输，商品管理项目)

1.后端的MVC设计模式

  • 把实现一个业务的代码划分为三部分,分别是: 页面相关(V),业务逻辑相关(C),数据相关(M)

  • M:Model 数据模型, 对应的代码是数据库相关的Mapper部分

  • V:View 视图, 对应所有页面相关内容

  • C:Controller 控制器,对应的是Controller相关代码

  • 实现一个业务的顺序: V页面相关代码->C Controller相关代码->M 数据库Mapper相关代码

  • 排错时也是从这三部分代码中找问题

  • 后端MVC涉及模式中的V页面相关,前端工程师将页面又划分为了MVC三部分

 

2.前后端不分离

  • 如果前后端不分离, 后端服务器需要两套代码来应对 手机客户端和浏览器客户端, 因为不同的客户端的需求内容是不一样的,这样后端的开发效率就会受影响.

3.前后端分离

  • 前后端分离:指在Controller中不再处理页面相关内容, 浏览器客户端需要先请求页面,页面加载完之后从页面中再次发出请求获取数据, 得到数据后把数据展示在页面中,这个过程属于页面的局部刷新, 同步请求只能实现页面的整体刷新无法实现局部刷新, 所以以后不再使用同步请求, 全部使用异步请求,因为以后工作基本全是前后端分离思想.

4.JSON

  • JSON是一种轻量级的数据交换格式(数据封装格式)

  • 客户端和服务器之间需要互相传递数据,当需要传递复杂数据时需要按照特定的格式将数据进行封装,JSON就是这样一个通用格式.

 

登录成功

用户名已存在

密码错误

123

"id=1, title=手机 , price=1000, saleCount=500"

[{"id":1,"title":"阿迪袜子","price":10.0,"saleCount":1000},{"id":3,"title":"裤子","price":50.0,"saleCount":400},{"id":4,"title":"袜子","price":5.0,"saleCount":100}]

5.服务器和客户端之间如何传递复杂数据

6.商品管理添加商品步骤:

  1. 创建工程 3个打钩 修改application.properties配置文件, 启动工程测试是否成功

  2. 创建index.html首页 和 insert.html页面

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h1>商品管理首页</h1>
    <a href="/insert.html">添加商品</a>
    <a href="/list.html">商品列表</a>
    <a href="/update.html">修改商品</a>
    </body>
    </html>

  3. 在insert.html页面中添加三个文本框和一个添加按钮, 通过Vue对页面内容进行管理,此时需要把之前工程中的js文件夹复制到新工程, 当点击添加按钮时向/insert地址发出异步post请求把用户输入的商品信息提交

    insert.html

    <!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:{
                    title:"",
                    price:"",
                    saleCount:""
                }
            },
            methods:{
                insert(){
                    axios.post("/insert",v.p).then(function (response) {
                        alert("添加成功")
    ​
                        location.href="/"
                    })
                }
            }
    ​
        })
    </script>
    </body>
    </html>

     

  4. 创建controller.ProductController 添加insert方法处理/insert请求 创建Product实体类 在insert方法中声明用来接收传递过来的参数(此参数需要通过@RequestBody注解进行修饰

    package cn.tedu.boot41.controller;
    ​
    import cn.tedu.boot41.entity.Product;
    import cn.tedu.boot41.mapper.ProductMapper;
    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 ProductController {
        @Autowired
        ProductMapper mapper;
    ​
        @RequestMapping("/insert")
        public void insert(@RequestBody Product product) {
            System.out.println("product:" + product);
            mapper.insert(product);
    ​
        }
    ​
        @RequestMapping("/select")
        public List<Product> select() {
            // SpringMVC框架当发现返回值类型为集合或自定义的对象类型时,
            //会将集合或对象转成JSON格式的字符串,然后再将JSON格式字符串转成二进制数据进行网络传输
            //[{"id":1,"title":"阿迪袜子","price":10.0,"saleCount":1000},{"id":3,"title":"裤子","price":50.0,"saleCount":400},{"id":4,"title":"袜子","price":5.0,"saleCount":100}]
            return mapper.select();
        }
    ​
        //    删除
        @RequestMapping("/delete")
        public void delete(int id) {
            System.out.println("id:" + id);
            mapper.deleteById(id);
        }
    ​
        //   select
        @RequestMapping("selectById")
        public Product selectById(int id) {
            System.out.println("id:" + id);
            return mapper.selectById(id);
        }
    ​
        //    update
        @RequestMapping("/update")
        public void update(@RequestBody Product product) {
            mapper.update(product);
        }
    }
    ​

     

  5. 创建ProductMapper 在里面添加insert方法通过@Insert注解修饰

    package cn.tedu.boot41.mapper;
    ​
    import cn.tedu.boot41.entity.Product;
    import org.apache.ibatis.annotations.*;
    ​
    import java.util.List;
    ​
    @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 deleteById(int id);
    ​
        @Select("select * from product where id=#{id}")
        @Result(property = "saleCount",column = "sale_count")
        Product selectById(int id);
    ​
    //    update
        @Update("update product set title=#{title},price=#{price}"+",sale_count=#{saleCount} where id=#{id}")
        void update(Product product);
    }
    ​

     

  6. 在Controller中将ProductMapper装配进来, 在insert方法中调用mapper的insert方法把接收到的Product对象传递过去

7.商品管理商品列表步骤:

  1. 在index.html页面中添加商品列表超链接 请求地址为/list.html页面

  2. 创建list.html页面, 在页面中添加表格,并且通过Vue进行管理,在Vue的created方法中发出异步的get请求,把请求回来的数据交给一个数组变量, 然后让页面中表格的内容和数据变量进行绑定, 当数组有值时页面会自动显示数据 

    <!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">
            <th>{{p.id}}</th>
            <th>{{p.title}}</th>
            <th>{{p.price}}</th>
            <th>{{p.saleCount}}</th>
            <!--        废掉自身链接跳转功能-->
            <th>
                <a href="javascript:void(0)" @click="del(p.id)">删除</a>
                <!--       点击修改需要跳转页面，所以不能像删除一样废掉跳转功能     -->
                <!--            元素的属性里面出现变量，需要进行属性绑定-->
                <a :href="'/update.html?id='+p.id">修改</a>
            </th>
        </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) {
                    //服务器返回的数据直接给到arr数组，由于页面和数组进行了绑定
                    //数组值发生改变时页面会自动发生改变
    ​
                    //服务器传递过来的是二进制的数据先将二进制的数据转回JSON格式的字符串
                    //转完字符串之后Axios框架会再将JSON格式的字符串转成数组或对象
                    v.arr = response.data;
                })
    ​
            },
            methods: {
                del(id) {
                    axios.get("/delete?id=" + id).then(function (response) {
                        alert("删除完成");
                        location.reload();//刷新页面
                    })
                }
            }
    ​
        })
    </script>
    </body>
    </html>

     

  3. 在ProductController中添加select方法 处理/select请求,方法中调用mapper的select方法 把得到的List集合直接返回给客户端

    package cn.tedu.boot41.controller;
    ​
    import cn.tedu.boot41.entity.Product;
    import cn.tedu.boot41.mapper.ProductMapper;
    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 ProductController {
        @Autowired
        ProductMapper mapper;
    ​
    ​
        @RequestMapping("/select")
        public List<Product> select() {
            // SpringMVC框架当发现返回值类型为集合或自定义的对象类型时,
            //会将集合或对象转成JSON格式的字符串,然后再将JSON格式字符串转成二进制数据进行网络传输
            //[{"id":1,"title":"阿迪袜子","price":10.0,"saleCount":1000},{"id":3,"title":"裤子","price":50.0,"saleCount":400},{"id":4,"title":"袜子","price":5.0,"saleCount":100}]
            return mapper.select();
        }
    ​
    }
    ​

     

  4. 实现 mapper里面的select方法 

    package cn.tedu.boot41.mapper;
    ​
    import cn.tedu.boot41.entity.Product;
    import org.apache.ibatis.annotations.*;
    ​
    import java.util.List;
    ​
    @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();
    ​
     
    }
    ​

     

8.商品管理删除商品步骤:

  1. 在商品列表页面中添加删除的超链接 ,废掉超链接的跳转功能添加点击事件,调用del方法, 在方法中向/delete发出异步get请求并且把商品的id传递过去 

    <!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">
            <th>{{p.id}}</th>
            <th>{{p.title}}</th>
            <th>{{p.price}}</th>
            <th>{{p.saleCount}}</th>
            <!--        废掉自身链接跳转功能-->
            <th>
                <a href="javascript:void(0)" @click="del(p.id)">删除</a>
                <!--       点击修改需要跳转页面，所以不能像删除一样废掉跳转功能     -->
                <!--            元素的属性里面出现变量，需要进行属性绑定-->
                <a :href="'/update.html?id='+p.id">修改</a>
            </th>
        </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) {
                    //服务器返回的数据直接给到arr数组，由于页面和数组进行了绑定
                    //数组值发生改变时页面会自动发生改变
    ​
                    //服务器传递过来的是二进制的数据先将二进制的数据转回JSON格式的字符串
                    //转完字符串之后Axios框架会再将JSON格式的字符串转成数组或对象
                    v.arr = response.data;
                })
    ​
            },
            methods: {
                del(id) {
                    axios.get("/delete?id=" + id).then(function (response) {
                        alert("删除完成");
                        location.reload();//刷新页面
                    })
                }
            }
    ​
        })
    </script>
    </body>
    </html>

     

  2. 在ProductController中 添加delete方法处理/delete请求在方法中调用mapper的deleteById方法把接收到的id传递进去

    package cn.tedu.boot41.controller;
    ​
    import cn.tedu.boot41.entity.Product;
    import cn.tedu.boot41.mapper.ProductMapper;
    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 ProductController {
        @Autowired
        ProductMapper mapper;
    ​
        @RequestMapping("/insert")
        public void insert(@RequestBody Product product) {
            System.out.println("product:" + product);
            mapper.insert(product);
    ​
        }
    ​
        @RequestMapping("/select")
        public List<Product> select() {
            // SpringMVC框架当发现返回值类型为集合或自定义的对象类型时,
            //会将集合或对象转成JSON格式的字符串,然后再将JSON格式字符串转成二进制数据进行网络传输
            //[{"id":1,"title":"阿迪袜子","price":10.0,"saleCount":1000},{"id":3,"title":"裤子","price":50.0,"saleCount":400},{"id":4,"title":"袜子","price":5.0,"saleCount":100}]
            return mapper.select();
        }
    ​
        //    删除
        @RequestMapping("/delete")
        public void delete(int id) {
            System.out.println("id:" + id);
            mapper.deleteById(id);
        }
    ​
      
    }
    ​

     

  3. 实现mapper里面的deleteById方法

    package cn.tedu.boot41.mapper;
    ​
    import cn.tedu.boot41.entity.Product;
    import org.apache.ibatis.annotations.*;
    ​
    import java.util.List;
    ​
    @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 deleteById(int id);
    }
    ​

     

9.商品管理修改商品步骤:

  1. 给列表页面添加 修改超链接 往/update.html页面跳转 并且传递过去商品id 

    <!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">
            <th>{{p.id}}</th>
            <th>{{p.title}}</th>
            <th>{{p.price}}</th>
            <th>{{p.saleCount}}</th>
            <!--        废掉自身链接跳转功能-->
            <th>
                <a href="javascript:void(0)" @click="del(p.id)">删除</a>
                <!--       点击修改需要跳转页面，所以不能像删除一样废掉跳转功能     -->
                <!--            元素的属性里面出现变量，需要进行属性绑定-->
                <a :href="'/update.html?id='+p.id">修改</a>
            </th>
        </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) {
                    //服务器返回的数据直接给到arr数组，由于页面和数组进行了绑定
                    //数组值发生改变时页面会自动发生改变
    ​
                    //服务器传递过来的是二进制的数据先将二进制的数据转回JSON格式的字符串
                    //转完字符串之后Axios框架会再将JSON格式的字符串转成数组或对象
                    v.arr = response.data;
                })
    ​
            },
            methods: {
                del(id) {
                    axios.get("/delete?id=" + id).then(function (response) {
                        alert("删除完成");
                        location.reload();//刷新页面
                    })
                }
            }
    ​
        })
    </script>
    </body>
    </html>

     

  2. 创建update.html页面 在Vue的created方法中得到传递过来的id 然后向/selectById 发出异步的get请求 把id传递过去 把服务返回的数据用一个product对象接收, 并且页面内容和此对象进行绑定 这样对象有值页面就能跟着显示

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h1>修改商品页面</h1>
    <div>
        <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: {
                product: {}
            },
            created: function () {
                //页面加载完成之后，得到商品的id，通过id查询商品信息，并显示到页面中
                //从地址栏中得到id参数
                let id = location.search.split("=")[1];
                axios.get("/selectById?id=" + id).then(function (response) {
                    //把服务器查询回来的商品信息赋值给vue里面的product变量
                    //让页面和product对象进行绑定，当product得到值页面就会显示出来
                    v.product = response.data;
                })
    ​
            },
            methods: {
                update() {
                    axios.post("/update", v.product).then(function (response) {
                        alert("修改完成");
                        location.href = "/list.html";
                    })
                }
            }
        })
    </script>
    </body>
    </html>

     

  3. 在ProductController里面添加selectById方法 处理/selectById请求, 在方法中调用Mapper的selectById方法

    package cn.tedu.boot41.controller;
    ​
    import cn.tedu.boot41.entity.Product;
    import cn.tedu.boot41.mapper.ProductMapper;
    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 ProductController {
        @Autowired
        ProductMapper mapper;
    ​
        @RequestMapping("/insert")
        public void insert(@RequestBody Product product) {
            System.out.println("product:" + product);
            mapper.insert(product);
    ​
        }
    ​
        @RequestMapping("/select")
        public List<Product> select() {
            // SpringMVC框架当发现返回值类型为集合或自定义的对象类型时,
            //会将集合或对象转成JSON格式的字符串,然后再将JSON格式字符串转成二进制数据进行网络传输
            //[{"id":1,"title":"阿迪袜子","price":10.0,"saleCount":1000},{"id":3,"title":"裤子","price":50.0,"saleCount":400},{"id":4,"title":"袜子","price":5.0,"saleCount":100}]
            return mapper.select();
        }
    ​
        //    删除
        @RequestMapping("/delete")
        public void delete(int id) {
            System.out.println("id:" + id);
            mapper.deleteById(id);
        }
    ​
        //   select
        @RequestMapping("selectById")
        public Product selectById(int id) {
            System.out.println("id:" + id);
            return mapper.selectById(id);
        }
    ​
        //    update
        @RequestMapping("/update")
        public void update(@RequestBody Product product) {
            mapper.update(product);
        }
    }
    ​

     

  4. 实现mapper里面的selectById方法

    package cn.tedu.boot41.mapper;
    ​
    import cn.tedu.boot41.entity.Product;
    import org.apache.ibatis.annotations.*;
    ​
    import java.util.List;
    ​
    @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 deleteById(int id);
    ​
        @Select("select * from product where id=#{id}")
        @Result(property = "saleCount",column = "sale_count")
        Product selectById(int id);
    ​
    //    update
        @Update("update product set title=#{title},price=#{price}"+",sale_count=#{saleCount} where id=#{id}")
        void update(Product product);
    }
    ​

     

  5. 给update.html页面中的修改按钮添加点击事件, 点击时向/update地址发出异步的post请求把商品的信息一起提交

  6. 在ProductController里面添加update方法处理/update请求,在方法中掉用mapper的update方法

  7. 实现mapper里面的update方法 .

posted @ 2022-05-13 18:58  约拿小叶  阅读(35)  评论(0)    收藏  举报