技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-4.跨域且传输数据,并优化后端接口

技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-4.优化后端接口,前端使用axios实现接口功能

技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-1.工具和本地环境
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-2.启动项目
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-3.路由、模型与数据库操作
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-4.跨域且传输数据,并优化后端接口
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-5.用户登录（一），密码的bcrypt（hash）加密与验证
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-6.用户登录（二），token验证
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-7.分类的模型关联和通用CRUD接口
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器)，并批量上传图片

1.制作admin端页面

大家对前端不熟悉的话可以参考我之前的文章

技能学习：学习使用Node.js +
Vue.js，开发前端全栈网站-2.启动项目

技能学习：学习使用Node.js +
Vue.js，开发前端全栈网站-3.element-ui和路由的安装和使用

技能学习：学习使用Node.js + Vue.js，开发前端全栈网站-4.使用axios，并创建接口上传数据到mongodb数据库

里面介绍了相关启动项目的包和element前端样式框架等。

2.tp6解决跨域

\think\middleware\AllowCrossDomain::class,

一行代码,tp6封装好的,真方便啊.

3.优化后端接口,改为restful风格接口

增删改查数据分别使用post/delete/put/get定义接口函数和地址,前端就可以以同一个接口地址直接用这四个方法进行单个数据的增删改查.
地址修改前:

地址修改后:

路由地址加入/rest表示此类函数使用restful风格接口.
以新增数据接口为例,地址为:localhost:3000/admin/api/rest/admin.

修改接口函数:
增:

public function add()
{// 获取前端传值$data = request() -> param();// return $data;// 使用模型格式化传来的数据$admin = new Admin;// 利用模型将数据传到数据库$admin->save(['username' => $data['username'],'password' => $data['password']]);// 返回结果return '新增数据成功';
}

查:

public function findall(){// 如果没有id传入，查找数据表中所有数据$admins = Admin::select();// 返回查找到的数据return $admins;
}public function find()
{// 获取前端传值$id = request() -> param();$admins = Admin::find($id);// 返回查找到的数据return $admins;}

改:

public function update()
{// 获取前端传值$data = request() -> param();// return $data;// 静态方法直接更新$admin = Admin::update($data, ['id' => $data['id']]);return '修改数据成功';
}

删:

public function delete()
{// 获取前端传值$id = request() -> param();// 查找$admin = Admin::find($id);$admin->delete();return '删除数据成功';
}

4.前端axios根据接口地址调用接口

admin端接口路由前缀:

axios方法使用http拼接接口方法地址:

最终页面:

到此前后端数据交互完成,由于前两个系列文章前端写的都很细,在本php系列文章就不准备耗时间重新编写前端页面了,之后待php项目完成,准备出一个php全栈项目视频,到时候我会将整个网站的前后端搭建过程展示给大家.
下篇文章做用户的登录.

更多设计、功能的学习经验，大家也可以去我的公众号查看！

————

技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-4.跨域且传输数据,并优化后端接口相关推荐

技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-7.分类的模型关联和通用CRUD接口
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-7.分类的模型关联和通用CRUD接口技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和 ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-2.启动项目
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-2.启动项目技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本地环境技能学习:学习 ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-3.路由、模型与数据库操作
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-3.路由.模型与数据库操作技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本地环境 ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器)，并批量上传图片
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器),并批量上传图片技能学习:学习使用php(tp6框架) + ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-6.用户登录（二），token验证
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-6.用户登录(二),token验证技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本 ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-5.用户登录，密码的bcrypt（hash）加密与验证
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-5.用户登录,密码的bcrypt(hash)加密与验证技能学习:学习使用php(tp6框架) + vue.js,开发前端全 ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-1.工具和本地环境
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本地环境技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本地环境技能学习 ...
两个读书笔记：springboot+vue.js分布式组件全栈开发训练营 + 大数据开发基础
(springboot+vue.js分布式组件全栈开发训练营原文在notion中, 大数据开发在思维导图中, 这个博客只是保存, 无法阅读. ) what is different between s ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...