vue + vue-router +axios + element UI + PHP + CodeIgniter + Mysql project management system

vue + vue-router +axios + element UI + PHP + CodeIgniter + Mysql project management system

Technical selection:

Front-end technology stack: vue + vue-router +axios + element UI

Backend technology stack: PHP 7.0 + CodeIgniter3.0

Database: Mysql5.7

Server: Apache

Problems encountered:

1. When the vue project is built to Apache, when the browser is refreshed, it may not be accessible and report 404

Solution: After the project is packaged ( npm run build), create a file in its root directory .htaccessand add the following code to solve the problem.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

2. There is a cross-domain problem when the front and rear interfaces are connected, and cross-domain can be allowed in the background.

Solution: configure the parameters at the top of each custom class to achieve cross-domain

header('Content-Type: application/json;charset=utf-8');
header('Access-Control-Allow-Origin:*'); // *代表允许任何网址请求
header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); // 允许请求的类型
header('Access-Control-Allow-Credentials: true'); // 设置是否允许发送 cookies
header('Access-Control-Allow-Headers: Content-Type,Content-Length,Accept-Encoding,X-Requested-with, Origin'); // 设置允许自定义请求头的字段

3. How to use CodeIgniter to build a project

Solution: Download CodeIgniter, just copy the applicationfolder systemin CodeIgniter and index.phpthe root path of the project.

4. Use CodeIgniter to build a background service, and add it before the domain name or IP address when accessingindex.php

Solution: Create a file in the root directory of the backend .htaccessand add the following code to solve it

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

5. How to download the database and connect to the database in the project

Solution: Download wampServer, which integrates Mysql and Apache. modify the projectapplication/config/database.php

$db['default'] = array(
    'hostname' => 'localhost',
    'username' => '',
    'password' => '',
    'database' => '',
    'dbdriver' => 'mysqli'
)

Project renderings (part):


download address