小米商城移动端[全栈]项目总结

来源：叨叨游戏网

小米商城移动端全栈项目总结

前端部分

首页

分类页面电梯导航：左右联动效果

//js代码展示 电梯导航
        var h2s = document.querySelectorAll('.floor')
        console.log(h2s);
        //获取对应的box
        var uls = document.querySelectorAll('.floorbox')
        console.log(uls);
        var box = document.querySelector('.box')

        h2s.forEach(function (item, index) {
            item.addEventListener('click', function () {
                document.querySelector('.floor.active').classList.remove('active');
                this.classList.add('active');
                // 获取offsetTop
                let num = uls[index].offsetTop;
                // console.log(num);
                // 使用scrollTo方法添加滚动动画
                box.scrollTo({
                    top: num - 60, // 假设 60 是你想要预留的顶部空间
                    behavior: 'smooth' // 添加平滑滚动动画
                });
            });
        });
        // 滚动页面,与左侧绑定
        box.onscroll = function () {
            // 获取页面的滚动距离
            let scroll_val = box.scrollTop;
            if (scroll_val > 0 && scroll_val < 950) {
                document.querySelector('.floor.active').classList.remove('active');
                h2s[0].classList.add('active');
            } else if (scroll_val > 950 && scroll_val < 2280) {
                document.querySelector('.floor.active').classList.remove('active');
                h2s[1].classList.add('active');
            } else if (scroll_val > 2280) {
                document.querySelector('.floor.active').classList.remove('active');
                h2s[2].classList.add('active');
            }
        };

米圈页面：发布悬浮可随意拖动

//获取需要拖动的盒子
//注意：可拖动盒子需要是absolute或者fixed定位，那样才可以使用top和left控制
//移动端端监听的是touchmove、touchstart、touchend
var float_div = document.querySelector('#float');
let isDragging = false; // 用于标记是否正在拖拽
let offsetX = 0;
let offsetY = 0;

// 将drag函数定义在全局作用域内
function drag(e) {
    if (isDragging) {
        if (e.type === 'touchmove') {
            e.preventDefault(); // 防止默认的触摸行为
            let touch = e.touches[0];
            let newX = touch.clientX - offsetX;
            let newY = touch.clientY - offsetY;

            // 元素位置，防止溢出窗口
            newX = Math.max(0, Math.min(window.innerWidth - float_div.offsetWidth, newX));
            newY = Math.max(0, Math.min(window.innerHeight - float_div.offsetHeight, newY));

            float_div.style.left = newX + 'px';
            float_div.style.top = newY + 'px';
        } else {
            let newX = e.clientX - offsetX;
            let newY = e.clientY - offsetY;

            // 元素位置，防止溢出窗口
            newX = Math.max(0, Math.min(window.innerWidth - float_div.offsetWidth, newX));
            newY = Math.max(0, Math.min(window.innerHeight  - float_div.offsetHeight, newY));

            float_div.style.left = newX + 'px';
            float_div.style.top = newY + 'px';
        }
    }
}

// 按下事件处理函数，桌面端使用 mousedown，移动端使用 touchstart
float_div.addEventListener('mousedown', startDrag);
float_div.addEventListener('touchstart', startDrag, { passive: false });

function startDrag(e) {
    if (e.type === 'touchstart') {
        // e.preventDefault(); // 防止默认的触摸行为，如滚动
        let touch = e.touches[0];
        offsetX = touch.clientX - float_div.offsetLeft;
        offsetY = touch.clientY - float_div.offsetTop;
    } else {
        offsetX = e.offsetX;
        offsetY = e.offsetY;
    }
    isDragging = true; // 设置拖拽状态为 true

    // 移动事件处理函数，桌面端使用 mousemove，移动端使用 touchmove
    document.addEventListener('mousemove', drag);
    document.addEventListener('touchmove', drag, { passive: false });
}

// 松开事件处理函数，桌面端使用 mouseup，移动端使用 touchend
document.addEventListener('mouseup', endDrag);
document.addEventListener('touchend', endDrag);

