一、项目概述与技术选型

艾特森作为一家多元化企业，需要一款综合性小程序满足内部管理与外部展示需求。经过技术评估，我们选择 ThinkPHP 6.0 作为后端框架，利用其高效的 ORM 和路由系统；前端采用 uniApp 跨平台框架，实现一次开发多端部署。

二、系统架构设计

1. 后端架构：ThinkPHP 框架 + MySQL 数据库，采用 MVC 模式，实现业务逻辑分离
2. 前端架构：uniApp+Vue.js，组件化开发，状态管理使用 Vuex
3. 通信协议：前后端通过 RESTful API 进行数据交互，采用 JWT 进行身份验证
4. 三、ThinkPHP 后端开发
1. 环境搭建

# 安装ThinkPHP
composer create-project topthink/think aitesen-api
cd aitesen-api
php think run

2. 数据库设计
   设计用户、部门、公告、审批等核心数据表，示例用户表结构：
   
   

// database/migrations/2025_06_20_create_users_table.php
use think\migration\Migrator;
use think\migration\db\Column;

class CreateUsersTable extends Migrator
{
    public function change()
    {
        $table = $this->table('users', ['engine' => 'InnoDB']);
        $table->addColumn('username', 'string', ['limit' => 50, 'comment' => '用户名'])
              ->addColumn('password', 'string', ['limit' => 100, 'comment' => '密码'])
              ->addColumn('role', 'integer', ['default' => 1, 'comment' => '角色：1-普通员工，2-管理员'])
              ->addColumn('department_id', 'integer', ['comment' => '部门ID'])
              ->addColumn('created_at', 'datetime', ['comment' => '创建时间'])
              ->addColumn('updated_at', 'datetime', ['comment' => '更新时间'])
              ->create();
    }
}

3. API 开发
   实现用户认证、数据查询等核心接口：

// app/controller/User.php
namespace app\controller;

use app\BaseController;
use think\facade\Cache;
use think\facade\Validate;
use app\model\User as UserModel;

class User extends BaseController
{
    // 用户登录
    public function login()
    {
        $data = $this->request->post();
        
        $validate = Validate::rule([
            'username' => 'require',
            'password' => 'require'
        ]);
        
        if (!$validate->check($data)) {
            return json(['code' => 400, 'msg' => $validate->getError()]);
        }
        
        $user = UserModel::where('username', $data['username'])
                         ->findOrEmpty();
                         
        if ($user->isEmpty() || !password_verify($data['password'], $user->password)) {
            return json(['code' => 401, 'msg' => '用户名或密码错误']);
        }
        
        // 生成token
        $token = uniqid() . bin2hex(random_bytes(16));
        Cache::set('user_token_' . $token, $user->id, 3600);
        
        return json([
            'code' => 200,
            'msg' => '登录成功',
            'data' => [
                'token' => $token,
                'user_info' => $user
            ]
        ]);
    }
}

四、uniApp 前端开发

1. 项目初始化

# 安装HBuilderX开发工具
# 创建uniApp项目
npx degit dcloudio/uni-preset-vue my-project
cd my-project
npm install

2. 页面与组件开发
   创建登录页、首页、个人中心等核心页面

<!-- pages/login/login.vue -->
<template>
  <view class="container">
    <view class="logo">
      <image src="/static/logo.png" mode=""></image>
    </view>
    <view class="form">
      <view class="input-item">
        <text class="label">用户名</text>
        <input v-model="username" placeholder="请输入用户名" />
      </view>
      <view class="input-item">
        <text class="label">密码</text>
        <input v-model="password" password placeholder="请输入密码" />
      </view>
      <button class="login-btn" @click="login">登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      if (!this.username || !this.password) {
        uni.showToast({
          title: '用户名和密码不能为空',
          icon: 'none'
        });
        return;
      }
      
      uni.request({
        url: 'https://api.aitesen.com/user/login',
        method: 'POST',
        data: {
          username: this.username,
          password: this.password
        },
        success: (res) => {
          if (res.data.code === 200) {
            uni.setStorageSync('token', res.data.data.token);
            uni.setStorageSync('userInfo', res.data.data.user_info);
            uni.reLaunch({
              url: '/pages/index/index'
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '网络错误，请稍后重试',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

3. 全局样式与状态管理
   配置全局样式和 Vuex 状态管理

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userInfo: uni.getStorageSync('userInfo') || {},
    token: uni.getStorageSync('token') || ''
  },
  mutations: {
    SET_USER_INFO(state, userInfo) {
      state.userInfo = userInfo;
      uni.setStorageSync('userInfo', userInfo);
    },
    SET_TOKEN(state, token) {
      state.token = token;
      uni.setStorageSync('token', token);
    }
  },
  actions: {
    login({ commit }, userInfo) {
      commit('SET_USER_INFO', userInfo);
      // 生成并设置token
      const token = 'Bearer ' + Math.random().toString(36).substr(2);
      commit('SET_TOKEN', token);
    },
    logout({ commit }) {
      commit('SET_USER_INFO', {});
      commit('SET_TOKEN', '');
      uni.removeStorageSync('userInfo');
      uni.removeStorageSync('token');
    }
  }
})

五、前后端集成与优化

1. 接口统一封装

// common/request.js
const baseUrl = 'https://api.aitesen.com';

export const request = (options) => {
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseUrl + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: {
        'Content-Type': 'application/json',
        'Authorization': uni.getStorageSync('token') || ''
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(res.data);
        }
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
};

2. 性能优化策略

• 图片资源压缩与懒加载
• 接口数据缓存处理
• 组件按需加载
• 长列表虚拟滚动

六、小程序发布与部署

1. 后端部署

• 服务器环境配置（Nginx+PHP+MySQL）
• 代码版本控制与自动化部署
• 定时备份策略
  
  

2. 前端发布

• 代码提交审核
• 小程序打包与上传
• 发布与灰度测试

关键技术点回顾

1. ThinkPHP 的中间件与权限控制
2. uniApp 的条件编译与多端适配
3. 前后端分离的开发模式
4. 小程序性能优化实践