使用uniapp+Django开发的在线工具网站

引言

在当今数字化时代，在线工具网站为用户提供了便捷的服务和功能，本文分享了我使用UniApp和Django开发的一款多平台在线工具网站。通过这个项目，我探索了跨平台开发与强大的后端框架结合的优势，实现了用户友好的界面和稳健的功能。

技术选型

我选择UniApp作为前端开发工具，主要因为它能够高效地实现同时支持多个平台（Web、小程序、App）的开发需求。而Django作为后端框架，则因其快速开发能力、自带后台管理系统、优秀的安全性和灵活的数据管理而备受推崇。

项目环境

前端框架：uniapp

前端编辑器：HbuilderX 版本号4.24

编辑器官网：HBuilderX-高效极客技巧

后端解释器版本：python 3.10.5

后端框架：django==3.0

后端编辑器：vscode 版本1.92.0

项目创建

前端uniapp项目创建可参考

1 uniapp创建项目前的准备工作 及 创建项目 - 云里知音 - 博客园

后端django项目创建可参考：
怎样安装和创建Django项目？

项目概述

我的在线工具网站旨在为用户提供各种实用工具和服务，包括但不限于实用工具、查询工具、休闲娱乐工具、在线转换、在线游戏、在线加密等功能。用户可以通过Web浏览器、微信小程序或安卓访问和使用这些工具。

前端开发（UniApp）

页面设计与布局

在UniApp中，我采用了简洁直观的页面设计，保证了用户操作的流畅性和友好性。每个工具都有清晰的功能入口，以便用户快速上手。

功能实现

项目采用屏幕自适应，当屏幕宽度小于600px的时候，则一行三个工具，如果屏幕尺寸够大，则一行四个工具，可以完美在移动端适配

主界面代码：

<template>
	<!-- 加载动画 -->
	<view class="loading" v-if="!dataLoaded">
		<view class="item item-1"></view>
		<view class="item item-2"></view>
		<view class="item item-3"></view>
		<view class="item item-4"></view>
	</view>
	<!-- 主要容器 -->
	<view class="container" v-if="dataLoaded">
		<view class="search-box">
			<image class="search-icon" src="/static/search.png">
			</image>
			<input v-model="keyword" @input="handleSearch" placeholder="请输入搜索关键词" class="search-input" />
		</view>
		<!-- 循环渲染多个盒子 -->
		<view v-for="(category, index) in filteredToolCategories" :key="index" class="category-box">
			<view class="category-name">{
  { category.title }}</view>
			<!-- 使用循环渲染每个工具 -->
			<view class="tool-list">
				<view v-for="(tool, idx) in category.tools" :key="idx" class="tool-item"
					@click="handleToolClick(tool.link)">
					<image :src="tool.icon" class="tool-icon"></image>
					<text class="tool-name">{
  { tool.name }}</text>
				</view>