function endDrag() {
    isDragging = false; // 设置拖拽状态为 false
    document.removeEventListener('mousemove', drag);
    document.removeEventListener('touchmove', drag);
}

购物车页面功能：全选复选框功能

//全选和复选框功能js代码
 // 全选框1选中，复选框选中或不选
        checkAll1.addEventListener('change', function () {
            for (var i = 0; i < checkbox.length; i++) {
                checkbox[i].checked = checkAll1.checked;
            }
            // 同步全选框2的状态
            checkAll2.checked = checkAll1.checked;
            updateCheckoutCount(); // 更新结算数量
        });

        // 全选框2选中，复选框选中或不选
        checkAll2.addEventListener('change', function () {
            for (var i = 0; i < checkbox.length; i++) {
                checkbox[i].checked = checkAll2.checked;
            }
            // 同步全选框1的状态
            checkAll1.checked = checkAll2.checked;
            updateCheckoutCount(); // 更新结算数量
        });

        // 复选框与全选框绑定
        checkbox.forEach(function (checkboxItem) {
            checkboxItem.addEventListener('change', function () {
                var allChecked = true;
                for (var j = 0; j < checkbox.length; j++) {
                    if (!checkbox[j].checked) {
                        allChecked = false;
                        break;
                    }
                }
                // 根据复选框的状态更新两个全选框的状态
                checkAll1.checked = allChecked;
                checkAll2.checked = allChecked;
                updateCheckoutCount(); // 更新结算数量
            });
        });

我的页面

后端部分

Mysql数据库的操作方式

NestJS 项目基础操作

1. 初始化项目

bash

pnpm i -g @nestjs/cli //即 NestJS 的命令行工具
nest new project-name //创建一个新的 NestJS 项目
cd project-name //进入当前项目
pnpm start:dev （实时）|| npm run start 	//启动当前项目

2. 添加 CRUD 功能

在 app.controller.ts 中添加 CRUD 操作，并在 app.service.ts 中引用。

3. 设置全局路由前缀

在 main.ts 文件中添加：

app.setGlobalPrefix('api');//路由设置一个全局前缀
app.enableCors(); // 跨域 原因：浏览器有同源策略

4. 创建数据库和安装依赖

创建数据库，注意库名避免使用驼峰命名。
安装依赖：

pnpm install @nestjs/typeorm typeorm mysql2 -S

5. 连接数据库

在 app.module.ts 中导入 TypeOrmModule 并配置数据库连接。

TypeOrmModule.forRoot({
      type: 'mysql', // 根据你的数据库类型
      host: 'localhost',
      port: 3306, //Mysql的端口号
      username: 'root',//用户名
      password: 'root',//密码
      database: 'mishop',//数据库名
      entities: [Swiper,Product,Goods],
      autoLoadEntities: true, //自动加载实体配置
      synchronize: true, // 开发时使用，生产环境请设置为 false
    }),

6. 创建用户模块

bash

nest g res user //创建用户模块

关注 user.controller.ts, user.module.ts, user.service.ts。

7. 定义实体

在 user.entity.ts 中定义实体，如：

typescript

@Entity('user1') //映射数据库（对应的数据表名字）
export class User {}

8. 配置模块

在 user.module.ts 中引入 TypeOrmModule 并注册实体：

imports: [TypeOrmModule.forFeature([User])],

9. 操作数据库

在 user.service.ts 中进行数据库操作，如插入和查询。

10. 使用 DTO

在 create-user.dto.ts 中定义数据类型。

//示例：
export class CreateUserDto {
    username: string
    password: string
    avatar: string
}

在update-user.dto.ts 文件中定义所需的数据结构。

//示例：
import { PartialType } from '@nestjs/mapped-types';
import { CreateUserDto } from './create-user.dto';

export class UpdateUserDto extends PartialType(CreateUserDto) {}

11. 测试接口

可以使用插件Postcode来进行操作

