Thinkphp 6.0 - 小白初次环境搭建详细步骤(windows)

前言

我推荐你打开官方文档,两份文档对照来安装。

官方文档:https://www.kancloud.cn/manual/thinkphp6_0/1037481

版本要求

Thinkphp 6.0 要求您的 PHP 版本必须 >= 7.1.0

下载 Composer

6.0 版本开始,必须通过 Composer 方式安装和更新,所以你无法通过 Git 下载安装。

Composer 下载传送门:https://getcomposer.org/Composer-Setup.exe
在这里插入图片描述

安装 Composer

如果双击安装时出现:Windows 已保护你的电脑,则查看 这篇文章解决。

点击 Install for all users

在这里插入图片描述
然后按照如图所示勾选,点击 Next 下一步。

在这里插入图片描述
选择安装位置,继续 Next

在这里插入图片描述
接下来是检查你的 PHP 环境,一般是自动获取(如果不是则需要手动指向你的PHP目录)。

在这里插入图片描述
是否使用代理服务器,如果不懂则不要勾选。

在这里插入图片描述
最后 Install 等待安装。

测试是否安装成功,cmd 键入以下命令:

composer

如果出现如下图所示,即为成功:
在这里插入图片描述

安装 Thinkphp 6.0

接下来,我们来正式安装一下。


第一步:cmd 切换到你的 WEB 根目录,即 WWW 下:
在这里插入图片描述
第二步:执行安装 Thinkphp 命令

composer create-project topthink/think tp6 6.0.*-dev
  • create-project: 是composer中的项目创建命令
  • topthink/think: ThinkPHP的组件包
  • tp6: 是当前的项目目录(如果没有创建, 该命令会自动创建的)
  • 6.0.*-dev: 要下载的版本标签(这里6.0)

注意:这里的 tp6 目录名你可以任意更改,你可以把它理解为项目名称。

第三步:等待即可,如果长时间不动或是安装失败,请 换源。
在这里插入图片描述
最后安装成功,如下图所示:
在这里插入图片描述
此时,你的 WWW 就会多出一个 tp6 文件夹:
在这里插入图片描述

Hello World!

打开 cmdcdtp6 目录下,键入以下命令:

php think run

在这里插入图片描述
然后再浏览器中输入路径即可:

http://127.0.0.1/tp6/public/

实际部署中,应该是绑定域名访问到 public 目录,确保其它目录不在 WEB 目录下面。

在这里插入图片描述

1. 下载Element UI 在官方网站https://element.eleme.cn/#/zh-CN/component/installation下载Element UI,解压到thinkphp6.0项目的public目录下。 2. 配置路由 在应用目录下的route目录中新建一个admin.php文件,用于配置后台路由。 代码如下: ``` <?php // admin模块的路由 use think\facade\Route; Route::rule('/', 'index/index'); Route::rule('login', 'login/index'); Route::rule('home', 'home/index'); Route::rule('user', 'user/index'); ``` 3. 创建控制器 在应用目录下的controller目录中新建一个Admin控制器,用于管理后台页面。 代码如下: ``` <?php namespace app\admin\controller; use think\Controller; class Admin extends Controller { public function index() { return $this->fetch(); } public function login() { return $this->fetch(); } public function home() { return $this->fetch(); } public function user() { return $this->fetch(); } } ``` 4. 创建视图文件 在应用目录下的view目录中新建一个admin目录,用于存放后台页面的视图文件。 代码如下: index.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台首页</title> <link rel="stylesheet" href="/element-ui/theme-chalk/index.css"> </head> <body> <div id="app"> <el-alert title="成功提示" type="success" :closable="false" show-icon> </el-alert> </div> <script src="/element-ui/index.js"></script> <script> new Vue({ el: '#app' }); </script> </body> </html> ``` login.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台登录</title> <link rel="stylesheet" href="/element-ui/theme-chalk/index.css"> </head> <body> <div id="app"> <el-form> <el-form-item label="用户名"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">登录</el-button> </el-form-item> </el-form> </div> <script src="/element-ui/index.js"></script> <script> new Vue({ el: '#app', data: { form: { username: '', password: '' } }, methods: { submitForm() { console.log(this.form); } } }); </script> </body> </html> ``` home.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台首页</title> <link rel="stylesheet" href="/element-ui/theme-chalk/index.css"> </head> <body> <div id="app"> <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">菜单1</el-menu-item> <el-menu-item index="2">菜单2</el-menu-item> <el-menu-item index="3">菜单3</el-menu-item> </el-menu> </div> <script src="/element-ui/index.js"></script> <script> new Vue({ el: '#app', data: { activeIndex: '1' }, methods: { handleSelect(index, indexPath) { console.log(index, indexPath); } } }); </script> </body> </html> ``` user.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户管理</title> <link rel="stylesheet" href="/element-ui/theme-chalk/index.css"> </head> <body> <div id="app"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> <script src="/element-ui/index.js"></script> <script> new Vue({ el: '#app', data: { tableData: [{ name: '张三', age: 18, address: '北京市朝阳区' }, { name: '李四', age: 20, address: '上海市浦东新区' }, { name: '王五', age: 22, address: '广州市天河区' }] } }); </script> </body> </html> ``` 5. 访问后台页面 访问http://localhost/admin/index即可看到后台首页。其他页面同理。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王佳斌

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值