UNIAPP实战项目笔记61 注册成功后直接登录

今天药忘吃喽~ 2024-03-24 17:28 175阅读 0赞

UNIAPP实战项目笔记61 注册成功后直接登录

注册成功时,直接再去查询数据库成功注册的数据,并返回给前端
前端获取注册成功后的返回数据,直接写入登录状态

实际案例图片

195f699c1ae64855a9ed21de4e2f1549.png

后端接口文件 index.js

  1. var express = require('express');
  2. var router = express.Router();
  3. var connection = require('../db/sql.js');
  4. var user = require('../db/UserSql.js');
  5. // 验证码
  6. let code = '';
  7. // 接入短信的sdk
  8. // var QcloudSms = require('qcloudsms_js');
  10. //设置跨域访问（设置在所有的请求前面即可）
  11. router.all("*", function (req, res, next) {
  13.     //设置允许跨域的域名，*代表允许任意域名跨域
  14.     res.header("Access-Control-Allow-Origin", "*");
  15.     //允许的header类型
  16.     res.header("Access-Control-Allow-Headers", "content-type");
  17.     //跨域允许的请求方式 
  18.     // res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
  19.     res.header("Access-Control-Allow-Methods", "*");
  20.     res.header("Content-Type", "application/json;chartset=utf-8");
  21.     // if (req.method == 'OPTIONS')
  22.     //     res.sendStatus(200); //让options尝试请求快速结束
  23.     // else
  24.         next();
  25. });
  29. /* GET home page. */
  30. router.get('/', function(req, res, next) {
  32.   res.render('index', {
  33.      title: 'Express' });
  34. });
  39. /* 测试token数据. */
  40. router.post('/api/ceshi', function(req, res, next) {
  42.     console.log(111);
  43.     res.send({
  45.         data:{
  47.             aaa:'1111'
  48.         }
  49.     });
  50. });
  54. /* 注册->增加一条数据. */
  55. router.post('/api/addUser', function(req, res, next) {
  57.     // 前端给后端的数据
  58.     let params = {
  60.         userName:req.body.userName,
  61.         userCode:req.body.code
  62.     };
  63.     if( params.userCode == code ){
  65.         connection.query( user.insertData( params ),function(error,results, fields){
  67.             // 再去查询手机号是否存在,用于注册成功后直接登录
  68.             connection.query(user.queryUserName(params),function(er,result){
  70.                 if(results.length > 0){
  72.                     res.send({
  74.                         data:{
  76.                             success:true,
  77.                             msg:'注册成功',
  78.                             data:result[0]
  79.                         }
  80.                     });
  82.                 }
  83.             });
  85.             // res.send({
  87.             //     data:{
  89.             //         success:true,
  90.             //         msg:'注册成功'
  91.             //     }
  92.             // });
  93.         });
  94.     }
  95. });
  98. /* 发送验证码 */
  99. router.post('/api/code', function(req, res, next) {
  101.     // 前端给后端的数据
  102.     let params = {
  104.         userName : req.body.userName
  105.     }
  106.     // 短信SDK 可以使用阿里云或腾讯云的,具体接入方式以官方NodeJS代码案例
  107.     // ....
  108.     // 阿里云 官方代码 https://help.aliyun.com/document_detail/112185.html
  109.     // 腾讯云 官方代码 https://cloud.tencent.com/developer/article/1987501
  110.     // ....
  111.     // ....
  112.     var paramss = [ Math.floor( Math.random()*(9999-1000)+1000 ) ] // 要发送的验证码
  113.     // 模拟以获取到验证码
  114.     code = paramss[0];
  115.     console.log(code);
  117.     // 模拟成功返回验证码
  118.     res.send({
  120.         data:{
  122.             success:true,
  123.             code : paramss[0]
  124.         }
  125.     })
  126. })
  129. /* 注册验证手机号是否存在 */
  130. router.post('/api/registered', function(req, res, next) {
  132.     // 前端给后端的数据
  133.     let params = {
  135.         userName : req.body.phone
  136.     }
  137.     // 查询手机号是否存在
  138.     connection.query(user.queryUserName(params),function(error,results,fields){
  140.         if(results.length > 0){
  142.             res.send({
  144.                 data:{
  146.                     success:false,
  147.                     msg:"手机号已经存在!"
  148.                 }
  149.             });
  150.         }else{
  152.             res.send({
  154.                 data:{
  156.                     success:true
  157.                 }
  158.             });
  159.         }
  160.     })
  162. });
  165. /* 用户登录 */
  166. router.post('/api/login', function(req, res, next) {
  168.     // 前端给后端的数据
  169.     let params = {
  171.         userName : req.body.userName,
  172.         userPwd : req.body.userPwd
  173.     }
  174.     // 查询用户名或手机号是否存在
  175.     connection.query(user.queryUserName(params),function(error,results,fields){
  177.         if(results.length > 0){
  179.             connection.query(user.queryUserPwd(params),function(erro,result){
  181.                 if(result.length > 0){
  183.                     res.send({
  185.                         data:{
  187.                             success:true,
  188.                             msg:"登录成功!",
  189.                             data:result[0]
  190.                         }
  191.                     });
  193.                 }else{
  195.                     res.send({
  197.                         data:{
  199.                             success:false,
  200.                             msg:"密码不正确!"
  201.                         }
  202.                     });
  203.                 }
  204.             })
  206.         }else{
  208.             res.send({
  210.                 data:{
  212.                     success:false,
  213.                     msg:"用户名或手机号不存在!"
  214.                 }
  215.             });
  216.         }
  217.     })
  219. });
  222. /* GET databases goods Detail. */
  223. router.get('/api/goods/id', function(req, res, next) {
  225.     let id = req.query.id;
  226.     connection.query("select * from goods_search where id='"+id+"'",function(error,result,fields){
  228.         if(error) throw error;
  229.         res.send({
  231.             code:"0",
  232.             data:result
  233.         })
  234.     })
  235. });
  237. /* GET List Page */
  238. router.get('/api/goods/list', function(req, res, next) {
  240.   res.send({
  242.       code:0,
  243.       name:"家居家纺",
  244.       data:[
  245.           {
  247.               id:1,
  248.               name:"家纺",
  249.               data:[
  250.                 {
  252.                   name:"家纺",
  253.                   list:[
  254.                       {
  256.                           id:1,
  257.                           name:"毛巾/浴巾",
  258.                           imgUrl:"/static/logo.png"
  259.                       },
  260.                       {
  262.                           id:2,
  263.                           name:"枕头",
  264.                           imgUrl:"/static/logo.png"
  265.                       }
  266.                   ]
  267.                 },
  268.                 {
  270.                   name:"生活用品",
  271.                   list:[
  272.                       {
  274.                           id:1,
  275.                           name:"浴室用品",
  276.                           imgUrl:"/static/logo.png"
  277.                       },
  278.                       {
  280.                           id:2,
  281.                           name:"洗晒",
  282.                           imgUrl:"/static/logo.png"
  283.                       }
  284.                   ]
  285.               }
  286.             ]
  288.           },
  289.           {
  291.               id:2,
  292.               name:"女装",
  293.               data:[
  294.                 {
  296.                   name:"裙装",
  297.                   list:[
  298.                       {
  300.                           id:1,
  301.                           name:"连衣裙",
  302.                           imgUrl:"/static/logo.png"
  303.                       },
  304.                       {
  306.                           id:2,
  307.                           name:"半身裙",
  308.                           imgUrl:"/static/logo.png"
  309.                       }
  310.                   ]
  311.                 },
  312.                 {
  314.                   name:"上衣",
  315.                   list:[
  316.                       {
  318.                           id:1,
  319.                           name:"T恤",
  320.                           imgUrl:"/static/logo.png"
  321.                       },
  322.                       {
  324.                           id:2,
  325.                           name:"衬衫",
  326.                           imgUrl:"/static/logo.png"
  327.                       }
  328.                   ]
  329.               }
  330.             ]
  332.           }
  334.       ]
  335.   });
  336. });
  338. /* GET databases goods. */
  339. router.get('/api/goods/search', function(req, res, next) {
  341.     /* 
  342.         desc 降序 asc 升序    
  343.     */
  344.     // 获取对象的key
  345.     let [goodsName,orderName] = Object.keys(req.query);
  346.     // name参数的值
  347.     let name = req.query.name;
  348.     // orderName的key值
  349.     let order = req.query[orderName];
  351.     let sql = "select * from goods_search";
  352.     if(!(name == undefined || orderName == undefined || order == undefined)){
  354.         sql = "select * from goods_search where name like '%"+name+"%' order by "+orderName+" "+order;
  355.     }
  357.     connection.query(sql,function(error,results,fields){
  359.         res.send({
  361.             code:"0",
  362.             data:results
  363.         });
  364.     })
  365. });
  367. /* 首页第一次触底的数据 */
  368. router.get('/api/index_list/1/data/2', function(req, res, next) {
  370.   res.send({
  372.       code:"0",
  373.       data:[          
  374.           {
  376.               type:"commodityList",
  377.               data:[
  378.                   {
  380.                       id:1,
  381.                       imgUrl:"../../static/logo.png",
  382.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  383.                       pprice:"299",
  384.                       oprice:"659",
  385.                       discount:"5.2"
  386.                   },
  387.                   {
  389.                       id:2,
  390.                       imgUrl:"../../static/logo.png",
  391.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  392.                       pprice:"299",
  393.                       oprice:"659",
  394.                       discount:"5.2"
  395.                   },{
  397.                       id:3,
  398.                       imgUrl:"../../static/logo.png",
  399.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  400.                       pprice:"299",
  401.                       oprice:"659",
  402.                       discount:"5.2"
  403.                   },
  404.                   {
  406.                       id:4,
  407.                       imgUrl:"../../static/logo.png",
  408.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  409.                       pprice:"299",
  410.                       oprice:"659",
  411.                       discount:"5.2"
  412.                   },
  413.               ]
  414.           },
  416.       ]
  417.   });
  418. });
  420. /* 运动户外第二次触底的数据 */
  421. router.get('/api/index_list/2/data/3', function(req, res, next) {
  423.   res.send({
  425.       code:"0",
  426.       data:[          
  427.           {
  429.               type:"commodityList",
  430.               data:[
  431.                   {
  433.                       id:1,
  434.                       imgUrl:"../../static/logo.png",
  435.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  436.                       pprice:"299",
  437.                       oprice:"659",
  438.                       discount:"5.2"
  439.                   },
  440.                   {
  442.                       id:2,
  443.                       imgUrl:"../../static/logo.png",
  444.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  445.                       pprice:"299",
  446.                       oprice:"659",
  447.                       discount:"5.2"
  448.                   },{
  450.                       id:3,
  451.                       imgUrl:"../../static/logo.png",
  452.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  453.                       pprice:"299",
  454.                       oprice:"659",
  455.                       discount:"5.2"
  456.                   },
  457.                   {
  459.                       id:4,
  460.                       imgUrl:"../../static/logo.png",
  461.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  462.                       pprice:"299",
  463.                       oprice:"659",
  464.                       discount:"5.2"
  465.                   },
  466.               ]
  467.           },
  469.       ]
  470.   });
  471. });
  473. /* 运动户外第一次触底的数据 */
  474. router.get('/api/index_list/2/data/2', function(req, res, next) {
  476.   res.send({
  478.       code:"0",
  479.       data:[          
  480.           {
  482.               type:"commodityList",
  483.               data:[
  484.                   {
  486.                       id:1,
  487.                       imgUrl:"../../static/logo.png",
  488.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  489.                       pprice:"299",
  490.                       oprice:"659",
  491.                       discount:"5.2"
  492.                   },
  493.                   {
  495.                       id:2,
  496.                       imgUrl:"../../static/logo.png",
  497.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  498.                       pprice:"299",
  499.                       oprice:"659",
  500.                       discount:"5.2"
  501.                   },{
  503.                       id:3,
  504.                       imgUrl:"../../static/logo.png",
  505.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  506.                       pprice:"299",
  507.                       oprice:"659",
  508.                       discount:"5.2"
  509.                   },
  510.                   {
  512.                       id:4,
  513.                       imgUrl:"../../static/logo.png",
  514.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  515.                       pprice:"299",
  516.                       oprice:"659",
  517.                       discount:"5.2"
  518.                   },
  519.               ]
  520.           },
  522.       ]
  523.   });
  524. });
  527. /* 运动户外第一次加载的数据 */
  528. router.get('/api/index_list/2/data/1', function(req, res, next) {
  530.   res.send({
  532.       code:"0",
  533.       data:[          
  534.           {
  536.             type:"bannerList",
  537.             imgUrl:"../../static/img/b3.jpg",
  538.           },
  539.           {
  541.               type:"iconsList",
  542.               data:[
  543.                   {
  544.     imgUrl:"../../static/logo.png",name:"运动户外"},
  545.                   {
  546.     imgUrl:"../../static/logo.png",name:"运动户外"},
  547.                   {
  548.     imgUrl:"../../static/logo.png",name:"运动户外"},
  549.                   {
  550.     imgUrl:"../../static/logo.png",name:"运动户外"},
  551.                   {
  552.     imgUrl:"../../static/logo.png",name:"运动户外"},
  553.                   {
  554.     imgUrl:"../../static/logo.png",name:"运动户外"},
  555.                   {
  556.     imgUrl:"../../static/logo.png",name:"运动户外"},
  557.                   {
  558.     imgUrl:"../../static/logo.png",name:"运动户外"}
  559.               ]
  560.           },
  561.           {
  563.               type:"hotList",
  564.               data:[
  565.                   {
  567.                       id:1,
  568.                       imgUrl:"../../static/logo.png",
  569.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  570.                       pprice:"299",
  571.                       oprice:"659",
  572.                       discount:"5.2"
  573.                   },
  574.                   {
  576.                       id:2,
  577.                       imgUrl:"../../static/logo.png",
  578.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  579.                       pprice:"299",
  580.                       oprice:"659",
  581.                       discount:"5.2"
  582.                   },{
  584.                       id:3,
  585.                       imgUrl:"../../static/logo.png",
  586.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  587.                       pprice:"299",
  588.                       oprice:"659",
  589.                       discount:"5.2"
  590.                   }
  591.               ]
  592.           },
  593.           {
  595.               type:"shopList",
  596.               data:[
  597.                   {
  599.                       bigUrl:"../../static/img/b3.jpg",
  600.                       data:[
  601.                           {
  603.                               id:1,
  604.                               imgUrl:"../../static/logo.png",
  605.                               name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  606.                               pprice:"299",
  607.                               oprice:"659",
  608.                               discount:"5.2"
  609.                           },
  610.                           {
  612.                               id:2,
  613.                               imgUrl:"../../static/logo.png",
  614.                               name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  615.                               pprice:"299",
  616.                               oprice:"659",
  617.                               discount:"5.2"
  618.                           },{
  620.                               id:3,
  621.                               imgUrl:"../../static/logo.png",
  622.                               name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  623.                               pprice:"299",
  624.                               oprice:"659",
  625.                               discount:"5.2"
  626.                           },
  627.                           {
  629.                               id:4,
  630.                               imgUrl:"../../static/logo.png",
  631.                               name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  632.                               pprice:"299",
  633.                               oprice:"659",
  634.                               discount:"5.2"
  635.                           }
  636.                       ]
  637.                   }
  638.               ],
  639.           },
  640.           {
  642.               type:"commodityList",
  643.               data:[
  644.                   {
  646.                       id:1,
  647.                       imgUrl:"../../static/logo.png",
  648.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  649.                       pprice:"299",
  650.                       oprice:"659",
  651.                       discount:"5.2"
  652.                   },
  653.                   {
  655.                       id:2,
  656.                       imgUrl:"../../static/logo.png",
  657.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  658.                       pprice:"299",
  659.                       oprice:"659",
  660.                       discount:"5.2"
  661.                   },{
  663.                       id:3,
  664.                       imgUrl:"../../static/logo.png",
  665.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  666.                       pprice:"299",
  667.                       oprice:"659",
  668.                       discount:"5.2"
  669.                   },
  670.                   {
  672.                       id:4,
  673.                       imgUrl:"../../static/logo.png",
  674.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  675.                       pprice:"299",
  676.                       oprice:"659",
  677.                       discount:"5.2"
  678.                   },
  679.               ]
  680.           },
  682.       ]
  683.   });
  684. });
  686. /* 服饰内衣第一次加载的数据 */
  687. router.get('/api/index_list/3/data/1', function(req, res, next) {
  689.   res.send({
  691.       code:"0",
  692.       data:[          
  693.           {
  695.             type:"bannerList",
  696.             imgUrl:"../../static/img/b3.jpg",
  697.           },
  698.           {
  700.               type:"iconsList",
  701.               data:[
  702.                   {
  703.     imgUrl:"../../static/logo.png",name:"服饰内衣"},
  704.                   {
  705.     imgUrl:"../../static/logo.png",name:"服饰内衣"},
  706.                   {
  707.     imgUrl:"../../static/logo.png",name:"服饰内衣"},
  708.                   {
  709.     imgUrl:"../../static/logo.png",name:"服饰内衣"},
  710.                   {
  711.     imgUrl:"../../static/logo.png",name:"服饰内衣"},
  712.                   {
  713.     imgUrl:"../../static/logo.png",name:"服饰内衣"},
  714.                   {
  715.     imgUrl:"../../static/logo.png",name:"服饰内衣"},
  716.                   {
  717.     imgUrl:"../../static/logo.png",name:"服饰内衣"}
  718.               ]
  719.           },
  720.           {
  722.               type:"hotList",
  723.               data:[
  724.                   {
  726.                       id:1,
  727.                       imgUrl:"../../static/logo.png",
  728.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  729.                       pprice:"299",
  730.                       oprice:"659",
  731.                       discount:"5.2"
  732.                   },
  733.                   {
  735.                       id:2,
  736.                       imgUrl:"../../static/logo.png",
  737.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  738.                       pprice:"299",
  739.                       oprice:"659",
  740.                       discount:"5.2"
  741.                   },{
  743.                       id:3,
  744.                       imgUrl:"../../static/logo.png",
  745.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  746.                       pprice:"299",
  747.                       oprice:"659",
  748.                       discount:"5.2"
  749.                   }
  750.               ]
  751.           },
  752.           {
  754.               type:"shopList",
  755.               data:[
  756.                   {
  758.                       bigUrl:"../../static/img/b3.jpg",
  759.                       data:[
  760.                           {
  762.                               id:1,
  763.                               imgUrl:"../../static/logo.png",
  764.                               name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  765.                               pprice:"299",
  766.                               oprice:"659",
  767.                               discount:"5.2"
  768.                           },
  769.                           {
  771.                               id:2,
  772.                               imgUrl:"../../static/logo.png",
  773.                               name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  774.                               pprice:"299",
  775.                               oprice:"659",
  776.                               discount:"5.2"
  777.                           },{
  779.                               id:3,
  780.                               imgUrl:"../../static/logo.png",
  781.                               name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  782.                               pprice:"299",
  783.                               oprice:"659",
  784.                               discount:"5.2"
  785.                           },
  786.                           {
  788.                               id:4,
  789.                               imgUrl:"../../static/logo.png",
  790.                               name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  791.                               pprice:"299",
  792.                               oprice:"659",
  793.                               discount:"5.2"
  794.                           }
  795.                       ]
  796.                   }
  797.               ],
  798.           },
  799.           {
  801.               type:"commodityList",
  802.               data:[
  803.                   {
  805.                       id:1,
  806.                       imgUrl:"../../static/logo.png",
  807.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  808.                       pprice:"299",
  809.                       oprice:"659",
  810.                       discount:"5.2"
  811.                   },
  812.                   {
  814.                       id:2,
  815.                       imgUrl:"../../static/logo.png",
  816.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  817.                       pprice:"299",
  818.                       oprice:"659",
  819.                       discount:"5.2"
  820.                   },{
  822.                       id:3,
  823.                       imgUrl:"../../static/logo.png",
  824.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  825.                       pprice:"299",
  826.                       oprice:"659",
  827.                       discount:"5.2"
  828.                   },
  829.                   {
  831.                       id:4,
  832.                       imgUrl:"../../static/logo.png",
  833.                       name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  834.                       pprice:"299",
  835.                       oprice:"659",
  836.                       discount:"5.2"
  837.                   },
  838.               ]
  839.           },
  841.       ]
  842.   });
  843. });
  845. /* 首页推荐数据 */
  846. router.get('/api/index_list/data', function(req, res, next) {
  848.   res.send({
  850.       "code":0,
  851.       "data":{
  853.           topBar:[
  854.               {
  855.     id:1,name:'推荐'},
  856.               {
  857.     id:2,name:'运动户外'},
  858.               {
  859.     id:3,name:'服饰内衣'},
  860.               {
  861.     id:4,name:'鞋靴箱包'},
  862.               {
  863.     id:5,name:'美妆个护'},
  864.               {
  865.     id:6,name:'家居数码'},
  866.               {
  867.     id:7,name:'食品母婴'}
  868.           ],
  869.           data:[
  870.               {
  872.                   type:"swiperList",
  873.                   data:[
  874.                       {
  875.     imgUrl:'/static/img/b3.jpg'},
  876.                       {
  877.     imgUrl:'/static/img/b3.jpg'},
  878.                       {
  879.     imgUrl:'/static/img/b3.jpg'}
  880.                   ]
  881.               },{
  883.                   type:"recommendList",
  884.                   data:[
  885.                       {
  887.                           bigUrl:"../../static/img/b3.jpg",
  888.                           data:[
  889.                               {
  890.     imgUrl:'../../static/logo.png'},
  891.                               {
  892.     imgUrl:'../../static/logo.png'},
  893.                               {
  894.     imgUrl:'../../static/logo.png'}
  895.                           ]
  896.                       },{
  898.                           bigUrl:"../../static/img/b3.jpg",
  899.                           data:[
  900.                               {
  901.     imgUrl:'../../static/logo.png'},
  902.                               {
  903.     imgUrl:'../../static/logo.png'},
  904.                               {
  905.     imgUrl:'../../static/logo.png'}
  906.                           ]
  907.                       }
  908.                   ]
  909.               },{
  911.                   type:"commodityList",
  912.                   data:[
  913.                       {
  915.                           id:1,
  916.                           imgUrl:"../../static/logo.png",
  917.                           name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  918.                           pprice:"299",
  919.                           oprice:"659",
  920.                           discount:"5.2"
  921.                       },
  922.                       {
  924.                           id:2,
  925.                           imgUrl:"../../static/logo.png",
  926.                           name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  927.                           pprice:"299",
  928.                           oprice:"659",
  929.                           discount:"5.2"
  930.                       },{
  932.                           id:3,
  933.                           imgUrl:"../../static/logo.png",
  934.                           name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  935.                           pprice:"299",
  936.                           oprice:"659",
  937.                           discount:"5.2"
  938.                       },
  939.                       {
  941.                           id:4,
  942.                           imgUrl:"../../static/logo.png",
  943.                           name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
  944.                           pprice:"299",
  945.                           oprice:"659",
  946.                           discount:"5.2"
  947.                       },
  948.                   ]
  949.               },
  950.           ]
  951.       }
  952.   })
  953. });
  957. module.exports = router;

