VUE-THinkPHP前后端全栈开发学习

VUE-THinkPHP前后端全栈开发学习

目录

• VUE-THinkPHP前后端全栈开发学习
  • 环境配置
    • 后端环境配置
    • 前端环境配置
    • 配置中遇到的Bug解决
  • 前后端对接

环境配置

后端环境配置

后端主要用到ThinkPhp框架，第一步是安装PHP，在WIndows上可以借助Xampp实现一键式的环境搭建。

下载和安装好Xampp后打开Apache；

第一步：然后修改D:\Software\Xampp\apache\conf\httpd.conf文件，即XAMPP目录中的apache文件夹下的conf文件，将其中的

copy
DocumentRoot "D:/Software/Xampp/htdocs"
<Directory "D:/Software/Xampp/htdocs">

改为thinkphp所在目录的上级目录，如目录所在是：D:\QuanZhanXueXi\Houduan\PHP\php_template，那么就把上述改成

copy
DocumentRoot "D:/QuanZhanXueXi/Houduan/PHP/"
<Directory "D:/QuanZhanXueXi/Houduan/PHP/">

注意不要忘了最后的/。

第二步：在D:\Software\Xampp\apache\conf\extra\httpd-vhosts.conf 文件的末尾添加

copy
<VirtualHost *:80>
    DocumentRoot "D:/QuanZhanXueXi/Houduan/PHP/php_template/public"
    ServerName phplearn.com
</VirtualHost>

即thinkphp项目的public文件夹，ServerName随便取什么名字，VirtualHost即访问的端口号，默认为80。

这样子就完成了ThinkPhp项目在Windows上的服务器部署。

接下来是配置ThinkPHP相关，首先安装composer，安装时候选择xampp中的php环境。安装好后打开命令行，定位到项目所在的目录，通过composer update --ignore-platform-req=ext-gd命令安装thinkphp项目所需要的包。安装完成后打开127.0.0.1就可以访问了。只不过因为它是后端项目，没有页面，需要调用接口。

遇到的问题，有时候提示The package is not available in a stable-enough version according to your minimum-stability setting 可以考虑在composer.json文件中用如下代码替换：

copy
    "repositories": {
        "packagist": {
            "type": "composer",
            "url": "https://mirrors.aliyun.com/composer"
        }
    }

前端环境配置

第一步：下载并安装NodeJs。版本需要是16.14.0的，太高版本不行。

第二步：打开命令行安装cnpm

copy
npm install -g cnpm --registry=https://registry.npm.taobao.org

第三步： 打开Vue项目，使用rm -rf ./ node_modules``删除 node_modules文件夹

第四步：安装node-sass

copy
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

如果上一句失败则执行下面，将已下载东西 重新编译

copy
npm rebuild node-sass

安装其余的依赖

copy
cnpm  install

完成以后通过下面命令运行

copy
cnpm run dev

遇到的问题：(linebreak-style) Expected linebreaks to be ‘LF‘ but found ‘CRLF‘. (eslint)，这是因为Linux项目在Windows上打开引起的。

• 解决办法1：在项目的根目录创建.editorconfig文件，并填入如下：

  copy
  [*.{js,jsx,ts,tsx,vue}]
  indent_style = space
  indent_size = 2
  end_of_line = lf
  trim_trailing_whitespace = true
  insert_final_newline = true
  max_line_length = 100
  

• 解决办法2：在项目中搜素linebreak-style，并改为：

  copy
  'linebreak-style':[0,'error','window'],
  

配置中遇到的Bug解决

BUG 1：控制器不存在:app\controller\Index

解决办法：在入口文件夹public下查看.htaccess是否存在。不存在则新建，存在的话，那内容替换为下面这串代码 就可以解决Not Fund

copy
 #<IfModule mod_rewrite.c>
#  Options +FollowSymlinks -Multiviews
#  RewriteEngine On
#
#  RewriteCond %{REQUEST_FILENAME} !-d
#  RewriteCond %{REQUEST_FILENAME} !-f
#  RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L]
#</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php?/$1 [QSA,PT,L]
</IfModule>

BUG 2：mysql版本问题,在my.ini中的[mysqld]下面加一行

copy
sql_mode=STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION

BUG 3：安装好Nodejs后，使用 npm install -g cnpm --registry=https://registry.npm.taobao.org 时报错：

copy
npm ERR! code CERT_HAS_EXPIRED
npm ERR! errno CERT_HAS_EXPIRED
npm ERR! request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired

npm ERR! A complete log of this run can be found in: C:\Users\lwp57\AppData\Local\npm-cache\_logs\2024-04-02T11_57_35_816Z-debug-0.log

解决办法：设计源镜像

copy
npm config set registry https://registry.npmmirror.com  
npm install npm -g #更新版本
npm install -g cnpm  #安装cnpm

前后端对接