uniapp项目问题及解决(前后端互联)

1.路由跳转的问题

uni.navigateTo() 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面

uni.redirectTo()

关闭当前页面,跳转到应用内的某个页面。

uni.reLaunch()

关闭所有页面,打开到应用内的某个页面

uni.switchTab()

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

uni.navigateBack()

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

2.tabBar的使用

tabBar": {
        "color": "#333333",
        "selectedColor": "#1890FF",
        "backgroundColor": "#ffffff",
        "list": [{
                "pagePath": "pages/index/index", //页面路径
                "text": "首页", //按钮文字
                "iconPath": "static/首页01.png", //图片路径
                "selectedIconPath": "static/首页001.png" //选中的图片路径
            },
            {
                "pagePath": "pages/addwork/addwork",
                "text": "添加",
                "iconPath": "static/添加01.png",
                "selectedIconPath": "static/添加001.png"
            },
            {
                "pagePath": "pages/user/user",
                "text": "我的",
                "iconPath": "static/我的01.png",
                "selectedIconPath": "static/我的001.png"
            }
    ]
    }

3.u-view组件的引入

刚开始时下载的2.0版本的u-view,看的1.8的文档,一直引入不对,只能通过important引入,在注册,之后才能使用,中间还发现有些组件不能用,后面发现了问题,换成2.0版本的文档,立马就能引入了,还是直接引入,不需要通过important引入,也不需要注册了,直接写标签就可以了

4.u-view组件的使用

使用过程中,有些属性方法,文档上没有,这个时候需要看他的github,直接看他的源码,就行了

5.组件的样式修改

1.在全局文件里面修改,这样会直接覆盖组件的样式

2.Vue 中,

::v-deep 用于深度作用选择器,可以让样式穿透到子组件中。

:global 则用于全局作用选择器,可以使样式不受组件的限制。

6.命名规范

一定要在刚开始的时候商量好,要不多人合作容易出现不同的风格

7.rpx和view的使用

都是为了自适应屏幕

8.前后端对接

一定要商量要不然会有进度差异,命名格式,字段名称啥的都说好,方便彼此,要不然后面修改不好修改

9需求文档

越早编写越好。这样对项目有一个明了的认识

10,axios的配置

import axios from 'axios';

// create an axios instance
const http = axios.create({
    baseURL: '', // url = base url + request url
    // withCredentials: true, // send cookies when cross-domain requests 注意:withCredentials和后端配置的cross跨域不可同时使用
    timeout: 4000, // request timeout
    crossDomain: true,
});

// request拦截器,在请求之前做一些处理
http.interceptors.request.use(
    (config) => {
        // if (store.state.token) {
        //     // 给请求头添加user-token
        //     config.headers["user-token"] = store.state.token;
        // }
        console.log(config.data);
        console.log('请求拦截成功');
        config.data = JSON.stringify(config.data);

        return config;
    },
    // const token = uni.getStorageSync("linkToken");
    //     config.headers['Content-Type'] = 'application/json';

    //     if (token) {
    //         config.headers.Authorization = `Bearer ${token}`;
    //     }
    //     return config;
    // },
    (error) => {
        console.log(error); // for debug
        console.log('sssssssssssssss');
        return Promise.reject(error);
    }
);

// 配置成功后的拦截器
http.interceptors.response.use((res) => {
    console.log(res);
    if (res.status === 200) {
        return res.data;
    } else {
        return Promise.reject(res.data.msg);
    }
}, (error) => {
    console.log(error);
    if (error.request.status) {
        switch (error.response.status) {
            case 401:
                break;
            default:
                break;
        }
    }
    return Promise.reject(error);
});


// 在main.js中放入这段自定义适配器的代码,就可以实现uniapp的app和小程序开发中能使用axios进行跨域网络请求,并支持携带cookie
axios.defaults.adapter = function (config) {
    return new Promise((resolve, reject) => {
        console.log(config);
        const settle = require('axios/lib/core/settle');
        const buildURL = require('axios/lib/helpers/buildURL');
        uni.request({
            method: config.method.toUpperCase(),
            url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
            header: config.headers,
            data: config.data,
            dataType: config.dataType,
            responseType: config.responseType,
            sslVerify: config.sslVerify,
            complete: function complete(response) {
                console.log('执行完成:', response);
                response = {
                    data: response.data,
                    status: response.statusCode,
                    errMsg: response.errMsg,
                    header: response.header,
                    config,
                };

                settle(resolve, reject, response);
            },
        });
    });
};

export default http;

11.axios配置过程中的问题

