vuethink接口,vue的h5框架

　　Vuethink是一个基于PHP TP5和Vuejs结合的后台框架，被设计成使用上最先进的。在使用的过程中，我们需要对这个开源背景做一些调整，面对一些细节。前段时间因为项目需求，下载播放了一下。好了，我们来看看怎么安装使用吧。

　　1下载源代码

　　去官网，从这个网页下载。

　　下载后，这个后台是基于php开发的，和Vuejs。解压缩后，将安装前端和PHP。ForntEnd是前端开发包，php是后端开发代码包。

　　2安装依赖库

　　下载的vuejs代码包没有安装相应的依赖库。所以这个时候需要在前端代码上安装依赖库。

　　这里使用的vscode开发IDE，打开项目后，使用npm安装命令将其安装在终端中。

　　npm安装

　　安装过程会太慢。完成后，最后会出现一些警告，这里可以不处理。安装代码库后，如下图所示。

　　3配置数据库

　　下载到后端不能马上用，需要调整数据库适合自己。

　　首先进入php的代码包，在config目录下修改database.php的配置信息。在这里，填写数据库的配置，并修改数据库名称、用户名和密码以及端口。如果这台机器的用户是root，密码为空，端口为3306，数据库建立thinkphp5标记。

　　type=mysql ，

　　//服务器地址

　　Hostname=127.0.0.1 ，//数据库名 database=thinkphp5 ，//用户名 username=root ，//密码 password=，//端口 hostport=3306 ，

　　1234567891011

　　将Install.sql安装到数据库中。这里先用Navicat for Mysql工具构建一个名为thinkphp5的数据库，然后右键运行sql文件，指向install.sql文件。完成后，我们可以看到我们的数据库表已经安装。

　　4后端检测是否成功。

　　在使用这个后端之前，我们需要做另外一个步骤，除了安装依赖库和配置数据库连接配置之外，我们还需要检查接口链接是否连接。这一步非常重要。

　　这里使用的是xampp服务器，在一个htdocs中放了frontEnd和php两个文件包，建立了一个文件夹vue。

　　运行以下链接

　　http://127.0.0.1/vue/php/

　　vuethink接口这个词表示成功。实际上这个路由是缺失的，如果这个时候匹配路由请求，这个接口字是不会出现的。部署过程只是告诉你联通是否。

　　我们在PHP \ application \ admin \ controller中找到了对应的base.php。

　　//错过路由：处理不匹配的路由规则。

　　公共函数miss(){ if(Request:instance()-iso options()){ return；} else {echo vuethink接口；} }

　　123456789

　　5运行前端第一级。

　　执行npm run dev运行前端，第一步就出现了。

　　请求超时，请检查网络。

　　这个问题是基于前端和后端分离的跨域问题造成的。很好理解，前端以fontEnd为根目录，但是请求的接口不在我们的根目录下。

　　由此猜测，请求接口的路径出了问题，请求默认是根目录。

　　http://本地主机/管理/基本/获取配置

　　但是我们只是把文件夹vue，二级目录放在根目录下。所以我们访问的路径应该是，其中php是文件夹，对应的是index.php文件。

　　 http://127 . 0 . 0 . 1/vue/PHP/index . PHP/

　　要解决这个问题，先在前端找，main.js修改两个请求的地方。

　　Set axios.defaults.baseURL=HOST

　　窗户。主机=主机

　　换成以下情况。

　　axios . defaults . base URL= http://127 . 0 . 0 . 1/vue/PHP/index . PHP/

　　1234

　　这里了解到vue是我们放的文件夹，里面还有两个文件，分别是forntEnd(前端)和php(后端)。

　　修改完就可以进入后端了。

　　去后台

　　输入管理员密码123456进入相关后台。你可以在这里看到开发后端。

　　7.选择禁用eslint以报告错误。

　　由于vuethink采用了埃斯林特严格的机制，所以你的代码一旦不按照这个机制写格式，例如你写双引号，空格不按照对齐。这个时候就会报错，报错。这肯定是受不了。

　　如果不需要这个严格的验证机制，那么你可以在这个机制上取消这个验证。搜索前端打开

　　webpack.base.conf.js的射流研究…文件

