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对比学习(第二课)