# Shop-Back-System

**Repository Path**: hkjGitee_admin/Shop-Back-System

## Basic Information

- **Project Name**: Shop-Back-System
- **Description**: 一个基于Vue+Element-UI 的前后端分离项目
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://gitee.com/hkjGitee/shop-back-system/tree/master
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-14
- **Last Updated**: 2023-02-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: JavaScript, Element-UI, Vue, Vuex, Nodejs

## README

# vue-shop

#### 介绍
此项目是基于前后端分离的模式进行开发的一个电商后台管理系统，可采用 pm2 工具进行 node 应用管理。

> 在技术上：
>
> - 前台界面主要采用 vue-cli、vue-router、vuex、element-ui、axios、echarts 等技术进行开发。
>
> - 后台服务则采用 Node.js + express + MySQL 进行开发，采用 token 机制验证用户状态。

后台 api 接口：http://localhost:8888/api/private/v1

Web 静态服务：http://localhost:8081

#### 目录说明

|-- client：前台界面源码【开发环境】

|-- prodServer：`dist`  静态资源托管 Web 服务【生产环境】

|-- server：Node api 接口服务


#### 使用说明

1、先 `cd` 进入 `server`  目录开启 api 接口服务。先执行 `npm install`  安装依赖，最后直接 `node app.js`  运行即可。

> 运行端口号：http://localhost:8888/api/private/v1

2、`cd` 进入 `prodServer`  ，先执行 `npm install`  安装依赖，最后直接 `node app.js`  运行即可

> 运行端口号：http://localhost:8081

3、也可`cd` 进入 `client` ，进行开发环境的源码修改。执行 `npm install`  安装依赖，接着执行 `npm run serve`  启动 Vue 项目。

#### 项目配置修改

1、api 接口服务的相关配置在 `server/config/default.json`  文件中修改。

```json
{
	"config_name" : "develop",
	"jwt_config" : {
		"secretKey":"itcast",
		"expiresIn":86400
	},
	"upload_config":{
		"baseURL":"http://127.0.0.1:8888",
		"upload_ueditor":"uploads/ueditor",
		"simple_upload_redirect":"http://127.0.0.1/reload"
	},
	"db_config" : {
		"protocol" : "mysql",
		"host" : "127.0.0.1",
		"database" : "vue_shop",
		"user" : "root",
		"password" : "123456",
		"port" : 3306
	}
}
```

​	注：若修改了 api 接口的服务路径，则同样需要在 `client/store/index.js`  中修改 axios 拦截器的 baseURl 参数：

![输入图片说明](https://images.gitee.com/uploads/images/2021/1020/175951_daa21dd1_5366840.png "屏幕截图.png")



#### 心得收获

基于此项目，学到了一些项目的优化策略的知识点：

- 1、生成打包报告 

  > vue-cli-service build --report

- 2、vue.config.js 自定义配置

  - 为开发模式和生产模式指定不同的打包入口

    > - **开发模式**的入口文件为 **`src/main-dev.js`**
    > - **生产模式**的入口文件为 **`src/main-prod.js`**
    >
    > 通过 Webpack 提供的 configureWebpack 和 chainWebpack 两个配置节点来完成。

- 3、第三方库启用 CDN 加速

  - ① 通过 externals 配置加载打包外部 CDN 资源
  - ② CDN 资源引用
  - ③ CDN 优化 Element-UI 的打包

- 4、路由懒加载

  - import 传统组件引入方式
  - es6 import() 懒加载方式
  - CommonJS require() 懒加载方式

- 5、首页内容定制

  - 根据不同的环境来定制组件引入的方式与 界面的 UI 结构
    - 开发环境：直接  import 引入第三方库组件
    - 生产环境：第三方库采用 cdn 加速



#### 项目运行效果
![输入图片说明](https://images.gitee.com/uploads/images/2021/1020/180121_4520de55_5366840.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/1020/180132_f8d83c00_5366840.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/1020/180147_84983950_5366840.png "屏幕截图.png")