uniapp前端开发,基于vue3,element plus组件库,以及axios通讯

简介

UniApp 是一个基于 Vue.js 的跨平台开发框架，旨在通过一次开发、编译后运行在多个平台上，如 iOS、Android、H5、以及小程序（微信小程序、支付宝小程序、百度小程序等）等。UniApp 为开发者提供了统一的开发体验，使得同一套代码可以在多个平台上运行，从而减少开发和维护成本。

基本上可以直接使用vue的语法,为了可移植性,所以大部分的东西都是用的vue的,少部分,像页面导航,使用uniapp自带的

vue

配置

换淘宝源

npm config set registry https://registry.npm.taobao.org

下载

npm install -g @vue/cli
npm uninstall -g @vue/cli

创建项目

vue create vue01

如果创建遇到报错

error Error: certificate has expired

关闭strict-ssl后再安装

yarn config set strict-ssl false

cd到工程目录之后

npm run dev

存储

localStorage

长期有效

<template><div><input v-model="username" placeholder="输入用户名" /><button @click="saveUsername">保存用户名</button><p>存储的用户名：{{ storedUsername }}</p></div>
</template><script setup>
import { ref, onMounted } from 'vue';// 定义数据
const username = ref('');
const storedUsername = ref('');// 保存用户名到 localStorage
const saveUsername = () => {localStorage.setItem('username', username.value);storedUsername.value = username.value;
};// 获取存储的用户名
onMounted(() => {const savedUsername = localStorage.getItem('username');if (savedUsername) {storedUsername.value = savedUsername;}
});
</script>

sessionStorage

关闭浏览器后失效,跟本地存储类似

设置数据到 sessionStorage：

sessionStorage.setItem('sessionData', 'someValue');

获取 sessionStorage 中的数据：

const sessionData = sessionStorage.getItem('sessionData');
console.log(sessionData); // 'someValue'

删除 sessionStorage 中的数据：

sessionStorage.removeItem('sessionData');

清空 sessionStorage 中的所有数据：

sessionStorage.clear();

生命周期钩子

可以在页面开始挂载时,进行一些操作,如开始监听消息,填充默认数据等

<template><div><p>当前时间：{{ currentTime }}</p><button @click="stopTimer">停止计时</button></div>
</template><script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';const currentTime = ref('');
let timer = null;// 组件挂载后开始计时
onMounted(() => {timer = setInterval(() => {currentTime.value = new Date().toLocaleTimeString();}, 1000);
});// 组件销毁之前清除定时器
onBeforeUnmount(() => {clearInterval(timer);
});
</script>

route

uniapp中路由使用自带的uni.navigateTo()跳转

npm install vue-router@4

uniapp

页面跳转

pageA

<!-- pageA.vue -->
<template><view><button @click="goToPageBWithParams">跳转到页面B并传递参数</button><button @click="goToPageB">跳转到页面B不传递参数</button></view>
</template><script setup>
import { ref } from 'vue';const goToPageBWithParams = () => {uni.navigateTo({url: '/pages/pageB/pageB?name=John&age=25'});
};const goToPageB = () => {uni.navigateTo({url: '/pages/pageB/pageB'});
};
</script>

pageB

<!-- pageB.vue -->
<template><view><text v-if="name && age">名字：{{ name }}, 年龄：{{ age }}</text><text v-else>没有接收到参数</text></view>
</template><script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';const name = ref('');
const age = ref('');onMounted(() => {const route = useRoute();// 获取查询参数name.value = route.query.name || '';age.value = route.query.age || '';
});
</script>

也可以使用页面栈来获取查询参数

  // 获取当前页面的 query 参数const pages = getCurrentPages();const currentPage = pages[pages.length - 1];const { name: pageName, age: pageAge } = currentPage.options;name.value = pageName || '';age.value = pageAge || '';

页面栈

在 UniApp 中，页面栈是管理页面之间跳转和返回的一个重要机制。每次打开一个新页面，当前页面会被压入栈中，新的页面会成为栈顶的页面。当用户返回时，栈顶的页面被移除，返回到之前的页面。UniApp 的页面栈管理类似于浏览器的历史记录机制。以下是一些主要概念：

1. 页面栈限制

UniApp 的页面栈最多允许 10 层页面（这可以通过 H5 端的history模式来拓展），超过限制时，会自动将底部的页面出栈，从而保持页面栈的数量。

2. 页面跳转方式

• uni.navigateTo: 进入新页面时，新页面会被压入页面栈，当前页面保持在栈中，适合在栈内管理跳转。
• uni.redirectTo: 替换当前页面，不会保留当前页面到栈中，适用于不希望用户返回之前页面的场景。
• uni.reLaunch: 清空整个页面栈，打开指定的页面，一般用于登录页面、首页等。
• uni.switchTab: 切换到tabBar页面，不会涉及页面栈管理，因为tabBar页面是独立的。

3. 页面返回

• uni.navigateBack: 返回上一个页面，默认返回一层，可以通过传入参数指定返回的页面层级。

4. 生命周期与页面栈的关系

每当页面栈发生变化，页面生命周期函数也会相应地触发：

• onLoad: 页面第一次加载时触发。
• onShow: 每次页面显示时触发，包括返回时。
• onHide: 页面隐藏时触发，通常是在页面跳转到其他页面时触发。

这种页面栈机制帮助开发者在管理多页面应用时，更好地控制页面间的导航和返回操作。

如果有具体的应用场景或问题，也可以进一步探讨如何使用页面栈。

