uni-app+vue3小程序demo（打通前后端）

软件架构

前端：uni-app + vue3 + tailwindcss + pinia
后端：nodejs + express
数据库：postgresql
gitee地址：uni-app-demo

前端主要文件

src
   ├─css                
   │  └─tailwind.css    build之后的tailwindcss文件，含有自定义的tailwindcss类
   ├─pages
   │  ├─addInvitation   发帖页面
   │  ├─home            主页
   │  ├─index           开始页（选择注册或登录）
   │  ├─individual      个人页面
   │  ├─information     注册时填写个人信息页面
   │  ├─login           登录页面
   │  ├─register        注册页面
   │  └─test            测试页面（没用的）
   ├─static
   ├─store              user.ts保存用户信息，global.ts保存全局变量，如内网穿透后的域名BASE_URL
   └─tailwind.css       build之后的tailwindcss文件

后端接口

server.js
    ├─/login            登录接口，查找数据库里是否有该用户
    ├─/register         注册接口，向数据库插入该用户
    ├─/submit           提交个人信息，向数据库中的用户添加个人信息
    ├─/get-invitations  获取数据库中的所有帖子
    └─/add-invitation   添加帖子

数据库

create table users(
    account varchar(20) unique primary key,
    pwd varchar(20) not null ,
    sex varchar(5) ,
    birthday date,
    address varchar(20),
    email varchar(30),
    college varchar(20),
    introduction varchar(50)
);

帖子的主键为 账号+发布的时间
create table invitations(
    account varchar(20),
    release_time timestamp,
    title varchar,
    information varchar,
    primary key (account,release_time)
);

使用说明

1. 开始页，注册或登录

   

2. 因为开始是没有用户的，先点击注册，注册时填写的账户和密码使用pinia保存在store

   

   填写账户dhj，密码123456，然后点击注册，通过uni-app原生发送请求给后端，后端保存在数据库里，如果已有用户，则报错

3. 填写个人信息，个人信息也是保存在store
   

4. 填写完后点击提交

6. 已有用户会提示

   

7. 退回开始页测试登录功能

   

   自动登录和记住密码功能也是通过保存标识符在store实现

8. 进入主页，此时没有帖子

   

9. 点击个人，直接使用store的数据进行渲染即可

10. 点击发帖

11. 再发几次帖