本人业余爱好者,以前用过Thinkphp框架+框架自带的模板+Bootstrap写过东西。
据说现在网页都用Vue,而且前后端分离,故学习之,先做一个登录功能。
用到的东西:Thinkphp 6, Vue-cli 4
插件:element-ui, Vuex, vue-cookies, axios
软件:VS code
1. 服务器安装:
windows:安装XAMPP (含apache2,Mysql(Mariadb), php7.4)
Linux:安装apache2 或Nginx,Mysql或Maridb,PHP7
安卓:安装Termux,然后在Termux里安装apache2 或Nginx,Mysql或Maridb,PHP7
2. 安装Thinkphp
参考手册https://www.kancloud.cn/manual/thinkphp6_0
安装composer并设置国内源
composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/
安装Thinkphp6,cd到网站原本的根目录(比如:xampp/htdocs, /var/www)或者你自己想要存放网站的目录,然后运行
composer create-project topthink/think tp
配置apache或Nginx主目录到Thinkphp的public目录(如:/var/www/tp/public)
开启Apache的rewrite模块或配置Nginx的rewrite (参考Thinkphp手册->架构->URL访问)
现在重启服务器,访问http://localhost应该可以访问到Thinkphp页面并支持PATHINFO访问(比如http://localhost/index/index)
但是我们要做的是前后端分析,默认http://localhost访问的是Vue的页面。所以需要进一步修改:
在public目录下新建api目录,将.htaccess, index.php, router.php文件移入api目录,修改index.php文件
require __DIR__ . '/../vendor/autoload.php';
改成
require __DIR__ . '/../../vendor/autoload.php';
这下访问Thinphp的内容需要使用http://localhost/api/
3. 安装Vue
先安装nodejs和npm
安装Vue-cli:参考https://cli.vuejs.org/guide/installation.html
npm install -g @vue/cli
创建项目:参考https://cli.vuejs.org/guide/creating-a-project.html#vue-create
在想要的目录(比如我的文档,或用户根目录)下运行
vue create my-app
手动选择组件:Bable,Router,Vuex,Linter/Formatter
Router选history模式
待npm安装组件及依赖完成后,进入项目目录
cd my-app
添加element-ui组件,参考https://element.eleme.cn/#/zh-CN/component/installation
我们用的是cli方式安装:https://github.com/ElementUI/vue-cli-plugin-element
vue add element
因为是学习,所以配置时我选的时全部导入,实际上线项目可选按需导入,需安装babel-plugin-component, 参考https://element.eleme.cn/#/zh-CN/component/quickstart
运行npm run serve,就可以访问到vue的项目了。
为了登录功能再安装几个插件吧,项目根目录运行:
npm install vue-cookies --save
npm install axios --save
好了,环境差不多到此了,后面再讲代码部分。