一个入门级的前后端分离项目,包括前端、后端两个子项目。前端为基于Vue全家桶的多页面应用(现已新增React单页版),后端基于Koa2+Sequelize,主要提供API接口。
项目展示
项目特点
- 前端
- Vue-cli3搭建多页面应用
- 组件化开发
- 使用Vuex管理状态
- 响应式页面,适配移动端
- 后端
- 使用Koa2框架
- 支持token验证登录
技术栈
- 前端:Vue + Vuex + Vue-Router
- 后端:Node + Koa2 + Sequelize
- 第三方库:axios、tweenjs、leancloud
- 中间件:jsonwebtoken、koa-jwt、koa-static等
主要目录结构
- 前端
.
├─ dist/ # build 生成的代码
├─ src/ # 源码目录
│ ├─ assets/ # 公用资源,主要是 SCSS
│ ├─ components/ # 公用组件
│ ├─ http/ # http 请求相关
│ ├─ mixin/ # mixin
│ ├─ pages/ # 页面
│ │ ├─ cart/ # 购物车
│ │ ├─ home/ # 首页
│ │ ├─ member/ # 用户页
│ │ ├─ product/ # 商品详情页
│ ├─ utils/ # 工具库
├── vue.config.js # 配置多页面入口
├── .babelrc
├── package.json
- 后端
.
├─ database/ # 数据库目录
├─ middleware/ # 中间件
├─ public/ # 发布的代码(静态资源)
├─ routes/ # 服务端路由
├── app.js # 启动文件
本地运行后端项目
远程库中已将前端代码打包放入 public 文件夹,因此运行后端项目即可预览完整效果。
- 克隆远程库
git clone git@github.com:BlameDeng/sun-server-demo.git
- 安装依赖
yarn
- 启动项目
node app
浏览器打开 http://localhost:8000/home.html 预览。
本地运行前端项目
前端项目需要后台数据支持,因此本地运行前端项目需要同时运行服务端项目,并且还需要做一些额外配置工作。
- 克隆远程库
git clone git@github.com:BlameDeng/sun-client-demo.git
- 安装依赖
yarn
- 由于使用了 leancloud 的图形验证码功能,因此需要配置 leancloud 应用 appId 和 appKey
- 在 leancloud 新建或打开一个已有应用
- 开启图形验证码服务(免费)
- 在项目根目录下新建 key.js 文件,写入你的应用 Id 和 Key:
export default {
appId: '你的appId',
appKey: '你的appKey'
}
- 启动项目(确保服务端已运行)
yarn serve
浏览器打开 http://localhost:8080/home.html 预览。
PS
服务端已经配置好了跨域,因此前后端项目同时运行的时候,8080端口的前端项目可以从8000端口的后端项目获取数据。如果需要更改后端项目端口,参考以下步骤:
- 修改后端项目根目录 app.js
- 修改前端项目 sun-client-demo > src > http 目录下 url.js
将 prefix 修改为后端项目指定的端口,如'http://localhost:3000'。请注意修改的是后端项目运行的端口和前端项目获取数据的端口,前端项目本身依旧运行在 Vue-cli 指定的端口。