Ⅰ （一）基于 vue-element-admin 前端与后端框架搭建
通过 src/settings.js 进行全局配置：
get-page-title.js 在 src/permission.js 中被引用
修改 package.json
执行命令启动
中间件是一个函数，请求和响应周期中被顺序调用
写一个中间函数
调用中间件注意事项：
应用如何响应请求的一种规则
响应 / 路径的 get 请求
响应 / 路径的 post 请求
规则主要分两部分
通过自定义异常处理中间件处理请求中产生的异常
使用时需要注意两点：
浏览器输入 http://localhost:5000/user
安装 boom 依赖，最大的好处是可以快速的帮我们生成一些异常信息
app.js
创建 router 文件夹，创建 router/index.js
创建 router/user.js
创建 router 文件夹，创建 router/constant.js
启动，访问根路径 http://localhost:5000
这里指定的路由的前缀 /user 所有访问路径前要加 /user
访问 http://localhost:5000/user/info
访问一个不存在的路径
自定义路由异常处理中间件
注意两点:
访问一个不存在的路径时，会返回一个 json 的结果，方便前端做出处理
Ⅱ 前端vue与后端Thinkphp在服务器的部署
vue在服务端部署时，我们都知道通过npm run build 指令打包好的dist文件，通过http指定是可以直接浏览的，Thinkphp通过域名指向index.php文件才可以浏览。要使前端正常调用后端数据，有两种方法：1、前端跨域调用后端数据，2、前端打包文件部署在后端的服务器文件夹下（同域）。
web服务器： apache
一、跨域
在服务器配置站点：
在路径/home/www/ 下创建test项目文件夹，用来放项目文件。
找到httpd-vhosts.conf文件配置站点
前端站点：
ServerName test.test.com
DocumentRoot "/home/www/test/dist"
DirectoryIndex index.html
后端站点：
ServerName test.testphp.com
DocumentRoot "/home/www/test/php"
DirectoryIndex index.php
将前端打包好的dist文件放在/home/www/test/ 文件夹下，运行http://test.test.com可浏览，当路径改变时，刷新会出现404错误。此时dist文件下创建一个.htaccess文件，当路径不存在时，路径指向http://test.test.com/index.html能解决此问题。
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
在/home/www/test文件夹下创建项目根目录php文件夹，将thinkphp文件放在php下。TP5的入口文件在public文件下，在这将public下的入口文件index.php挪到php文件夹下（个人习惯将入口文件放在项目根目录）, 后端绑定Index模块。
前端调用后端接口，存在跨域，跨域解决方法有好几种，在这我将在后端php做配置，解决跨域问题，在公用控制器设置跨域配置：
class Common extends Controller
{
public $param;
// 设置跨域访问
public function _initialize()
{
parent::_initialize();
isset($_SERVER['HTTP_ORIGIN']) ? header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']) : '';
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, authKey, sessionId");
$param = Request::instance()->param();
$this->param = $param;
}
}
前端调用登录接口： this.axios.post('http://test.testphp.com/index.php/base/login', {user: '', password: ''})。
(可在webpack.base.conf.js文件下可定义接口：http://test.testphp.com/index.php/)
二、同域
后端配置同上，公共配置器中的header配置注释。将前端的dist文件下的所有文件（包含.htaccess），放在php文件夹下。将后端index控制器的index方法的路径重定向php下的index.html文件：
namespace app\index\controller;
use think\Controller;
class Index extends Controller
{
public function index() {
$this->redirect('/index.html');
}
}
前端调用登录接口： this.axios.post('/index.php/base/login', {user: '', password: ''})
转自：https://blog.csdn.net/qq_35465132/article/details/78986675
Ⅲ vue-cli做前端express为后台怎么进行连接
express写接口前端vue写页面，用vue-resource或者axios做请求，中间加一层api层也可以不加，看你的结构想写成什么样
Ⅳ vue前端收到的数据与后台发送的数据不一致是什么原因
打印出后台从数据库中查询出的数据，发现字段是完整的，并无缺失；打印JSON字符串，发现缺少字段，定位到问题入口；查看JSON.toJSONString()方法后，并未发现异常；将该模块的所有文件重新审阅一遍后发现，实体类User.java中有个布尔类型的成员变量的get方法不对头；这就导致JSON将User对象转换成json字符串时，无法通过反射获取到其state字段，最终给前端的json数据也就没有该字段。
处理方法，重写实体类User的get、set方法并检验，确保不再出错。重启后，测试显示正常。查看后台支持的编码格式和前端axios发送过去的的编码格式是否一致。不一致就会出现跨域问题。至于为什么也不明白，可能是浏览器认为不一致的编码就是跨域也可能就是浏览器的bug。Vue请求后端数据的方法，首先在api文件夹下，建立接口js文件；然后确定baseURL和url后缀；最后输入需要获取数据的代码即可。千锋教育截止目前已在北京、深圳、上海、广州、郑州、成都、大连等20余个核心城市建立直营校区，服务近20万学员、近千所高校和数万家企业。
Ⅳ 后端go前端vue连接websocket失败failed
是Vue.config.js配置代理的问题。
后端工程师隶属于软件研发工程师，是从事软件开发相关工作人员，其主要职责是平台设计、接口设计和功能实现。
主要职责集中在三大部分，分别是平台设计、接口设计和功能实现。平台设计主要是搭建后端的支撑服务容器;接口设计主要针对于不同行业进行相应的功能接口设计，通常一个平台有多套接口，就像卫星导航平台设有民用和军用两套接口一样;功能实现则是完成具体的业务逻辑实现。
Ⅵ 后端thinkphp和前端vue怎么协调
thinkphp作为服务端，为客户端提供数据。而Vue是客户端的一个JavaScript框架。便于我们对页面进行处理。
一般情况下，vue通过异步请求来获取数据。由于实例化vue时已经将相关的变量、模板等定义好了。
当获取到thinkphp回传的数据后，将会自动的把数据对应的呈现在网页上。 你看过后很简单吧以后不会可以向我一样经常到后盾人找找相关教材看看就会了，希望能帮到你，给个采纳吧谢谢(⁄ ⁄•⁄ω⁄•⁄ ⁄)
Ⅶ vue前端调用后端是通过服务器还是浏览器
vue怎么同时调用两台不同服务器的接口
vue组件的数据传递应该是单向，永远是向下的，把父组件属性方法传递到子组件typescript值得学习吗，先学typescript还是javascript。
如果子组件要改变不同的颜色，是应该接受父组件传递进来的props，自己调用自己的方法，把props当个参数来判断来显示什么颜色，而不是让父元素调子组件的方法。
还有一种是vuex，组件本身跟store的某个值绑定，外部组件修改store的值，来影响该组件的颜色。
web前端怎么调用api接口
1、首先需要确定第三方的接口的基本信息：地址、请求方式，参数、返回值，接口模式这里第三方的接口是restful风格的，采用get请求。
2、确定好接口的相关模式之后，这里编写http的请求，用参数、请求模式构造请求。
3、这里最重要的构造http的请求，这里采用CloseableHttpClient，设置相关的header，采用HttpResponse接受用户的返回值。
4、在业务类中只需要封装相关的请求，把参数传入给接口中即可，这里返回jsonObject方便解析使用。
5、调用api接口还有其他的模式，如图通过MultiValueMap，封装参数，构造HttpEntity对象，RestTemplate发送请求即可。
使用vue的ajax-post请求调用接口
。
一般来说post请求应该传递对象，而不是直接传递数组，直接传递数组后端可能无法获取到你传过去的参数，个人建议要么吧你传过去的参数序列化，要么把这个数组JSON.stringify()转换成json字符串传递过去。
前端调用后端的接口有几种方式了
一般不存在前端给后端接口的情况，几乎都是后端给前端接口，所谓接口就是可以通过服务端部署的机器提供出来的URL地址进行动态的数据交互。
通常的工作流是后端跟前端协商定义数据接口格式（一般就是JSON格式）形成文档，后端实现接口，前端做静态的mock（可以是直接在页面的JS拼假数据或者通过JSONserver按照真实调用服务的方式集成），后端实现服务接口，两边都完成后集成联调。
现在有swagger或者apiairy等工具可以更简化这个过程。
Ⅷ VUE3前端开发入门系列教程五：Nginx+ThinkJS后端无缝接入
## vite打包：会自动编译，生成dist文件夹
## thinkjs配置: src/config/router.js
## nginx配置
-----
在vue前端访问后端时直接使用ThinkJS的API：/api/...
Ⅸ 求解，前端和后端交互需要学什么比如说，后端发送数据，前端接收到数据后自动生成数据的折线图或表格。
要学习前端和后端沟通的桥梁 http协议，前端和后端是典型的B/S结构，客户端（前端）提交Request（请求），有服务器端（后端）提供响应（Response），Request有get，post，put等方法，Response有各种返回的状态码
要学习现在主流的Web交互方式（前端和后端交互）RESTful，使用JSON格式描述数据
要学习后端技术，比如nodejs
要学习前端技术，javascript和流行的框架reactjs，vuejs等，可以简单方便的实现数据的双向绑定，一般的数据表格可以轻松展现
如要要把数据生成复杂的表格或图形还需要更强大的数据图形类的框架来实现，流行的有d3js，chartjs等
Ⅹ django-restful:与前端vue接口对接
category 与vue 接口对接
首先是需要把所有的category的内容取出来
由于前端vue展示category是分级的
一级 二级 三级 这样展示的
所以我们需要把三个内容都拿出来
但是首先需要取出第一级 然后第一级镶嵌了第二级，然后第二级镶嵌第三季 ，就跟上面goods中显示外键的category的内容一样
我们还是需要写serializer
这样就是一级 镶嵌二级 二级镶嵌三级
但是这里有一个问题不要搞错了 这三个类的位置不能弄错了
因为一级是调用二级 所以二级一定是先写好了的
所以二级一定在一级上面 同理 三级要在二级上面
然后就是view
在过滤中加上category_type = 1 这样就可以直接显示第一大类 然后第一大类中有第二小类 这样更有层次感 如果直接一下子全部取出来 就不好分辨了
同时我们还要处理取出某个单一的信息
所以 我们继承了mixins.RetrieveModelMixin 这个类，这是一个显示详情的类
例如显示某个动物园的某个动物那样
/zoos/id
这样的url
同样这样写了 我们就直接只配置category的url就够了
就不用考虑 后面的id是否还需要配置一个url 这些都不用考虑了，因为我们继承了 viewset这个类
这些问题他都帮我们解决了
这样处理我们后端就能看见了
但是这样处理了 前端对接时 会发现 无法显示
因为有一个跨域问题
这个问题前后端 都可以独自解决 这里学习的是后端，所以讲一下后端的做法
就是修改服务端
在github上搜索django-cors-headers就可以找到这个信息
同样里面介绍如何使用
安装
pip install django-cors-headers
然后settins中INSTALLED_APPS配置和settings中MIDDLEWARE配置
这里要注意 MIDDLEWARE配置中
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
这两个必须放在
'django.middleware.csrf.CsrfViewMiddleware',
这个的前面 不然会报错
同时还要配置
CORS_ORIGIN_ALLOW_ALL = True
允许跨域访问 它默认是False
这样前端就可以正常显示了
为什么会产生跨域访问
因为vue中api配置的中 我们调试数据 不可能把所有的host 都修改了 有一些是线上数据 我们调试的是本地的一部分数据 所以要重新定一个localhost
修改部分 host的链接
这样就导致了跨域 本身使用的是一个线上host端口，但是数据中有一部分是请求的是本地host端口 导致了跨域访问