可以用如下代码打印关于页面栈的信息

  // 获取当前页面栈const pages = getCurrentPages(); // 打印页面栈console.log(pages);// 打印页面栈的长度（当前打开的页面数量）console.log("页面栈长度: ", pages.length);// 获取栈顶页面（当前显示的页面）const currentPage = pages[pages.length - 1];console.log("当前页面路径: ", currentPage.route);console.log("当前页面参数: ", currentPage.options);

Element plus

简介

一个基于vue3组件库,挺好看的.嗯

配置

安装

npm install element-plus

修改配置文件main.js中vue3部分

import App from './App'import { createSSRApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'export function createApp() {const app = createSSRApp(App)app.use(ElementPlus) // 挂载 ElementPlusreturn {app}
}

示例代码

<template><div><el-input v-model="inputValue" placeholder="请输入内容" style="width: 300px;"></el-input><el-button type="primary" @click="handleClick" style="margin-left: 10px;">提交</el-button><p>输入的内容：{{ inputValue }}</p></div>
</template><script setup>
import { ref } from 'vue';const inputValue = ref('');const handleClick = () => {alert(`你输入的内容是：${inputValue.value}`);
};
</script>

图标库

npm install @element-plus/icons-vue

使用

<template><div><el-button type="primary"><el-icon><search /></el-icon>     搜索</el-button><el-button type="success"><el-icon><edit /></el-icon>     编辑</el-button><el-button type="danger"><el-icon><delete /></el-icon>删除</el-button><el-button><el-icon><refresh /></el-icon>刷新</el-button><el-button type="warning"><el-icon><share /></el-icon>分享</el-button></div>
</template><script setup>
import { Search, Edit, Delete, Refresh, Share } from '@element-plus/icons-vue';
import { ElButton, ElIcon } from 'element-plus';</script>

axios

简介

用于前后端交换数据,通过url与后端连接

url

一个完整的URL（Uniform Resource Locator，统一资源定位符）通常由以下几个部分组成：

1. 协议（Scheme/Protocol）：

   • 定义访问资源所用的协议，例如http、https、ftp等。
   • 格式：http://或https://

2. 域名（Domain Name）或IP地址：

   • 标识资源所在的服务器地址，例如www.example.com或192.168.1.1。
   • 也可以包含www子域，或是更具体的子域名如blog.example.com。

3. 端口号（Port）：

   • 指定服务器上运行的特定服务的端口，默认为80（HTTP）或443（HTTPS），通常省略。
   • 格式：:8080

4. 路径（Path）：

   • 服务器上资源的具体位置，通常类似于文件系统路径，如/folder/page.html。
   • 如果没有路径，通常默认指向网站的根目录。

5. 查询参数（Query Parameters）：

   • 包含键值对，用于传递给资源的参数，通常用于动态页面或API请求。

   • 动态页面如根据id显示不同的界面,API请求如rest风格的接口

   • 一般在get里面定位资源,在post里面应用一般都是API版本控制、分页、身份验证、路径补充、兼容性支持等场景，以便保持API接口的一致性和简洁性。

   • 格式：?key1=value1&key2=value2

6. 片段标识符（Fragment Identifier）：

   • 指向资源内的某个位置，如页面内的锚点。
   • 在wiki百科中经常用到定位某个标签https://en.wikipedia.org/wiki/Wiki#Conferences
   • 格式：#section1

示例URL:

https://www.example.com:8080/folder/page.html?search=query#section1

配置

npm i axios

示例

<template><div><div @click="fetchData" class="box">Click me to GET data</div><button @click="sendData">Send POST Request</button><div v-if="data"><h3>Data from GET request:</h3><pre>{{ data }}</pre></div><div v-if="postResponse"><h3>Response from POST request:</h3><pre>{{ postResponse }}</pre></div></div>
</template><script setup>
import axios from 'axios'
import { ref } from 'vue'const data = ref(null)
const postResponse = ref(null)async function fetchData() {try {const res = await axios.get("http://localhost:8088/user/list")data.value = res.dataconsole.log(res, "Data received from GET request")} catch (error) {console.error("Error fetching data:", error)}
}async function sendData() {try {const payload = { key: 'value' } // Replace with actual data to sendconst res = await axios.post("http://localhost:8088/user/add", payload)postResponse.value = res.dataconsole.log(res, "Data received from POST request")} catch (error) {console.error("Error sending data:", error)}
}
</script><style scoped>
.box {cursor: pointer;padding: 10px;background-color: #f0f0f0;border: 1px solid #ccc;text-align: center;
}
</style> 

库封装

因为需要很多与后端的接口,所以我们进行封装,减少调用复杂度

import axios from 'axios';
import { ElMessage } from 'element-plus';// 创建axios实例
const http = axios.create({baseURL: 'http://localhost:8080', // 设置基础URLtimeout: 5000, // 设置超时时间
});// 请求拦截器
http.interceptors.request.use(config => {// 在请求发送之前做些什么，比如添加 token 等// config.headers.Authorization = `Bearer ${getToken()}`;return config;},error => {// 请求错误处理ElMessage.error('请求发送失败');return Promise.reject(error);}
);// 响应拦截器
http.interceptors.response.use(response => {// 处理响应成功if (response.status === 200) {return response.data;}ElMessage.error('服务器异常');return Promise.reject(response);},error => {// 处理响应失败const status = error.response ? error.response.status : null;if (status === 404) {ElMessage.error('请求的资源未找到');} else if (status === 500) {ElMessage.error('服务器内部错误');} else {ElMessage.error('网络错误，请稍后重试');}return Promise.reject(error);}
);// 封装常用请求方法
export const get = (url, params = {}) => http.get(url, { params });
export const post = (url, data = {}) => http.post(url, data);
export const put = (url, data = {}) => http.put(url, data);
export const del = (url, data = {}) => http.delete(url, { data });