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

简介

UniApp 是一个基于 Vue.js 的跨平台开发框架，旨在通过一次开发、编译后运行在多个平台上，如 iOS、Android、H5、以及小步调（微信小步调、付出宝小步调、百度小步调等）等。UniApp 为开发者提供了同一的开发体验，使得同一套代码可以在多个平台上运行，从而镌汰开发和维护本钱。
根本上可以直接使用vue的语法,为了可移植性,以是大部分的东西都是用的vue的,少部分,像页面导航,使用uniapp自带的
vue

设置

换淘宝源

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

复制代码

下载

1. npm install -g @vue/cli
2. npm uninstall -g @vue/cli

复制代码

创建项目

1. vue create vue01

复制代码

如果创建碰到报错

1. error Error: certificate has expired

复制代码

关闭strict-ssl后再安装

1. yarn config set strict-ssl false

复制代码

cd到工程目次之后

1. npm run dev

复制代码

存储

localStorage

恒久有效

1. <template>
2.   <div>
3.     <input v-model="username" placeholder="输入用户名" />
4.     <button @click="saveUsername">保存用户名</button>
5.     <p>存储的用户名：{{ storedUsername }}</p>
6.   </div>
7. </template>
9. <script setup>
10. import { ref, onMounted } from 'vue';
12. // 定义数据
13. const username = ref('');
14. const storedUsername = ref('');
16. // 保存用户名到 localStorage
17. const saveUsername = () => {
18.   localStorage.setItem('username', username.value);
19.   storedUsername.value = username.value;
20. };
22. // 获取存储的用户名
23. onMounted(() => {
24.   const savedUsername = localStorage.getItem('username');
25.   if (savedUsername) {
26.     storedUsername.value = savedUsername;
27.   }
28. });
29. </script>

复制代码

sessionStorage

关闭欣赏器后失效,跟本地存储类似
设置数据到 sessionStorage：

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

复制代码

获取 sessionStorage 中的数据：

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

复制代码

删除 sessionStorage 中的数据：

1. sessionStorage.removeItem('sessionData');

复制代码

清空 sessionStorage 中的全部数据：

1. sessionStorage.clear();

复制代码

生命周期钩子

可以在页面开始挂载时,举行一些利用,如开始监听消息,添补默认数据等

1. <template>
2.   <div>
3.     <p>当前时间：{{ currentTime }}</p>
4.     <button @click="stopTimer">停止计时</button>
5.   </div>
6. </template>
8. <script setup>
9. import { ref, onMounted, onBeforeUnmount } from 'vue';
11. const currentTime = ref('');
12. let timer = null;
14. // 组件挂载后开始计时
15. onMounted(() => {
16.   timer = setInterval(() => {
17.     currentTime.value = new Date().toLocaleTimeString();
18.   }, 1000);
19. });
21. // 组件销毁之前清除定时器
22. onBeforeUnmount(() => {
23.   clearInterval(timer);
24. });
25. </script>

复制代码

route

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

1. npm install vue-router@4

复制代码

uniapp

页面跳转

pageA

1. <!-- pageA.vue -->
2. <template>
3.   <view>
4.     <button @click="goToPageBWithParams">跳转到页面B并传递参数</button>
5.     <button @click="goToPageB">跳转到页面B不传递参数</button>
6.   </view>
7. </template>
9. <script setup>
10. import { ref } from 'vue';
12. const goToPageBWithParams = () => {
13.   uni.navigateTo({
14.     url: '/pages/pageB/pageB?name=John&age=25'
15.   });
16. };
18. const goToPageB = () => {
19.   uni.navigateTo({
20.     url: '/pages/pageB/pageB'
21.   });
22. };
23. </script>

复制代码

pageB

1. <!-- pageB.vue -->
2. <template>
3.   <view>
4.     <text v-if="name && age">名字：{{ name }}, 年龄：{{ age }}</text>
5.     <text v-else>没有接收到参数</text>
6.   </view>
7. </template>
9. <script setup>
10. import { ref, onMounted } from 'vue';
11. import { useRoute } from 'vue-router';
13. const name = ref('');
14. const age = ref('');
16. onMounted(() => {
17.   const route = useRoute();
18.   
19.   // 获取查询参数
20.   name.value = route.query.name || '';
21.   age.value = route.query.age || '';
22. });
23. </script>

