h5学习笔记：vuethink 配置

vuethink 是一款基于PHP TP5和Vuejs 结合的后台框架，设计起来是使用较为前沿。在使用的过程，需要对这款开源的后台做一些调整和面对一些细节的坑。前段时间也因为有项目需求，所以下载了玩了一下。好，下面看看如何安装使用。

1 下载源代码

进入到官网 到到这个网页进行下载。

下载完成后，这款后台是前后端分离，基于PHP开发，以及是Vuejs，解压后会frontEnd 和php两个安装包。forntEnd是前端开发包，php是后端开发代码包。

2 安装依赖库

下载的vuejs代码包是没有安装相应的依赖库。因此，你需要在这个时候对前端的代码进行安装依赖库。

这里使用的vscode开发IDE，打开项目后，在终端里面使用npm安装命令进行安装。

npm install

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

3 配置数据库

下载到后端并不能马上使用，还需要对数据库进行调整到自己适合的。

首先进入php的代码包，修改config目录下 database.php配置信息，这里填写数据库的配置，修改数据库名，用户名 和 密码，端口。如本机的用户为root，密码为空，端口为3306，数据库建立一个thinkphp5的标记。

   ‘type‘           => ‘mysql‘,
    // 服务器地址
    ‘hostname‘       => ‘127.0.0.1‘,
    // 数据库名
    ‘database‘       => ‘thinkphp5‘,
    // 用户名
    ‘username‘       => ‘root‘,
    // 密码
    ‘password‘       => ‘‘,
    // 端口
    ‘hostport‘       => ‘3306‘,
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

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

4 运行后端检测是否成功

使用这个后端之前，我们还需要做的一个环节，除了安装依赖库，配置数据库连接配置外，需要检测一下接口链接是否通了，这一步很重要。

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

运行如下链接

http://127.0.0.1/vue/php/

出现vuethink接口字眼 则代表成功了。实际上这个路由缺失（miss的）的情况下出现的，这个时候对应好路由请求，这个接口字眼就不会出现的。部署过程仅仅是告知你联通是否。

