源码)"/>
前端学习助手框架分享(附源码)
相信作为一个前端开发,都有一个上线自己的一个应用的想法吧,一个网站,一个小程序,或者一个APP。
前段时间我就做了一个小程序:前端学习助手(从需求到开发到上线都是一个人搞定的),我看很多小伙伴都挺感兴趣的,就想着把搭好的框架分享出来,给大家使用。
该框架主要是提供给前端开发者想自己做一个跨端应用而提供的(服务端为nodeJs),个人认为搭框架还是比较费时间的,而且对技术的提升没什么帮助,就想着直接把搭建好的分享给大家使用,给大家节省时间,基于搭建好的框架,大家就只需要写业务代码了,节省搭建的一些时间,减少一些阻力,希望大家不要倒在第一步,也祝你早日上线自己的应用。
框架除了会内置工程化相关的功能外,后续会提供一些公共的业务功能支持,比如说:小程序登录认证(包括前后端代码),OSS
文件上传,数据库连接到数据增删改查等。
也可以先体验一下小程序:
仓库地址
# ssh地址:git@gitee:zhu_jie/fontend-demo.git
# https地址:.git# clone到本地
git clone git@gitee:zhu_jie/front-end-demo.git
框架支持
[x]
uniApp+vite+vue3+ts
[x] 网络请求封装,及接口请求示例
[x] 状态管理
pinia
及持久化配置[x] 类型自动导入
unplugin-auto-import
[x] 小程序认证示例(未使用云开发),服务端认证
[x] 服务端
node
环境+express
搭建+ts
支持[x] 服务端中间件
middleware
拦截示例[x] 数据库连接工具封装
dbUtil.ts
[x] 环境变量配置及使用
cross-env
[x] 代码校验相关工具接入
husky
,lint-staged
,eslint
,prettier
[x] 日志工具,
log4js
配置,已封装成工具,使用方便[X] 服务端安全,防攻击工具
expressRateLimit
[x] 服务端
docker
打包部署配置[x] JWT认证
[ ]
OSS
认证及文件上传[ ]
mySql
数据库连接及增删改查
技术栈
前端
类别 | 库/技术栈 |
---|---|
整体架构 | uni-app + vite + vue3 + TS |
包管理器 | pnpm |
网络请求 | uni-ajax |
路由拦截 | uni-crazy-router |
代码校验 | husky, lint-staged, eslint, prettier |
状态管理 | pinia, pinia-plugin-persist-uni |
类型导入 | types-sync, unplugin-auto-import |
部署发布 | 小程序官方部署工具 |
整体采用uni-app
+ vite
+ vue3
+ ts
来实现的。不得不说vue3
跟ts
的结合已经相当舒服了。
后端
类别 | 库/技术栈 |
---|---|
整体架构 | nodeJs + express + TS |
包管理器 | pnpm |
网络请求 | axios |
日志工具 | log4js |
代码校验 | husky, lint-staged, eslint, prettier |
启动器 | esno |
打包 | tsup |
发布 | docker |
主要目录说明
前端
前端使用vue-cli基于vite脚手架构建
业务代码集中在src
目录
src/pages
为页面目录src/static
放一些静态资源,字体,图片等src/store
是pinia
配置目录,配合uniStorage
支持持久化src/api
存放封装好的请求工具,已实现token
自动注入及拦截,接口请求放在src/api/server.ts
build
打包配置目录DockerfileEnd
为服务端docker
部署配置文件
服务端
代码在./service
目录,使用express
框架,采用类似MVC
的结构
./src/index.ts
为程序启动入口文件./src/routes
为路由目录,所有的接口入口都在这里,这里会做中间件路由拦截和导航./src/controller
为路由后的业务处理,主要是调动service
服务./src/service
主要是数据库相连,将处理好的结果交给controller
启动应用
参数配置
# 小程序appid是必须要配置的
# 配置路径
# 根目录.env-> VITE_MP_APPID
# 服务端认证需要配置小程序APP_ID及APP_SECRET
# /service/.env
安装依赖及启动
# 安装前端依赖,注意,要求node v16+版本pnpm icd service# 安装服务端依赖pnpm i# 启动前端服务pnpm run dev# 启动服务端cd servicepnpm run dev# 打开微信开发者工具,选择./dist/dev/mp-weixin 就可以了
运行效果:
点击登录会通过wx.login
获取code
,再通过接口:/user/authentication
到服务端。服务端通过微信提供的接口得到
openId
。然后通过JWT
包装成token
返回给前端。前端通过pinia
存储认证信息并展示。
前端核心代码:
<template><view style="padding: 20rpx"><view class="info" style="margin-bottom: 10rpx"><view>TOKEN: {{ userInfo.token }}</view><view>OPENID: {{ userInfo.openId }}</view></view><uv-button type="primary" @click="auth">登录认证</uv-button></view>
</template>
<script setup lang="ts">
import { useAppStore } from '@/store/app'
import { authApi } from '@/api/server'const appStore = useAppStore()
const auth = async () => {const { code } = await uni.login()// 认证后会更新store,通过计算属性来响应更新页面const { token, openid } = await authApi(code)appStore.updateToken(token, openid)
}
const userInfo = computed(() => {return {token: appStore.accessToken,openId: appStore.openId,}
})
</script>
服务端核心代码
/*** 根据code换取openid,并生成token* @param code*/
export const userAuthenticationService = async function (code: string): Promise<WxJsCode2SessionRes> {const appId = process.env.APP_IDconst appSecret = process.env.APP_SECRETif (appId || appSecret) {throw new Error('服务端appId或者appSecret未设置')}const url = `=${appId}&secret=${appSecret}&js_code=${code}&grant_type=authorization_code`try {const { data } = await axios<any, WxResult>({ url })console.log(data, 'data11')const { unionid, openid, session_key } = datareturn { unionid, openid, session_key, source: AccountSource.微信小程序 }}catch (error) {return error}
}
之前也写过2篇文章介绍过小程序,感兴趣的可以看看:
2周时间一个人开发上线一个刷题小程序(一)
刷题小程序技术讲解(二)
后期会具体讲讲登录认证,无感刷新以及将用户信息写入数据库的具体实现
更多推荐
前端学习助手框架分享(附源码)
发布评论