前段时间利用课余时间参与了一个团队合作项目————非洲跨境电商平台。由于期末考试，项目进度紧迫，以及其他种种原因吧，没来得及总结。趁着最近刚考完试赶紧找时间做个总结。

项目简介

整个项目实际上是基于mix-mall电商系统模板进行二次开发的项目，在原有功能基础上根据需求进行增补和完善，项目分为移动端app和PC端的后台管理系统。系统采用前后端分离，我主要负责前端的商品分类部分，包括app端商品的分类导航和展示，以及PC端的商品分类管理，同时参与了登陆服务功能的实现。

项目结构

| 跨境电商平台
|       | 移动端app
|       |       | compements
|       |       | node_modules
|       |       | pages
|       |       | static
|       |       | store
|       |       | APP.vue
|       |       | main.js
|       |       | JSON.js
|       |       | package.json
|       |       | package-lock.json
|       |       | pages.json
|       |       | 其他配置文件
|       | PC端后台管理系统
|       |       | build
|       |       | config
|       |       | node_modules
|       |       | src
|       |       |       |api
|       |       |       |assets
|       |       |       |components
|       |       |       |icons
|       |       |       |routers
|       |       |       |store
|       |       |       |styles
|       |       |       |utils
|       |       |       |views
|       |       |       |APP.vue
|       |       |       |main.js
|       |       |       |permission.js
|       |       |static
|       |       |.babelrc
|       |       |.gitignore
|       |       |index.html
|       |       |其他配置文件
|       |       |package.json
|       |       |package-lock.json
|       |       |README.md

移动端

先来说说移动端，移动端app是基于uni-app框架进行开发的(uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序、快应用等多个平台，uni-app官网链接)。
- Vue.js是目前热门的一个前端开发框架，目前已经更新到3.0，但还是以2.X版本为主（这里不做过多介绍，感兴趣的可以去vue官网、各种程序员论坛以及尤雨溪大大的官方微博那里了解一下，Vue.js官网链接）
- 这里根据项目结构说一下项目使用到的技术栈：
  - components：自定义组件，就是把通用的代码部分（包括html,js,css）进行封装，形成组件，在多个文件中引用，从而实现组件复用，也是vue框架组件化思想的主要体现。在各个组件中使用了css预处理器——scss，使得css语句更简洁，结构更清晰。
    
    此外，通过动态绑定属性和子组件地props属性，可以实现父组件向子组件传值；调用子组件的时候调用一个ref，然后在父组件中调用
```
  this.$refs.header.属性
  this.$refs.header.方法
```
    来获取子组件的属性和方法（关于Vue传值，可以参考这篇博客：Vue六种传值方式）
  - node_modules: 对项目使用到的依赖包进行统一管理。比如上面说到的scss预处理器，通过命令行语句npm install --save-dev sass-loader 安装sass-loader之后才能在项目中使用sass语法。
    
    此外，还包括其他的一些依赖包，常见的：base64url和jwt（处理编码和解析token的工具）等等
  - pages: 对页面进行统一管理，可以在页面中引入css文件对html元素进行渲染，引入js文件更好地实现交互，等等。uni-app并没有使用Vue-Router来实现页面跳转，而是抽象了一套自己的api来实现这个功能，包括uni.navigateTo()，uni.navigateBack()等多个方法。
  - static：对静态资源进行统一管理，包括项目用到的image,css样式，js文件等等。
  - store：VueX的状态管理模块，这个模块的作用可以简单理解为：定义Vue实例的全局变量，在这个Vue实例的作用域内，全局有效，可读可写。但一般将这类变量定义在store实例的state属性下，通过实例中定义的方法对变量进行操作，更安全。
    
    比如：项目中的用户登陆验证就是通过store定义变量hasLogin作为用户登陆状态的标识，在app开启时进行登录验证：访问获取hasLogin的值，为true时,进行获取数据等系列操作，为false时，自动跳转登陆页面，hasLogin的值通过mutations中定义的login/loginout方法进行修改。避免直接访问修改导致的误操作。
    - APP.vue：项目的root组件，我们也可以直接将组件写这里，而不使用 components 目录。比如顶部导航栏（topBar）和底部导航栏（bottomBar）。
    - main.js：项目的入口文件：主要是引入vue框架，根组件及路由设置，并且定义vue实例。
    - pages.json：路由配置文件，作用是定义路由绑定页面。这里需要说明的是：项目是基于Vue而没有利用Vue-cli，所以在结构上和经典的Vue项目稍有不同：APP.vue————src/APP.vue，main.js————src/main.js，pages.json————src/router/index.js（uni-app项目文件————vue项目文件）
    - JSON.js：项目的测试数据文件，实际上就是写好的假数据，用于测试api是否正常可以调用。
    - package.json：在 Node.js 中，模块是一个库或框架，也是一个Node.js项目。Node.js 项目遵循模块化的架构，当我们创建了一个Node.js项目，意味着创建了一个模块，这个模块的描述文件，被称为package.json。每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。package.json 文件可以手工编写，也可以使用 npm init 命令自动生成。
    - package-lock.json：package-lock.json 是在 npm install时候生成的一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。package-lock.json文件的作用锁定安装时的包的版本号，并且需要上传到 git，以保证其他人在 npm install 时大家的依赖能保证一致。
    - 其他配置文件。
- 相对PC端的后台管理系统，移动端app项目的这个模板较为简单，具体体现在：项目的模块抽象程度不是很深，结构也很清晰，即使是二次开发，也很容易上手。
  
  尽管app端项目的规模不是很大，但用到的技术栈也很全面：涵盖了Vue全家桶，uni-app开发，webpack热更新等多项前端开发必备技术。
  
  （下一篇将总结PC端后台管理系统）

非洲跨境电商项目总结（一）

项目简介

项目结构

移动端