一个入门级的前后端分离项目，包括前端、后端两个子项目。前端为基于Vue全家桶的多页面应用，后端基于Koa2+Sequelize，主要提供API接口。
项目展示
cover.jpg
detail.png
项目特点
- 前端
- 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 新建或打开一个已有应用
-
开启图形验证码服务（免费）
image.png - 在项目根目录下新建 key.js 文件，写入你的应用 Id 和 Key：
export default {
appId: '你的appId',
appKey: '你的appKey'
}
- 启动项目（确保服务端已运行）
yarn serve
浏览器打开 http://localhost:8080/home.html 预览。
PS
服务端已经配置好了跨域，因此前后端项目同时运行的时候，8080端口的前端项目可以从8000端口的后端项目获取数据。如果需要更改后端项目端口，参考以下步骤：
- 修改后端项目根目录 app.js
image.png
将 port 修改为你指定的端口，如3000（修改后需重新运行）
- 修改前端项目 sun-client-demo > src > http 目录下 url.js
image.png
将 prefix 修改为后端项目指定的端口，如'http://localhost:3000'。请注意修改的是后端项目运行的端口和前端项目获取数据的端口，前端项目本身依旧运行在 Vue-cli 指定的端口。
