uniapp MySQL vue ES6 jQuery 个人整合

誰言秋桜

已于 2023-04-24 23:54:31 修改

阅读量544

点赞数 1

分类专栏：学习笔记 vue 文章标签： uni-app css html

于 2023-04-24 23:53:22 首次发布

本文链接：https://blog.csdn.net/weixin_64948861/article/details/130354042

版权

一、

Uniapp 是一个使用 Vue.js 进行开发的跨平台应用开发框架，可以同时开发一套代码，直接编译出运行在 H5、微信小程序、支付宝小程序、百度小程序、字节跳动小程序、APP 等多个平台的应用。在 Uniapp 项目开发中，需要用到以下语言和插件：

1. 语言

- HTML5：用于页面结构的构建。
- CSS3：用于页面样式的编写。
- JavaScript：用于页面交互和逻辑的编写。
- Vue.js：用于组件化的开发。

2. 插件

- HBuilderX：Uniapp 官方开发工具，集成了多个前端开发工具，提供了全套的开发环境和调试工具。
- Uniapp 原生 API：封装了微信小程序、支付宝小程序等多个平台的原生 API，可以直接调用。
- uni-ui：开源的 Vue.js UI 组件库，提供了多种 UI 组件，方便开发者快速构建页面。
- uView UI：Uniapp 生态圈的一款 UI 组件库，拥有比 uni-ui 更加丰富的组件和更高的自定义性。
- uni-simple-router：Uniapp 中比较常用的路由插件，用于页面的跳转。
- uniStorage：Uniapp 自己封装的本地存储 API，提供类似于 localStorage 的功能。
- Axios：用于前端发送 HTTP 请求和获取响应。
- Promise 封装插件（如 fly.js）：可以更好地兼容 Uniapp 中 axios 的请求拦截器和响应拦截器。

Uniapp 还提供了很多插件和框架，以上插件只是其中的一部分，具体使用可以根据项目需求进行选择。

下面是一个使用Uniapp开发的世界风景小程序的部分示例代码，包括登录界面、注册页面和主页。由于需要连接后端数据库实现用户的登录和注册，因此这里我将主要介绍前端界面的实现方式：

1. 登录界面

登录界面一般包括输入用户名和密码的表单，以及登录按钮。在提交表单时，会通过AJAX向后端接口发送请求进行登录验证。

<template>
  <view class="login">
    <form class="form" @submit.prevent="submitLoginForm">
      <input type="text" name="username" v-model="username" placeholder="请输入用户名" required>
      <input type="password" name="password" v-model="password" placeholder="请输入密码" required>
      <button type="submit">登录</button>
    </form>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        username: '',
        password: ''
      };
    },
    methods: {
      // 提交登录表单
      submitLoginForm() {
        // 发送登录请求到后端接口
        uni.request({
          url: 'http://localhost/login',
          method: 'POST',
          data: {
            username: this.username,
            password: this.password
          },
          success: res => {
            if (res.statusCode === 200 && res.data.code === 0) {
              // 登录成功，跳转到主页
              uni.navigateTo({ url: '/pages/home/home' });
            } else {
              uni.showToast({
                icon: 'none',
                title: '用户名或密码错误，请重新输入'
              });
            }

},
          fail: err => {
            uni.showToast({
              icon: 'none',
              title: '登录失败，请检查网络'
            });
          }
        });
      }
    }
  };
</script>

2. 注册页面

注册页面包括输入用户名、密码和确认密码的表单和提交按钮。在提交表单时，会通过AJAX向后端接口发送请求进行注册。