复制代码

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

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

复制代码

页面栈

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

• 页面栈限定
  

UniApp 的页面栈最多答应 10 层页面（这可以通过 H5 端的history模式来拓展），凌驾限定时，会主动将底部的页面出栈，从而保持页面栈的数目。

• 页面跳转方式
  

• uni.navigateTo: 进入新页面时，新页面会被压入页面栈，当前页面保持在栈中，恰当在栈内管理跳转。
  
• uni.redirectTo: 更换当前页面，不会生存当前页面到栈中，实用于不渴望用户返回之前页面的场景。
  
• uni.reLaunch: 清空整个页面栈，打开指定的页面，一样寻常用于登录页面、首页等。
  
• uni.switchTab: 切换到tabBar页面，不会涉及页面栈管理，由于tabBar页面是独立的。
  

• 页面返回
  

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

• 生命周期与页面栈的关系
  

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

• onLoad: 页面第一次加载时触发。
  
• onShow: 每次页面表现时触发，包罗返回时。
  
• onHide: 页面潜伏时触发，通常是在页面跳转到其他页面时触发。
  

这种页面栈机制资助开发者在管理多页面应用时，更好地控制页面间的导航和返回利用。
如果有详细的应用场景或题目，也可以进一步探究怎样使用页面栈。
可以用如下代码打印关于页面栈的信息

1.   // 获取当前页面栈
2.   const pages = getCurrentPages();
3.   
4.   // 打印页面栈
5.   console.log(pages);
6.   
7.   // 打印页面栈的长度（当前打开的页面数量）
8.   console.log("页面栈长度: ", pages.length);
9.   
10.   // 获取栈顶页面（当前显示的页面）
11.   const currentPage = pages[pages.length - 1];
12.   console.log("当前页面路径: ", currentPage.route);
13.   console.log("当前页面参数: ", currentPage.options);

复制代码

Element plus

简介

一个基于vue3组件库,挺悦目标.嗯
设置

安装

1. npm install element-plus

复制代码

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

1. import App from './App'
3. import { createSSRApp } from 'vue'
4. import ElementPlus from 'element-plus'
5. import 'element-plus/dist/index.css'
7. export function createApp() {
8.   const app = createSSRApp(App)
9.   app.use(ElementPlus) // 挂载 ElementPlus
10.   return {
11.     app
12.   }
13. }

复制代码

示例代码

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

复制代码

图标库

1. npm install @element-plus/icons-vue

复制代码

使用

1. <template>
2.   <div>
3.     <el-button type="primary">
4.                 <el-icon>
5.                   <search />
6.                 </el-icon>     
7.       搜索
8.     </el-button>
10.     <el-button type="success">
11.                 <el-icon>
12.                   <edit />
13.                 </el-icon>     
14.       编辑
15.     </el-button>
17.     <el-button type="danger">
18.                 <el-icon>
19.                   <delete />
20.                 </el-icon>
21.        删除
22.     </el-button>
24.     <el-button>
25.       <el-icon>
26.         <refresh />
27.       </el-icon>
28.       刷新
29.     </el-button>
31.     <el-button type="warning">
32.       <el-icon>
33.         <share />
34.       </el-icon>
35.       分享
36.     </el-button>
37.   </div>
38. </template>
40. <script setup>
41. import { Search, Edit, Delete, Refresh, Share } from '@element-plus/icons-vue';
42. import { ElButton, ElIcon } from 'element-plus';
44. </script>

复制代码

axios

简介

用于前后端互换数据,通过url与后端毗连
url

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

• 协议（Scheme/Protocol）：
  
  
  
  • 界说访问资源所用的协议，比方http、https、ftp等。
    
  • 格式：http://或https://
    
  
  
• 域名（Domain Name）或IP地点：
  
  
  
  • 标识资源地点的服务器地点，比方www.example.com或192.168.1.1。
    
  • 也可以包罗www子域，或是更详细的子域名如blog.example.com。
    
  
  
• 端标语（Port）：
  
  
  
  • 指定服务器上运行的特定服务的端口，默以为80（HTTP）或443（HTTPS），通常省略。
    
  • 格式：:8080
    
  
  
