b2c电商架构 b2c电商模式

主要电商模式有

B2B：

B2B （ Business to Business）是指进行电子商务交易的供需双方都是商家（或企业、公司），她（他）们使用了互联网的技术或各种商务网络平台，完成商务交易的过程。电子商务是现代 B2B marketing的一种具体主要的表现形式。

案例：阿里巴巴、慧聪网

---

C2C：

C2C即 Customer（Consumer） to Customer（Consumer），意思就是消费者个人间的电子商务行为。比如一个消费者有一台电脑，通过网络进行交易，把它出售给另外一个消费者，此种交易类型就称为C2C电子商务。

案例：淘宝、易趣、瓜子二手车

---

B2C：

B2C是Business-to-Customer的缩写，而其中文简称为“商对客”。“商对客”是电子商务的一种模式，也就是通常说的直接面向消费者销售产品和服务商业零售模式。这种形式的电子商务一般以网络零售业为主，主要借助于互联网开展在线销售活动。B2C即企业通过互联网为消费者提供一个新型的购物环境——网上商店，消费者通过网络在网上购物、网上支付等消费行为。

案例：唯品会、乐蜂网

---

C2B：

C2B（Consumer to Business，即消费者到企业），是互联网经济时代新的商业模式。这一模式改变了原有生产者（企业和机构）和消费者的关系，是一种消费者贡献价值（Create Value）， 企业和机构消费价值（Consume Value）。

C2B模式和我们熟知的供需模式（DSM, Demand SupplyModel）恰恰相反，真正的C2B 应该先有消费者需求产生而后有企业生产，即先有消费者提出需求，后有生产企业按需求组织生产。通常情况为消费者根据自身需求定制产品和价格，或主动参与产品设计、生产和定价，产品、价格等彰显消费者的个性化需求，生产企业进行定制化生产。

案例：海尔商城、 尚品宅配

---

O2O:

O2O即Online To Offline（在线离线/线上到线下），是指将线下的商务机会与互联网结合，让互联网成为线下交易的平台，这个概念最早来源于美国。O2O的概念非常广泛，既可涉及到线上，又可涉及到线下,可以通称为O2O。主流商业管理课程均对O2O这种新型的商业模式有所介绍及关注。

案例：美团、饿了吗

---

B2B2C：

B2B2C是一种电子商务类型的网络购物商业模式，B是BUSINESS的简称，C是CUSTOMER的简称，第一个B指的是商品或服务的供应商，第二个B指的是从事电子商务的企业，C则是表示消费者。

案例：京东商城、天猫商城

---

前台需求分析与系统设计

1. 电商项目分为：前台和后台

1. 前台：提供用户使用
2. 后台：提供商家进行管理

 

 

系统设计

技术架构

架构图

 

 架构搭建

后端：

前端：

整合axios

步骤一：创建~/plugins/apiclient.js文件

步骤二：编写nuxt整合模板，用于统一管理ajax请求路径

const request = {  test : ()=> {
    return axios.get('/test')
  }
}

var axios = null
export default ({ $axios, redirect }, inject) => {

  //赋值
  axios = $axios

  //4) 将自定义函数交于nuxt
  // 使用方式1：在vue中，this.$request.xxx()
  // 使用方式2：在nuxt的asyncData中，content.app.$request.xxx()
  inject('request', request)
}

步骤三：配置apiclient.js插件，修改nuxt.conf.js配置文件完成操作

plugins: [
    { src: '~plugins/apiclient.js'}
  ],

 

步骤四：修改nuxt.conf.js配置文件，配置axios通用设置

axios: {
    baseURL: 'http://localhost:10010'
  },

修改Nuxt项目默认项

配置公共js和css 

 修改默认布局，添加公共js和css

 

<template>
  <div>
    <nuxt />
  </div>
</template>