包的丢失,因为创建文件夹的时候是先创了一个文件夹,又创了项目,所以导致项目的的名称和文件的名称一摸一样,有的包配置的时候不知道怎么回事跑到了项目外面,导致的一直配置不出来,后面来回来就行了

12.样式不用写的那么急,先把模块设计好,后面的时候,再调就好了,写样式的时候可以参照网上的项目,要不自己凭感觉写的,不太好看

13.后端接口,先测试

这次写的时候,调用总宁的接口,能调用上去,但是这边一直一直传数据传不过去,最后问了学长,是自己配代理服务器的时候用的两个的端口都用的同一个,导致出的问题,

和后端连接我这边出了不少问题,一直有问题,一直改,还是太菜了

14.表单的检验

写表单的时候光注意样式了,复制的人家的源码,觉得上面的东西太多了,我就都删了,最后效果也能实现,但是没有检验了,后面能调用接口了,发现越来越别扭,因为没有校验,所以写啥都能过,果然不能省事,所以后面我还得再补,有点难受了,后面还得写reuls,还由页面结构也得在补包裹的对象

15.token的传递

在axios的配置里面可以直接传递

16.全局设置请求

target里面的http需要写不写的话,会报500错误

17,页面传参

通过url传参

url: /pages/workdetail/workdetail?id=${this.id}

18页面传参的时候出现问题

注意看apifoxs可能是后端的问题,也可能是前端的问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/528206.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

探索未来产业:新技术、新商业、新趋势

引言 随着科技的迅速发展和全球经济的不断变化,未来产业已经成为全球关注的焦点之一。未来产业的兴起不仅代表着新的商业机遇,更是对传统产业模式的颠覆和重构。在这个充满挑战和机遇的时代,我们不得不认真思考未来产业的重要性和前景。 未…

STM32之HAL开发——FatFs文件系统移植

FatFs文件系统移植 FatFs 程序结构图 移植 FatFs 之前我们先通过 FatFs 的程序结构图了解 FatFs 在程序中的关系网络 用户应用程序需要由用户编写,想实现什么功能就编写什么的程序,一般我们只用到 f_mount()、f_open()、 f_write()、f_read() 就可以…

在【Cencos7】中安装【Nacos】并适配【PostgreSQL】数据库

在【Cencos7】中安装【Nacos-2.3.0】并适配【PostgreSQL】数据库 安装JDK wget命令下载: wget https://repo.huaweicloud.com/java/jdk/8u151-b12/jdk-8u151-linux-x64.tar.gz解压 tar -xzvf jdk-7u80-linux-x64.tar.gz将解压后的目录移动到/opt下 sudo mv jdk…

unity_Button:单击的三种实现方式

