使用vuethink搭建系统
来源:互联网 发布:部落冲突兵种升级数据 编辑:程序博客网 时间:2024/06/07 20:29
本文介绍如何使用vuethink搭建系统。
一、下载
地址:http://www.vuethink.com/
下载下来以后放在web的www目录下,解压。
二、安装依赖库
cd frontEndnpm install
这里首先需要安装好npm(nodejs的包管理工具,装好nodejs以后就带npm了),安装方式不详述。
npm install命令会根据当前目录下的package.json文件安装依赖环境。
三、数据库配置
1.修改数据库配置信息
首先进入php的代码包,修改config目录下 database.php配置信息,包括用户名、密码、数据库(默认为thinkphp5)、端口(3306)。
2.添加数据库
直接导入php文件夹下的install.sql到数据库中即可。
3.测试
http://127.0.0.1/vue/php/ 运行该链接,可出现vuethink即成功。
四、运行
1.修改前端配置
修改前端文件,frontEnd/src/main.js
axios.defaults.baseURL = 'http://127.0.0.1/[your project name]/php/index.php/'window.HOST = 'http://127.0.0.1/[your project name]/php/index.php/'
以上原来的语句为:
axios.defaults.baseURL = HOSTwindow.HOST = HOST
这里在前端的HOST是默认下前端的web根目录,因为前后端分离,所以会出现访问错误,我们把它修改为后端的根目录即可。
2.运行
cd frontEndnpm run dev
正常即可访问项目首页的登录页面了,默认用户名密码为admin、123456
五、定义后端资源路由
到上一步就成功运行vuethink系统了。如果需要新增一个后端资源路由,需要以下两个步骤:
1.路由配置
可以在php/config/route_admin.php文件里添加以下:
'admin/test/index' => ['admin/test/index', ['method' => 'GET']],
2.添加控制器文件
在 php\application\admin\controller中添加Test.php文件:
<?phpnamespace app\admin\controller;use think\Request;use think\Db;use app\common\adapter\AuthAdapter;use app\common\controller\Common;class Test extends Common{ public function index() { echo "Hello Vuethink"; }}
此时访问http://127.0.0.1/[your project name]/php/index.php/admin/hello/index即可看到输出的资源内容,说明该资源配置成功。
六、配置前端路由
上一节讲了如何配置后端资源路由,前端需要请求数据时直接访问定义在php/config/route_admin.php中的路由即可。
前端的路由是在\frontEnd\src\routes.js中进行配置,这个对熟悉vue的同学来说肯定很easy了,具体的操作可以查看vue-router的官方介绍。
- 使用vuethink搭建系统
- vuethink使用教程
- vuethink 安装流程
- vuethink 添加菜单
- 使用Pelican搭建博客系统
- 使用JPress快速搭建系统
- 使用Grafana搭建监控系统
- h5学习笔记:vuethink 配置
- 使用 JIRA 搭建企业问题跟踪系统
- 使用JIRA搭建企业问题跟踪系统
- 使用JIRA搭建企业问题跟踪系统
- 使用JIRA搭建企业问题跟踪系统
- 使用 JIRA 搭建企业问题跟踪系统
- 使用monit搭建一个监控系统
- 使用MOSES搭建网页翻译系统
- 使用JIRA搭建企业问题跟踪系统
- 腾讯风铃系统如何搭建使用?
- 使用monit搭建一个监控系统
- 装饰模式
- MySql_创建用户并赋予权限
- TimeOut Expired 数据链接超过最大链接数
- NYOJ 41
- ROS下Kinect2的驱动安装
- 使用vuethink搭建系统
- less学习(八)— 关于导入
- 判断树是否为平衡二叉树
- linux 重启挂载 分区问题
- Intent及其七大属性及intent-filter设置
- 扒站神器
- Flex布局display:(-webkit-)flex;
- 不加载,手动实例化Service
- Could not launch app 解决办法