uni-app+vue3小程序demo(打通前后端)
软件架构
前端:uni-app + vue3 + tailwindcss + pinia 后端:nodejs + express 数据库:postgresql gitee地址:
前端主要文件
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)
);
使用说明
- 开始页,注册或登录
- 因为开始是没有用户的,先点击注册,注册时填写的账户和密码使用pinia保存在store 填写账户dhj,密码123456,然后点击注册,通过uni-app原生发送请求给后端,后端保存在数据库里,如果已有用户,则报错
- 填写个人信息,个人信息也是保存在store
- 填写完后点击提交
- 已有用户会提示
- 退回开始页测试登录功能 自动登录和记住密码功能也是通过保存标识符在store实现
- 进入主页,此时没有帖子
- 点击个人,直接使用store的数据进行渲染即可
- 点击发帖
- 再发几次帖
上一篇:
uniapp开发微信小程序-2.页面制作
下一篇:
微信小程序语法与Vue对比学习(第二课)