<script>
export default {
  head: {
    title: '首页',
    link: [
      {rel:'stylesheet',href: '/style/base.css'},
      {rel:'stylesheet',href: '/style/global.css'},
      {rel:'stylesheet',href: '/style/header.css'},
      {rel:'stylesheet',href: '/style/footer.css'}
    ],
    script: [
      { type: 'text/javascript', src: '/js/jquery-1.8.3.min.js' }
    ]
  }
}
</script>

<style>

</style>

用户注册-用户名占用

后端：

 mapper：

@Mapper
public interface UserMapper extends BaseMapper<User> {
    /**
     * 通过用户名查询
     * @param username
     * @return
     */
    @Select("select * from tb_user where username = #{username}")
    User findByUsername(@Param("username") String username);
}

service

public interface UserService extends IService<User> {
    /**
     * 通过用户名查询
     * @param username
     * @return
     */
    public User findByUsername(String username);
}

serviceImpl

@Service
@Transactional
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
    @Override
    public User findByUsername(String username) {
        return baseMapper.findByUsername(username);
    }
}

controller

@RestController
@RequestMapping("/user")
public class UserController {

    @Resource
    private UserService userService;

    @PostMapping("/checkusername")
    public BaseResult checkUsername(@RequestBody User user){
        //查询用户
        User findUser = userService.findByUsername( user.getUsername() );
        //判断
        if(findUser != null){
            return BaseResult.error("用户名已经存在");
        } else {
            return BaseResult.ok("用户名可用");
        }
    }


}

前端

<li>
  <label for="">用户名：</label>
  <input type="text" class="txt" name="username" v-model="user.username" @blur="checkUsernameFn" />
  <p>3-20位字符，可由中文、字母、数字和下划线组成</p>
  <p :class="userMsg.usernameData.code == 20000 ? 'success' : 'error'">                    
      {{userMsg.usernameData.message}}
  </p>
</li>

return {
      user : {			//表单绑定对象
        username : ""
      },
      userMsg : {		//错误信息
        usernameData : ""
      }
    }

 methods:

async checkUsernameFn() {
      let {data} = await this.$request.checkUsername( this.user.username )
      this.userMsg.usernameData = data
    }

apiclient.js

checkUsername(user) {
      return axios.post(`/web-service/user/checkusername` ,user)
    },

手机号检查

后端

serviceImpl:

public User findByMobile(String mobile) {
    // 拼凑条件
    QueryWrapper queryWrapper = new QueryWrapper();
    queryWrapper.eq("mobile", mobile);
    // 查询一个
    List<User> list = baseMapper.selectList(queryWrapper);
    if(list.size() == 1) {
        return list.get(0);
    }
    return null;
}

controller:

@PostMapping("/checkmobile")
public BaseResult checkMobile(@RequestBody User user){
    //查询用户
    User findUser = userService.findByMobile( user.getMobile() );
    //判断
    if(findUser != null){
        return BaseResult.error("电话号码已经注册");
    } else {
        return BaseResult.ok("电话号码可用");
    }
}

前端

apiclient.js

//检查电话号码
  checkMobile : ( mobile )=> {
    return axios.post('/web-service/user/checkmobile', { mobile })
  }

Register.vue

data() {
    return {
      user : {  //表单封装数据
        username : "",
        mobile : ""
      },
      userMsg : { //错误提示数据
        usernameData : "",
        mobileData : ""
      }
    }
  }

methods: {
    async checkUsernameFn() {
      //检查用户名
      let {data} = await this.$request.checkUsername( this.user.username )
      this.userMsg.usernameData = data
    },
    async checkMobileFn() {
      //检查电话
      let {data} = await this.$request.checkMobile( this.user.mobile )
      this.userMsg.mobileData = data
    }
  },

页面：

<li>
              <label for="">手机号码：</label>
              <input type="text" class="txt"  name="mobile"  v-model="user.mobile" @blur="checkMobileFn" />
              <p>请输入手机号码</p>
              <p :class="userMsg.mobileData.code == 1 ? 'success' : 'error'">{{userMsg.mobileData.message}} </p>
            </li>