简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >商城项目-后台商品发布/前端页面引入/前端用户登录验证中间件/生成订单

商城项目-后台商品发布/前端页面引入/前端用户登录验证中间件/生成订单

岂几岂几
岂几岂几原创
2020年07月10日 00:40:111768浏览

商城项目-后台商品发布/前端页面引入/前端用户登录验证中间件/生成订单

学习心得

  • 要学习朱老师用”模块化”的思想编写前端页面组件, 实现代码复用.

  • laravel的用户验证, 西门老师只领进门, 更多使用还得看手册.

  • 巧妙的添加查询条件, 有效的解决大量数据的读取的效率问题.

1. 后台商品发布/前端页面引入

  • 1.1 发布商品时, 如何加载商品分类

    • 之前老师介绍过, 为消灭关联查询, 把要关联的表, 以 id 做数组 key 的方式查询出来. 这种方式, 对要关联的表, 数据量少的时候, 可以适用. 当数据量很多时, 比如, 淘宝的商品分类表, 就有好几百兆的数据, 没有必要全查出来.
    • 为解决这个问题, 可以在查询出商品分页数据后, 把这些分页商品的分类id做成in参数, 在查询以id做数据key的数组时, 适用in进行过滤, 这样可以减少查询时间消耗.
    • 在新增商品界面, 如果要加载商品分类, 假设商品分类很多, 可以加一个搜索框, 通过搜索框输入的内容异步的去过滤查询商品分类项, 返回的数据拼接字符串形成 <select> 元素的 <option> 列表并渲染即可. 记得最后要 form.render('select') .
      • 模糊查询要用 like , 当分类很多时, 数据库是撑不住的.此时就需要用搜索引擎了, 如: sphinx , elasticsearch .
      • 模糊查询, 可能会匹配到很多数据, 所以查询一定要加限制返回的行数, 像百度搜索 laravel文档 , 其实也只返回权重较高的730条数据而已, 但匹配到的数据上百万条.

  • 大量数据的的读取方式

    • 启用缓存. 如Redis, memerycache等. 先从缓存中读取数据, 如果读取不到, 再冲数据库中获取, 然后保存到缓存中.

  • 1.2 前端页面引入

    • 把共通的部分分离出来, 如头部导航, 底部版权信息等, 使用 blade 引擎的 @include 引入.
    • css也可以使用@import ‘css_url’的方式引入前端模块的css.

2. 前端用户登录验证中间件

  • 2.1 创建前端登录验证中间件

    • 老师总结的三步骤: 创建, 注册和触发.

  • 2.2 使用laravel提供的验证机制进行前端用户登录验证

      1. 照葫芦画瓢, 仿照 User 模型创建一个 Member 模型, 绑定数据库中的前端用户表 member .
      1. 先不用理解, 照老师的讲解, 在 /config/auth.php 中照葫芦画瓢创建一个”防守人”( guard )
      1. 实现前端登录验证中间件并注册之. 在其 handle 方法中, 使用 Auth::guard('member')->guest() 执行登录验证. 使用 guard() 函数指定”防守人”, 如果不调用函数, 则使用laravel默认的”防守人”( user ). guest() 方法则是执行登录验证. 未登录则返回 true .
      1. 同样, 在路由中需要使用前台登录验证中间件的路由上调用 middleware() 方法保护路由.
      1. 如果是前后端分离的项目, 假设项目前端和后端不在同一个域名/服务器中, 因为 session 不能跨服务器共享的原因, 可以改用 /config/auth.php 中声明的另一种驱动方式(对应路由: api.php ): driver => 'token . 具体使用方法要去看文档.

  • tips: 多表更新/插入操作, 是否需要加事务

    • 理论上是要加的, 但会损失部分的性能

    • 但是在实际开发中, 如果订单表(插入)和产品表(减库存)不在同一个数据库服务器, 会比较麻烦, 比较难处理, 索性不加.

  • 生成订单

    • 使用 Auth::guard('member')->user() 获取前端用户信息.

    • 价格是很敏感的字段值, 前端传入的价格不可信, 必须根据商品id从数据库中查询价格.

    • 生成不重复的订单号的方法: 时间戳+用户id+随机数1+随机数2生成订单号, 这样拼接成的订单号出现重复号的概率很低了.