<template>
  <view class="register">
    <form class="form" @submit.prevent="submitRegisterForm">
      <input type="text" name="username" v-model="username" placeholder="请输入用户名" required>
      <input type="password" name="password" v-model="password" placeholder="请输入密码" required>
      <input type="password" name="confirm_password" v-model="confirm_password" placeholder="请再次输入密码" required>
      <button type="submit">注册</button>
    </form>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        username: '',
        password: '',
        confirm_password: ''
      };
    },
    methods: {
      // 提交注册表单
      submitRegisterForm() {
        if (this.password !== this.confirm_password) {
          uni.showToast({ icon: 'none', title: '两次输入的密码不一致，请重新输入' });
          return;
        }
        // 发送注册请求到后端接口
        uni.request({
          url: 'http://localhost/register',
          method: 'POST',
          data: {
            username: this.username,
            password: this.password
          },
          success: res => {
            if (res.statusCode === 200 && res.data.code === 0) {
              uni.navigateTo({ url: '/pages/login/login' });
            } else {
              uni.showToast({ icon: 'none', title: '注册失败，请检查输入是否正确' });
            }
          },
fail: err => {
            uni.showToast({ icon: 'none', title: '注册失败，请检查网络' });
          }
        });
      }
    }
  };
</script>

3. 主页

主页是展示世界风景的页面，可以分为导航栏和内容栏，我们通过 mescroll-uni 组件集成上下拉刷新加载更多功能，动态展示世界各地美景。

<template>
  <mescroll-uni :options="options" @up="loadMore" @down="refresh">
    <div class="list">
      <vue-swipe :auto="3000">
        <vue-swipe-item v-for="(item, index) in bannerList">
          < img class="img" :src="item.image" />
          <div class="caption"> {
  { item.title }} </div>
        </vue-swipe-item>
      </vue-swipe>
      <div class="categorys">
        <div class="category" v-for="(item, index) in categoryList" :key="index">
          < img class="img" :src="item.image" />
          <div class="name">{
  { item.name }}</div>
        </div>
      </div>
      <div class="scenic-list">
        <div class="scenic" v-for="(item, index) in scenicList" :key="index">
          < img class="img" :src="item.image" />
          <div class="name">{
  { item.name }}</div>
        </div>
      </div>
    </div>
    <div slot="downwarp">正在刷新...</div>
    <div slot="upwarp">正在加载更多...</div>
  </mescroll-uni>
</template>

js自己写

