由于是学习项目，目的很明确，就是熟悉开发流程。所以seo，ssr等技术我们在此不会讨论。 好吧，开始学习吧。 第一部分 项目搭建，主体流程基本跑通，商品列表页和登录页逻辑基本完成。...在线商城项目01-项目初始化 在线商城项目02-展示商品列表页面并抽取公共组件 在线商城项目03-启用mock服务 在线商城项目04-接口约定和数据请求 在线商城项目05-利用mock数据进行渲染和图片懒加载...在线商城项目06-商品列表页前端逻辑实现 在线商城项目07-mac下mongodb的下载与配置 在线商城项目08-数据库创建和商品集合的创建 在线商城项目09-基于express框架的server端搭建...在线商城项目10-基于mongoose实现商品列表查询 在线商城项目11-商品列表页的排序实现 在线商城项目12-商品列表页价格筛选实现 在线商城项目13-商品列表分页功能实现 在线商城项目14-阶段性自测与...bug修复 在线商城项目15-登录界面实现 在线商城项目16-头部前端逻辑修改 在线商城项目17-登录态保持 第二部分 预计会写注册逻辑，购物车逻辑，订单逻辑，二次封装请求方法，前端拦截器。
简介 本篇主要进行如下工作： 使用vue-cli初始化项目 将项目关联到github ps：在此之前请大家配置node环境，并使用npm安装vue-cli。 1....使用vue-cli初始化项目 step1: 打开终端，进入一个你想创建该项目的目录。输入如下命令： vue init webpack six-tao 会有如下图所示命令提示，一路默认即可。...step2: 现在进入项目目录，并运行代码。 由于之前我们在构建项目时选择了自动npm install。所以此处我们不需要再运行该命令。直接运行终端上提示的两行命令即可： ?...主要是很多项目端口号都是8080，虽然运行项目以后，如果指定端口被占用，会自动分配一个空闲的端口号。但url总是变还是很烦的，所以我们手动指定一个其他的端口号就行了。...现在重新运行项目，并打开如下地址： http://localhost:8086 2. 将项目关联到github step1: 在github新建一个仓库，最好是和项目同名。
这是不合理的，我们应该根据登录态来做一个区别显示。未登录情况下显示login和购物车图标。已登录情况下显示用户名，logout，购物车图标。
$store.commit('LOG_OUT') } }) } 我们重新运行项目，并登陆以后： ?...当然，真实的项目中，逻辑不止这么简单。比如我们这里的密码使用明文存储，是非常危险的，密码应该加密加盐处理。
关于注册登录这块，一直只写过前端逻辑，这次把前后端逻辑一起实现，也是一件很有意思的事情。下面几章都会写这个，而且今后可能会不停地进行改动完善。大家可以看看这里的...
我们可以全局或者在项目中使用npm安装http-server，然后进入指定目录开启服务。...这里假设是在全局安装，步骤如下： npm install http-server -g 进入项目根目录： http-server -p 8888 方法3 使用express 我们同样可以使用express...如果现在项目中有其他人也建立了自己的mock数据，难道每个人都需要在这个文件中新增一段代码吗？那么这个代码的体积和维护难度将大大增加。...resolve(devWebpackConfig) } }) }) 总结 另外，大家还可以用json-server，或者自己编写一个服务器，其实目的不过是返回一个假数据，不管怎样实现都是可以的，看实际项目中怎么方便
设想一下，如果商品条目数量很多，假设有100条，如果我们一次性拉下来，是很影响性能的。所以我们需要为商品列表添加分页功能。本篇主要实现以下目的：
前后端联调价格筛选逻辑 运行前端项目， npm start ? 没有问题。然后点击FILTER BY和0-100。 ? 也是ok的，然后我们再点击FILTER BY和ALL。 ?
实现商品列表页的后端排序逻辑 分别启动前后端项目，我们在浏览器打开商城地址，如下： ? 请求后台接口会带上三种排序参数default，priceDown和priceUp。
step1 先建goods集合对应的model 在根目录下新建一个目录models存放所有的model，新建good.js:
接口约定 本项目我们不做复杂的接口约定。目前仅约定如下返回规则。...这些后续我们根据项目需求再进行约定。实际项目中大家根据与后端协商来约定。 2. 数据请求 数据请求我们使用axios，这里我们先不做二次封装，直接使用axios，等到后期需要的时候我们再进行封装。...总结 本篇内容很简单，因为只是项目开始，并没有做复杂的接口定义，以及请求封装。...同时大家也可以看到，其实本身实现请求功能是很简单的，之所以我们实际项目中的请求做了二次封装，那是有切实的需求需要我们去解决的。这点容后再说。我们提交修改。
} this.getPrdList() } } } 总结 本篇主要是一些前端业务逻辑的编码，这里的实现其实存在一个小bug，是关于筛选价格方面的，后面在在线商城项目
简介 本篇主要进行如下工作： 通过生成器创建后端项目 将项目关联到github 1....通过生成器创建后端项目 step1 安装express generator生成器 # 全局安装express generator生成器 npm install -g express-generator...step2 生成后端项目 express six-tao-server ?...将项目关联到github 这个步骤直接参考在线商城项目01-项目初始化。 ? 在本地项目目录加入.gitignore文件，可以直接copy six-tao项目的该文件。...Express + Babel + Gulp + React + Webpack ES6 + Express + Babel + Gulp + React + Webpack 如何在NodeJS项目中优雅的使用
这一章本来不想讲的，因为关于配环境这种事，其实网上真的很多资料，但是考虑到确实好多人都不喜欢配环境这种事，因为觉着很麻烦而止步不前，很是可惜。这一节我们来看看如...
前面把商品列表页的查询展示逻辑基本完成了。每个功能单独测试是没有问题了，但是连在一起呢？新增的功能是否会对以前的功能产生影响。
嗯，咳咳..到了我编程范的当家花旦出场的时候了，大家热烈欢迎！（传来BOSS的声音：好好说话。）。
no-new */ new Vue({ el: '#app', router, components: { App }, template: '' }) step6：重新运行我们的项目...到这里，我们已经能够在项目中展示重构提供的页面了。注意审查logo和商品图片，会发现logo是base64引入，而商品图片是地址引入。因为static/ 目录下的文件并不会被 Webpack 处理。...那么我们不妨把这三个部分抽取成项目的公共组件。 step1：抽取公共组件。在components文件夹下删除Hello.vue，新建三个vue文件如下： ?
创建本项目的数据库six_tao。如下： use six_tao 不过此时 show dbs 仍然没有出现six_tao ? 因为six_tao中没有任何内容。
既然我们已经能从mock服务器拿到mock数据，现在的任务就是用拿到的数据进行页面渲染，另外，由于页面的图片数据太多，为了提高性能，我们会使用图片懒加载。本篇我...
下面是一个复杂的 PHP 代码示例，展示了一个简单的在线商城的基本实现，包括用户注册、登录、浏览商品、添加购物车、结算购物车等功能。 <?..."\n"; 该代码示例展示了一个简单的在线商城的基本功能，包括用户注册、登录、浏览商品、添加购物车、计算购物车总价等功能。具体实现方式可以根据实际需求进行扩展和修改。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
