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 的页面栈管理类似于浏览器的历史记录机制。以下是一些主要概念：

页面栈限制

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

页面跳转方式

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

页面返回

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

生命周期与页面栈的关系

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

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) // 挂载 ElementPlus
  return {
    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，统一资源定位符）通常由以下几个部分组成：

协议（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:

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.data
    console.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 send
    const res = await axios.post("http://localhost:8088/user/add", payload)
    postResponse.value = res.data
    console.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', // 设置基础URL
  timeout: 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 });