<script>
  // 引入组件和API
  import MescrollUni from 'mescroll-uni';
  import VueSwipe from 'vue-swipe';
  export default {
    data() {
      return {
        bannerList: [], // 轮播图列表
        categoryList: [], // 分类列表
        scenicList: [], // 景点列表
        options: {
          // mescroll-uni 配置项
          down: {
            auto: true //自动下拉刷新一次
          },
          up: {
            auto: false // 不自动加载
          }
        }
      };
    },
    components: {
      MescrollUni,
      VueSwipe
    },
    computed: {
      mescroll: function() {
        return this.$refs.mescrollUni.mescroll;
      }
    },
    mounted() {
      this.getBannerList();
      this.getCategoryList();
      this.getScenicList(false);
    },
methods: {
      // 获取轮播图列表
      getBannerList() {
        uni.request({
          url: 'http://localhost/banners',
          method: 'GET',
          success: res => {
            if (res.statusCode === 200 && res.data.code === 0) {
              this.bannerList = res.data.data;
            } else {
              uni.showToast({ icon: 'none', title: '获取轮播图失败' });
            }
          },
          fail: err => {
            uni.showToast({ icon: 'none', title: '获取轮播图失败，请检查网络' });
          }
        });
      },
      // 获取分类列表
      getCategoryList() {
        uni.request({
          url: 'http://localhost/categories',
          method: 'GET',
          success: res => {
            if (res.statusCode === 200 && res.data.code === 0) {
this.categoryList = res.data.data;
            } else {
              uni.showToast({ icon: 'none', title: '获取分类列表失败' });
            }
          },
          fail: err => {
            uni.showToast({ icon: 'none', title: '获取分类列表失败，请检查网络' });
          }
        });
      },
      // 获取景点列表
      getScenicList(isRefresh) {
        uni.request({
          url: 'http://localhost/scenics',
          method: 'GET',
          data: {
            page: isRefresh ? 1 : this.mescroll.page.num, // 如果是刷新就从第一页开始获取数据
            size: 10 // 一页显示多少个数据
          },

未写全

以下是一个简单的 `uniapp` 的实例教程。

首先，新建一个 `uniapp` 项目，在 `pages` 目录下新建一个 `index.vue` 文件。在 `index.vue` 页面中添加如下代码：

<template>
  <view class="container">
    <text class="title">{
  { message }}</text>
    <button class="btn" @click="changeMessage">Change Message</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Hello Uniapp!'
    }
  }
}
</script>

<style>
.container {
  text-align: center;
}

.title {
  font-size: 30px;
  margin-top: 50px;
}

.btn {
  font-size: 20px;
  display: inline-block;
  margin-top: 50px;
  padding: 15px 30px;
  border-radius: 20px;
  background-color: #007aff;
  color: #fff;
}
</style>

运行结果

以上代码中，我们创建了一个有一个 `text` 元素和一个 `button` 元素的 `uniapp` 页面。点击按钮，可以切换页面上的文字内容。

在代码中，我们使用了 `data` 属性来存放数据，使用 `methods` 属性来存储方法

使用Uniapp开发的个人中心界面代码示例。

HTML5代码：

<template>
  <view class="home">
    <view class="header">
      <image class="avatar" src="../../static/avatar.png" mode="aspectFill" />
      <view class="userinfo">
        <view>{
  { username }}</view>
        <view>用户ID：{
  { userId }}</view>
      </view>
    </view>
    <view class="menu-list">
      <view class="menu-item" @click="goToOrders">
        <icon class="iconfont icon-dingdan"></icon>
        <view class="text">我的订单</view>
        <icon class="iconfont icon-arrow-right"></icon>
      </view>
      <view class="menu-item" @click="goToAddress">
        <icon class="iconfont icon-address"></icon>
        <view class="text">收货地址</view>
        <icon class="iconfont icon-arrow-right"></icon>
      </view>
      <view class="menu-item" @click="goToSettings">
        <icon class="iconfont icon-settings"></icon>
        <view class="text">个人设置</view>
        <icon class="iconfont icon-arrow-right"></icon>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        username: 'John',
        userId: '123456'
      };
    },
    methods: {
      goToOrders() {
        // 跳转到订单页面
        uni.navigateTo({ url: '/pages/orders/orders' });
      },
      goToAddress() {
        // 跳转到收货地址页面
        uni.navigateTo({ url: '/pages/address/address' });
      },
      goToSettings() {
        // 跳转到个人设置页面
        uni.navigateTo({ url: '/pages/settings/settings' });
      }
    }
  };
</script>

在这段代码中，我们通过一个header和一个menu-list来完成个人中心页面的展示。其中header包括用户头像、用户名和用户ID。menu-list中又包括了我的订单、收货地址和个人设置几个菜单。在各个菜单项中，使用@click来绑定点击事件，并在事件处理函数中通过uni的navigateTo函数完成页面跳转。这里需要注意的是，在实际的代码中，我们需要进行一些状态管理、权限控制等，保证系统的健壮性和安全性。

使用Uniapp开发的个人中心界面代码示例。

<template>
  <view class="home">
    <view class="header">
      <view class="userinfo">
        <view class="avatar-wrapper" @click="toLogin">
          <image class="avatar" :src="avatar" mode="aspectFill" />
          <view v-if="!isLogin">点击登录</view>
        </view>
        <view>
          <view v-if="isLogin">{
  { username }}</view>
          <view v-if="isLogin">用户ID：{
  { userId }}</view>
        </view>
      </view>
      <view class="logout" v-if="isLogin" @click="logout">注销</view>

最低0.47元/天解锁文章

誰言秋桜

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
uniapp MySQL vue ES6 jQuery 个人整合

Uniapp 是一个使用 Vue.js 进行开发的跨平台应用开发框架，可以同时开发一套代码，直接编译出运行在 H5、微信小程序、支付宝小程序、百度小程序、字节跳动小程序、APP 等多个平台的应用。在 Uniapp 项目开发中，需要用到以下语言和插件：1. 语言- HTML5：用于页面结构的构建。- CSS3：用于页面样式的编写。- JavaScript：用于页面交互和逻辑的编写。- Vue.js：用于组件化的开发。2. 插件。
复制链接

扫一扫

专栏目录