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

相信作为一个前端开发，都有一个上线自己的一个应用的想法吧，一个网站，一个小程序，或者一个APP。 前段时间我就做了一个小程序：前端学习助手（从需求到开发到上线都是一个人搞定的），我看很多小伙伴都挺感兴趣的，就想着把搭好的框架分享出来，给大家使用。 该框架主要是提供给前端开发者想自己做一个跨端应用而提供的(服务端为nodeJs)，个人认为搭框架还是比较费时间的，而且对技术的提升没什么帮助，就想着直接把搭建好的分享给大家使用，给大家节省时间，基于搭建好的框架，大家就只需要写业务代码了，节省搭建的一些时间，减少一些阻力，希望大家不要倒在第一步，也祝你早日上线自己的应用。

框架除了会内置工程化相关的功能外，后续会提供一些公共的业务功能支持，比如说：小程序登录认证（包括前后端代码），OSS文件上传，数据库连接到数据增删改查等。

也可以先体验一下小程序：

仓库地址

# ssh地址：git@gitee.com:zhu_jie/fontend-demo.git
# https地址：https://gitee.com/zhu_jie/fontend-demo.git

# clone到本地
git clone git@gitee.com:zhu_jie/front-end-demo.git

框架支持

• uniApp+vite+vue3+ts
• 网络请求封装,及接口请求示例
• 状态管理pinia及持久化配置
• 类型自动导入unplugin-auto-import
• 小程序认证示例(未使用云开发)，服务端认证
• 服务端node环境+express搭建+ts支持
• 服务端中间件middleware拦截示例
• 数据库连接工具封装dbUtil.ts
• 环境变量配置及使用cross-env
• 代码校验相关工具接入husky, lint-staged, eslint, prettier
• 日志工具，log4js配置，已封装成工具，使用方便
• 服务端安全，防攻击工具expressRateLimit
• 服务端docker打包部署配置
• 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目录

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 i
 cd service
 # 安装服务端依赖
 pnpm i
 # 启动前端服务
 pnpm run dev
 # 启动服务端
 cd service
 pnpm run dev
 # 打开微信开发者工具，选择./dist/dev/mp-weixin 就可以了

运行效果：

点击登录会通过wx.login获取code，再通过接口：/user/authentication到服务端。服务端通过微信提供的https://api.weixin.qq.com/sns/jscode2session接口得到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_ID
  const appSecret = process.env.APP_SECRET
  if (appId || appSecret) {
    throw new Error('服务端appId或者appSecret未设置')
  }
  const url = `https://api.weixin.qq.com/sns/jscode2session?appid=${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 } = data
    return { unionid, openid, session_key, source: AccountSource.微信小程序 }
  }
  catch (error) {
    return error
  }
}

完整的代码大家可以clone代码并按照配置启动应用查看。

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