vue全栈商城项目-Node基础编程

1、Common规范

vue全栈商城项目-Node基础编程_第1张图片

或者:

vue全栈商城项目-Node基础编程_第2张图片

vue全栈商城项目-Node基础编程_第3张图片


2、创建一个HttpServer

vue全栈商城项目-Node基础编程_第4张图片


vue全栈商城项目-Node基础编程_第5张图片

3、创建一个Web容器,可以访问到Html内容

利用fs文件模块:

pathname为得到的文件名,多了开头的"/",用substring除去


vue全栈商城项目-Node基础编程_第6张图片


新建一个login页面:

vue全栈商城项目-Node基础编程_第7张图片


4、Http模块客户端演示

模拟客户端js调用第三方服务,其实就是中间层的服务

vue全栈商城项目-Node基础编程_第8张图片

util模块里inspect方法用以展示完整输出信息

运行结果:



express:

cnpm i -g express-generator

生成express项目:



bin目录下的www为可执行文件,可以启动服务;

public为静态资源

routes为路由

views为视图(默认jade语言)

app.js为入口,里面定义的是一级路由

vue全栈商城项目-Node基础编程_第9张图片



user.js文件里对应二级路由

vue全栈商城项目-Node基础编程_第10张图片


访问"/"的话默认加载server下views里的index文件

vue全栈商城项目-Node基础编程_第11张图片

vue全栈商城项目-Node基础编程_第12张图片


vue全栈商城项目-Node基础编程_第13张图片

也可以不用jade而设置为html引擎:


基于express开发商品列表查询接口:

安装Mongoose:

对mongoDB的封装,方便对数据库操作

创建model:

model就是一个实体,方便对数据库进行关联

创建路由

基于mongoose,实现商品列表的查询功能

vue全栈商城项目-Node基础编程_第14张图片

require是node提供的一个模块,用其加载模块的时候会默认去node_modules里面查找,因此不用写路径

model实现层:

vue全栈商城项目-Node基础编程_第15张图片

上面的Good会默认在数据库中查找goods目录,即在后面加一个s(也是一个坑)

连接数据库:

vue全栈商城项目-Node基础编程_第16张图片

查找数据库(.find()):

vue全栈商城项目-Node基础编程_第17张图片

前端渲染:

由于已经跨域,需要在config/index里配置proxyTable插件,当前端访问/goods时转发到localhost:3000端口下

vue全栈商城项目-Node基础编程_第18张图片


你可能感兴趣的:(Vue)