手机号注册页面 login-code.vue

  1. <template>
  2.     <view>
  3.         <Lines></Lines>
  4.         <view class="login-tel">
  5.             <view class="tel-main">
  6.                 <view class="login-from">
  7.                     <view class="login-user">
  8.                         <text class="user-text">验证码</text>
  9.                         <input type="text" focus="true" v-model="userCode" placeholder="请输入验证码">
  10.                         <button plain="true" size="mini" :disabled="disabled" @tap="sendCode">{
  11.     {
  12.     codeMsg}}</button>
  13.                     </view>
  14.                 </view>
  15.                 <view class="tel" @click="getNextIndex">下一步</view>
  16.             </view>
  17.         </view>
  18.     </view>
  19. </template>
  21. <script>
  22.     import $http from '@/common/api/request.js'
  23.     import Lines from '@/components/common/Lines.vue'
  24.     import {
  25.     mapMutations} from 'vuex'
  26.     export default {
  28.         data() {
  30.             return {
  32.                 //用户输入的验证码
  33.                 userCode:"",
  34.                 // 倒计时时间
  35.                 codeNum:60,
  36.                 // 显示的文本
  37.                 codeMsg:"",
  38.                 // 按钮是否禁用
  39.                 disabled:false,
  40.                 // 手机号
  41.                 phone:'',
  42.                 // 得到的验证码
  43.                 getCode:"",
  44.             };
  45.         },
  46.         components:{
  48.             Lines
  49.         },
  50.         onReady() {
  52.             this.codeMsg = '重新发送('+this.codeNum+')';
  53.             this.sendCode();
  54.         },
  55.         onLoad(e) {
  57.             this.phone = e.phone;
  58.         },
  59.         methods:{
  61.             ...mapMutations(['login']),
  62.              sendCode(){
  64.                  // 请求接口返回验证码
  65.                  $http.request({
  67.                      url:'/code',
  68.                      method:"POST",
  69.                      data:{
  71.                          userName: this.phone
  72.                      }
  73.                  }).then((res)=>{
  76.                      console.log(res.code);
  77.                      this.getCode = res.code;
  79.                  }).catch(()=>{
  81.                      uni.showToast({
  83.                          title:'请求失败',
  84.                          icon:'none'
  85.                      })
  86.                  })
  88.                  this.disabled = true;
  89.                  let timer = setInterval(()=>{
  91.                      --this.codeNum;
  92.                      this.codeMsg = '重新发送('+this.codeNum+')';
  93.                  },1000);
  94.                  setTimeout(()=>{
  96.                      clearInterval(timer);
  97.                      this.codeNum = 60;
  98.                      this.disabled = false;
  99.                      this.codeMsg = '重新发送';
  100.                  },60000)
  101.              },
  102.              // 点击下一步
  103.              getNextIndex(){
  106.                  if(  this.getCode == this.userCode ){
  108.                      // 请求后端接口 => 往数据库增加一条数据
  109.                      $http.request({
  111.                          url:'/addUser',
  112.                          method:"POST",
  113.                          data:{
  115.                              userName: this.phone,
  116.                              code:this.userCode
  117.                          }
  118.                      }).then((res)=>{
  121.                          console.log(res);
  122.                          // 注册成功
  123.                          if( res.success ){
  126.                              uni.showToast({
  128.                                  title:res.msg,
  129.                                  icon:'none'
  130.                              })
  131.                              // 获取数据,注册成功后直接登录
  132.                              this.login(res.data)
  134.                              setTimeout(()=>{
  136.                                 uni.redirectTo({
  138.                                      url:"../index/index"
  139.                                  }) 
  140.                              },2000)
  142.                          }
  144.                      }).catch(()=>{
  146.                          uni.showToast({
  148.                              title:'请求失败',
  149.                              icon:'none'
  150.                          })
  151.                      })
  152.                  }else{
  154.                      uni.showToast({
  156.                          title:"验证码错误",
  157.                          icon:"none"
  158.                      })
  159.                  }
  161.                  // uni.switchTab({
  163.                  //     url:'/pages/index/index'
  164.                  // })
  165.              }
  166.         },
  167.     }
  168. </script>
  170. <style lang="scss">
  171. .login-tel{
  173.     width: 100vw;
  174.     height: 100vh;
  175. }
  176. .tel-main{
  178.     padding: 0 20rpx;
  179. }
  180. .login-from{
  182.     padding: 30rpx 0;
  183. }
  184. .tel{
  186.     width: 100%;
  187.     height: 80rpx;
  188.     line-height: 80rpx;
  189.     text-align: center;
  190.     color: #fff;
  191.     background-color: #40bde8;
  192.     border-radius: 40rpx;
  193. }
  194. .login-user{
  196.     font-size: 40rpx;
  197.     padding: 10rpx 0 ;
  198.     display: flex;
  199.     align-items: center;
  200.     border-bottom: 2rpx solid #f7f7f7;
  201. }
  202. .user-text{
  204.     padding-right: 10rpx;
  205. }
  206. </style>