1.针对特定单个按钮 此代码直接绑定到button上面无需其他操作 using UnityEngine; using UnityEngine.UI;public class PrintHelloOnButtonClick : MonoBehaviour {private Button button;void Start(){// 获取当前GameObject上的Button组件button GetComponent<Button&g…

【Redis系列】Spring Boot 集成 Redis 实现缓存功能

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

[C语言]——动态内存管理

目录 一.为什么要有动态内存分配 二.malloc和free 1.malloc 2.free 三.calloc和realloc 1.calloc 2.realloc 3.空间的释放​编辑 四.常见的动态内存的错误 1.对NULL指针的解引用操作 2.对动态开辟空间的越界访问 3.对非动态开辟内存使用free释放 4.使用free释放⼀块…

嘉轩智能工业科技诚邀您参观2024第13届生物发酵展

参展企业介绍 自2005年成立以来&#xff0c;嘉轩一直致力于工业智能永磁滚筒的研发、制造及销售&#xff0c;具有十多年的从业经验&#xff0c;公司主营产品包括工业智能永磁滚筒、机电智能诊断、工业智能电机等&#xff0c;高效智能自驱动永磁滚筒为我公司目前主导产品&#x…

【C++】——list的介绍及使用 模拟实现

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 文章目录 前言 一、list的介绍及使用 1.1 list的介绍 1.2 list的使用 1.2.1 list的构造 1.2.2 list iterator的使用 1.2.3 list capacity 1.2.4 list element access 1.…

CSS导读 (Emmet语法)

&#xff08;大家好&#xff0c;今天我们将继续来学习CSS的相关知识&#xff0c;大家可以在评论区进行互动答疑哦~加油&#xff01;&#x1f495;&#xff09; 目录 续&#xff1a;七、Chrome调试工具 一、Emmet语法 1.1 快速生成HTML结构语法 1.2 快速生成CSS样式语法 &…

从概念到实践:揭开枚举与联合体在数字化创新时代的神秘面纱

欢迎来到白刘的领域 Miracle_86.-CSDN博客 系列专栏 C语言知识 先赞后看&#xff0c;已成习惯 创作不易&#xff0c;多多支持&#xff01; 在编程的世界中&#xff0c;枚举和联合体是两种非常基础且重要的数据结构。它们各自具有独特的特点和用途&#xff0c;为程序员提供…

【人工智能】AI赋能城市交通 未来城市的驱动力

前言 随着城市化进程的不断加速&#xff0c;交通拥堵、环境污染等问题日益凸显&#xff0c;人们对交通系统的效率和可持续性提出了更高的要求。在这样的背景下&#xff0c;智能交通技术正成为改善城市交通的重要驱动力。本文将探讨智能交通技术在解决城市交通挑战方面的应用和未…

算法打卡26

今日任务&#xff1a; 1&#xff09;332.重新安排行程 2&#xff09;51.N皇后 3&#xff09;37.解数独 332.重新安排行程 题目链接&#xff1a;332. 重新安排行程 - 力扣&#xff08;LeetCode&#xff09; 给定一个机票的字符串二维数组 [from, to]&#xff0c;子数组中的两个…

Junit单元测试框架 --java学习笔记

单元测试 就是针对最小的功能单元(方法)&#xff0c;编写测试代码对其进行正确性测试 之前是如何进行单元测试的?有什么问题? 只能在main方法编写测试代码&#xff0c;去调用其他方法进行测试无法实现自动化测试&#xff0c;一个方法测试失败&#xff0c;可能影响其他方法…

Android Studio 生成 keystore 签名文件及打包验证流程

一、创建keystore签名文件 1、在菜单栏中&#xff0c;依次点击 Build - Generate Signed Bundle/Apk...(生成签名) 2、选择 APK 选项&#xff0c;点击按钮 Next 到下一步 3、新建key store秘钥文件&#xff0c;点击按钮 Next 到下一步 4、按如下提示填写信息&#xff0c;点击按…

微服务篇面试题

1、SpringCloud的组件有哪些&#xff1f; 2、负载均衡如何实现&#xff1f; 3、什么是服务雪崩&#xff1f;怎么解决&#xff1f; 4、项目中有没有做过限流&#xff1f; Tomcat单体可以&#xff0c;分布式不适合 5、解释一下CAP和BASE P&#xff1a;加入node03这边的网络断了&a…

逆向案例十六——简单webpack逆向,财联社信息

网址链接&#xff1a;财联社A股24小时电报-上市公司动态-今日股市行情报道 数据包sign参数为加密&#xff0c;可以直接搜索找参数的位置&#xff0c;搜索不到的情况下&#xff0c;在断点跟栈&#xff1a; 确定js文件所在位置&#xff0c;并打上断点。 点击加载刷新页面。可以发…

diffusion model(十五) : IP-Adapter技术小结

infopaperhttps://arxiv.org/pdf/2308.06721.pdfcodehttps://github.com/tencent-ailab/IP-Adapterorg.Tencent AI Lab个人博客地址http://myhz0606.com/article/ip_adapter 1 Motivation 为了对文生图diffusion model进行特定概念的定制&#xff0c;常用LoRA[1]、textual in…

一种驱动器的功能安全架构介绍

下图提供了驱动器实现安全功能的架构 具有如下特点&#xff1a; 1.通用基于总线或者非总线的架构。可以实现ethercat的FSOE&#xff0c;profinet的profisafe&#xff0c;或者伺服本体安全DIO现实安全功能。 2.基于1oo2D架构&#xff0c;安全等级可以达到sil3。 3.高可用性。单…

【数据库】PostgreSQL源码编译安装方式与简单配置(v16.2)

PostgreSQL源码编译安装方式与简单配置&#xff08;v16.2&#xff09; 一、PostgreSQL安装基本介绍1.1 几种PostgreSQL的安装方式1.2 删除原有的PostgreSQL1.3 编译安装过程简介 二、源码编译安装方式详情2.1 下载源代码2.2 编译安装运行 configure执行 make执行 make install …

制造业、能源等传统行业进行数字化转型时要注意哪些问题?

制造业、能源等传统行业在进行数字化转型时需要注意以下几个关键问题&#xff1a; 1、明确转型目标和战略规划&#xff1a;企业需要根据自身的业务特点、市场需求和长远发展目标&#xff0c;制定清晰的数字化转型战略。包括确定转型的重点领域、预期成果、时间表和资源投入。 …