2025-09-28
喵喵CRM的后端已经完全的接口化，之前在Django里面用的模板也都被我删除了，后续重新上线的话就需要自己搭前端的网页了。
我们这儿选用uni-app，主要是之前做小程序的时候稍微看过一些，另外考虑到前端不是主要方向，遂就先用uni-app来做了，未来有机会，我们在用别的。
不过因为之前做小程序时没有记录，现在回头再看已经开始抓瞎了。而且当时做就是个前端页面，所以很多地方还要重新开始了解。此文做一个简单的记录。
编辑器HBuilderX，新建一个项目，默认模板，大概能看到如下项目文件：
pages文件夹下是页面，index下的index.uvue就是个初始的页面文件。
static文件夹是一些静态资源的保存地方，这儿初始存了一个uni-app的logo。
App.vue是应用配置，用来配置App全局样式以及监听应用生命周期，主要涉及基础的应用启动、退出、全局字体等等。这儿为了便于理解和直观感受，可以简单做个启动的代码，这样我们运行程序的时候就会弹出一个“应用启动啦！！”的小提示框。
onLaunch: function () {
console.log('App Launch')
uni.showToast({
title: '应用启动啦！！',
icon: 'none'
})
},
index.html是H5 平台运行时的入口 HTML 文件，相当于给个浏览器的壳子。初步理解：没啥用……
main.uts 是启动逻辑入口，用于初始化应用、挂载 App.uvue。初步理解：没啥用……
manifest.json是项目配置，应该是项目打包时候会用到一些说明啥的。初步理解：没啥用……
pages.json页面路由表，这个比较熟悉，应该就是页面的目录配置啥的。
uni.scss全局样式变量，类似于一个专门的样式变量管理文件。
新建个common文件夹，下面新建俩文件api.js和request.js。
request.js封装请求方法，简单理解就是让我们后面调用接口时候可以简化一些通用的操作，比如根路径或者认证啥的。
// common/request.js
const BASE_URL = "http://127.0.0.1:8000"; // Django DRF接口地址
function request(url, method = "GET", data = {}, headers = {}) {
return new Promise((resolve, reject) => {
uni.request({
url: BASE_URL + url,
method: method,
data: data,
header: {
"Content-Type": "application/json",headers
},
success: (res) => {
if (res.statusCode === 200) {
resolve(res.data);
} else {
reject(res);
}
},
fail: (err) => {
reject(err);
}
});
});
}
export default request;
api就是接口，这儿先放上简单的注册、登录、登出接口。
// common/api.js
import request from './request.js';
// 用户登录
export function login(data) {
return request("/login/", "POST", data);
}
// 用户注册
export function register(data) {
return request("/register/", "POST", data);
}
// 用户登出
export function logout(data) {
return request("/logout/", "POST", data);
}
让GPT基于我们接口，做个最简单的界面，index.uvue。
<template>
<view class="container">
<view class="title">用户测试</view>
<!-- 登录 -->
<view class="form">
<input v-model="loginForm.username" placeholder="用户名" />
<input v-model="loginForm.password" placeholder="密码" password />
<button @click="handleLogin">登录</button>
</view>
<!-- 注册 -->
<view class="form">
<input v-model="registerForm.username" placeholder="注册用户名" />
<input v-model="registerForm.password" placeholder="注册密码" password />
<button @click="handleRegister">注册</button>
</view>
<!-- 登出 -->
<view class="form">
<button @click="handleLogout">登出</button>
</view>
<view class="result">
{{ message }}
</view>
</view>
</template>
<script>
import { login, register, logout } from "@/common/api.js";
export default {
data() {
return {
loginForm: {
username:"",
password:""
},
registerForm: {
username:"",
password:""
},
message:""
};
},
methods: {
async handleLogin() {
try {
const res = await login(this.loginForm);
this.message = "登录成功：" + JSON.stringify(res);
} catch (e) {
this.message = "登录失败：" + JSON.stringify(e);
}
},
async handleRegister() {
try {
const res = await register(this.registerForm);
this.message = "注册成功：" + JSON.stringify(res);
} catch (e) {
this.message = "注册失败：" + JSON.stringify(e);
}
},
async handleLogout() {
try {
const res = await logout();
this.message = "登出成功：" + JSON.stringify(res);
} catch (e) {
this.message = "登出失败：" + JSON.stringify(e);
}
}
}
};
</script>
<style>
.container {
padding: 30rpx;
}
.title {
font-size: 40rpx;
margin-bottom: 30rpx;
}
.form {
margin-bottom: 40rpx;
}
input {
border: 1px solid #ccc;
margin: 10rpx 0;
padding: 20rpx;
border-radius: 8rpx;
}
button {
background-color: #007aff;
color: #fff;
padding: 20rpx;
border-radius: 8rpx;
}
.result {
margin-top: 40rpx;
font-size: 28rpx;
color: #333;
}
</style>
运行测试一下，没啥问题。