• 路径（Path）：
  
  
  
  • 服务器上资源的详细位置，通常类似于文件体系路径，如/folder/page.html。
    
  • 如果没有路径，通常默认指向网站的根目次。
    
  
  
• 查询参数（Query Parameters）：
  
  
  
  • 包罗键值对，用于转达给资源的参数，通常用于动态页面或API哀求。
    
  • 动态页面如根据id表现差别的界面,API哀求如rest风格的接口
    
  • 一样寻常在get内里定位资源,在post内里应用一样寻常都是API版本控制、分页、身份验证、路径增补、兼容性支持等场景，以便保持API接口的划一性和简便性。
    
  • 格式：?key1=value1&key2=value2
    
  
  
• 片断标识符（Fragment Identifier）：
  
  
  
  • 指向资源内的某个位置，如页面内的锚点。
    
  • 在wiki百科中经常用到定位某个标签https://en.wikipedia.org/wiki/Wiki#Conferences
    
  • 格式：#section1
    
  
  

示例URL:

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

复制代码

设置

1. npm i axios

复制代码

示例

1. <template>
2.   <div>
3.     <div @click="fetchData" class="box">Click me to GET data</div>
4.     <button @click="sendData">Send POST Request</button>
5.     <div v-if="data">
6.       <h3>Data from GET request:</h3>
7.       <pre>{{ data }}</pre>
8.     </div>
9.        
10.     <div v-if="postResponse">
11.       <h3>Response from POST request:</h3>
12.       <pre>{{ postResponse }}</pre>
13.     </div>
14.   </div>
15. </template>
17. <script setup>
18. import axios from 'axios'
19. import { ref } from 'vue'
21. const data = ref(null)
22. const postResponse = ref(null)
24. async function fetchData() {
25.   try {
26.     const res = await axios.get("http://localhost:8088/user/list")
27.     data.value = res.data
28.     console.log(res, "Data received from GET request")
29.   } catch (error) {
30.     console.error("Error fetching data:", error)
31.   }
32. }
34. async function sendData() {
35.   try {
36.     const payload = { key: 'value' } // Replace with actual data to send
37.     const res = await axios.post("http://localhost:8088/user/add", payload)
38.     postResponse.value = res.data
39.     console.log(res, "Data received from POST request")
40.   } catch (error) {
41.     console.error("Error sending data:", error)
42.   }
43. }
44. </script>
46. <style scoped>
47. .box {
48.   cursor: pointer;
49.   padding: 10px;
50.   background-color: #f0f0f0;
51.   border: 1px solid #ccc;
52.   text-align: center;
53. }
54. </style>

复制代码

库封装

由于必要许多与后端的接口,以是我们举行封装,镌汰调用复杂度

1. import axios from 'axios';
2. import { ElMessage } from 'element-plus';
4. // 创建axios实例
5. const http = axios.create({
6.   baseURL: 'http://localhost:8080', // 设置基础URL
7.   timeout: 5000, // 设置超时时间
8. });
10. // 请求拦截器
11. http.interceptors.request.use(
12.   config => {
13.     // 在请求发送之前做些什么，比如添加 token 等
14.     // config.headers.Authorization = `Bearer ${getToken()}`;
15.     return config;
16.   },
17.   error => {
18.     // 请求错误处理
19.     ElMessage.error('请求发送失败');
20.     return Promise.reject(error);
21.   }
22. );
24. // 响应拦截器
25. http.interceptors.response.use(
26.   response => {
27.     // 处理响应成功
28.     if (response.status === 200) {
29.       return response.data;
30.     }
31.     ElMessage.error('服务器异常');
32.     return Promise.reject(response);
33.   },
34.   error => {
35.     // 处理响应失败
36.     const status = error.response ? error.response.status : null;
37.     if (status === 404) {
38.       ElMessage.error('请求的资源未找到');
39.     } else if (status === 500) {
40.       ElMessage.error('服务器内部错误');
41.     } else {
42.       ElMessage.error('网络错误，请稍后重试');
43.     }
44.     return Promise.reject(error);
45.   }
46. );
48. // 封装常用请求方法
49. export const get = (url, params = {}) => http.get(url, { params });
50. export const post = (url, data = {}) => http.post(url, data);
51. export const put = (url, data = {}) => http.put(url, data);
52. export const del = (url, data = {}) => http.delete(url, { data });

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金