我们在php\application\admin\controller 找到对应base.php

    // miss 路由：处理没有匹配到的路由规则
    public function miss()
    {
        if (Request::instance()->isOptions()) {
            return ;
        } else {
            echo ‘vuethink接口‘;
        }
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

5 运行前端第一关

执行npm run dev 运行前端，第一步会出现

请求超时，请检查网络情况。

造成这个问题，基于前端后分离的情况出现跨域的问题。我们很容易理解，前端把fontEnd当成了根目录，但是请求的接口就不是在我们的根目录下面。

从这个猜测，请求接口的路径已经出错了，默认下请求为根目录。

http://localhost/admin/base/getConfigs
  • 1

可是我们刚才放置根目录下的二级目录vue这个文件夹。因此，我们访问的路径应该是，其中php为文件夹，对应的是index.php文件。

http://127.0.0.1/vue/php/index.php/’

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

将axios.defaults.baseURL =HOST

window.HOST = HOST

修改为如下情况。

axios.defaults.baseURL = ‘http://127.0.0.1/vue/php/index.php/‘

window.HOST = ‘http://127.0.0.1/vue/php/index.php/‘
  • 1
  • 2
  • 3
  • 4

这里理解为vue 是我们放置的文件夹，里面又放置了两个文件，分别是forntEnd（前端）和php(后端)

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

6.进入后台

输入admin 密码123456 进入到相关的后台。可以看到这里开发后端。

7.选择禁用eslint 报错

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

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

webpack.base.conf.js 的js 文件

注解一下这个配置。不让eslint给你添麻烦。

 eslint: {
    // configFile: ‘./.eslintrc.json‘
  },

  module: {
    preLoaders: [
      // {
      //   test: /\.js$/,
      //   exclude: /node_modules/,
      //   loader: ‘eslint‘
      // },
      // {
      //   test: /\.vue$/,
      //   exclude: /node_modules/,
      //   loader: ‘eslint‘
      // }
    ],
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

8.后端路由设置

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

php\config\route_admin.php 文件里面。

<?php
// +----------------------------------------------------------------------
// | Description: 基础框架路由配置文件
// +----------------------------------------------------------------------
// | Author: linchuangbin <[email protected]>
// +----------------------------------------------------------------------

return [
    // 定义资源路由
    ‘__rest__‘=>[
        ‘admin/rules‘          =>‘admin/rules‘,
        ‘admin/groups‘         =>‘admin/groups‘,
        ‘admin/users‘          =>‘admin/users‘,
        ‘admin/menus‘          =>‘admin/menus‘,
        ‘admin/structures‘     =>‘admin/structures‘,
        ‘admin/posts‘          =>‘admin/posts‘,
    ],

    // 【基础】登录
    ‘admin/base/login‘ => [‘admin/base/login‘, [‘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/getVerify‘ => [‘admin/base/getVerify‘, [‘method‘ => ‘GET‘]],
    // 【基础】上传图片
    ‘admin/upload‘ => [‘admin/upload/index‘, [‘method‘ => ‘POST‘]],
    // 保存系统配置
    ‘admin/systemConfigs‘ => [‘admin/systemConfigs/save‘, [‘method‘ => ‘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/posts/deletes‘ => [‘admin/posts/deletes‘, [‘method‘ => ‘POST‘]],
    // 【部门】批量启用/禁用
    ‘admin/posts/enables‘ => [‘admin/posts/enables‘, [‘method‘ => ‘POST‘]],

    // MISS路由
    ‘__miss__‘  => ‘admin/base/miss‘,
];
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62

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

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

‘admin/hello/index‘ => [‘admin/hello/index‘, [‘method‘ => ‘GET‘]],
  • 1

然后在php\application\admin\controller，新建一个控制类。

<?php

namespace app\admin\controller;

use think\Request;
use think\Db;
use app\common\adapter\AuthAdapter;
use app\common\controller\Common;

class Hello extends Common
{
    public function  index()
    {

        echo "Hello Vuethink";
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

尝试运行一下

http://127.0.0.1/vue/php/index.php/admin/hello/index
  • 1

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

执行运行后，可以访问到我们的前端路由了。

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

默认下多个控制器均继承了ApiCommon带接口验证，继承Common 没有验证。Common直接继承了Controller类

时间： 2024-10-10 11:11:56

h5学习笔记：vuethink 配置的相关文章

EasyARM i.mx28学习笔记——minicom配置和使用

0 前言 在windows中有很多串口调试软件,例如putty.而ubuntu中也有很多串口调试软件,其中最简单实用的便是minicom了. 本文说明虚拟机中如何使用minicom进行串口调试,具体内容包括虚拟机中载入USB设备,查看USB设备是否存在,minicom端口号,波特率等配置. 为了在虚拟机更好的进行嵌入式Linux开发,建议安装Vmware Tool,这样便可方便的在虚拟机和主机中复制粘贴文件. [Linux学习笔记--虚拟机中安装VMware Tools] 1 在虚拟机中载入设备

STM32学习笔记3-IO配置输入输出

STM32的IO配置时没什么特殊的,有个注意点就是实用IO前需要先打开其时钟线,以下是验证过oK的程序: RCC->APB2ENR|=GpioBApb2enrEn; //使能PORTB时钟 GPIOB->CRL&=GpioBitClrM5_13; // IO的模式清零 GPIOB->CRL|=GpioBit5PP;//PB.5 推挽输出 GPIOB->ODR|=1<<5; //PB.5 输出高 RCC->APB2ENR|=GpioEApb2enrEn; /

django学习笔记--环境配置--mysql配置

一.mysql安装配置 1.fedroa19 -- yum安装myusql: mysql database(选择匹配的ferora版本): mysql-community-server-5.6.19-1.fc19.x86_64,依赖包会自动安装: 自动安装的内容大致包括: a.下载mysql包及其依赖包,并安装: b.创建mysql用户和mysql组: c.初始化mysql的DB,建立基本的表: 最终应该是安装下列5个相关包: mysql-community-libs-5.6.19-1.fc19

Redis学习笔记4-Redis配置具体解释

在Redis中直接启动redis-server服务时, 採用的是默认的配置文件.採用redis-server   xxx.conf 这种方式能够依照指定的配置文件来执行Redis服务. 依照本Redis学习笔记中Redis的依照方式依照后,Redis的配置文件是/etc/redis/6379.conf.以下是Redis2.8.9的配置文件各项的中文解释. #daemonize no 默认情况下, redis 不是在后台运行的.假设须要在后台运行,把该项的值更改为 yes daemonize ye

Lua学习笔记--环境配置&amp;Hello World

最近发现要恶补的东西实在是太多了,DX还没学完,现在发现还要用Lua脚本语言,于是,我的笔记又加了一个系列,Lua学习笔记. 一.简介 Lua是一门小巧的脚本语言,其设计目的是为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能.Lua由标准C编写而成,几乎在所有操作系统和平台上都可以编译,运行.Lua并没有提供强大的库,这是由它的定位决定的.所以Lua不适合作为开发独立应用程序的语言. Lua脚本可以很容易的被C/C++ 代码调用,也可以反过来调用C/C++的函数,这使得Lua在应用程序

Redis学习笔记4-Redis配置详解

原文:  http://blog.csdn.net/mashangyou/article/details/24555191 在Redis中直接启动redis-server服务时, 采用的是默认的配置文件.采用redis-server   xxx.conf 这样的方式可以按照指定的配置文件来运行Redis服务.按照本Redis学习笔记中Redis的按照方式按照后,Redis的配置文件是/etc/redis/6379.conf.下面是Redis2.8.9的配置文件各项的中文解释. 1 #daemon

EasyARM i.mx287学习笔记——minicom配置和使用

0 前言 在windows中有非常多串口调试软件,比如putty. 而ubuntu中也有非常多串口调试软件,当中最简单有用的便是minicom了. 本文说明虚拟机中怎样使用minicom进行串口调试,详细内容包含虚拟机中加载USB设备,查看USB设备是否存在.minicomport号.波特率等配置. 为了在虚拟机更好的进行嵌入式Linux开发,建议安装Vmware Tool.这样便可方便的在虚拟机和主机中复制粘贴文件. [Linux学习笔记--虚拟机中安装VMware Tools] 1 在虚拟机

WAS学习笔记之配置MySQL数据源

最近开始学习WAS,今天在websphere中配置MySQL的DataSource.我下载的是WAS for developers版本,建议大家可以下载这个版本.http://www.ibm.com/developerworks/downloads/ws/wasdevelopers/index.html 运行WAS控制台,在左边的导航菜单中点开资源->JDBC->JDBC提供程序. 这个开发人员版本提供的JDBC驱动很少,我们需要自己安装MySQL的JDBC驱动. 在新建JDBC驱动前将系统中

CentOS学习笔记--目录配置

  Linux目录配置 类Linux的目录看上去差不多,为什么? 以下内容节选自l 鸟哥的 Linux 私房菜 -- 基础学习篇目录  第六章.Linux 的文件权限与目录配置 3. Linux目录配置 Linux目录配置的依据-FHS Filesystem Hierarchy Standard (FHS)标准,根据FHS(http://www.pathname.com/fhs/)的官方文件指出, 他们的主要目的是希望让使用者可以了解到已安装软件通常放置于那个目录下, 所以他们希望独立的软件开发