Day06_商品分类(vuetify-nginx-cors)与品牌查询

学于黑马和传智播客联合做的教学项目 感谢
黑马官网
传智播客官网
微信搜索"艺术行者",关注并回复关键词"乐优商城"获取视频和教程资料!
b站在线视频

0.学习目标

使用资料搭建后台系统

会使用nginx进行反向代理

实现商品分类查询功能

掌握cors解决跨域

实现品牌查询功能

1.搭建后台管理前端 1.1.导入已有资源

后台项目相对复杂,为了有利于教学,我们不再从0搭建项目,而是直接使用课前资料中给大家准备好的源码:

Day06_商品分类(vuetify-nginx-cors)与品牌查询

我们解压缩,放到工作目录中:

Day06_商品分类(vuetify-nginx-cors)与品牌查询

然后在Intellij idea中导入新的工程:

Day06_商品分类(vuetify-nginx-cors)与品牌查询

选中我们的工程:

Day06_商品分类(vuetify-nginx-cors)与品牌查询

1.2.安装依赖

你应该注意到,这里并没有node_modules文件夹,方便给大家下发,已经把依赖都删除了。不过package.json中依然定义了我们所需的一切依赖:

Day06_商品分类(vuetify-nginx-cors)与品牌查询

我们只需要打开终端,进入项目目录,输入:npm install命令,即可安装这些依赖。

Day06_商品分类(vuetify-nginx-cors)与品牌查询

大概需要几分钟。

如果安装过程出现以下问题

Day06_商品分类(vuetify-nginx-cors)与品牌查询

建议删除node_modules目录,重新安装。或者copy其他人的node_modules使用

1.3.运行一下看看

Day06_商品分类(vuetify-nginx-cors)与品牌查询

在package.json文件中有scripts启动脚本配置,可以输入命令:npm run dev或者npm start

Day06_商品分类(vuetify-nginx-cors)与品牌查询

发现默认的端口是9001。访问::9001

会自动进行跳转:

Day06_商品分类(vuetify-nginx-cors)与品牌查询

1.4.目录结构

Day06_商品分类(vuetify-nginx-cors)与品牌查询

webpack:是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。并且提供了前端项目的热部署插件。

1.5.调用关系

我们最主要理清index.html、main.js、App.vue之间的关系:

Day06_商品分类(vuetify-nginx-cors)与品牌查询

理一下:

index.html:html模板文件。定义了空的div,其id为app。

main.js:实例化vue对象,并且通过id选择器绑定到index.html的div中,因此main.js的内容都将在index.html的div中显示。main.js中使用了App组件,即App.vue,也就是说index.html中最终展现的是App.vue中的内容。index.html引用它之后,就拥有了vue的内容(包括组件、样式等),所以,main.js也是webpack打包的入口

index.js:定义请求路径和组件的映射关系。相当于之前的<vue-router>

App.vue中也没有内容,而是定义了vue-router的锚点:<router-view>,我们之前讲过,vue-router路由后的组件将会在锚点展示。

最终结论:一切路由后的内容都将通过App.vue在index.html中显示。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzfdsz.html