项目11 项目实战：开发个人Vue网络请求

11.1开发个人博客系统项目实战onetasks项目分析个人博客目录CONTENTS项目展示1组件规划21.项目展示——博客列表App根组件Php组件（Node组件，Vue组件类似）分类组件：Cate热门组件：Hot尾部组件：Footer1.项目展示——博客内容App根组件尾部组件：Footer文章组件：Article分类组件：Cate热门组件：Hot1.项目展示——添加博客App根组件写博客组件：Edit2.组件规划App根组件Php组件Cate组件（分类）Hot组件（热门）Node组件Cate组件（分类）Hot组件（热门）Vue组件Cate组件（分类）Hot组件（热门）Edit组件（写博客）Article组件（文章）Cate组件（分类）Hot组件（热门）Footer组件演示项目运行效果1理顺组件之间的关系2总结除App根组件外，需要制作8个组件其中，6个是App的子组件，2个是Php，Node，Vue，Article的子组件前端准备个人博客目录CONTENTS创建Vite项目1路由插件的使用2Axios插件的使用31.创建Vite项目1.指定目录（项目的保存目录）2.设置淘宝镜像npmconfigsetregistryhttps://3.创建项目npmcreatevite@latest2.路由插件的使用1.使用npm命令来安装路由npmivue-router@4安装完成之后可以在package.json文件中查看到vue-router的相关信息2.路由插件的使用导入组件2.创建路由器对象在src目录下新建router目录在router目录下新建index.js文件，封装路由器对象创建路由器对象配置路由规则1.使用npm命令来安装路由npmivue-router@42.路由插件的使用1.导入路由插件2.创建路由器对象在src目录下新建router目录在router目录下新建index.js文件，封装路由器对象2.导入路由器对象3.应用路由插件3.在main.js中导入路由器对象1.使用npm命令来安装路由npmivue-router@33.Axios插件的使用1.使用npm命令安装axios插件npmiaxios--save2.解决跨域问题proxy选项：设置代理服务器地址2在项目根目录，修改配置文件vue.config.js1.封装axios对象Axios插件的使用3路由插件的使用2总结安装路由插件创建路由对象在main.js中导入路由对象npmcreatevite@latest创建Vite项目1安装Axios跨域问题后端准备个人博客目录CONTENTS创建后台网站1导入数据库2整理后台接口31.创建后台网站启动服务weblaravel为后台项目根目录将后台项目weblaravel拷贝到E:\创建网站：域名：localhost端口：80802.导入数据库打开db_test数据库导入articles表3.整理后台接口后台路径：http://localhost:8080接口名称pathmethod参数返回数据获取php栏目博客/getphpget无json获取node栏目博客/getnodeget无json获取vue栏目博客/getvueget无json获取热门列表/gethotget无json获取博客文章内容/getbloggetid：博客idjson添加博客/addposttitle：博客名称cate：博客栏目author：博客作者content：博客文章内容bool熟悉后台接口3导入数据库2总结导入articles表http://localhost:8080创建后台网站1个人博客系统任务实现内容CONTENTS提出任务1分析任务2本次课任务开发个人博客系统1.提出任务任务要点：案例效果：2.分析任务创建导航组件创建底部组件创建文章分类组件C