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. 前台：提供用户使用
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 {@Overridepublic User findByUsername(String username) {return baseMapper.findByUsername(username);}
}

controller

@RestController
@RequestMapping("/user")
public class UserController {@Resourceprivate 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 })}

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>