　　注解一下这个配置。不让埃斯林特给你添麻烦。

　　eslint: {

　　//配置文件：""。/.eslintrc.json

　　模块：{

　　预加载器：[

　　//{

　　//测试：/\。js$/，

　　//exclude: /node_modules/，//loader: eslint //}，//{ //test: /\ .vue$/，//exclude: /node_modules/，//loader: eslint //} ]，

　　1234567891011121314151617

　　8.后端路由设置

　　开发过程，我们需要对路由进行设置开发，设置不同的路由，对应好不同的文件。框架提供了配置路由的设置，这个文件在。

　　php \ config \ route _管理员文件里面。

　　？服务器端编程语言(专业超文本预处理器的缩写)

　　//-

　　//描述：基础框架路由配置文件

　　////作者：林创斌linchuangbin@honghaiweb.com//-返回[ //定义资源路由_ _ rest _ _ =[ admin/rules = admin/rules ， admin/groups=admin/groups ， admin/users = admin/menus ， admin/structures = admin/structures ， admin/posts=admin/posts ，]，//【基础】登录admin/base/log in =[ admin/base/log in ，[method=POST]]，//【基础】记住登录admin/base/relogin =[ admin/base/relogin ，[method=POST]]，//【基础】修改密码admin/base/setInfo =[ admin/base/setInfo ，[method=POST]]，//【基础】退出登录admin/base/logout =[ admin/base/logout ，[method=POST]]，//【基础】获取配置admin/base/getConfigs =[ admin/base/getConfigs ，[method=POST]]，//【基础】获取验证码admin/base/get verify =[ admin/base/get verify ， [method=GET]]，//【基础】上传图片admin/upload =[ admin/upload/index ，[method=POST]]，//保存系统配置管理/系统配置=[管理/系统配置/保存，[方法=POST]]，//【规则】批量删除admin/rules/deletes =[ admin/rules/deletes ，[method=POST]]，//【规则】批量启用/禁用admin/rules/enables =[ admin/rules/enables ，[method=POST]]，//【用户组】批量删除admin/groups/deletes =[ admin/groups/deletes ，[method=POST]]，//【用户组】批量启用/禁用admin/groups/enables =[ admin/groups/enables ，[method=POST]]，//【用户】批量删除admin/users/deletes =[ admin/users/deletes ，[method=POST]]，//【用户】批量启用/禁用admin/users/enables =[ admin/users/enables ，[method=POST]]，//【菜单】批量删除admin/menus/deletes =[ admin/menus/deletes ，[method=POST]]，//【菜单】批量启用/禁用admin/menus/enables =[ admin/menus/enables ，[method=POST]]，//【组织架构】批量删除admin/structures/deletes =[ admin/structures/deletes ，[method=POST]]，//【组织架构】批量启用/禁用admin/structures/enables =[ admin/structures/enables ，[method=POST]]，//【部门】批量删除admin/POST/deletes =[ admin/POST/deletes ，[method=POST]]，//【部门】批量启用/禁用admin/posts/enables =[ admin/posts/enables ，[method=POST]]，//MISS路由__miss__=admin/base/miss ，]；

　　1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162

　　例如我们模块里面定义个新路由，那么你就在首先

　　并在路由里面添加一个路由设置。

　　admin/hello/index =[ admin/hello/index ，[method=GET]]，

　　然后在php \应用\管理\控制器，新建一个控制类。

　　？服务器端编程语言(专业超文本预处理器的缩写)

　　命名空间app \ admin \ controller使用思考\请求；使用think \ Db使用app \ common \ adapter \ auth adapter；使用app \ common \ controller \ Common类Hello扩展了Common { public function index(){ echo Hello Vuethink ；} }

　　1234567891011121314151617181920

　　试试看。

　　http://127 . 0 . 0 . 1/vue/PHP/index . PHP/admin/hello/index

　　Admin/hello/index是我们定义的路由，通过Get的方式获取数据。

　　跑完之后就可以接入我们的前端路线了。

　　以此类推，可以定义更多的路由，设置更多继承接口的方法。

　　默认情况下，许多控制器通过接口验证继承ApiCommon，但不通过验证继承Common。Common直接继承了Controller类。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。