添加用户：POST /api/user/add
查询用户：GET /api/user

12. 实现登录功能

在 user.controller.ts 和 user.service.ts 中实现登录逻辑。

13. 使用 JWT

安装 JWT 相关依赖：

pnpm install @nestjs/config @nestjs/jwt

在 app.module.ts 中配置 JWT。

//token
    JwtModule.registerAsync({
      global:true,
      imports:[ConfigModule],
      inject:[ConfigService],
      useFactory:()=>({
        secret:'hopu',
        signOptions: {
          expiresIn:'60s',
        },
      }),
    }),

在 user.controller.ts 中生成和验证 JWT。

  @Get()
  @UseGuards(JwtAuthGuard) //拦截，需要token才可以findAll
  findAll() {
    return this.userService.findAll();
  }

14. 实现鉴权

生成 JwtAuthGuard：

bash

nest g guard Jwt.auth --no-spec --flat

在 user.controller.ts 中使用 @UseGuards(JwtAuthGuard) 保护路由。

15. 测试鉴权

登录获取 token：POST /api/user/login
使用 token 添加用户：POST /api/user/add（需在 Headers 中添加 Authorization）

用axios调接口的方式

安装 Axios

npm install axios
或者
yarn add axios
或者
在js中引入axios文件<script src="./js/axios.js"></script>

axios文件