代码清单(部分)

  • 1- 新增商品界面(关注点: 商品分类筛选)
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>新增产品</title>
  8.     <link rel="stylesheet" href="/static/plugin/layui/css/layui.css">
  9.     <script src="/static/plugin/layui/layui.js"></script>
  10.     <!-- ueditor-start -->
  11.     <!-- 配置文件 -->
  12.     <script type="text/javascript" src="/static/plugin/ueditor/ueditor.config.js"></script>
  13.     <!-- 编辑器源码文件 -->
  14.     <script type="text/javascript" src="/static/plugin/ueditor/ueditor.all.js"></script>
  15.     <!-- ueditor-end -->
  16.     <link rel="stylesheet" href="/static/css/product.css">
  17.     <style>
  18.         .hide {
  19.             display: none;
  20.         }
  21.         #cwords, .cid {
  22.             margin-left: 10px;
  23.         }
  24.     </style>
  25. </head>
  27. <body>
  28.     <div class="layui-form">
  29.         @csrf
  30.         <div class="layui-form-item">
  31.             <label for="title" class="layui-form-label">产品名称</label>
  32.             <div class="layui-input-block">
  33.                 <input type="text" class="layui-input" name="title" id="title" value="">
  34.             </div>
  35.         </div>
  36.         <div class="layui-form-item">
  37.             <label for="cid" class="layui-form-label">产品分类</label>
  38.             <div class="layui-input-inline">
  39.                 <input type="text" class="layui-input" name="cwords" id="cwords" oninput="search_cates()">
  40.             </div>
  41.             <div class="layui-input-inline cid">
  42.                 <select name="cid" id="cid"></select>
  43.             </div>
  44.         </div>
  45.         <div class="layui-form-item">
  46.             <label for="thumb" class="layui-form-label">缩略图</label>
  47.             <div class="layui-input-block">
  48.                 <button type="button" class="layui-btn" id="upload">
  49.                     <i class="layui-icon">&#xe67c;</i>上传图片
  50.                 </button>
  51.             </div>
  52.         </div>
  53.         <div class="layui-form-item">
  54.             <label for="subtitle" class="layui-form-label">子标题</label>
  55.             <div class="layui-input-block">
  56.                 <input type="text" class="layui-input" name="subtitle" id="subtitle" value="">
  57.             </div>
  58.         </div>
  59.         <div class="layui-form-item">
  60.             <label for="keywords" class="layui-form-label">关键字</label>
  61.             <div class="layui-input-block">
  62.                 <input type="text" class="layui-input" name="keywords" id="keywords" value="">
  63.             </div>
  64.         </div>
  65.         <div class="layui-form-item">
  66.             <label for="descs" class="layui-form-label">描述</label>
  67.             <div class="layui-input-block">
  68.                 <input type="text" class="layui-input" name="descs" id="descs" value="">
  69.             </div>
  70.         </div>
  71.         <div class="layui-form-item">
  72.             <label for="price" class="layui-form-label">单价</label>
  73.             <div class="layui-input-block">
  74.                 <input type="number" name="price" id="price" class="layui-input" value="0">
  75.             </div>
  76.         </div>
  77.         <div class="layui-form-item">
  78.             <label for="stock" class="layui-form-label">库存</label>
  79.             <div class="layui-input-block">
  80.                 <input type="number" name="stock" id="stock" class="layui-input" value="0">
  81.             </div>
  82.         </div>
  83.         <div class="layui-form-item">
  84.             <label for="pv" class="layui-form-label">浏览量</label>
  85.             <div class="layui-input-block">
  86.                 <input type="number" name="pv" id="pv" class="layui-input" value="0">
  87.             </div>
  88.         </div>
  89.         <div class="layui-form-item">
  90.             <label for="status_0" class="layui-form-label">商品状态</label>
  91.             <div class="layui-input-block">
  92.                 <input type="radio" name="status" id="status_0" value="0" title="未上架" checked>
  93.                 <input type="radio" name="status" id="status_1" value="1" title="已上架">
  94.             </div>
  95.         </div>
  96.         <div class="layui-form-item">
  97.             <label for="content" class="layui-form-label">商品描述</label>
  98.             <div class="layui-input-block">
  99.                 <!-- 加载编辑器的容器 -->
  100.                 <!-- 实际生成的是div. 给div添加contenteditable="true", 这个div就能编辑 -->
  101.                 <script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
  102.             </div>
  103.         </div>
  104.     </div>
  105.     <div id="tong" class="hide">
  106.         <img src="" style="max-width: 100%; max-height: 100%">
  107.     </div>
  108. </body>
  109. <script>
  110.     layui.use(['layer', 'form', 'upload'], function() {
  111.         layer = layui.layer;
  112.         form = layui.form;
  113.         upload = layui.upload;
  114.         $ = layui.jquery;
  117.         //执行实例
  118.         var uploadInst = upload.render({
  119.             elem: '#upload' //绑定元素
  120.             , url: '/admin/upload/pic_upload' //上传接口
  121.             , multiple: true // 多文件上传
  122.             , data: {
  123.                 _token: $('input[name="_token"]').val()
  124.             },
  125.             done: function(res) {
  126.                 //上传完毕回调
  127.                 $('<img name="preview_img" src="' + res.data.src + '" alt="" style="height: 36px; margin-right: 5px;" onclick="big_img(this)">').appendTo($('#upload').parent());
  128.             },
  129.             error: function() {
  130.                 //请求异常回调
  131.             }
  132.         });
  134.         // 实例化编辑器
  135.         /* 第二个参数是配置属性对象 */
  136.         /* 不要写var, 把ue声明为全局变量, 因为其他地方也用到ue对象 */
  137.         /* var */
  138.         ue = UE.getEditor('container', {
  139.             initialFrameWidth: '100%', //初始化编辑器宽度,默认1000
  140.             initialFrameHeight: '500' //初始化编辑器高度,默认320
  141.         });
  142.     });
  144.     function save() {
  145.         var data = {};
  146.         data._token = $('input[name="_token"]').val();
  147.         data.title = $.trim($('#title').val());
  148.         data.cid = $('#cid').val();
  149.         data.subtitle = $.trim($('#subtitle').val());
  150.         data.keywords = $.trim($('#keywords').val());
  151.         data.descs = $.trim($('#descs').val());
  152.         data.price = parseInt($('#price').val());
  153.         data.stock = parseInt($('#stock').val());
  154.         data.pv = parseInt($('#pv').val());
  155.         data.status = $('input[name="status"]:checked').val();
  156.         data.content = ue.getContent();
  157.         // 缩略图
  158.         var thumbs = [];
  159.         $('img[name="preview_img"]').each(function(index, item) {
  160.             thumbs.push(item.src);
  161.         });
  162.         data.thumb = thumbs.join(',');
  164.         // 必填项判空
  165.         var check = inputCheck(data, {title: '标题', cid: '商品分类', keywords: '关键字', descs: '描述', price: '单价', content: '商品描述'});
  166.         if(check.status) {
  167.             return layer.alert(check.message, {icon: 2});
  168.         }
  170.         // 两个数字域的值判断
  171.         if(isNaN(data.price)) {
  172.             return layer.alert('单价必须填数字', {icon: 2});
  173.         }
  174.         if(isNaN(data.pv)) {
  175.             return layer.alert('浏览量必须是数字', {icon: 2});
  176.         }
  178.         // 提交保存
  179.         $.post(
  180.             '/admin/product/save'
  181.             , data
  182.             , function(res) {
  183.                 if(res.status != undefined && res.status == '0') {
  184.                     layer.msg(res.message, {icon: 1});
  185.                     setTimeout(() => {
  186.                         window.parent.location.reload();
  187.                     }, 1000);
  188.                 } else if(res.status != undefined) {
  189.                     layer.alert(res.message, {icon: 2});
  190.                 } else {
  191.                     layer.alert('提交保存失败', {icon: 2});
  192.                 }
  193.             }
  194.             , 'json'
  195.         );
  196.     }
  198.     // 判空
  199.     function inputCheck(data, checkItem) {
  200.         for(key in checkItem) {
  201.             if(data[key] == undefined || data[key] == '') {
  202.                 $('input[name="'+key+'"]').focus();
  203.                 return {status: 1, message: checkItem[key] + '不能为空'};
  204.             }
  205.         }
  206.         return {status: 0};
  207.     }
  209.     // 商品分类关键字搜索
  210.     function search_cates() {
  211.         var search_words = $.trim(event.target.value);
  212.         if(search_words == '') return;
  214.         $.get(
  215.             '/admin/product/search_product_cate'
  216.             , {words: search_words}
  217.             , function(res) {
  218.                 if(res.status != undefined && res.status == 0) {
  219.                     var str = '<option></option>';
  220.                     res.data.forEach(function(item, index) {
  221.                         str += '<option value="'+item.id+'">'+item.title+'</option>' 
  222.                     });
  223.                     $('#cid').html('');
  224.                     $(str).appendTo('#cid');
  225.                     form.render('select');
  226.                 }
  227.             }
  228.             , 'json'
  229.         );
  230.     }
  232.     // 查看大图
  233.     function big_img(img) {
  234.         if (img.src == undefined || img.src == "") {
  235.             return;
  236.         }
  238.         $('#tong > img').attr('src', img.src);
  239.         //页面层-图片
  240.         layer.open({
  241.             type: 1,
  242.             title: false,
  243.             closeBtn: 0,
  244.             area: ['auto'],
  245.             skin: 'layui-layer-nobg', //没有背景色
  246.             shadeClose: true,
  247.             content: $('#tong')
  248.         });
  249.     }
  250. </script>
  252. </html>
  • 2- Member模型
  1. <?php
  3. namespace App;
  5. use Illuminate\Contracts\Auth\MustVerifyEmail;
  6. use Illuminate\Foundation\Auth\User as Authenticatable;
  7. use Illuminate\Notifications\Notifiable;
  9. class Member extends Authenticatable
  10. {
  11.     use Notifiable;
  13.     // 绑定的数据库表名
  14.     protected $table = 'member';    
  16.     /**
  17.      * The attributes that are mass assignable.
  18.      *
  19.      * @var array
  20.      */
  21.     protected $fillable = [
  22.         'name', 'email', 'password',
  23.     ];
  25.     /**
  26.      * The attributes that should be hidden for arrays.
  27.      *
  28.      * @var array
  29.      */
  30.     protected $hidden = [
  31.         'password', 'remember_token',
  32.     ];
  34.     /**
  35.      * The attributes that should be cast to native types.
  36.      *
  37.      * @var array
  38.      */
  39.     protected $casts = [
  40.         'email_verified_at' => 'datetime',
  41.     ];
  42. }
  • 3- /config/auth.php中增加”防守人”配置
  1. <?php
  3. return [
  5.     /*
  6.     |--------------------------------------------------------------------------
  7.     | Authentication Defaults
  8.     |--------------------------------------------------------------------------
  9.     |
  10.     | This option controls the default authentication "guard" and password
  11.     | reset options for your application. You may change these defaults
  12.     | as required, but they're a perfect start for most applications.
  13.     |
  14.     */
  16.     'defaults' => [
  17.         'guard' => 'web',
  18.         'passwords' => 'users',
  19.     ],
  21.     /*
  22.     |--------------------------------------------------------------------------
  23.     | Authentication Guards
  24.     |--------------------------------------------------------------------------
  25.     |
  26.     | Next, you may define every authentication guard for your application.
  27.     | Of course, a great default configuration has been defined for you
  28.     | here which uses session storage and the Eloquent user provider.
  29.     |
  30.     | All authentication drivers have a user provider. This defines how the
  31.     | users are actually retrieved out of your database or other storage
  32.     | mechanisms used by this application to persist your user's data.
  33.     |
  34.     | Supported: "session", "token"
  35.     |
  36.     */
  38.     'guards' => [
  39.         'web' => [
  40.             'driver' => 'session',
  41.             'provider' => 'users',
  42.         ],
  44.         'api' => [
  45.             'driver' => 'token',
  46.             'provider' => 'users',
  47.             'hash' => false,
  48.         ],
  49.         // 照葫芦画瓢, 增加一个供前端登录验证中间件使用的防守人
  50.         'member' => [
  51.             'driver' => 'session',
  52.             'provider' => 'members', 
  53.         ]
  54.     ],
  56.     /*
  57.     |--------------------------------------------------------------------------
  58.     | User Providers
  59.     |--------------------------------------------------------------------------
  60.     |
  61.     | All authentication drivers have a user provider. This defines how the
  62.     | users are actually retrieved out of your database or other storage
  63.     | mechanisms used by this application to persist your user's data.
  64.     |
  65.     | If you have multiple user tables or models you may configure multiple
  66.     | sources which represent each model / table. These sources may then
  67.     | be assigned to any extra authentication guards you have defined.
  68.     |
  69.     | Supported: "database", "eloquent"
  70.     |
  71.     */
  73.     'providers' => [
  74.         'users' => [
  75.             'driver' => 'eloquent',
  76.             'model' => App\User::class,
  77.         ],
  79.         // 照葫芦画瓢, 添加'members'
  80.         'members' => [
  81.             'driver' => 'eloquent',
  82.             'model' => App\Member::class,
  83.         ]
  85.         // 'users' => [
  86.         //     'driver' => 'database',
  87.         //     'table' => 'users',
  88.         // ],
  89.     ],
  91.     /*
  92.     |--------------------------------------------------------------------------
  93.     | Resetting Passwords
  94.     |--------------------------------------------------------------------------
  95.     |
  96.     | You may specify multiple password reset configurations if you have more
  97.     | than one user table or model in the application and you want to have
  98.     | separate password reset settings based on the specific user types.
  99.     |
  100.     | The expire time is the number of minutes that the reset token should be
  101.     | considered valid. This security feature keeps tokens short-lived so
  102.     | they have less time to be guessed. You may change this as needed.
  103.     |
  104.     */
  106.     'passwords' => [
  107.         'users' => [
  108.             'provider' => 'users',
  109.             'table' => 'password_resets',
  110.             'expire' => 60,
  111.             'throttle' => 60,
  112.         ],
  113.     ],
  115.     /*
  116.     |--------------------------------------------------------------------------
  117.     | Password Confirmation Timeout
  118.     |--------------------------------------------------------------------------
  119.     |
  120.     | Here you may define the amount of seconds before a password confirmation
  121.     | times out and the user is prompted to re-enter their password via the
  122.     | confirmation screen. By default, the timeout lasts for three hours.
  123.     |
  124.     */
  126.     'password_timeout' => 10800,
  128. ];
  • 4- 前端登录验证中间件
  1. <?php
  2. namespace App\Http\Middleware;
  4. use App\Http\helper\CodeHelper;
  5. use Closure;
  6. use Illuminate\Support\Facades\Auth;
  7. use Illuminate\Support\Facades\DB;
  9. /* 前端验证登录中间件 */
  10. class AuthMember {
  12.     public function handle($request, Closure $next, $guard = null) {
  13.         // guard()方法是指定使用哪个"防守人"来验证; 不调用guard()方法, 则默认为'user';
  14.         // guest()方法返回一个布尔值, 为真时, 表示当前没有用户登录
  15.         if(Auth::guard('member')->guest()) { // 验证失败了, 用户没登录
  16.             // 如果是ajax请求, 则返回相应
  17.             if($request->ajax()) {
  18.                 $response = ['status' => 401, 'message' => '请先登录'];
  19.                 return response(json_encode($response), 200);
  20.             }
  22.             // 否则, 重定向到'member/login'路由
  23.             return redirect()->guest('member/login');
  24.         }
  26.         return $next($request);
  27.     }
  28. }
  • 注册中间件和路由略.
    1. 商品详情页(关注点: 立刻购买逻辑)
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!--    当前文档要用到阿里字体图标-->
  6.     <link rel="stylesheet" href="/static/font/iconfont.css">
  7.     <link rel="stylesheet" href="/static/css/shop/shop_detail.css">
  8.     <title>商城详情页</title>
  9.     <script src="/static/js/jquery3.4.1.js"></script>
  10.     <link rel="stylesheet" href="/static/plugin/layui/css/layui.css">
  11.     <script src="/static/plugin/layui/layui.js"></script>
  12. </head>
  13. <body>
  14. <!--公共页眉-->
  15. @include('/front/public/header')
  18. <!--主体全部放在main元素中-->
  19. <main>
  20. <!--    商城公共头部-->
  21.     <!--logo+搜索框+快捷入口区-->
  22.     @include('/front/public/header_search')
  24.     <!--为商品详情区块单独创建一个包含块,方便用网格布局-->
  25.     <div class="detail">
  26.         <!--商城详情页上部购买组件-->
  27.         <div class="shop-detail-bug">
  28.             <!--头部面包屑导航-->
  29.             <nav>
  30.                 <a href="">首页&nbsp;&gt;&nbsp;</a>
  31.                 <a href="">图片写真&nbsp;&gt;&nbsp;</a>
  32.                 <a href="">日本&nbsp;&gt;&nbsp;</a>
  33.                 <a href="">颖宝宝</a>
  34.             </nav>
  36.             <article>
  37.                 @csrf
  38.                 <input type="hidden" name="id" value="{{$product['id']}}">
  39.                 <span><img src="{{$product['thumb']}}" alt=""></span>
  40.                 <div>
  41.                     <!--商品标题-->
  42.                     <h3>{{$product['title']}}</h3>
  43.                     <!--商品价格-->
  44.                     <div class="price">
  45.                         <span>本站特惠:</span>
  46.                         <span>&yen;{{$product['price']}}</span>
  47.                     </div>
  48.                     <!--基本描述-->
  49.                     <div class="desc">
  50.                         销量: <span>13</span>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
  51.                         累积评价: <span>3</span>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
  52.                         好评率: <span>199%</span>
  53.                     </div>
  54.                     <!-- 购买数量-->
  55.                     <div class="buy-num">
  56.                         <label for="num">购买数量:</label><input type="number" id="num" value="1">
  57.                     </div>
  58.                     <!--购买按钮-->
  59.                     <div class="buy-btn">
  60.                         <button type="button" onclick="buy()">立即购买</button>
  61.                         <button><i class="iconfont icon-icon_tianjia"></i>加入购物车</button>
  62.                     </div>
  63.                     <!--售后承诺-->
  64.                     <div class="promise">
  65.                         <span><i class="iconfont icon-zhanghaoquanxianguanli"></i>本站保障</span>
  66.                         <span><i class="iconfont icon-icon_safety"></i>企业认证</span>
  67.                         <span><i class="iconfont icon-tianshenpi"></i>退款承诺</span>
  68.                         <span><i class="iconfont icon-kuaisubianpai"></i>免费换货</span>
  69.                     </div>
  70.                 </div>
  71.             </article>
  72.         </div>
  74.         <!--商城详情页左下推荐商品列表-->
  75.         <div class="shop-detail-recommend">
  76.             <h3>推荐商品</h3>
  77.             <div>
  78.                 <a href="">
  79.                     <img src="/static/images/shop/shop1.jpg" alt="">
  80.                 </a>
  81.                 <a href="">韩国美女最新海报促销美妆写真图集</a>
  82.                 <div class="hot">
  83.                     <span>热销:</span><span>8976</span>
  84.                     <span>价格:</span><span>&yen;99</span>
  85.                 </div>
  86.             </div>
  87.             <div>
  88.                 <a href="">
  89.                     <img src="/static/images/shop/shop2.jpg" alt="">
  90.                 </a>
  91.                 <a href="">韩国美女最新海报促销美妆写真图集</a>
  92.                 <div class="hot">
  93.                     <span>热销:</span><span>324</span>
  94.                     <span>价格:</span><span>&yen;798</span>
  95.                 </div>
  96.             </div>
  97.             <div>
  98.                 <a href="">
  99.                     <img src="/static/images/shop/shop3.jpg" alt="">
  100.                 </a>
  101.                 <a href="">韩国美女最新海报促销美妆写真图集</a>
  102.                 <div class="hot">
  103.                     <span>热销:</span><span>678</span>
  104.                     <span>价格:</span><span>&yen;630</span>
  105.                 </div>
  106.             </div>
  107.             <div>
  108.                 <a href="">
  109.                     <img src="/static/images/shop/shop4.jpg" alt="">
  110.                 </a>
  111.                 <a href="">韩国美女最新海报促销美妆写真图集</a>
  112.                 <div class="hot">
  113.                     <span>热销:</span><span>12</span>
  114.                     <span>价格:</span><span>&yen;980</span>
  115.                 </div>
  116.             </div>
  117.         </div>
  119.         <!--商城详情页右下详情选项卡-->
  120.         <div class="shop-detail-tab">
  121.             <div class="tab">
  122.                 <span class="active">商品详情</span>
  123.                 <span>案例/演示</span>
  124.                 <span>常见问题</span>
  125.                 <span>累计评价</span>
  126.                 <span>产品咨询</span>
  127.             </div>
  128.             <div class="content">{!!$product['content']!!}</div>
  129.         </div>
  131.         <!--评论与回复-->
  132.         <div class="public-comment-reply">
  133.             <!--    评论区-->
  134.             <div class="comment">
  135.                 <h3>我要评论</h3>
  136.                 <div>
  137.                     <label for="comment"><img src="/static/images/user.png" alt=""></label>
  138.                     <textarea name="" id="comment"></textarea>
  139.                 </div>
  140.                 <button>发表评论</button>
  141.             </div>
  143.             <!--    回复区-->
  144.             <div class="reply">
  145.                 <h3>最新回复</h3>
  146.                 <div>
  147.                     <img src="/static/images/user.png" alt="">
  148.                     <div class="detail">
  149.                         <span>用户昵称</span>
  150.                         <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  151.                         <div>
  152.                             <span>2019-12-12 15:34:23发表</span>
  153.                             <span><i class="iconfont icon-dianzan"></i>回复</span>
  154.                         </div>
  155.                     </div>
  156.                 </div>
  158.                 <div>
  159.                     <img src="/static/images/user.png" alt="">
  160.                     <div class="detail">
  161.                         <span>用户昵称</span>
  162.                         <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  163.                         <div>
  164.                             <span>2019-12-12 15:34:23发表</span>
  165.                             <span><i class="iconfont icon-dianzan"></i>回复</span>
  166.                         </div>
  167.                     </div>
  168.                 </div>
  170.                 <div>
  171.                     <img src="/static/images/user.png" alt="">
  172.                     <div class="detail">
  173.                         <span>用户昵称</span>
  174.                         <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  175.                         <div>
  176.                             <span>2019-12-12 15:34:23发表</span>
  177.                             <span><i class="iconfont icon-dianzan"></i>回复</span>
  178.                         </div>
  179.                     </div>
  180.                 </div>
  182.                 <div>
  183.                     <img src="/static/images/user.png" alt="">
  184.                     <div class="detail">
  185.                         <span>用户昵称</span>
  186.                         <span>留言内容: php中文网,是一个有温度,有思想的学习平台</span>
  187.                         <div>
  188.                             <span>2019-12-12 15:34:23发表</span>
  189.                             <span><i class="iconfont icon-dianzan"></i>回复</span>
  190.                         </div>
  191.                     </div>
  192.                 </div>
  193.             </div>
  194.         </div>
  195.     </div>
  199. </main>
  201. <!--公共页脚-->
  202. @include('/front/public/footer')
  203. </body>
  204. <script>
  205.     layui.use(['layer'], function() {
  206.         layer = layui.layer;
  207.     });
  209.     function buy() {
  210.         $data = {};
  211.         $data.id = parseInt($('input[name="id"]').val());
  212.         $data._token = $('input[name="_token"]').val();
  213.         $data.buy_count = $("#num").val();
  214.         if(isNaN($data.id)) {
  215.             return layer.alert('参数错误', {icon: 2});
  216.         }
  218.         // 下订单
  219.         $.post(
  220.             '/shop/create_order'
  221.             , $data
  222.             , function(res) {
  223.                 if(res.status != undefined && res.status == 401) {// 用户未登录
  224.                     layer.open({
  225.                         type: 2,
  226.                         title: '登录',
  227.                         shadowClose: false,
  228.                         shadow: 0.5,
  229.                         area: ['400px', '250px'],
  230.                         content: '/account/login'
  231.                     });
  232.                 } else if(res.status != undefined && res.status == '0') {// 下单成功
  233.                     layer.alert(res.message, {icon: 1});
  235.                     layer.open({
  236.                         type: 2,
  237.                         title: '扫码支持',
  238.                         shadowClose: false,
  239.                         shadow: 0.5,
  240.                         area: ['400px', '400px'],
  241.                         content: '/shop/pay'
  242.                     });
  243.                 } else if(res.status != undefined) {
  244.                     return layer.alert(res.message, {icon: 2});
  245.                 }
  246.             }
  247.             , 'json'
  248.         );
  249.     }
  250. </script>
  251. </html>
  • 6- 生成订单的控制器方法
  1. // 下订单
  2. public function createOrder(Request $req) {
  3.     // 登录用户
  4.     $member = Auth::guard('member')->user();
  5.     // 商品id
  6.     $pro_id = (int) $req->id;
  7.     $product = DB::table('product')->where([['id', $pro_id], ['status', 1]])->getFirst();
  8.     if(!$product) {
  9.         return CodeHelper::failure_json('该商品不存在或未上架');
  10.     }
  11.     // 无货或供货不足
  12.     if($product['stock'] < 0 || $product['stock'] < $req->buycount) {
  13.         return CodeHelper::failure_json('库存不足');
  14.     }
  16.     // 使用时间戳+用户id+随机数1+随机数2生成订单号(这样拼接成的订单号出现重复号的概率很低了)
  17.     $data['ord_no'] = time() . $member->id . rand(100, 500) . rand(501, 999);
  18.     // 购买人id
  19.     $data['member_id'] = (int) $member->id;
  20.     // 商品id
  21.     $data['pro_id'] = $pro_id;
  22.     // 购买数量
  23.     $data['count'] = $req->buy_count;
  24.     // 金额
  25.     $data['money'] = $req->buy_count * $product['price'];// 一定要从数据库里获取商品价格, 前端传过来的价格都不可信
  26.     // 
  27.     $data['add_time'] = time();
  29.     // 保存订单
  30.     $oid = DB::table('orders')->insertGetId($data);
  31.     // 减库存(用laravel提供的decrement()方法减库存)
  32.     DB::table('product')->where('id', $pro_id)->decrement('stock', $req->buy_count);
  34.     return CodeHelper::success_json('下单成功');
  35. }
上一条：抖音私信xml名片是什么？下一条：css3 3D立方体
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多