前端学习助手框架分享（附源码）

源码）"/>

前端学习助手框架分享（附源码）

相信作为一个前端开发，都有一个上线自己的一个应用的想法吧，一个网站，一个小程序，或者一个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来实现的。不得不说vue3跟ts的结合已经相当舒服了。

后端

主要目录说明

前端

前端使用vue-cli基于vite脚手架构建

业务代码集中在src目录

1. src/pages为页面目录

2. src/static放一些静态资源,字体，图片等

3. src/store是pinia配置目录，配合uniStorage支持持久化

4. src/api存放封装好的请求工具,已实现token自动注入及拦截，接口请求放在src/api/server.ts

5. build打包配置目录

6. DockerfileEnd为服务端docker部署配置文件

服务端

代码在./service目录，使用express框架，采用类似MVC的结构

1. ./src/index.ts为程序启动入口文件

2. ./src/routes为路由目录，所有的接口入口都在这里，这里会做中间件路由拦截和导航

3. ./src/controller为路由后的业务处理，主要是调动service服务

4. ./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周时间一个人开发上线一个刷题小程序(一) 

刷题小程序技术讲解(二)

后期会具体讲讲登录认证，无感刷新以及将用户信息写入数据库的具体实现