Git Product home page Git Product logo

laravel-vue-admin's Introduction

Laravel Vue admin 管理系统

项目简介

laravel-vue-admin 是一套基于 Vue 全家桶(Vue2.x + Vue-router2.x + Vuex)+ Laravel 的前后端分离框架。 脚手架构建也可以通过 vue 官方的 vue-cli 脚手架工具构建 实现了一般后台所需要的功能模块

前后端分离设计,前端代码在 admin 目录,细分为前后台页面;后端代码在 laravel 目录下、

主要技术栈

  • 后端框架: Laravel 6.x
  • 前端 MVVM 框架: Vue 2.6.10
  • 前端构建: Vue-cli
  • 路由: Vue-Router 3.x
  • 数据交互: Axios
  • 代码风格检测: Eslint
  • UI框架: Element-UI 2.7.2
  • Laravel 的运行环境要求 PHP7.2 以上。

案例演示

账号: admin 密码: 123456

安装方法:

为了方便使用,已经将打包好的前端代码放到了 laravel/public 目录下。即正常部署时候,只需要配置后端 php 环境即可。

1. 安装 php 环境 (必须)

git clone https://gitee.com/lisgroup/laravel-vue-admin.git
cd laravel-vue-admin/laravel
composer install
cp .env.example .env

2. 配置项修改 .env 文件数据库

# 1. 修改域名
APP_URL=http://localhost

# 2. 修改数据库配置
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=admin
DB_USERNAME=root
DB_PASSWORD=root

# 3. 如 redis 可用建议修改
CACHE_DRIVER=redis
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

# 4. 极验 geetest 配置替换
GEE_CAPTCHA_ID=`YOUR ID`
GEE_PRIVATE_KEY=`YOUR KEY`

3. 运行安装命令,会自动执行数据迁移和填充,并生成 key

php artisan admin:install

{Tip}: 以下都是可选配置,根据需求开启

4. 支持中文全文索引 (可选)

两种模式,未配置默认 MySQL LIKE 语句

4.1 模式一: 开启 elasticsearch 全文搜索

  1. elasticsearch 安装方法:

  2. 启动 elasticsearch 服务后

  3. .env 文件中增加配置项;

SCOUT_DRIVER=elasticsearch
  1. 生成全文索引;
php artisan elasticsearch:import "App\Models\Line"

4.2 模式二: TNTSearch+jieba-php 实现中文全文搜索

注:全文索引存储在 SQLite 中,需 php 开启了以下扩展;

  pdo_sqlite
  sqlite3
  mbstring

安装方法参见:TNTSearch+jieba-php 实现中文全文搜索

5. 启动 laravels 服务 (可选)

需安装 swoole 扩展,开启后监听 5200 端口。laravels 升级后命令如下:

php bin/laravels start -d

更多细节参考:https://github.com/hhxsv5/laravel-s/blob/master/README-CN.md

6. 启动定时任务 (可选)

# 使用 crontab 的定时任务调用 php artisan 调度任务:
crontab -e

# 追加如下内容: 

* * * * * php /home/ubuntu/laravel-vue-admin/laravel/artisan schedule:run >> /dev/null 2>&1

# 最后 ctrl + o 保存退出即可。

7. 启动队列 (可选)

php artisan queue:work

8. 安装 npm 扩展 (可选)

# 切换到上级 app 目录下
cd ../admin
npm i
# 本地测试
npm run dev

# 打包(可选)
npm run build

npm run build 命令会自动将 dist 目录下的文件 copy 到 laravel/public 目录下。

域名绑定

域名需要绑定到根目录,即项目的 laravel/public 目录下。

1. Nginx 配置示例: (未启动 laravel-s 扩展)

server {
    listen 443 ssl;
    root /www/laravel-vue-admin/laravel/public;
    server_name www.guke1.com; # 改为绑定证书的域名
    
    # ssl 配置
    # ssl on;
    ssl_certificate /etc/bundle.crt; # 改为自己申请得到的 crt 文件的名称
    ssl_certificate_key /etc/my.key; # 改为自己申请得到的 key 文件的名称
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;

    # 文件不存在 转发 index.php 处理
    location / {
        #index index.php;
        try_files $uri $uri/ /index.php?$query_string;
    }
    
    location ~ (\.php)$ {
        fastcgi_pass  unix:/tmp/php-cgi.sock;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        fastcgi_param  PHP_ADMIN_VALUE "open_basedir=$document_root/../:/tmp/:/proc/";
        include        fastcgi_params;
        fastcgi_param  PATH_INFO $fastcgi_script_name;
    }

    location ~ .*\.(css|img|js|gif|jpg|jpeg|png|bmp|swf)$
    {
        # root $root_path; 
        expires     30d;
    }

    location ~ /.well-known
    {
    	allow all;
    }

    location ~ /\.
    {
    	deny all;
    }

    access_log /home/wwwlogs/laravel.log
    # error_log /home/wwwlogs/laravel_error.log;
}

2. 启动 laravels 的 Nginx 示例配置:

#gzip on;
#gzip_min_length 1024;
#gzip_comp_level 2;
#gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml application/x-httpd-php image/jpeg image/gif image/png font/ttf font/otf image/svg+xml;
#gzip_vary on;
#gzip_disable "msie6";
upstream laravels {
    # By IP:Port
    server 127.0.0.1:5200 weight=5 max_fails=3 fail_timeout=30s;
    # By UnixSocket Stream file
    #server unix:/xxxpath/laravel-s-test/storage/laravels.sock weight=5 max_fails=3 fail_timeout=30s;
    #server 192.168.1.1:5200 weight=3 max_fails=3 fail_timeout=30s;
    #server 192.168.1.2:5200 backup;
}
server {
    listen 80;
    # 别忘了绑Host哟
    server_name www.guke1.com;
    root /home/www/laravel-vue-admin/laravel/public;
    access_log /home/wwwlogs/nginx/$server_name.access.log;
    autoindex off;
    index index.html index.htm;
    # Nginx处理静态资源(建议开启gzip),LaravelS处理动态资源。
    location / {
        try_files $uri $uri/index.html @laravels;
    }
    # 当请求PHP文件时直接响应404,防止暴露public/*.php
    #location ~* \.php$ {
    #    return 404;
    #}
    location @laravels {
        proxy_http_version 1.1;
        # proxy_connect_timeout 60s;
        # proxy_send_timeout 60s;
        # proxy_read_timeout 120s;
        proxy_set_header Connection "keep-alive";
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Real-PORT $remote_port;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header Scheme $scheme;
        proxy_set_header Server-Protocol $server_protocol;
        proxy_set_header Server-Name $server_name;
        proxy_set_header Server-Addr $server_addr;
        proxy_set_header Server-Port $server_port;
        proxy_pass http://laravels;
    }
}

使用方法

浏览器访问: https://www.guke1.com ,可以查看

在输入框输入查询的公交车,(如:快1)点击搜索后,会出现搜索到的车次,再次点击需要查询车次的方向,即可查看实时公交状态。

laravel-vue-admin's People

Contributors

dependabot[bot] avatar lisgroup avatar wei98k avatar yaobaliu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

laravel-vue-admin's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.