/* axios v0.19.0 | (c) 2019 by Matt Zabriskie */
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.axios=t():e.axios=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){var t=new i(e),n=s(i.prototype.request,t);return o.extend(n,i.prototype,t),o.extend(n,t),n}var o=n(2),s=n(3),i=n(5),a=n(22),u=n(11),c=r(u);c.Axios=i,c.create=function(e){return r(a(c.defaults,e))},c.Cancel=n(23),c.CancelToken=n(24),c.isCancel=n(10),c.all=function(e){return Promise.all(e)},c.spread=n(25),e.exports=c,e.exports.default=c},function(e,t,n){"use strict";function r(e){return"[object Array]"===j.call(e)}function o(e){return"[object ArrayBuffer]"===j.call(e)}function s(e){return"undefined"!=typeof FormData&&e instanceof FormData}function i(e){var t;return t="undefined"!=typeof ArrayBuffer&&ArrayBuffer.isView?ArrayBuffer.isView(e):e&&e.buffer&&e.buffer instanceof ArrayBuffer}function a(e){return"string"==typeof e}function u(e){return"number"==typeof e}function c(e){return"undefined"==typeof e}function f(e){return null!==e&&"object"==typeof e}function p(e){return"[object Date]"===j.call(e)}function d(e){return"[object File]"===j.call(e)}function l(e){return"[object Blob]"===j.call(e)}function h(e){return"[object Function]"===j.call(e)}function m(e){return f(e)&&h(e.pipe)}function y(e){return"undefined"!=typeof URLSearchParams&&e instanceof URLSearchParams}function g(e){return e.replace(/^\s*/,"").replace(/\s*$/,"")}function x(){return("undefined"==typeof navigator||"ReactNative"!==navigator.product&&"NativeScript"!==navigator.product&&"NS"!==navigator.product)&&("undefined"!=typeof window&&"undefined"!=typeof document)}function v(e,t){if(null!==e&&"undefined"!=typeof e)if("object"!=typeof e&&(e=[e]),r(e))for(var n=0,o=e.length;n<o;n++)t.call(null,e[n],n,e);else for(var s in e)Object.prototype.hasOwnProperty.call(e,s)&&t.call(null,e[s],s,e)}function w(){function e(e,n){"object"==typeof t[n]&&"object"==typeof e?t[n]=w(t[n],e):t[n]=e}for(var t={},n=0,r=arguments.length;n<r;n++)v(arguments[n],e);return t}function b(){function e(e,n){"object"==typeof t[n]&&"object"==typeof e?t[n]=b(t[n],e):"object"==typeof e?t[n]=b({},e):t[n]=e}for(var t={},n=0,r=arguments.length;n<r;n++)v(arguments[n],e);return t}function E(e,t,n){return v(t,function(t,r){n&&"function"==typeof t?e[r]=S(t,n):e[r]=t}),e}var S=n(3),R=n(4),j=Object.prototype.toString;e.exports={isArray:r,isArrayBuffer:o,isBuffer:R,isFormData:s,isArrayBufferView:i,isString:a,isNumber:u,isObject:f,isUndefined:c,isDate:p,isFile:d,isBlob:l,isFunction:h,isStream:m,isURLSearchParams:y,isStandardBrowserEnv:x,forEach:v,merge:w,deepMerge:b,extend:E,trim:g}},function(e,t){"use strict";e.exports=function(e,t){return function(){for(var n=new Array(arguments.length),r=0;r<n.length;r++)n[r]=arguments[r];return e.apply(t,n)}}},function(e,t){/*!
  * Determine if an object is a Buffer
  *
  * @author   Feross Aboukhadijeh <https://feross.org>
  * @license  MIT
  */
e.exports=function(e){return null!=e&&null!=e.constructor&&"function"==typeof e.constructor.isBuffer&&e.constructor.isBuffer(e)}},function(e,t,n){"use strict";function r(e){this.defaults=e,this.interceptors={request:new i,response:new i}}var o=n(2),s=n(6),i=n(7),a=n(8),u=n(22);r.prototype.request=function(e){"string"==typeof e?(e=arguments[1]||{},e.url=arguments[0]):e=e||{},e=u(this.defaults,e),e.method=e.method?e.method.toLowerCase():"get";var t=[a,void 0],n=Promise.resolve(e);for(this.interceptors.request.forEach(function(e){t.unshift(e.fulfilled,e.rejected)}),this.interceptors.response.forEach(function(e){t.push(e.fulfilled,e.rejected)});t.length;)n=n.then(t.shift(),t.shift());return n},r.prototype.getUri=function(e){return e=u(this.defaults,e),s(e.url,e.params,e.paramsSerializer).replace(/^\?/,"")},o.forEach(["delete","get","head","options"],function(e){r.prototype[e]=function(t,n){return this.request(o.merge(n||{},{method:e,url:t}))}}),o.forEach(["post","put","patch"],function(e){r.prototype[e]=function(t,n,r){return this.request(o.merge(r||{},{method:e,url:t,data:n}))}}),e.exports=r},function(e,t,n){"use strict";function r(e){return encodeURIComponent(e).replace(/%40/gi,"@").replace(/%3A/gi,":").replace(/%24/g,"$").replace(/%2C/gi,",").replace(/%20/g,"+").replace(/%5B/gi,"[").replace(/%5D/gi,"]")}var o=n(2);e.exports=function(e,t,n){if(!t)return e;var s;if(n)s=n(t);else if(o.isURLSearchParams(t))s=t.toString();else{var i=[];o.forEach(t,function(e,t){null!==e&&"undefined"!=typeof e&&(o.isArray(e)?t+="[]":e=[e],o.forEach(e,function(e){o.isDate(e)?e=e.toISOString():o.isObject(e)&&(e=JSON.stringify(e)),i.push(r(t)+"="+r(e))}))}),s=i.join("&")}if(s){var a=e.indexOf("#");a!==-1&&(e=e.slice(0,a)),e+=(e.indexOf("?")===-1?"?":"&")+s}return e}},function(e,t,n){"use strict";function r(){this.handlers=[]}var o=n(2);r.prototype.use=function(e,t){return this.handlers.push({fulfilled:e,rejected:t}),this.handlers.length-1},r.prototype.eject=function(e){this.handlers[e]&&(this.handlers[e]=null)},r.prototype.forEach=function(e){o.forEach(this.handlers,function(t){null!==t&&e(t)})},e.exports=r},function(e,t,n){"use strict";function r(e){e.cancelToken&&e.cancelToken.throwIfRequested()}var o=n(2),s=n(9),i=n(10),a=n(11),u=n(20),c=n(21);e.exports=function(e){r(e),e.baseURL&&!u(e.url)&&(e.url=c(e.baseURL,e.url)),e.headers=e.headers||{},e.data=s(e.data,e.headers,e.transformRequest),e.headers=o.merge(e.headers.common||{},e.headers[e.method]||{},e.headers||{}),o.forEach(["delete","get","head","post","put","patch","common"],function(t){delete e.headers[t]});var t=e.adapter||a.adapter;return t(e).then(function(t){return r(e),t.data=s(t.data,t.headers,e.transformResponse),t},function(t){return i(t)||(r(e),t&&t.response&&(t.response.data=s(t.response.data,t.response.headers,e.transformResponse))),Promise.reject(t)})}},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t,n){return r.forEach(n,function(n){e=n(e,t)}),e}},function(e,t){"use strict";e.exports=function(e){return!(!e||!e.__CANCEL__)}},function(e,t,n){"use strict";function r(e,t){!s.isUndefined(e)&&s.isUndefined(e["Content-Type"])&&(e["Content-Type"]=t)}function o(){var e;return"undefined"!=typeof process&&"[object process]"===Object.prototype.toString.call(process)?e=n(13):"undefined"!=typeof XMLHttpRequest&&(e=n(13)),e}var s=n(2),i=n(12),a={"Content-Type":"application/x-www-form-urlencoded"},u={adapter:o(),transformRequest:[function(e,t){return i(t,"Accept"),i(t,"Content-Type"),s.isFormData(e)||s.isArrayBuffer(e)||s.isBuffer(e)||s.isStream(e)||s.isFile(e)||s.isBlob(e)?e:s.isArrayBufferView(e)?e.buffer:s.isURLSearchParams(e)?(r(t,"application/x-www-form-urlencoded;charset=utf-8"),e.toString()):s.isObject(e)?(r(t,"application/json;charset=utf-8"),JSON.stringify(e)):e}],transformResponse:[function(e){if("string"==typeof e)try{e=JSON.parse(e)}catch(e){}return e}],timeout:0,xsrfCookieName:"XSRF-TOKEN",xsrfHeaderName:"X-XSRF-TOKEN",maxContentLength:-1,validateStatus:function(e){return e>=200&&e<300}};u.headers={common:{Accept:"application/json, text/plain, */*"}},s.forEach(["delete","get","head"],function(e){u.headers[e]={}}),s.forEach(["post","put","patch"],function(e){u.headers[e]=s.merge(a)}),e.exports=u},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t){r.forEach(e,function(n,r){r!==t&&r.toUpperCase()===t.toUpperCase()&&(e[t]=n,delete e[r])})}},function(e,t,n){"use strict";var r=n(2),o=n(14),s=n(6),i=n(17),a=n(18),u=n(15);e.exports=function(e){return new Promise(function(t,c){var f=e.data,p=e.headers;r.isFormData(f)&&delete p["Content-Type"];var d=new XMLHttpRequest;if(e.auth){var l=e.auth.username||"",h=e.auth.password||"";p.Authorization="Basic "+btoa(l+":"+h)}if(d.open(e.method.toUpperCase(),s(e.url,e.params,e.paramsSerializer),!0),d.timeout=e.timeout,d.onreadystatechange=function(){if(d&&4===d.readyState&&(0!==d.status||d.responseURL&&0===d.responseURL.indexOf("file:"))){var n="getAllResponseHeaders"in d?i(d.getAllResponseHeaders()):null,r=e.responseType&&"text"!==e.responseType?d.response:d.responseText,s={data:r,status:d.status,statusText:d.statusText,headers:n,config:e,request:d};o(t,c,s),d=null}},d.onabort=function(){d&&(c(u("Request aborted",e,"ECONNABORTED",d)),d=null)},d.onerror=function(){c(u("Network Error",e,null,d)),d=null},d.ontimeout=function(){c(u("timeout of "+e.timeout+"ms exceeded",e,"ECONNABORTED",d)),d=null},r.isStandardBrowserEnv()){var m=n(19),y=(e.withCredentials||a(e.url))&&e.xsrfCookieName?m.read(e.xsrfCookieName):void 0;y&&(p[e.xsrfHeaderName]=y)}if("setRequestHeader"in d&&r.forEach(p,function(e,t){"undefined"==typeof f&&"content-type"===t.toLowerCase()?delete p[t]:d.setRequestHeader(t,e)}),e.withCredentials&&(d.withCredentials=!0),e.responseType)try{d.responseType=e.responseType}catch(t){if("json"!==e.responseType)throw t}"function"==typeof e.onDownloadProgress&&d.addEventListener("progress",e.onDownloadProgress),"function"==typeof e.onUploadProgress&&d.upload&&d.upload.addEventListener("progress",e.onUploadProgress),e.cancelToken&&e.cancelToken.promise.then(function(e){d&&(d.abort(),c(e),d=null)}),void 0===f&&(f=null),d.send(f)})}},function(e,t,n){"use strict";var r=n(15);e.exports=function(e,t,n){var o=n.config.validateStatus;!o||o(n.status)?e(n):t(r("Request failed with status code "+n.status,n.config,null,n.request,n))}},function(e,t,n){"use strict";var r=n(16);e.exports=function(e,t,n,o,s){var i=new Error(e);return r(i,t,n,o,s)}},function(e,t){"use strict";e.exports=function(e,t,n,r,o){return e.config=t,n&&(e.code=n),e.request=r,e.response=o,e.isAxiosError=!0,e.toJSON=function(){return{message:this.message,name:this.name,description:this.description,number:this.number,fileName:this.fileName,lineNumber:this.lineNumber,columnNumber:this.columnNumber,stack:this.stack,config:this.config,code:this.code}},e}},function(e,t,n){"use strict";var r=n(2),o=["age","authorization","content-length","content-type","etag","expires","from","host","if-modified-since","if-unmodified-since","last-modified","location","max-forwards","proxy-authorization","referer","retry-after","user-agent"];e.exports=function(e){var t,n,s,i={};return e?(r.forEach(e.split("\n"),function(e){if(s=e.indexOf(":"),t=r.trim(e.substr(0,s)).toLowerCase(),n=r.trim(e.substr(s+1)),t){if(i[t]&&o.indexOf(t)>=0)return;"set-cookie"===t?i[t]=(i[t]?i[t]:[]).concat([n]):i[t]=i[t]?i[t]+", "+n:n}}),i):i}},function(e,t,n){"use strict";var r=n(2);e.exports=r.isStandardBrowserEnv()?function(){function e(e){var t=e;return n&&(o.setAttribute("href",t),t=o.href),o.setAttribute("href",t),{href:o.href,protocol:o.protocol?o.protocol.replace(/:$/,""):"",host:o.host,search:o.search?o.search.replace(/^\?/,""):"",hash:o.hash?o.hash.replace(/^#/,""):"",hostname:o.hostname,port:o.port,pathname:"/"===o.pathname.charAt(0)?o.pathname:"/"+o.pathname}}var t,n=/(msie|trident)/i.test(navigator.userAgent),o=document.createElement("a");return t=e(window.location.href),function(n){var o=r.isString(n)?e(n):n;return o.protocol===t.protocol&&o.host===t.host}}():function(){return function(){return!0}}()},function(e,t,n){"use strict";var r=n(2);e.exports=r.isStandardBrowserEnv()?function(){return{write:function(e,t,n,o,s,i){var a=[];a.push(e+"="+encodeURIComponent(t)),r.isNumber(n)&&a.push("expires="+new Date(n).toGMTString()),r.isString(o)&&a.push("path="+o),r.isString(s)&&a.push("domain="+s),i===!0&&a.push("secure"),document.cookie=a.join("; ")},read:function(e){var t=document.cookie.match(new RegExp("(^|;\\s*)("+e+")=([^;]*)"));return t?decodeURIComponent(t[3]):null},remove:function(e){this.write(e,"",Date.now()-8e5)}}}():function(){return{write:function(){},read:function(){return null},remove:function(){}}}()},function(e,t){"use strict";e.exports=function(e){return/^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(e)}},function(e,t){"use strict";e.exports=function(e,t){return t?e.replace(/\/+$/,"")+"/"+t.replace(/^\/+/,""):e}},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t){t=t||{};var n={};return r.forEach(["url","method","params","data"],function(e){"undefined"!=typeof t[e]&&(n[e]=t[e])}),r.forEach(["headers","auth","proxy"],function(o){r.isObject(t[o])?n[o]=r.deepMerge(e[o],t[o]):"undefined"!=typeof t[o]?n[o]=t[o]:r.isObject(e[o])?n[o]=r.deepMerge(e[o]):"undefined"!=typeof e[o]&&(n[o]=e[o])}),r.forEach(["baseURL","transformRequest","transformResponse","paramsSerializer","timeout","withCredentials","adapter","responseType","xsrfCookieName","xsrfHeaderName","onUploadProgress","onDownloadProgress","maxContentLength","validateStatus","maxRedirects","httpAgent","httpsAgent","cancelToken","socketPath"],function(r){"undefined"!=typeof t[r]?n[r]=t[r]:"undefined"!=typeof e[r]&&(n[r]=e[r])}),n}},function(e,t){"use strict";function n(e){this.message=e}n.prototype.toString=function(){return"Cancel"+(this.message?": "+this.message:"")},n.prototype.__CANCEL__=!0,e.exports=n},function(e,t,n){"use strict";function r(e){if("function"!=typeof e)throw new TypeError("executor must be a function.");var t;this.promise=new Promise(function(e){t=e});var n=this;e(function(e){n.reason||(n.reason=new o(e),t(n.reason))})}var o=n(23);r.prototype.throwIfRequested=function(){if(this.reason)throw this.reason},r.source=function(){var e,t=new r(function(t){e=t});return{token:t,cancel:e}},e.exports=r},function(e,t){"use strict";e.exports=function(e){return function(t){return e.apply(null,t)}}}])});
//# sourceMappingURL=axios.min.map

使用示例：

//首先引入axios
import axios from 'axios';
// GET 请求示例
axios.get('http://127.0.0.1:3000/api/users')
  .then(response => {
    console.log(response.data); // 打印获取到的用户列表
  })
  .catch(error => {
    console.error('请求失败:', error); // 打印错误信息
  });

// POST 请求示例
axios.post('http://127.0.0.1:3000/api/users', {
  username: 'newuser',
  password: '123456'
})
  .then(response => {
    console.log(response.data); // 打印创建成功后返回的数据
  })
  .catch(error => {
    console.error('请求失败:', error); // 打印错误信息
  });

//搭配async/await
// 异步函数
async function fetchUsers() {
  try {
    const response = await axios.get('http://127.0.0.1:3000/api/users');
    console.log(response.data); // 打印获取到的用户列表
  } catch (error) {
    console.error('请求失败:', error); // 打印错误信息
  }
}

// 调用异步函数
fetchUsers();

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文

全部频道

小米商城移动端[全栈]项目总结

小米商城移动端全栈项目总结

前端部分

首页

分类页面电梯导航：左右联动效果

米圈页面 ： 发布悬浮可随意拖动

购物车页面功能：全选复选框功能

我的页面

后端部分

Mysql数据库的操作方式

NestJS 项目基础操作

1. 初始化项目

2. 添加 CRUD 功能

3. 设置全局路由前缀

4. 创建数据库和安装依赖

5. 连接数据库

6. 创建用户模块

7. 定义实体

8. 配置模块

9. 操作数据库

10. 使用 DTO

11. 测试接口

12. 实现登录功能

13. 使用 JWT

14. 实现鉴权

15. 测试鉴权

用axios调接口的方式

安装 Axios

使用示例：

米圈页面：发布悬浮可随意拖动