目录结构

前端目录结构
  • manifest.json 配置文件： appid、logo…
  • pages.json 配置文件： 导航、 tabbar、 路由
  • main.js vue初始化入口文件
  • App.vue 全局配置：样式、全局监视
  • static 静态资源：图片、字体图标

  • page 页面

    • index

      • index.vue

    • list

      • list.vue

    • my

      • my.vue

    • my-config

      • my-config.vue

    • my-config

      • my-config.vue

    • my-add-path

      • my-add-path.vue

    • my-path-list

      • my-path-list.vue

    • search

      • search.vue

    • search-list

      • search-list.vue

    • shopcart

      • shopcart.vue

    • details

      • details.vue

    • my-order

      • my-order.vue

    • confirm-order

      • confirm-order.vue

    • payment

      • payment.vue

    • payment-success

      • payment-success.vue

    • login

      • login.vue

    • login-tel

      • login-tel.vue

    • login-code

      • login-code.vue

  • components 组件

    • index

      • Banner.vue
      • Hot.vue
      • Icons.vue
      • indexSwiper.vue
      • Recommend.vue
      • Shop.vue
      • Tabbar.vue

    • common

      • Card.vue
      • Commondity.vue
      • CommondityList.vue
      • Line.vue
      • ShopList.vue

    • order

      • order-list.vue

    • uni

      • uni-number-box

        • uni-number-box.vue

      • uni-icons

        • uni-icons.vue

      • uni-nav-bar

        • uni-nav-bar.vue

      • mpvue-citypicker

        • mpvueCityPicker.vue

  • common 公共文件：全局css文件 || 全局js文件

    • api

      • request.js
    • common.css
    • uni.css

  • store vuex状态机文件

    • modules

      • cart.js
      • path.js
      • user.js
    • index.js

发表评论

表情：
评论列表 （有 0 条评论，175人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Android项目实战登录&注册

    由于项目中大部分界面都有一个后退键和一个标题栏，为避免代码冗杂以及便于利用，我们可以将后推荐和标题栏单独抽取出来定义一个标题栏布局，在 res/layout 目录下新建一个 L

    绝地灬酷狼绝地灬酷狼/ 0 赞/ 473 阅读